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.

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
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
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