Delicious Design
-
Upload
design-for-context -
Category
Design
-
view
467 -
download
0
Transcript of Delicious Design
© Design for Context
Jennifer Chaffee [email protected]
Rachel Sengers [email protected]
Delicious Design UXERS & VISUAL DESIGNERS COLLABORATING TOGETHER
@design4context #UXPABOS15
© Design for Context
Jennifer Chaffee [email protected]
Rachel Sengers [email protected]
Delicious Design UXERS & VISUAL DESIGNERS COLLABORATING TOGETHER
@design4context #userfocus2014 PresentaQon 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 UXPA Boston 2015 3
© Design for Context
WHO WE ARE
Rachel Sengers Jennifer Chaffee
Incorporate icons?
@design4context Delicious Design UXPA Boston 2015 5
© Design for Context
T-‐SHAPED SKILLS
Collaborate across
disciplines
@design4context Delicious Design UXPA Boston 2015 8
© Design for Context
CREATING A PRODUCTIVE WORKING ARRANGEMENT
Determine roles &
responsibili>es for the project
@design4context Delicious Design UXPA Boston 2015 9
© Design for Context
PLANNING AND GATHERING
Gather visual design criteria
User & business analysis
Know the project parameters
Formats and deliverables
Replace with an image of a shopping cart with groceries in it (low priority)
We can remove “formats & deliverables” bullet point or bundle it with “project parameters” bullet point if we need to shorten.
@design4context Delicious Design UXPA Boston 2015 10
© Design for Context
GETTING THE WIREFRAMES INTO SHAPE
istock 18159142
PaYernize!
@design4context Delicious Design UXPA Boston 2015 11
© Design for Context
GETTING THE WIREFRAMES INTO SHAPE
PaYernize!
@design4context Delicious Design UXPA Boston 2015 12
© Design for Context
GETTING THE WIREFRAMES INTO SHAPE
<MAP>
<MAP>
WIREFRAME DESIGN
@Rachel: This is not the best example of the concept I am trying to explain. I could try to look for another example.
Consistency helps
designer know how it
works…
…designer has freedom to handle it differently
@design4context Delicious Design UXPA Boston 2015 13
© Design for Context
GETTING THE WIREFRAMES INTO SHAPE
WIREFRAME DESIGN
Make the controls’
affordances clear
@design4context Delicious Design UXPA Boston 2015 14
© Design for Context
GETTING THE WIREFRAMES INTO SHAPE
DESIGN WIREFRAME
@design4context Delicious Design UXPA Boston 2015 15
© Design for Context
GETTING THE WIREFRAMES INTO SHAPE
Examples of realisQc content
How does the content need to scale?
Hierarchy
@design4context Delicious Design UXPA Boston 2015 16
© Design for Context
A SHARED UNDERSTANDING OF THE UX FLOW & WIREFRAMES
A shared understanding
@design4context Delicious Design UXPA Boston 2015 17
© Design for Context
A SHARED UNDERSTANDING OF THE UX FLOW & WIREFRAMES
Annota>ons help the visual
designer
@design4context Delicious Design UXPA Boston 2015 18
© Design for Context
A SHARED UNDERSTANDING OF THE UX FLOW & WIREFRAMES
Don’t throw it over the wall!
@design4context Delicious Design UXPA Boston 2015 19
© Design for Context
A SHARED UNDERSTANDING OF THE UX FLOW & WIREFRAMES
Complex apps vs.
simpler sites
PRODUCT NAME
@design4context Delicious Design UXPA Boston 2015 20
© Design for Context
ROOM FOR CREATIVITY
For sldieshare purposes:
I added an extra copy of this slide, since the animatuion on the next slide isn’t visible in Slideshare.
Designer does not need to follow the
recipe exactly
@design4context Delicious Design UXPA Boston 2015 21
© Design for Context
ROOM FOR CREATIVITY
Designer does not need to follow the
recipe exactly
@design4context Delicious Design UXPA Boston 2015 22
© Design for Context
Make it very obvious what the status is of each piece of content. It needs to be really clear if something is not live yet.
I’ll show you a list of all the status types – let’s discuss it together.
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 beZer solu[on?
ROOM FOR CREATIVITY
Point out challenge areas
@design4context Delicious Design UXPA Boston 2015 23
© Design for Context
ROOM FOR CREATIVITY
WIREFRAME DESIGN
Point out areas that need extra design explora>on, and the must-‐bes
@design4context Delicious Design UXPA Boston 2015 24
© Design for Context
ROOM FOR CREATIVITY
Invite crea>ve ideas
How can we let people know the steps that are involved in taking an class?
WIREFRAME
@design4context Delicious Design UXPA Boston 2015 25
© Design for Context
ROOM FOR CREATIVITY
CLASS CARDS CLOSED CLASS CARD
OPENED CLASS CARD
DESIGN
@design4context Delicious Design UXPA Boston 2015 26
© Design for Context
ROOM FOR CREATIVITY
How much >me/budget for exploring visual design
@design4context Delicious Design UXPA Boston 2015 26
@design4context Delicious Design UXPA Boston 2015 28
© Design for Context
CREATIVE COLLABORATION ENVIRONMENT
Explore
Share ideas and resolve problems
Look at work in progress
Develop and review ideas
@design4context Delicious Design UXPA Boston 2015 29
© Design for Context
REVIEW AND REFINE
Design opQons
Provide raQonale
Brainstorm ideas
@design4context Delicious Design UXPA Boston 2015 30
© Design for Context
WIREFRAMES TO VISUAL DESIGN
Pin up wall helps designer look for pa]erns
Get bigger picture of structure
Establishing a design pa]ern
Pa]erns of repeaQng elements develop a design language
@design4context Delicious Design UXPA Boston 2015 31
© Design for Context
WIREFRAMES TO VISUAL DESIGN: EXAMPLE
ExploraQon of various visual designs…
evolved into a soluQon…
that we would not have arrived at independently.
WIREFRAMES
DESIGN
@design4context Delicious Design UXPA Boston 2015 32
© Design for Context
COLLABORATION TIPS
ConstrucQve feedback
Provide raQonale
Open to each other’s ideas
Do a taste test
For Taste Test – we can pull out as a topic (one slide). Maybe also see what Laura said on 5/7/2015 about what to do when the Uxer and Viz don’t agree
@design4context Delicious Design UXPA Boston 2015 33
© Design for Context
When combined, the result is much more delicious than the individual parts!
@design4context Delicious Design UXPA Boston 2015 34
© Design for Context
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 PaYernize!
Shared understanding
of the UX
Don’t just throw it over
the wall
FirstName LastName [email protected]
FirstName LastName [email protected]
Delicious Design UXERS & VISUAL DESIGNERS COLLABORATING TOGETHER
UXPA Boston • 15 May, 2015
@design4context #UXPABOS15
PresentaQon is posted on Slideshare— www.designforcontext.com/publicaQons
Thank you!
Jennifer Chaffee [email protected] @JenChaffee58
Rachel Sengers [email protected] @rachseng