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

542 views

Published on

Published in: Design, Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
542
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 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. 2. About meNgaire 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 nowLBDesign• 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 Meetuphttp://lbdesign.tv http://designack.com twitter @ngaireackerleyngaire@lbdesign.tv ngaire@designack.com Linkedin Ngaire Ackerley
  3. 3. What we’ll be covering todayDesigning for usersDesign Principles• Guide the eye / Hierarchy• Unity / Consistency• Balance• Keep It Simple Stupid (KISS)Using WordPress and Web design toimplement design principleshttp://lbdesign.tv http://designack.com twitter @ngaireackerleyngaire@lbdesign.tv ngaire@designack.com Linkedin Ngaire Ackerley
  4. 4. Designing for UsersHow 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 controlBased on:http://uxdesign.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/http://lbdesign.tv http://designack.com twitter @ngaireackerleyngaire@lbdesign.tv ngaire@designack.com Linkedin Ngaire Ackerley
  5. 5. Designing for UsersHow 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/http://lbdesign.tv http://designack.com twitter @ngaireackerleyngaire@lbdesign.tv ngaire@designack.com Linkedin Ngaire Ackerley
  6. 6. Website Design PrinciplesGuide 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 logohttp://lbdesign.tv http://designack.com twitter @ngaireackerleyngaire@lbdesign.tv ngaire@designack.com Linkedin Ngaire Ackerley
  7. 7. Example of Design Principles used to create Hierarchy Size and contrast Alignment Colourhttp://lbdesign.tv http://designack.com twitter @ngaireackerleyngaire@lbdesign.tv ngaire@designack.com Linkedin Ngaire Ackerley
  8. 8. Hierarchy in WordPress and Web designSlideshows• Consider how text and images can be combined to be informativeMultiple featured images• Handy and simple way to include more than one image in a focus areaPage.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 sitehttp://lbdesign.tv http://designack.com twitter @ngaireackerleyngaire@lbdesign.tv ngaire@designack.com Linkedin Ngaire Ackerley
  9. 9. Slideshow with text Multiple featured imageshttp://lbdesign.tv http://designack.com twitter @ngaireackerleyngaire@lbdesign.tv ngaire@designack.com Linkedin Ngaire Ackerley
  10. 10. Hierarchy in WordPress and Web designCustom post types• Useful for slideshows or custom header content such as testimonials if you don’t want to use pluginsBlogs or news items• Could consider highlighting a special or latest post with space, increased font size, background colour, custom excerpt lengthhttp://lbdesign.tv http://designack.com twitter @ngaireackerleyngaire@lbdesign.tv ngaire@designack.com Linkedin Ngaire Ackerley
  11. 11. Website Design PrinciplesUnity / Consistency• Making website elements relate and work well together• Written content/message should also be consistentInconsistencies in a design are like spelling mistakes in an email.They lower the quality and professionalism of a companyhttp://lbdesign.tv http://designack.com twitter @ngaireackerleyngaire@lbdesign.tv ngaire@designack.com Linkedin Ngaire Ackerley
  12. 12. Unity / Consistency: In WordPress andWeb designTemplates• Ask yourself ‘Why does this page need a new template?’• Consistent sidebarsBranding• Front-end of site• CMS and login pagesExample: happytablesA company that produceswebsites for restaurants,consistent branding acrossall levels of sites.http://lbdesign.tv http://designack.com twitter @ngaireackerleyngaire@lbdesign.tv ngaire@designack.com Linkedin Ngaire Ackerley
  13. 13. Unity / Consistency: In WordPress andWeb designMenus 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_pageshttp://lbdesign.tv http://designack.com twitter @ngaireackerleyngaire@lbdesign.tv ngaire@designack.com Linkedin Ngaire Ackerley
  14. 14. Unity / Consistency: In WordPress andWeb designImage 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 designRelated Logos of different formats• Shrink them down to be the same height, so they sit nicely in a row• Consider making logos greyscaleToo much copy• Consider using headings, bullet points and simple styling such as boldhttp://lbdesign.tv http://designack.com twitter @ngaireackerleyngaire@lbdesign.tv ngaire@designack.com Linkedin Ngaire Ackerley
  15. 15. Unity / Consistency: In WordPress andWeb designModeration: Consider everything in moderationColours• 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/http://lbdesign.tv http://designack.com twitter @ngaireackerleyngaire@lbdesign.tv ngaire@designack.com Linkedin Ngaire Ackerley
  16. 16. Unity / Consistency: In WordPress andWeb designFonts and styles• Pick 1-2 fonts and limit the weight/styles that you useConsider 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 sitehttp://lbdesign.tv http://designack.com twitter @ngaireackerleyngaire@lbdesign.tv ngaire@designack.com Linkedin Ngaire Ackerley
  17. 17. Unity / Consistency: In WordPress andWeb designhttp://www.virgin.comhttp://lbdesign.tv http://designack.com twitter @ngaireackerleyngaire@lbdesign.tv ngaire@designack.com Linkedin Ngaire Ackerley
  18. 18. Website Design PrinciplesSymmetrical Balance Horizontal symmetryFor more information http://www.digital-web.com/articles/principles_of_design/http://lbdesign.tv http://designack.com twitter @ngaireackerleyngaire@lbdesign.tv ngaire@designack.com Linkedin Ngaire Ackerley
  19. 19. Website Design PrinciplesAsymmetrical Balance AsymmetryFor more examples http://www.webdesignerdepot.com/2011/10/asymmetrical-balance-in-web-design/http://lbdesign.tv http://designack.com twitter @ngaireackerleyngaire@lbdesign.tv ngaire@designack.com Linkedin Ngaire Ackerley
  20. 20. Website Design PrinciplesColour 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 ishttp://lbdesign.tv http://designack.com twitter @ngaireackerleyngaire@lbdesign.tv ngaire@designack.com Linkedin Ngaire Ackerley
  21. 21. Balance: In WordPress and Web designGrids• Great starting point• Can overlap columns/rowsIncluding various content into web pagesget_template_part; <?php wpe_excerpt(‘wpe_excerptlength_teaser’, ‘wpe_excerptmore’); ?> //custom excerpt lengths function wpe_excerptlength_teaser( $length ) {get_pages(include = 39’); return 23; } function wpe_excerptmore($more) {include(‘breadcrumbs.php); return ‘ ... <a href=”’. get_permalink() . ‘”>’ . __( ‘Read more <span class=”meta-nav”>&raquo;</span>’, ‘twentyten’ ) . ‘</a>’; }Widgets 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);Example: Balance with custom $output = ‘<p>’.$output.’</p>’; echo $output; }excerpt lengthshttp://lbdesign.tv http://designack.com twitter @ngaireackerleyngaire@lbdesign.tv ngaire@designack.com Linkedin Ngaire Ackerley
  22. 22. Balance: In WordPress and Web designConsider 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 postLength 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 contenthttp://lbdesign.tv http://designack.com twitter @ngaireackerleyngaire@lbdesign.tv ngaire@designack.com Linkedin Ngaire Ackerley
  23. 23. Balance: In WordPress and Web designSpace• 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 foldw3c box modelRemember margin is outside of the element width, but padding and borders add to the element widthhttp://lbdesign.tv http://designack.com twitter @ngaireackerleyngaire@lbdesign.tv ngaire@designack.com Linkedin Ngaire Ackerley
  24. 24. Website Design PrinciplesKISS - Keep it Simple Stupid‘Minimalist design has been described as design at itsmost basic, stripped of superfluous elements, colors,shapes and textures.Its purpose is to make the content stand out and be thefocal point. From a visual standpoint, minimalist designis meant to be calming and to bring the mind down tothe basics.’- Smashing Magazinehttp://lbdesign.tv http://designack.com twitter @ngaireackerleyngaire@lbdesign.tv ngaire@designack.com Linkedin Ngaire Ackerley
  25. 25. Website Design PrinciplesKISS - Keep it Simple StupidMinimize contentWhite SpaceSimple 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, boldhttp://lbdesign.tv http://designack.com twitter @ngaireackerleyngaire@lbdesign.tv ngaire@designack.com Linkedin Ngaire Ackerley
  26. 26. Website Design PrinciplesKISS - Keep it Simple Stupidhttp://lbdesign.tv http://designack.com twitter @ngaireackerleyngaire@lbdesign.tv ngaire@designack.com Linkedin Ngaire Ackerley
  27. 27. Keep it Simple: In WordPress andWeb designThemes• Twentyten and Twentyeleven are good starting themes if you don’t like developing from scratch every time - but still need workhttp://lbdesign.tv http://designack.com twitter @ngaireackerleyngaire@lbdesign.tv ngaire@designack.com Linkedin Ngaire Ackerley
  28. 28. Keep it Simple: In WordPress andWeb designWordPress Functionality• Thumbnails, image sizes, featured images• Excerpts• Widgetshttp://lbdesign.tv http://designack.com twitter @ngaireackerleyngaire@lbdesign.tv ngaire@designack.com Linkedin Ngaire Ackerley
  29. 29. 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 Friedmanhttps://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 Toolshttp://www.colorsontheweb.com/colorwizard.asphttp://colorschemedesigner.com/http://kuler.adobe.com/http://lbdesign.tv http://designack.com twitter @ngaireackerleyngaire@lbdesign.tv ngaire@designack.com Linkedin Ngaire Ackerley
  30. 30. Photograph © Ngaire Ackerley Thank you! Any Questions?Where can I be found?LBDesign designack Twitterhttp://lbdesign.tv http://designack.com @ngaireackerleyngaire@lbdesign.tv ngaire@designack.com Linkedin Ngaire Ackerley

×