Design Techniques

For a more clean, professional and engaging website.
Presented by Ngaire Ackerley

Transcript

1. Design Techniques For a more clean, professional and engaging website Presented by Ngaire Ackerley
2. What we’ll cover today n Designing for users, how we can help them n Design principles to consider when creating or updating a website n Design tips for engagement
3. What we won’t cover today n What is ‘good’ and ‘bad’ design n Technical website aspects n How to increase your website visitor numbers n How to design for tablets and mobile devices
4. Who am I? n Background in Computer Graphic Design from New Zealand n Have been working in the website and design industry for 7 years n Currently working for a small UK/US agency called LBDesign based in London n Design and build websites on a daily basis
5. Designing for users How to help users
6. Research your target audience
7. Don’t make users think
8. Focus users’ attention n Strive for feature exposure
9. Strive for simplicity n Don’t be afraid of white space
10. Review: Designing for users – how to help users n Research what your target audience likes/ doesn’t like and what they need n Don’t make users think n Focus users’ attention n Strive for simplicity n Don’t be afraid of white space
11. Website Design Principles
12. Guide the eye (hierarchy) n Consider goals of the website – this should drive where content is positioned on a page n Consider positioning – like a newspaper, where design elements are on a webpage impacts on what order they are seen in n Important information should be easy to find. Whether this is contact information, a feature, a call to action or a logo
13. Example of hierarchy Size and Contrast Colour Placement
14. Inconsistencies in a design are like spelling mistakes in an email. They lower the professional appeal of an organisation. Unity/Consistency n Making website elements relate and work well together n Written content/message should also be consistent
15. Example of unity/consistency
16. Unity/consistency of colour n Consider everything in moderation n Consider one-two bold colours with one-two less bold colours to help guide the eye through the hierarchy of content n Let images bring more colour into the site if it looks bland
17. Balance n Symmetrical Balance
18. Balance n Asymmetrical Balance
19. Colour balance n Large areas hold more weight than smaller areas n Darker areas and saturated colours are heavier than lighter areas and unsaturated colours n Borders and stroke add weight n Texture creates more weight, the more dense it is
20. Example of colour balance
21. Keep It Simple (KISS) “Minimalist design has been described as design at its most basic, stripped of superfluous elements, colours, shapes and textures. Its purpose is to make the content stand out and be the focal point. From a visual standpoint, minimalist design is meant to be calming and to bring the mind down to the basics.” - Smashing Magazine
22. Keep It Simple (KISS) n Minimise content n White space
23. Example of Keep It Simple (KISS)
24. Keep It Simple (KISS) n Simple design – consider potential limitations n Limit colours n Limit fonts n Limit number of different sizes of fonts, spacing and styling ie. underline, borders, bold
25. Example of the limitations technique
26. Example of the limitations technique
27. Tips for engagement
28. Less really is more
29. Think carefully about photography
30. Accessibility n Think about accessibility – you can’t control whether a user is colour blind or has vision problems http://designshack.net/articles/accessibility/tips-for-designing-for-colorblind-users/
31. Tips for engagement n Consider what a drawing point is on a page n Slideshow n Testimonial n Heading / Call to Action n Images n Put yourself in the user’s position – are you giving them the information they need? n Content is king – keep it fresh
32. Review n Don’t make users think, help guide them n Goals should drive content and hierarchy within a page layout n Consider everything in moderation n Is your page balanced? n Minimise content n Appreciate white space and keeping the design clean and organised
33. Resources and good reads n  Minimalist Design: When Less is More http://www.webdesignerdepot.com/2009/12/minimalist-web-design- when-less-is-more/ n  How Limitations Improve Design http://www.webdesignerdepot.com/2010/08/how-limitations-improve- design/ n  The Invisible Side of Design by Vitaly Friedman https://speakerdeck.com/smashingmag/the-invisible-side-of-design n  Understanding Visual Hierarchy in Web Design http://webdesign.tutsplus.com/articles/design-theory/understanding- visual-hierarchy-in-web-design/ n  Colour scheme tools http://www.colorsontheweb.com/colorwizard.asp http://colorschemedesigner.com/ https://kuler.adobe.com/
34. Questions? Feel free to contact me: Twitter: @lbdesign or @ngaireackerley Email: ngaire@lbdesign.tv Web: http://lbdesign.tv and http://designack.com