Designing for WordPress and Web Design: Bridging the Gap Between Design and Development

There often seems to be a gap in understanding between web design and development. In this talk, Ngaire covers how to design for users in mind, what design principles are important to consider, and how these can be developed within a WordPress environment.

Transcript

1. Designing for WordPress and Web Design: Bridging the Gap between Design and Development Presented by: Ngaire Ackerley Graphic and Web Designer/Front-end Developer Photograph © Ngaire Ackerley
2. http://lbdesign.tv ngaire@lbdesign.tv http://designack.com ngaire@designack.com twitter @ngaireackerley Linkedin Ngaire Ackerley About me Ngaire Ackerley (Confused? It’s a New Zealand name - pronounced ‘Nigh-ree’) • Graphic and web designer, front-end developer for LBDesign • First class Honours in Computer Graphic Design, New Zealand • Working in the design and web industry for over 6 years in NZ and the UK • Working with WordPress for 2 years now LBDesign • Small Communications Design agency with offices in the UK and US • Work with small to medium businesses and charities • LBDesign co-organises the Philly ‘blurbs WordPress Meetup
3. http://lbdesign.tv ngaire@lbdesign.tv http://designack.com ngaire@designack.com twitter @ngaireackerley Linkedin Ngaire Ackerley What we’ll be covering today Designing for users Design Principles • Guide the eye / Hierarchy • Unity / Consistency • Balance • Keep It Simple Stupid (KISS) Using WordPress and Web design to implement design principles
4. http://lbdesign.tv ngaire@lbdesign.tv http://designack.com ngaire@designack.com twitter @ngaireackerley Linkedin Ngaire Ackerley Designing for Users How do users think? A Typical Website User: • Appreciates quality and credibility • Doesn’t read, they scan • Is impatient and insist on instant gratification • Doesn’t make optimal choices • Will follow their intuition • Wants to have control Based on: http://uxdesign.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/
5. http://lbdesign.tv ngaire@lbdesign.tv http://designack.com ngaire@designack.com twitter @ngaireackerley Linkedin Ngaire Ackerley Designing for Users How to help users • Don’t make users think • Manage to focus users’ attention • Strive for feature exposure • Strive for simplicity • Don’t be afraid of the white space • Communicate effectively with a “visible language” Based on: http://uxdesign.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/
6. http://lbdesign.tv ngaire@lbdesign.tv http://designack.com ngaire@designack.com twitter @ngaireackerley Linkedin Ngaire Ackerley Website Design Principles Guide the eye / Hierarchy • Consider goals of website - this should drive where on the page the content is positioned • Consider positioning - like a newspaper, where design elements are on a webpage, impacts on what order they are seen in • Important information should be easy to find. Whether this is contact information, a feature, a call to action or a logo
7. http://lbdesign.tv ngaire@lbdesign.tv http://designack.com ngaire@designack.com twitter @ngaireackerley Linkedin Ngaire Ackerley Example of Design Principles used to create Hierarchy Colour Alignment Size and contrast
8. http://lbdesign.tv ngaire@lbdesign.tv http://designack.com ngaire@designack.com twitter @ngaireackerley Linkedin Ngaire Ackerley Hierarchy in WordPress and Web design Slideshows • Consider how text and images can be combined to be informative Multiple featured images • Handy and simple way to include more than one image in a focus area Page.ly MultiEdit Plugin • Allows you to separate out main body content into tabs in the admin • Could be useful for customising unique parts to the site
9. http://lbdesign.tv ngaire@lbdesign.tv http://designack.com ngaire@designack.com twitter @ngaireackerley Linkedin Ngaire Ackerley Slideshow with text Multiple featured images
10. http://lbdesign.tv ngaire@lbdesign.tv http://designack.com ngaire@designack.com twitter @ngaireackerley Linkedin Ngaire Ackerley Hierarchy in WordPress and Web design Custom post types • Useful for slideshows or custom header content such as testimonials if you don’t want to use plugins Blogs or news items • Could consider highlighting a special or latest post with space, increased font size, background colour, custom excerpt length
11. http://lbdesign.tv ngaire@lbdesign.tv http://designack.com ngaire@designack.com twitter @ngaireackerley Linkedin Ngaire Ackerley Website Design Principles Unity / Consistency • Making website elements relate and work well together • Written content/message should also be consistent Inconsistencies in a design are like spelling mistakes in an email. They lower the quality and professionalism of a company
12. http://lbdesign.tv ngaire@lbdesign.tv http://designack.com ngaire@designack.com twitter @ngaireackerley Linkedin Ngaire Ackerley Unity / Consistency: In WordPress and Web design Templates • Ask yourself ‘Why does this page need a new template?’ • Consistent sidebars Branding • Front-end of site • CMS and login pages Example: happytables A company that produces websites for restaurants, consistent branding across all levels of sites.
13. http://lbdesign.tv ngaire@lbdesign.tv http://designack.com ngaire@designack.com twitter @ngaireackerley Linkedin Ngaire Ackerley Unity / Consistency: In WordPress and Web design Menus and Navigation • Consistency in thought process from top level > 2nd level > 3rd level • Keep navigation easy to locate and keep the styling consistent Dynamic Menus in WordPress wp_list_pages
14. http://lbdesign.tv ngaire@lbdesign.tv http://designack.com ngaire@designack.com twitter @ngaireackerley Linkedin Ngaire Ackerley Unity / Consistency: In WordPress and Web design Image Sizes • Consider setting up specific featured image sizes • Consider adjusting images sizes in the settings panel • Suggest to your users ideal image sizes so they fit within the design Related Logos of different formats • Shrink them down to be the same height, so they sit nicely in a row • Consider making logos greyscale Too much copy • Consider using headings, bullet points and simple styling such as bold
15. http://lbdesign.tv ngaire@lbdesign.tv http://designack.com ngaire@designack.com twitter @ngaireackerley Linkedin Ngaire Ackerley Unity / Consistency: In WordPress and Web design Moderation: Consider everything in moderation Colours • Consider tones and density • One or two bold colours with one or two sub colours work well to guide the eye through the hierarchy • Let images bring more colour into the site as needed http://www.colorsontheweb.com/colorwizard.asp http://colorschemedesigner.com/
16. http://lbdesign.tv ngaire@lbdesign.tv http://designack.com ngaire@designack.com twitter @ngaireackerley Linkedin Ngaire Ackerley Unity / Consistency: In WordPress and Web design Fonts and styles • Pick 1-2 fonts and limit the weight/styles that you use Consider the little things • Breadcrumbs • Pagination, arrows and ‘Read more »’ links • Link states • Style core tags like <h1>, <a> and <p> in a way that they default to the correct style across the site
17. http://lbdesign.tv ngaire@lbdesign.tv http://designack.com ngaire@designack.com twitter @ngaireackerley Linkedin Ngaire Ackerley Unity / Consistency: In WordPress and Web design http://www.virgin.com
18. http://lbdesign.tv ngaire@lbdesign.tv http://designack.com ngaire@designack.com twitter @ngaireackerley Linkedin Ngaire Ackerley Website Design Principles Symmetrical Balance For more information http://www.digital-web.com/articles/principles_of_design/ Horizontal symmetry
19. http://lbdesign.tv ngaire@lbdesign.tv http://designack.com ngaire@designack.com twitter @ngaireackerley Linkedin Ngaire Ackerley Website Design Principles Asymmetrical Balance For more examples http://www.webdesignerdepot.com/2011/10/asymmetrical-balance-in-web-design/ Asymmetry
20. http://lbdesign.tv ngaire@lbdesign.tv http://designack.com ngaire@designack.com twitter @ngaireackerley Linkedin Ngaire Ackerley Website Design Principles Colour Balance • Large areas hold more weight than smaller areas • Darker areas and saturated colours are heavier than lighter areas and unsaturated colours • Borders and stroke add weight • Texture creates more weight the more dense it is
21. http://lbdesign.tv ngaire@lbdesign.tv http://designack.com ngaire@designack.com twitter @ngaireackerley Linkedin Ngaire Ackerley Balance: In WordPress and Web design Grids • Great starting point • Can overlap columns/rows Including various content into web pages get_template_part; get_pages(include = 39’); include(‘breadcrumbs.php); Widgets <?php wpe_excerpt(‘wpe_excerptlength_teaser’, ‘wpe_excerptmore’); ?> //custom excerpt lengths function wpe_excerptlength_teaser( $length ) { return 23; } function wpe_excerptmore($more) { return ‘ ... <a href=”’. get_permalink() . ‘”>’ . __( ‘Read more <span class=”meta-nav”>&raquo;</span>’, ‘twentyten’ ) . ‘</a>’; } function wpe_excerpt($length_callback=’’, $more_callback=’’) { global $post; if(function_exists($length_callback)){ add_filter(‘excerpt_length’, $length_callback); } if(function_exists($more_callback)){ add_filter(‘excerpt_more’, $more_callback); } $output = get_the_excerpt(); $output = apply_filters(‘wptexturize’, $output); $output = apply_filters(‘convert_chars’, $output); $output = ‘<p>’.$output.’</p>’; echo $output; } Example: Balance with custom excerpt lengths
22. http://lbdesign.tv ngaire@lbdesign.tv http://designack.com ngaire@designack.com twitter @ngaireackerley Linkedin Ngaire Ackerley Balance: In WordPress and Web design Consider how copy is pulled into the page • Does copy keep its paragraphs and spacing? wpautop($var->post_content); Posts • Posts per page • Pagination • Avoid duplication if highlighting a post Length of sidebar vs length of body copy • Don’t have to match, but it can look silly if they are drastically out of portion when it comes to content
23. http://lbdesign.tv ngaire@lbdesign.tv http://designack.com ngaire@designack.com twitter @ngaireackerley Linkedin Ngaire Ackerley w3c box model Remember margin is outside of the element width, but padding and borders add to the element width Balance: In WordPress and Web design Space • Line height • White space - empty/negative space • Box model of margins and padding • Consider scrolling and how much important content is above or below the fold
24. http://lbdesign.tv ngaire@lbdesign.tv http://designack.com ngaire@designack.com twitter @ngaireackerley Linkedin Ngaire Ackerley Website Design Principles KISS - Keep it Simple Stupid ‘Minimalist design has been described as design at its most basic, stripped of superfluous elements, colors, 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
25. http://lbdesign.tv ngaire@lbdesign.tv http://designack.com ngaire@designack.com twitter @ngaireackerley Linkedin Ngaire Ackerley Website Design Principles KISS - Keep it Simple Stupid Minimize content White Space Simple Design - create limitations for yourself • Limit colours • Limit fonts • Limit number of different sizes of fonts, margins, padding, line heights etc • Limit extra styles ie. underline, borders, bold
26. http://lbdesign.tv ngaire@lbdesign.tv http://designack.com ngaire@designack.com twitter @ngaireackerley Linkedin Ngaire Ackerley Website Design Principles KISS - Keep it Simple Stupid
27. http://lbdesign.tv ngaire@lbdesign.tv http://designack.com ngaire@designack.com twitter @ngaireackerley Linkedin Ngaire Ackerley Keep it Simple: In WordPress and Web design Themes • Twentyten and Twentyeleven are good starting themes if you don’t like developing from scratch every time - but still need work
28. http://lbdesign.tv ngaire@lbdesign.tv http://designack.com ngaire@designack.com twitter @ngaireackerley Linkedin Ngaire Ackerley Keep it Simple: In WordPress and Web design WordPress Functionality • Thumbnails, image sizes, featured images • Excerpts • Widgets
29. http://lbdesign.tv ngaire@lbdesign.tv http://designack.com ngaire@designack.com twitter @ngaireackerley Linkedin Ngaire Ackerley Resources and Good Reads ‘Minimalist Design: When Less is More’ http://www.webdesignerdepot.com/2009/12/minimalist-web-design-when-less-is-more/ ‘How Limitations Improve Design’ http://www.webdesignerdepot.com/2010/08/how-limitations-improve-design/ ‘The Invisible Side of Design’ by Vitaly Friedman https://speakerdeck.com/u/smashingmag/p/the-invisible-side-of-design ‘Understanding Visual Hierarchy in Web Design’ http://web design.tutsplus.com/articles/design-theory/understanding-visual-hierarchy-in-web-design/ Colour Scheme Tools http://www.colorsontheweb.com/colorwizard.asp http://colorschemedesigner.com/ http://kuler.adobe.com/
30. Thank you! Any Questions? LBDesign http://lbdesign.tv ngaire@lbdesign.tv designack http://designack.com ngaire@designack.com Twitter @ngaireackerley Linkedin Ngaire Ackerley Where can I be found? Photograph © Ngaire Ackerley