Design Techniques for a more clean, professional and engaging website

Design Principles and Tips relating to engaging, clean websites. Presentation for a group of charities in May 2014

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 over 8 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. 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 Strive for simplicity n Don’t be afraid of white space n Focus users’ attention
10. Website Design Principles
11. Guide the eye (hierarchy) n Consider goals of the website n Consider positioning n Important information should be easy to find
12. Example of hierarchy Size and Contrast Colour Placement
13. 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
14. Example of unity/consistency
15. 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
16. Balance n Symmetrical Balance
17. Balance n Asymmetrical Balance
18. 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
19. Example of colour balance
20. 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
21. Example of Keep It Simple (KISS)
22. 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
23. Example of the limitations technique
24. Example of the limitations technique
25. Tips for engagement
26. Think carefully about photography
27. 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/
28. More 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
29. 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
30. 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/
31. Questions? Slides are online at: http://lbdesign.tv/design-techniques-for-a-more-engaging- website Feel free to contact me: Twitter: @lbdesign or @ngaireackerley Email: ngaire@lbdesign.tv Web: http://lbdesign.tv and http://designack.com