Presented in 2014 during developers community gathering at NextStep - the annual gathering for OutSystems customers and anyone interested in experiencing what the Platform and the company are all about.

1. TOP 10
Kick-Ass Tips
for App Design

2. TIP #1
Use real data
{ }It’s harder but it pays off!

3. Customer1
ex@mple
12345678
Somewhere
Name:
Email:
Phone:
Address:
Johnny B. Goode
johnny.b@mailinator.com
555-332-221
5901 Peachtree Dunwoody, GA 30328

4. Empty states…
scary!

5. 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 :) )

6. TIP #2
Don’t be afraid of colour
{ }it will not bite you… a lot ;)

10. How to choose colours?
} Use grayscale + 1 vibrant colour
} Get pallets from:
// Colourlovers // Color Scheme Designer
} Learn more about colour theory

11. Go bananas visual!
TIP #3
{ }1 image is worth 1K words

17. 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)

18. TIP #4
Use icon fonts
{ }No more sprites!

19. http://neomam.com/interactive/13reasons/

23. 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

24. TIP #5
Write for clarity
{ }Text is a big part of the user interface

25. KNA1 List
Record Saved
Submit
Acme Inc.
Name:
Customers List:
Customer “Acme Inc.” saved
successfully
Save Customer
Acme Inc.
Company name:

26. How to write for clarity:
} What is this?
} What will happen if I click it?
} What has just happened?

27. TIP #6
Embrace the white space
{ }Let it breathe!

28. white
space
makes
the
element
more
prominent

29. mobile needs
more space
because of touch
GOT IT!
?
?

31. 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

32. TIP #7
Group related info
{ }into clusters of information

36. Group can be done by:
} spacing (add white space around)
} bars
} different background

37. TIP #8
Keep it consistent
{ }It’s easier when you also keep it simple

38. All these buttons belong to the same application.
Note the inconsistency on the shape, color, icons, and text!

39. How to keep consistency?
} Simplify!
} CSS good practices:
// separate layout from styling - classes
// use LESS or SASS
// use icon fonts
} Create a style guide

40. TIP #9
Do a blur test
{ }to see if the hierarchy of information is right

42. Pixlr
online
image
editing

43. TIP #10
Go out and user test it!
{ }

44. } 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

45. Questions?
{ }There are no stupid questions, there are only stupid answers :)

46. Thanks to you
{ }and to Margarida Mendes and Rodrigo Coutinho for making their work
available to be reused in this presentation