design - the first user test
TRANSCRIPT
Design – The first user test
Jessica Engström, Antropoid
Before users even download your app
Users will judge the quality of your app based on the design
Pass the first user test
Coding After Work
Personality to stand out
Cheap
Favorite color women
Favorite color men
Color
Color
Color
Brig
hter
Dark
er
Base
Cont
rast
Color
Key takeaways - Color
Color palette
Key takeaways - Color
Color paletteOverlay for variations
Key takeaways - Color
Color paletteOverlay for variationsShared resource
Color
Typeface
TypefaceTypeface
TypefaceTypefaceTypeface
Typeface
The New York Times
Typeface
Typeface
Typeface
cats
Typeface
Times New RomanRockwellGeorgia Baskerville
Typeface
cats
Typeface
ArialVerdanaComic SansSegoe UI
Typeface
Typeface
Establish and follow good typographic hierarchy
Typeface
Size does matter
Typeface
Avoid margin alignment
Typeface
Use special effects sparsely
Key takeaways - Typeface
MythsHierarchyClean
Color Typeface
9% No company name
41% Only text
Inclusive name
i*metro**droid
Logo
Metrostudio 4The Nounproject
Logo
95% One or two colours
Logo
93% Recognizable in small sizes
Logo
Logotyp
Key takeaways - Logo
Inclusive nameSimplicitySize
Color Typeface
Logo
Images
Photographs or not?
Images
Images
Foto & Bild
This image is taken at Rismyrliden in Skellefteå
This image is taken at Rismyrliden in Skellefteå
This image is taken at Rismyrliden in Skellefteå
Images
Images
Images
Images
Download
Images
Images
Stockphoto
Images
Images
Images
Images
Images
Images
Key takeaways - Images
ScalabilityRelevance & QualityReadability
Color Typeface
LogoImages
Branding
Existing guidelines
Platform guidelines
Microsoft Design LanguageHuman Interface GuidelinesMaterial Design
Devices
Devices
Devices
Devices
Devices
The 6 R’s
Aarrrrrr2-D2
The 6 R’s1. Resize2. Reflow3. Reposition4. Reveal5. Re-architect6. Replace
Resize
Reflow
Reposition
Reveal
Re-architect
Replace
`
Interaction areas
`
Readability areas
Resourcesbrandcolors.netlogos.wikia.com/wiki/Logopedia
Color.adobe.comColourlovers.com
syncfusion.comThenounproject.com
Resourcesshutterstock.com istockphoto.comdreamstime.com
pixabay.comPexels.com
Questions?
Key takeaways
Think things through
Key takeaways
Think things throughKeep it clean and consistent
Key takeaways
Think things throughKeep it clean and consistentOptimize your layout
Pass the first user test
