Top 10 kick ass tips for app design
-
Upload
natalia-blaszczyk -
Category
Design
-
view
340 -
download
0
Transcript of Top 10 kick ass tips for app design
TOP 10 Kick-Ass Tips for App Design
TIP #1
Use real data{ }It’s harder but it pays off!
Customer1
ex@mple
12345678
Somewhere
Name:
Email:
Phone:
Address:
Johnny B. Goode
555-332-221
5901 Peachtree Dunwoody, GA 30328
Empty states…scary!
Designing with real data
} Some elements may turn out obsolete = less clutter
} How does it look with short piece of data?
And with very long piece of data?
} Invest in designing empty states (it can be fun :) )
TIP #2
Don’t be afraid of colour{ }it will not bite you… a lot ;)
How to choose colours?
} Use grayscale + 1 vibrant colour
} Get pallets from:
// Colourlovers // Color Scheme Designer
} Learn more about colour theory
Go bananas visual!TIP #3
{ }1 image is worth 1K words
Where to get awesome images for free?
} Pages: unsplash, picjumbo, gratisography } Creative Commons search page} Google search with advanced options} Stock photo banks release freebies regularly (Shutterstock, iStock, Creative Market)
TIP #4
Use icon fonts{ }No more sprites!
http://neomam.com/interactive/13reasons/
Icons made easy
} Ready to use icon fonts: Font Awesome, Entypo, Typicons
} Make your own from free collections or your own svgs
Icomoon.io, Fontello, Fontastic
} Icon fonts hosting service Like Google Fonts but for icon fonts
TIP #5
Write for clarity{ }Text is a big part of the user interface
KNA1 ListRecord Saved
Submit
Acme Inc.
Name:
Customers List:Customer “Acme Inc.” saved successfully
Save Customer
Acme Inc.
Company name:
How to write for clarity:
} What is this?} What will happen if I click it?} What has just happened?
TIP #6
Embrace the white space{ }Let it breathe!
white space
makes the
element more
prominent
mobile needs more space because of touch
GOT IT!
?
?
About space engineering…
} White space makes element more prominent Don’t save the space obsessively
} Touch targets in mobile
} Break long forms into step-by-step
} It’s also about typography Check this interactive guide to web typography
TIP #7
Group related info{ }into clusters of information
Group can be done by:
} spacing (add white space around)} bars} different background
TIP #8
Keep it consistent{ }It’s easier when you also keep it simple
All these buttons belong to the same application. Note the inconsistency on the shape, color, icons, and text!
How to keep consistency?
} Simplify!} CSS good practices:
// separate layout from styling - classes
// use LESS or SASS
// use icon fonts
} Create a style guide
TIP #9
Do a blur test{ }to see if the hierarchy of information is right
TIP #10
Go out and user test it!{ }
} simple and cheap
} start ASAP (even before the implementation starts - print-outs, Balsamiq, InVision...)
} engage your team
any testing is better than no testing...
almost
Questions?{ }There are no stupid questions, there are only stupid answers :)
Thanks to you{ }and to Margarida Mendes and Rodrigo Coutinho for making their work available to be reused in this presentation