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

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 

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 

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 

Designing for users How to help users 

Research your target audience 

Don’t make users think 

Focus users’ attention n Strive for feature exposure 

Strive for simplicity n Don’t be afraid of white space 

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 

Website Design Principles 

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 

Example of hierarchy Size and Contrast Colour Placement 

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 

Example of unity/consistency 

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 

Balance n Symmetrical Balance 

Balance n Asymmetrical Balance 

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 

Example of colour balance 

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 

Keep It Simple (KISS) n Minimise content n White space 

Example of Keep It Simple (KISS) 

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 

Example of the limitations technique 

Example of the limitations technique 

Tips for engagement 

Less really is more 

Think carefully about photography 

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/ 

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 

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 

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/ 

Questions? Feel free to contact me: Twitter: @lbdesign or @ngaireackerley Email: [email protected] Web: http://lbdesign.tv and http://designack.com