top 10 kick ass tips for app design
TRANSCRIPT
![Page 1: Top 10 kick ass tips for app design](https://reader031.vdocument.in/reader031/viewer/2022021923/5a6cfd2a7f8b9ab3418b4e19/html5/thumbnails/1.jpg)
TOP 10 Kick-Ass Tips for App Design
![Page 2: Top 10 kick ass tips for app design](https://reader031.vdocument.in/reader031/viewer/2022021923/5a6cfd2a7f8b9ab3418b4e19/html5/thumbnails/2.jpg)
TIP #1
Use real data{ }It’s harder but it pays off!
![Page 3: Top 10 kick ass tips for app design](https://reader031.vdocument.in/reader031/viewer/2022021923/5a6cfd2a7f8b9ab3418b4e19/html5/thumbnails/3.jpg)
Customer1
ex@mple
12345678
Somewhere
Name:
Email:
Phone:
Address:
Johnny B. Goode
555-332-221
5901 Peachtree Dunwoody, GA 30328
![Page 4: Top 10 kick ass tips for app design](https://reader031.vdocument.in/reader031/viewer/2022021923/5a6cfd2a7f8b9ab3418b4e19/html5/thumbnails/4.jpg)
Empty states…scary!
![Page 5: Top 10 kick ass tips for app design](https://reader031.vdocument.in/reader031/viewer/2022021923/5a6cfd2a7f8b9ab3418b4e19/html5/thumbnails/5.jpg)
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 :) )
![Page 6: Top 10 kick ass tips for app design](https://reader031.vdocument.in/reader031/viewer/2022021923/5a6cfd2a7f8b9ab3418b4e19/html5/thumbnails/6.jpg)
TIP #2
Don’t be afraid of colour{ }it will not bite you… a lot ;)
![Page 7: Top 10 kick ass tips for app design](https://reader031.vdocument.in/reader031/viewer/2022021923/5a6cfd2a7f8b9ab3418b4e19/html5/thumbnails/7.jpg)
![Page 8: Top 10 kick ass tips for app design](https://reader031.vdocument.in/reader031/viewer/2022021923/5a6cfd2a7f8b9ab3418b4e19/html5/thumbnails/8.jpg)
![Page 9: Top 10 kick ass tips for app design](https://reader031.vdocument.in/reader031/viewer/2022021923/5a6cfd2a7f8b9ab3418b4e19/html5/thumbnails/9.jpg)
![Page 10: Top 10 kick ass tips for app design](https://reader031.vdocument.in/reader031/viewer/2022021923/5a6cfd2a7f8b9ab3418b4e19/html5/thumbnails/10.jpg)
How to choose colours?
} Use grayscale + 1 vibrant colour
} Get pallets from:
// Colourlovers // Color Scheme Designer
} Learn more about colour theory
![Page 11: Top 10 kick ass tips for app design](https://reader031.vdocument.in/reader031/viewer/2022021923/5a6cfd2a7f8b9ab3418b4e19/html5/thumbnails/11.jpg)
Go bananas visual!TIP #3
{ }1 image is worth 1K words
![Page 12: Top 10 kick ass tips for app design](https://reader031.vdocument.in/reader031/viewer/2022021923/5a6cfd2a7f8b9ab3418b4e19/html5/thumbnails/12.jpg)
![Page 13: Top 10 kick ass tips for app design](https://reader031.vdocument.in/reader031/viewer/2022021923/5a6cfd2a7f8b9ab3418b4e19/html5/thumbnails/13.jpg)
![Page 14: Top 10 kick ass tips for app design](https://reader031.vdocument.in/reader031/viewer/2022021923/5a6cfd2a7f8b9ab3418b4e19/html5/thumbnails/14.jpg)
![Page 15: Top 10 kick ass tips for app design](https://reader031.vdocument.in/reader031/viewer/2022021923/5a6cfd2a7f8b9ab3418b4e19/html5/thumbnails/15.jpg)
![Page 16: Top 10 kick ass tips for app design](https://reader031.vdocument.in/reader031/viewer/2022021923/5a6cfd2a7f8b9ab3418b4e19/html5/thumbnails/16.jpg)
![Page 17: Top 10 kick ass tips for app design](https://reader031.vdocument.in/reader031/viewer/2022021923/5a6cfd2a7f8b9ab3418b4e19/html5/thumbnails/17.jpg)
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)
![Page 18: Top 10 kick ass tips for app design](https://reader031.vdocument.in/reader031/viewer/2022021923/5a6cfd2a7f8b9ab3418b4e19/html5/thumbnails/18.jpg)
TIP #4
Use icon fonts{ }No more sprites!
![Page 19: Top 10 kick ass tips for app design](https://reader031.vdocument.in/reader031/viewer/2022021923/5a6cfd2a7f8b9ab3418b4e19/html5/thumbnails/19.jpg)
http://neomam.com/interactive/13reasons/
![Page 20: Top 10 kick ass tips for app design](https://reader031.vdocument.in/reader031/viewer/2022021923/5a6cfd2a7f8b9ab3418b4e19/html5/thumbnails/20.jpg)
![Page 21: Top 10 kick ass tips for app design](https://reader031.vdocument.in/reader031/viewer/2022021923/5a6cfd2a7f8b9ab3418b4e19/html5/thumbnails/21.jpg)
![Page 22: Top 10 kick ass tips for app design](https://reader031.vdocument.in/reader031/viewer/2022021923/5a6cfd2a7f8b9ab3418b4e19/html5/thumbnails/22.jpg)
![Page 23: Top 10 kick ass tips for app design](https://reader031.vdocument.in/reader031/viewer/2022021923/5a6cfd2a7f8b9ab3418b4e19/html5/thumbnails/23.jpg)
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
![Page 24: Top 10 kick ass tips for app design](https://reader031.vdocument.in/reader031/viewer/2022021923/5a6cfd2a7f8b9ab3418b4e19/html5/thumbnails/24.jpg)
TIP #5
Write for clarity{ }Text is a big part of the user interface
![Page 25: Top 10 kick ass tips for app design](https://reader031.vdocument.in/reader031/viewer/2022021923/5a6cfd2a7f8b9ab3418b4e19/html5/thumbnails/25.jpg)
KNA1 ListRecord Saved
Submit
Acme Inc.
Name:
Customers List:Customer “Acme Inc.” saved successfully
Save Customer
Acme Inc.
Company name:
![Page 26: Top 10 kick ass tips for app design](https://reader031.vdocument.in/reader031/viewer/2022021923/5a6cfd2a7f8b9ab3418b4e19/html5/thumbnails/26.jpg)
How to write for clarity:
} What is this?} What will happen if I click it?} What has just happened?
![Page 27: Top 10 kick ass tips for app design](https://reader031.vdocument.in/reader031/viewer/2022021923/5a6cfd2a7f8b9ab3418b4e19/html5/thumbnails/27.jpg)
TIP #6
Embrace the white space{ }Let it breathe!
![Page 28: Top 10 kick ass tips for app design](https://reader031.vdocument.in/reader031/viewer/2022021923/5a6cfd2a7f8b9ab3418b4e19/html5/thumbnails/28.jpg)
white space
makes the
element more
prominent
![Page 29: Top 10 kick ass tips for app design](https://reader031.vdocument.in/reader031/viewer/2022021923/5a6cfd2a7f8b9ab3418b4e19/html5/thumbnails/29.jpg)
mobile needs more space because of touch
GOT IT!
?
?
![Page 30: Top 10 kick ass tips for app design](https://reader031.vdocument.in/reader031/viewer/2022021923/5a6cfd2a7f8b9ab3418b4e19/html5/thumbnails/30.jpg)
![Page 31: Top 10 kick ass tips for app design](https://reader031.vdocument.in/reader031/viewer/2022021923/5a6cfd2a7f8b9ab3418b4e19/html5/thumbnails/31.jpg)
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
![Page 32: Top 10 kick ass tips for app design](https://reader031.vdocument.in/reader031/viewer/2022021923/5a6cfd2a7f8b9ab3418b4e19/html5/thumbnails/32.jpg)
TIP #7
Group related info{ }into clusters of information
![Page 33: Top 10 kick ass tips for app design](https://reader031.vdocument.in/reader031/viewer/2022021923/5a6cfd2a7f8b9ab3418b4e19/html5/thumbnails/33.jpg)
![Page 34: Top 10 kick ass tips for app design](https://reader031.vdocument.in/reader031/viewer/2022021923/5a6cfd2a7f8b9ab3418b4e19/html5/thumbnails/34.jpg)
![Page 35: Top 10 kick ass tips for app design](https://reader031.vdocument.in/reader031/viewer/2022021923/5a6cfd2a7f8b9ab3418b4e19/html5/thumbnails/35.jpg)
![Page 36: Top 10 kick ass tips for app design](https://reader031.vdocument.in/reader031/viewer/2022021923/5a6cfd2a7f8b9ab3418b4e19/html5/thumbnails/36.jpg)
Group can be done by:
} spacing (add white space around)} bars} different background
![Page 37: Top 10 kick ass tips for app design](https://reader031.vdocument.in/reader031/viewer/2022021923/5a6cfd2a7f8b9ab3418b4e19/html5/thumbnails/37.jpg)
TIP #8
Keep it consistent{ }It’s easier when you also keep it simple
![Page 38: Top 10 kick ass tips for app design](https://reader031.vdocument.in/reader031/viewer/2022021923/5a6cfd2a7f8b9ab3418b4e19/html5/thumbnails/38.jpg)
All these buttons belong to the same application. Note the inconsistency on the shape, color, icons, and text!
![Page 39: Top 10 kick ass tips for app design](https://reader031.vdocument.in/reader031/viewer/2022021923/5a6cfd2a7f8b9ab3418b4e19/html5/thumbnails/39.jpg)
How to keep consistency?
} Simplify!} CSS good practices:
// separate layout from styling - classes
// use LESS or SASS
// use icon fonts
} Create a style guide
![Page 40: Top 10 kick ass tips for app design](https://reader031.vdocument.in/reader031/viewer/2022021923/5a6cfd2a7f8b9ab3418b4e19/html5/thumbnails/40.jpg)
TIP #9
Do a blur test{ }to see if the hierarchy of information is right
![Page 41: Top 10 kick ass tips for app design](https://reader031.vdocument.in/reader031/viewer/2022021923/5a6cfd2a7f8b9ab3418b4e19/html5/thumbnails/41.jpg)
![Page 43: Top 10 kick ass tips for app design](https://reader031.vdocument.in/reader031/viewer/2022021923/5a6cfd2a7f8b9ab3418b4e19/html5/thumbnails/43.jpg)
TIP #10
Go out and user test it!{ }
![Page 44: Top 10 kick ass tips for app design](https://reader031.vdocument.in/reader031/viewer/2022021923/5a6cfd2a7f8b9ab3418b4e19/html5/thumbnails/44.jpg)
} 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
![Page 45: Top 10 kick ass tips for app design](https://reader031.vdocument.in/reader031/viewer/2022021923/5a6cfd2a7f8b9ab3418b4e19/html5/thumbnails/45.jpg)
Questions?{ }There are no stupid questions, there are only stupid answers :)
![Page 46: Top 10 kick ass tips for app design](https://reader031.vdocument.in/reader031/viewer/2022021923/5a6cfd2a7f8b9ab3418b4e19/html5/thumbnails/46.jpg)
Thanks to you{ }and to Margarida Mendes and Rodrigo Coutinho for making their work available to be reused in this presentation