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

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

Presented at WordCamp Lancaster in July 2013. Ngaire Ackerley talks about how we can design with users in mind, also covers some key design principles and how you can to implement these in WordPress and Web Design. Ngaire rounds this off with some 'top tips' for both designers and developers and some useful resources.

9d852ad65e88b3836261a29d427849b2?s=128

Ngaire Ackerley

July 13, 2013
Tweet

Transcript

  1. Designing for WordPress and Web Design Bridging the Gap Between

    Design and Development Ngaire Ackerley
  2. Design is a plan for arranging elements in such a

    way as best to accomplish a particular purpose. - Charles Eames “  
  3. Who am I? •  A Kiwi (NOT an Australian) • 

    Computer graphic design background •  Working in design and web industry for over 7 years •  Front-end WordPress development for about 3 years •  Work for LBDesign
  4. What’s the plan 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 •  Top tips for designers and developers!
  5. What I won’t be covering •  Responsive design •  Every

    design principle under the sun •  The best themes & plugins to use •  How to design & what programs to use •  How to develop
  6. Designing for Users

  7. https://rageshctech.files.wordpress.com/2010/12/computer-frustration.jpg

  8. How do users think? A typical website user: •  Appreciates

    quality and credibility •  Doesn’t read, they scan •  Is impatient and insists 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/
  9. How to help users •  Don’t make users think • 

    Manage to focus users’ attention •  Strive for simplicity •  Don’t be afraid of white space •  Communicate effectively with a “visible language” •  Research the target audience Based on: http://uxdesign.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/
  10. http://news.submitinme.com/images/happy-internet-woman1.jpg

  11. Website Design Principles and how we can implement them in

    WordPress and Web Design
  12. Guide the Eye / Hierarchy •  Consider the goals of

    the website •  Consider positioning •  Make important information easy to find
  13. None
  14. None
  15. None
  16. Guide the Eye / Hierarchy in WordPress and Web Design

    •  Slideshows •  Good plugin: Soliloquy lite
  17. Guide the Eye / Hierarchy in WordPress and Web Design

  18. •  Customise blogs or news items Guide the Eye /

    Hierarchy in WordPress and Web Design
  19. •  Advanced Custom Fields Plugin Guide the Eye / Hierarchy

    in WordPress and Web Design
  20. Unity / Consistency •  Making website elements relate and work

    well together •  Written content/messages should also be consistent
  21. Inconsistencies in a design are like spelling mistakes in an

    email. They lower the quality and professionalism of a company.
  22. Unity / Consistency in WordPress and Web Design •  Templates

    •  Sidebars •  Branding ! function my_custom_login_logo() ! { ! !echo '<style type="text/css"> ! !h1 a { background- image:url('.get_bloginfo('template_directory').'/ images/image.jpg) !important; } ! !</style>'; ! } ! add_action('login_head', 'my_custom_login_logo');!
  23. Unity / Consistency in WordPress and Web Design

  24. None
  25. None
  26. None
  27. None
  28. Unity / Consistency in WordPress and Web Design •  Image

    sizes - Featured images in the admin settings - Template files - functions.php if ( function_exists( 'add_image_size' ) ) { 
 ! !add_image_size( ’newimage', 220, 180, true ); //(cropped) 
 }!
  29. Unity / Consistency in WordPress and Web Design •  Related/partner

    logos of different formats? •  Social media icons too colourful? •  Too much copy?
  30. •  Colours - Tones and density - Bold and sub

    colours - Let images bring in more colour Unity / Consistency in WordPress and Web Design http://colorschemedesigner.com/ http://colrd.com/image-dna/
  31. •  Fonts and styles •  Menus – different levels and

    responsive •  Consider the little things •  Style the core tags <h1>, <h2>, <h3>, <a>, <p>, ! !<ul>, <ol>, <strong>! Unity / Consistency in WordPress and Web Design
  32. Symmetrical Balance

  33. Symmetrical Balance

  34. Asymmetrical Balance

  35. Asymmetrical Balance

  36. Colour Balance

  37. Colour Balance

  38. Colour Balance

  39. Colour Balance

  40. Colour Balance http://designshack.net/articles/accessibility/tips-for-designing-for-colorblind-users/ http://iamcal.com/toys/colors

  41. Layout Balance •  Grids •  Consider symmetrical and asymmetrical grids

  42. https://960.gs

  43. Balance in WordPress and Web Design •  Posts per page

    and pagination •  Length of sidebar vs length of body copy
  44. Balance in WordPress and Web Design Balancing sidebar and main

    content areas: •  get_template_part;! •  include(‘breadcrumbs.php’);! •  Widgets •  Custom excerpt lengths •  the_field('field_name');
 (Advanced custom fields plugin)
  45. Balance in WordPress and Web Design •  Line heights • 

    White space – empty/negative space •  Content positioning – don’t want to scroll for important content
  46. -Smashing Magazine “  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 bring the mind down to the basics.
  47. KISS – Keep it Simple Stupid •  Minimise content • 

    White space •  Simple design – create limitations for yourself
  48. KISS – Keep it Simple Stupid

  49. KISS in WordPress and Web Design •  Default themes/Starter themes:

    - Twenty ten - Twenty eleven - Responsive
  50. KISS in WordPress and Web Design •  Widgets •  Limiting

    plugins •  Clean admin •  Recycle content
  51. A designer knows he has achieved perfection not when there

    is nothing left to add, but when there is nothing left to take away. - Antoine de Saint Exupéry “  
  52. Top Tips for Designers (or working with them!) •  Talk

    to the client and developer! •  Make designs as pixel accurate as possible •  Size images, icons, fonts correctly •  Consider web fonts vs print fonts •  Consider browsers and devices •  Design with hex values •  Consider grids and consistency of these •  Show the developer designs before the client!
  53. Top Tips for Developers (or working with them!) •  Talk

    to the client and designer! •  Communicate your preferences and what you expect •  Decide responsiveness •  Check designs carefully •  Ask about things like link hovers and drop down menus if they haven’t been designed
  54. Resources •  Eye tracking study reveals 12 website tactics http://www.directcreative.com/blog/eye-tracking-websites

    •  Minimalist Web 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/smashingmag/the-invisible-side-of-design •  Understanding Visual Hierarchy in Web Design http://webdesign.tutsplus.com/articles/design-theory/understanding- visual-hierarchy-in-web-design/ •  Colour Scheme Inspiration http://www.colorsontheweb.com/colorwizard.asp http://colorschemedesigner.com/ https://kuler.adobe.com/create/color-wheel/ http://colrd.com/
  55. Any Questions? http://lbdesign.tv ngaire@lbdesign.tv 07766 838 938 http://designack.com http://kiwifootprints.com ngaire@designack.com

    Twitter: @ngaireackerley