A best practice is...
➢ a method or technique
➢ that has consistently shown results
superior to those achieved with other
➢ and that is used as a benchmark.
It can evolve to become better as
improvements are discovered.
Usability Heuristics for User Interface Design by J.Nielsen
First Principles of Interaction Design by B.Tognazzini
20 Guiding Principles for Experience Designers by H.Whitney
List of Style and Product Guidelines
W3C Standards including Web Content Accessibility Guidelines (2008)
Web Style Guide by Patrick J. Lynch and Sarah Horton (2009)
Main principles of call-to-action:
(stop worrying about fold)
Secondary action (http://eu.marketo.com/)
Tell users what they will get
success of navigation system is that the user
will click through it with a high degree of
Choose the logic for navigation
• Understand your users and your content.
• Understand the content properly, make wireframes
• Find “lists” of things in the content
• Create diagrams (hub & spokes, card sorting, post
notes, word association games etc.)
Find individual things
Group “logically” to your user ( according to the
research that you have done). Iterative, tests.
Give names to the “clumps”
Understand the behaviour of your
What screens are most often visited?
Do they jump between the pages often?
Now it’s time to be creative.
Choose a widget. Iterate.
Web User Interface (UI) Elements
Web Design Elements: Examples And Best Practices
Web Forms: Luke Wroblewski Modern Web Form Design,
Web Form Design in Action, Web Form Design Best Practices,
Designing for Today's Web
Social Login Accounts
UI Patterns Libraries:
Transitions and Animations
• establishes the brand;
• sets the tone;
• gives the push in the right direction.
– spell out the big picture;
– create a good tagline;
– put contacts and call to
in 4 simple steps
and it’s not about choosing fonts
– Web Is All About Typography
– Smashing Magazine
– A List Apart
– I Love Typography
Links from the discussion
Bootstrap is a front-end framework for developing responsive, mobile first
projects on the web.
Foundation is an advanced responsive front-end framework.
inuitcss is a powerful, scalable, Sass-based, BEM, OOCSS framework.
HAL (Hypertext Application Language) is a simple format that gives a
consistent and easy way to hyperlink between resources in your API (very
A particular slide catching your eye?
Clipping is a handy way to collect important slides you want to go back to later.