the web of art @thewebofart-blog - Tumblr Blog

Links to Notes from Readings

History of Web, Net Art, Hypertext Readings Notes:

http://thewebofart.tumblr.com/post/129601248283/readings-history-hypertext

UX, IA Readings Notes: http://thewebofart.tumblr.com/post/131103677173/ux-ia-ixd-readings

Design Research:

Interesting quote to keep in mind when thinking about big data: “big data and data scientists don’t hold some magic formula that’s going to save the world, radically transform businesses, or eliminate poverty”

“Narrative research” provides rich context and fuller understanding of unique complexities or circumstances over simply reporting data points

However, that being said narrative research should be conducted with a plan for analysis

“research data that lies in a vacuum is pretty pointless”

Sketching, Wireframes, Prototyping, Journey Maps, Screen Flows

Interesting to see how commonly paper prototyping is used - at first I was a bit skeptical of how useful this method may be given that there is such a difference between tapping a piece of paper, waiting for someone else to replace it with the next sheet, etc.

Sketches / paper prototype advantages:

cost friendly

fast, easy

not focused on the details

physical documentation to hold onto

Awesome to see how many different tools exist to help with this process and make testing easier and more interactive - InVision allows video recording of user while they test out the prototype to see their expressions as they use it

Many different formats and styles for experience maps - timeline, wheel

What sort of content do they contain?

User emotions, needs, thoughts, feelings, reactions, mental status at different points as they move through the experience

Touchpoints - interaction, pain, delight

Persona information

Power of storytelling is important for UX design

Storyboarding: helps designers conceptualize and string together user stories, personas, and various constraints

Tests out concepts, helps others communicate their experience, as well as understand

What is a user flow?

made out of individual user interactions

What the user sees/what they do => What the user sees next/what they do next

More complicated flows will have more options for selection / action

Wireframe vs. Mockup vs. Prototype

Wireframe: basic illustrations of the structure and components of a web page

Mockup: generally focus on the visual design elements of the site. These are often very close or identical to the actual final site design and include all the graphics, typography, and other page elements

Prototype: semi-functional webpage layouts, UI is constructed and usually requires HTML/CSS (maybe JS)

UX & Testing

"Elaborate usability tests are a waste of resources. The best results come from testing no more than 5 users and running as many small tests as you can afford” - Jakob Nielson

Users may not state/report problems they had, but problems will be obvious from their behavior - pausing, stumbling over a task, failure to complete a task, audible frustration, taking longer than expected to locate/complete a task

Often difficult for designers to view their designs objectively, which is why it is so important to get other users to test it out - best to test on real users!

Aesthetics, Visual Design

What are mood boards used for?

to gain understanding of your organization’s branding guideline, communication style, and personality

collage of images, text, textures, sample objects that help develop a design concept

For Web Design, might contain: typography, color palette, photography, iconography, navigation, white space usage, contrast

Mood boards help others to 'get inside our heads' in order to convey a thematic setting for a design or to explain function in piece of work

Content-first approach to design

teaches us that visual design should always be based on actual content

move from designing without content to designing with content - very big difference

Content -> HTML -> Design

Grid Systems

so designers can structure and present content and imagery in a much more readable, manageable way

Frameworks such as Bootstrap make this easy for developers to abide by grid systems as well

Fluid grids become very useful here when writing code for different screen widths!

Helpful in keeping the design in proportion, balanced - should be flexible, in worst cases grid systems might hinder creativity

Visual Hierarchy

Elements critical for demonstrating visual hierarchy:

Size

Color

Contrast

Alignment

Repetition

Proximity

Density

Whitespace

Texture

hierarchy creates strong, clear visual systems to communicate

Typography

Responsive type?

Consider the device being used, and typical usage of those devices to determine what the desired perceived size of the type is, regardless of metric size

How far away are they being held? Laptops, Tablets, mobile phones?

Developing a typographic scale

Start with base paragraph size for <p>

consider audience needs, reading distances, text quantity

consider ratios, and established scales (golden ratio)

Mobile First Design

Designing for a mobile device then enhancing the experience as the screen size increases

Tradeoffs between mobile and desktop design - are we losing content? (shouldn’t be!)

Semantic Web, Internet of Things

What does semantic web mean?

proposes to help machines tools to find, exchange and, to a limited extent, interpret information using metadata

XML complements HTML by adding tags that describe data

RDF provides a framework to describe resources with XML

Triples - subject, property, object

What is the internet of things?

“things” or physical objects with electronics, software, sensors, and network connectivity, that connect the “things” into a network that collects and connects data

Smart home systems - doorbell, temperature, lights, kitchen appliances, etc.

More things connected -> huge amounts of data to work with

Final Presentation Notes

1) Menglu [Trophy Trikes]

Nice clean, clear style - I like the circles!

Presentation’s timing was a bit long, but the content was very comprehensive

Because there was so much content, perhaps removing some superfluous info

2) Jinxiang [Haley Trikes]

Some of the styles had too much information, the presentation could have been more concise

Mood board contained interesting points - environmentally friendly focus with greens, natural feel

However the mockup was a bit conflicting with that concept - could perhaps adjust final mockups to better suit the mood board!

3) Leonard [Haley Trikes]

Did a really great job of building your presentation for the people who you are presenting to (clients)

Provided good statistics and information about the market research you’ve conducted

Would have been interested in seeing a more finalized version of your search feature that you mentioned earlier on in the presentation!

4) Tian Lan [Transport Cycles]

Good choice of feature to add and good presentation of its importance- improved purchasing system and how it will help the business

Noticed some style consistency issues through the presentation - typography changes of headings in slides became a bit confusing

5) Diane Kim (me) [Haley Trikes]

Spoke a bit too fast through some slides and with hesitation at others - could have improved getting over nerves with more practice!

Showing more of the final mockups for my feature might have been beneficial

6) Elliot [Trophy Bikes]

Liked the style of your presentation overall! There were a few slides that were a bit hard to read (yellow against white) though

Some of the slides had a lot of text and smaller images, maybe highlighting the pictures and reducing text could have made for simpler slides?

Good overall presentation, was engaging

7) Jiadi [Trophy Bikes]

Style of the presentation did not seem to match the style of your project/website redesign

Question about final mockup: Why is the “Contact Us” up at the top, when all of the contact information is along the bottom of the page?

8) Taylor [Transport Cycles]

The style of your presentation was very consistent with your website redesign - good job!

One thing that could have benefited us is on the Aesthetics page where you mention the different shades of colors - blocks of color of the shade > word description of color

Small thing I noticed about the final mockup is that all the stock photos were female.. I wonder how this might feel for a guy who’s interested in the product?

9) Wei [Haley Trikes]

Great job in wrapping your slogan throughout the entire presentation - keeps us on track of what we are listening to and looking for!

I like how you contrast and highlight the difference between what currently exists on the website and what we could have with your design - great way to visualize the benefit of your redesign

10) Megan [Trophy Bikes]

Bottom navigation was nice to have for us to know where we are in the presentation and understand within the context of the whole process

Easy for us to understand your process

Some of the slides were a bit text-heavy, but the slides never felt overwhelming or crowded

11) Xinying [Haley Trikes]

I liked the background on your first page, really fits with your aesthetic concept and design for your website - I agree with your aesthetic direction for Haley Trikes being personal

Presentation was quite complete in terms of content

Is there a reason for the X’s being bullets? I think it makes sense for the page with issues/errors but maybe not the others?

12) Alex [Trophy Bikes]

Great job at emphasizing your theme throughout the presentation - community

One area of confusion - I imagined that the aesthetic direction and mockups would be more orange or red to represent warmth

Adding images of people on your website would be a great way of showing your theme

13) Ana [Transport Cycles]

I think you had a complete presentation that included important information, but it seemed that everything you were speaking was on your slide - could maybe cut back on text?

Great mockup! Was very detailed and complete

Haley Trikes Website R E D E S I G N

Tobi: http://www.tobi.com

This is the website for Tobi, an online shopping platform where I buy some of my clothes. I picked this because I’ve always enjoyed shopping on Tobi because of its relatively simple interface (for an online clothing store). All the other websites for stores I’ve bought clothes online for are either overly complicated in terms of options (too many choices/sales/categoires/etc) for example: Forevere21.com. Or they are a little too simple for my taste (ie: Zara.com). Tobi hits a good middle ground that makes the online shopping experience enjoyable.

Visual Hierarchy / Elements

The visual hierarchy for this site is relatively straightforward. Although the color scheme is a monochrome white and black, the font sizes and weights make it clear which elements are above others. One thing that I think could have been improved is the use of color for making the price stand out?

As someone shopping online, obviously the image is important, but the price is probably the second thing I am interested in. Perhaps it is part of their strategy, so that users scroll not by price but by what they find eye-catching.

It is also interesting that they don’t seem to oversize or stress their text - this site is all about images. For instance, in this home page below, the nav bar text is very small compared to the image. I think this is intentional, and that Tobi is trying to put the emphasis more on attracting users with style and design rather than overtly pushing deals or cheap prices in their face.

Grid

Tobi is organized in a clear, column based structure. Elements are rectangular and fit nicely along the grid. However, there was one thing I noticed on the home page that seemed a little off to me. Whereas the rest of the website snaps the images right up next to each other, on the first page, the inner most central element is split into 5 columns in one row, and then two below. The two columns do not fill up the whole 5 column space as the row above, which makes the resulting white space look off balance. But this was the only place I noticed this, the rest of the website seems to align quite well with its grid.

Animation/Motion

Tobi does not try to do too much with animation or motion. The purpose of it is to simply present different buying options and allows the user to quickly place an order. There are slight animations when one hovers over a style, just transitioning the images from different shots/angles of the item. It is a subtle, simple effect, and serves its purpose well.

Mix The City: https://www.mixthecity.com/#/?lang=en

This is a really cool website that lets you make a quick mix based off predetermined music samples. It is easy to use and understand after the first go!

Visual Hierarchy

The home page is a little confusing, because the top bar with weather and random stats on first glance seems like it should be a navigation bar to me. Also, I don’t know why but it looks like it is an event or something like that. I feel like if I didn’t understand English and came to this site I might think it was an event site for an artist’s concert and the yellow button was to buy tickets. I think this confusion arises because the site doesn’t have a clear enough visual hierarchy with different colors or fonts. Also, when the hamburger menu is slected, I am not a fan of the font style and spacing used (Home, Make music, Mee the musicians). It does not seem clear to me that they are menu items, and I think the designers could have manipulated the typography to better serve this purpose.

Design Patterns

The design is colorful and fun, nothing with the fonts is too outrageous or unreadable, but I think that more consistent use of buttons and colors could have improved the overall understanding of the music maker.

In this case, the first image is the instructions page that pops up before you get started with the music maker. But on the actual music maker - the keys have now turned circular. Why did they do this? It does not make sense to me to teach the user a function and alter the appearance of it when they are meant to actually use it.

Grid

The last image shows that the actual music maker (teal background) follows a grid with four cenetered elements aligning to a column. Though I found that this part of the site is not responsive, and it looks more to me like there is a central element split into four columns that is centered in the middle, rather than the whole width of the page being systematically divided into columns. The home landing page however is not as clear, it is hard to tell whether it is going by the same pattern as the music maker grid or is made up of individual columns.

BBQ Cultures

This is a site done by Weber - a grill brand - that shows the universality of bbq in their interactive “BBQ Cultures” website. It is captivating and so interesting because I have never been to a website like this that feels like an experience rather than static information. I encourage you guys to check it out yourselves as it is a little hard to explain in words - but basically, once you “start your journey”, you are taken to various locations in the world and given a glimpse into what bbq culture there consists of. Visual Hierarchy What’s interesting about this site is that there is not a clear linear structure or hierarchy enforced - the point is for the user to explore the site however they want to. But in general, the site makes use of large full screen videos and images, and minimizes text. There is no traditional navigation bar, simply a < Back and Continue the Journey > to keep progressing in the adventure like feel of the site.

Grid

As can be seen in the first image posted, the site makes use of a 3 column grid and 2 equally sized rows. Those screenshots are only from the “Journey” portion of the website. The last image shows a screenshot of another portion of the website titled “Collections” which is arranged in a 4x3 grid. I think the reasoning for filling the grid up with the full-size image + white text combination is to keep the number of options low and decision making simple. The contrast of the images makes the contrast and division of different modules very clear in a subtle and beautiful way.

Design Patterns

The last 3 images show the website’s use of flat design, thin outlines, white typography, circles. The map of Scandanavia shows that the color scheme and texture is made up of sort of rustic, muted colors, and wooden, worn-out textures. I think this design choice was made to portray the every-day, natural, and personal feel of barbeque. Weber is not trying to present a product that is overly polished to perfection, but something that anybody around the world can relate to.

Animation/Motion

This site is definitely an interactive one - to move onto the next page you must swipe the circled glove looking thing to the right. This is a behavior that the users must learn, but the site does a good job of guiding the user the first time around of all of the little motions.

Subaru loves the earth, and here’s the proof.

Visual Hierarchy:

Horizontally organized

large imagery of nature

white font - doesn’t draw too much attention

Motion/animation:

Landing page: “exploring”

Time page: speaks strongly to an idea of timeline, and progress/moving forward

Tree ring: parallel to time

General Brand DNA Statement

The Haley Trikes website should feel personal and serve as the starting point of a conversation, rather than a cut and dry corporate website with details on shipping and handling. The website should convey the complexity and level of customization that is available for customers, but in a way that is clear and not overwhelming. Haley Trikes should have the voice and personality of Stephen, so that the customers do not feel a disconnect when they are working with him later on in the process.

Persona Taste Profiles

James: 35, In a relationship, Coffeeshop owner, Philadelphia

James is the owner of a new small coffee shop in Old City. It opened about 2 months ago, and business is going well. However, he wants to spread the word about this new opening and is looking for a trike to help with this! James wants to hire someone to man the coffee trike and take it to more densely populated areas in Philly such as in Center City.

Taste Profile:

Wooden interiors, exposed brick, warm, fall, brown, maroon, artisanal coffee, Warby Parker, Moleskine

Jessica: 40, Married, Marketing head at soft drink company, Philadelphia

Jessica is the head of Marketing at a new soft drink company. She has been doing some data analysis and has noticed that a large percentage of their customers are parents buying for families. Jessica wants to expand the company’s customer base into college students, and is trying to buy a trike that could offer free samples of their drink at sporting events, festivals, etc.

Taste Profile:

Orange, yellow, light blue, fast, clean, crisp, steel, Nordstrom

Mary: 46, Married, Stay at home mother, Boston

Mary is a mother of 2 children, ages 4 and 8. She wanted to buy a safe tricycle for her 4 year old boy, and is looking for a way to customize the colors and design of the trike. She also needs it to be able to be delivered to her home in Boston.

Taste Profile:

Red, yellow, Pinterest, comfortable, Target, rounded letters, sunny

Sam: 52, Single, Bookshop owner, Philadelphia

Sam is a bookshop owner who commutes about 20 minutes a day on his bicycle to his store in Center City. He does not own a car, and he lives at home with his dog named Chestnut, a large labrador. He wants to be able to bring Chestnut to work with him and is looking for a safe space for Chestnut to ride with Sam in the mornings. He also would like to be able to bring some amounts of books back and forth with him.

Taste Profile:

Brown, navy, guitar, winter, fireplaces, snow, simple

Johnny: 42, Married, Owner of dessert food truck in Center City, Philadelphia

Johnny owns a dessert food truck in Center City that specializes in special macarons and cookies. He knows that his desserts would be in high demand on college campuses (Penn, Drexel) but needs to make sure that they will stay fresh and delicious.

Taste Profile:

Blue, white, red, clean, decorative, clear, summer, spring

Marvel Prototype for Haley Trikes

Future State Journey Map: Haley Trikes

Version 1 from last week:

Version 2 from this week:

Trending Blogs

Recently Viewed Blogs

the web of art