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

Design Techniques

Design Techniques

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

Ngaire Ackerley

March 18, 2013
Tweet

More Decks by Ngaire Ackerley

Other Decks in Design

Transcript

  1. 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
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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/
  12. 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
  13. 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
  14. 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/