Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Design Techniques for a more clean, professional and engaging website

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


Ngaire Ackerley

May 27, 2014

More Decks by Ngaire Ackerley

Other Decks in Design


  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