Delicious Design: The Intersection of User Experience Design and Visual Design

© Design for Context

Jennifer Chaffee [email protected]

Rachel Sengers [email protected]

Delicious Design UXERS & VISUAL DESIGNERS COLLABORATING TOGETHER

@design4context #userfocus2014 PresentaPon is on Slideshare — www.designforcontext.com/publica>ons





@design4context #userfocus2014 PresentaPon is on Slideshare — www.designforcontext.com/publica>ons

Two great tastes that taste even greater together!

+

How do we get to the perfect blend?

INTERACTION DESIGN VISUAL DESIGN

@design4context Delicious Design User Focus 2014 3


WHO WE ARE

Rachel Sengers Jennifer Chaffee

Incorporate icons?



T-‐SHAPED SKILLS



PREPARING TO COOK THE MEAL



PLANNING AND GATHERING

Gather visual design criteria

User & business analysis

Know the project parameters

Pa[ernize!

What needs to be designed – prioriPzed list

Replace with an image of a shopping cart with groceries in it



Make it very obvious what the status is of each piece of content. It needs to be really clear if something is not live on the site yet. I’ll show you examples of all the status types.

In usability tests, users did not understand that this icon meant this announcement also appears on their site’s home page. There’s a tool>p on hover, but it didn’t help. Can you think of a beTer solu>on?

A SHARED UNDERSTANDING OF THE UX FLOW & WIREFRAMES

Provide wireframes/sketches — with notes

ConversaPons; talk it through together

Convey hierarchy of what elements are most important

Make the controls clear in the wireframes – their affordance and behavior

Examples of realisPc content

Explain where things need to be scalable



ROOM FOR CREATIVITY

Point out known problem areas/challenges you’d like the visual designer to focus on

Point out areas where you think extra design exploraPon needs to happen, and the must-‐bes

How much Pme/budget for exploring visual design



Determine roles for the project

Get to know each other’s temperaments

CREATING A PRODUCTIVE WORKING ARRANGEMENT



CREATIVE COLLABORATION ENVIRONMENT

Explore

Share ideas and resolve problems

Look at work in progress

Develop and review ideas



REVIEW AND REFINE

Design opPons

Design raPonale

Brainstorm ideas



WIREFRAMES TO VISUAL DESIGN

Make it very obvious what the status is of each piece of content. It needs to be really clear if something is not live on the site yet.

I’ll show you examples of all the status types.

In usability tests, users did not understand that this icon meant this announcement also appears on their site’s home page. There’s a tool>p on hover, but it didn’t help. Can you think of a beTer solu>on?



Arrows eat up a lot of real estate and might be too disassociated from the content blocks.

Try puUng icons next to each page in the sentence, instead of at the beginning of the sentence.

Make status even more obvious in each content block. Consider coloring each content block (color denotes status)? Consider moving status to the TOP of the content block?




COLLABORATION TIPS

ConstrucPve feedback

Provide raPonale

Open to each other’s ideas

Do a taste test



When combined, the result is much more delicious than the individual parts!



TASTY BITES TO TAKE AWAY…

The synergy of combined ingredients

Collabora>on space

Building upon each other’s

ideas

Convey freedom to be

crea>ve PaTernize!

Shared understanding

of the UX

FirstName LastName [email protected]

FirstName LastName [email protected]


User Focus • 17 October, 2014

@design4context #userfocus2014

PresentaPon is on Slideshare — www.designforcontext.com/publicaPons



Thank you!

Delicious Design: The Intersection of User Experience Design and Visual Design

Design

Transcript of Delicious Design: The Intersection of User Experience Design and Visual Design