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

johnny.b@mailinator.com

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

Pixlronline image editing

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