Art of the Web Class Blog

What is UX/IA/UI/IxD/UCD/etc. Design?

UX: User Experience

IA: Information Architecture

UI: User Interface

IxD: Interaction Design

UCD: User Centric Design

Intro to Design Research and Card Sorting

Organizing Your Research and UX Tools

History of the Web

Learning about this, now, seems like common sense. It’s amazing that most people don’t know about the origins of the internet, the Web, how it works and why. Tim Berners-Lee is such a cool guy too! Thinking about how hypertext is structured and along with this project thinking of new and creative ways to take advantage of its capabilities is a great way to start thinking about the basis of information structures supported by the Web. Understanding how the Web works gives us insight into how we can manipulate it for our own purposes.

Net Art

Pure experimentation with the capabilities of hypertext and programing the Web. Some beautiful stuff has come out of it (see http://facepainted.net/Donald/) and it’s opened up the boundary between visual artists and engineers that had developed. With the Web came the ability for people to do their own experimenting and also share their work with other people.

Hypertext 2.0

This reading was more what I am accustomed to reading i.e. very theory-based and philosophical, so that was nice. Delving deeper into the purpose of the Web and its underlying structure we explored in this reading the intended purpose vs the practiced use and opportunities to expand usability beyond traditional information presentation on a page. I’ve always been captivated by the page (I’ve taken History of the Book with Peter Stallybrass[awesome guy!!] and Book & Publishing Design with Sharka Hyland[also awesome!!], and written a paper about image boundedness that inevitably touched on the history and shape of the page, its uses, and how the physical page affects our processing of the content on the page) so talk about doing away with it definitely caught and held my attention haha. Some great and inspiring thoughts about what the page should evolve into and what purposes information display and integration do and can serve.

The Web wasn’t what people predicted it would be

1. Menglu

Some of the slides were inconsistent design-wise (User Research slide, text switches to different font for a few points)

The grid analysis seemed unnecessary, extra

Your final design is really nice!

2. Jinxiang Amy

Speak up a bit

The boxes in your user flow have lots of hyphenated words. Could make the boxes wider.

Problems: LOTS everywhere! --Too much to take in, overwhelming. 

Your build your bike function is really cool.

Growing the company is an awesome idea! Tell me more! Make this the central story.

You mentioned green a lot when talking about the mood board, but this didn’t follow into the final color scheme and I don’t understand why?

3. Leonard

Super story-y and pitch-y

snazzy buzz words

outlining the game plan

all engaging and productive!

Your presentation slides match the style guide

In the final mock up: You could stretch the middle boxes to that there isn’t an awkward gap at the bottom.

4. Tian

Speaking in 2nd person for the company instead of to the company as a client seemed out of place.

(niche is pronounced neesh)

Presenting problems felt aggressive/negative

After a while the presentation started feeling long, drawn out, slow.

The new logo looks like a felt cut-out which feels childish rather than the intended middle aged/college aged. 

You talked over someone as they were in the middle of asking a question. That’s really bad manners and it makes them think that you aren’t going to be willing to listen to what they have to say about their own business.

5. Daejong

Love the slide visuals!

You say “sort of,” ”maybe,” ”like,” and “I guess” a lot. “this is sort of what we want to do(?)” “this will sort of deal with the needs that the user has.” We’re hiring you because you’ve done the research and you know what the user needs and you’ve crafted a solution to the problem. Confidence :)

6. Elliot

UM. (haha)

slides had a lot of text

Why sitcom 90s people? Seems irrelevant. It’s an engaging point, and you maybe could use just the pictures, but explain why that person is visiting their store.

Same with the idea to go retro. It felt like a “just cause” decision based on your explanation--even though you’ve done all of this research to back up your claims! Give us the facts so that we can’t question you.

7. Jiadi

Good evidence of knowledge of the company.

Having mobile views was a nice addition--very complete.

The slides don’t match the final design.

Where will the navigation go for the child pages?

8. Taylor (me)

I started stuttering and losing confidence momentum halfway through. I should have practiced a few more times to prevent this. Also, in front of a mirror next time would be a good idea. I wasn’t aware of my passive body language at all. (thanks!)

restate the problem when presenting the solution (i.e. Don’t make me think!)

9. Wei

Core values of the business--this is awesome! It gives a narrative to follow, and it shows that you know the company and are invested in their interests. There’s this image of a great future that you’re bringing of what they wanted their company to be but it currently is not, with a positive emphasis. LOVE.

nice simple new navigation

fun a creative final design solution! Love the typography as well. It really works. 10/10 love.

10. Megan

I like the timeline at the bottom

You explained desired outcomes (Why redesign?, Issues-->New features) Very nicely structured. 

obviously comfortable presenting, calm, confident, good pace. 

rather than “this is a problem” you explain why we want to do something and the desired result--positive spin on problems.

next steps was a great way to end. made it feel like a beginning! :)

just an overall great feeling! I’m ready to do some teamwork and get busy on this new project we’re starting together! 

11. Xinying

Animation fade out is a bit distracting

Why include less complete user flow just to skip over it?

nav item/tag issue is a problem. You’ve told us this many times over.

during the prototype explanation you started getting into too many details and it dragged on your presentation much longer than it needed to be.

I like your visual design :)

12. Alex

a refocus on the community itself --neat idea!

stuttering; you “long-story-short”ed out the site’s issues; felt scattered.

Aesthetics:concept: you warmed up and caught your voice back here. Figure out what worked for you here and carry it into the rest of your presentation~

further explain why the business wants to have a primarily community-based website. What will it do for their business? 

if emphasis is on the community, have some pictures of people.

really work on further developing the visuals. You know what websites look like. Use your intuition! If that isn’t working and you need a more systematic way of working, look at more websites, do some more grid exercises. Breakdown what a site is trying to do with each of its visual elements. Don’t give up! :) 

13. Ana

I’m reading the slide along with you

on that note, they were very text heavy--which could have been divided into multiple slides

when displaying the mock-up images side-by-side, either separate them with a space, or use an outline so that we can tell the boundaries a bit better. (or change the background color to an off-white or something?)

Transport Cycles: Style Guide

Website 6: www.vitalwifi.com

This is another vertical site, but I think it does a much better job with the grid. It still uses a different layout style for each section, but all of these sections are contained within the 8 center columns of the grid. This helps keep the design more cohesive. 

The color treatment is also great. They stuck to a defined 4 colors that are reflected in the logo. I also like how the logo element is used as a joiner at the bottom to link the grey, informational footer to the rest of the site. It’s also turned into a little underline element to function as a Section symbol which is just nice detailing.

Website 5: www.tifwe.org 

This was the closest grid I could get. Most of the content fits in the grid, but a lot of it hangs off the edges or is imbalanced toward the left side of the screen. It has some awkward spacing of box elements in areas, especially in the “Freedom, Fulfillment, Flourishing” boxes area. It just feels uncomfortable and cramped.

Website 4: www.caketeacher.com 

Different width 3 part grids are used here. The hero image area is full width of the screen so it doesn’t match up with the grid that the rest of the site is sitting on, which is primarily in the center 8 columns. 

The information is arranged in a user flow type of way, rather than a hierarchy of what the company might view as important (like sign up) first. The more important items are more isolated though, stand by themselves, instead with lots of white space. In the lower grid, the traditional larger items are more important, is applied.

Website 3 (sorry this image is so long!): www.mic.com

The grid here for mic.com home page, a liberal news site, is followed pretty regularly, 7/3 for the main columns of story titles, summaries, and images. Videos and recommended stories are in the smaller column so that they can fit next to the main video that is playing for people who like to surf content. This column has much less content in it than the larger column which features all of the latest main stories. People who want to go through this longer list don’t want recommended articles, they want to sift through the content themselves, so it makes sense to do this.

The very top of the page reflects the modern no-gap grid that is very frequently used to organize site content these days. Emotional pictures fill their boxes, with as little covering as possible, giving the image and the text similar power. This part of the site works well for mobile users and is likely all that they will end up seeing as scrolling tons on a mobile device is less desirable, and that kind of grid is a very mobile-esque choice.

Websites I like 2: www.drmorse.com.au 

Dr. Morse is a Restaurant website with a centered vertical format. They separate bands into pretty strict ratios of the grid--until the subscribe to our email area at the bottom where there is no even relationship between the two info boxes and the subscribe button. This is a bit off putting, as well as the unbalanced-ness of the heavy orange button with the faded gray boxes. Maybe to draw attention to it? Not sure why else someone would choose to stick to a grid so strongly just to abandon it for one section. 

The overall aesthetic is mysterious through the color palette, grainy and rough through the textures, and all held together with repeating diamonds and triangles using the same angle as the diamond end in their logo. The type is an all caps sans-serif that compliments the tightly packed logo with breaks of large areas of space in the counters. 

Websites I like 1.1 : www.reddit.com

Reddit.com is divided in a 2/6/4 (1/3/2) grid. The most important information, the content is included in the largest portion which is also in the center of the page. The second most important information is on the right hand side in the second largest portion of the grid: The search bar on top, New posts and new forum (subreddit) buttons, and then an add promoting a subreddit. Navigation and other passive content is given then smallest space, and the traditional left-hand sidebar navigation location. There are also additional navigation/sorting options at the top of the posts of the Front page subreddit that this screen is on, and then at the very top, a kind of global navigation to other subreddits, which is personalized when logged in to those you are subscribed to.