2. 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
http://lbdesign.tv http://designack.com twitter @ngaireackerley
ngaire@lbdesign.tv ngaire@designack.com Linkedin Ngaire Ackerley
3. 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
http://lbdesign.tv http://designack.com twitter @ngaireackerley
ngaire@lbdesign.tv ngaire@designack.com Linkedin Ngaire Ackerley
4. 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/
http://lbdesign.tv http://designack.com twitter @ngaireackerley
ngaire@lbdesign.tv ngaire@designack.com Linkedin Ngaire Ackerley
5. 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/
http://lbdesign.tv http://designack.com twitter @ngaireackerley
ngaire@lbdesign.tv ngaire@designack.com Linkedin Ngaire Ackerley
6. 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
http://lbdesign.tv http://designack.com twitter @ngaireackerley
ngaire@lbdesign.tv ngaire@designack.com Linkedin Ngaire Ackerley
7. Example of Design Principles used to create Hierarchy
Size and
contrast
Alignment
Colour
http://lbdesign.tv http://designack.com twitter @ngaireackerley
ngaire@lbdesign.tv ngaire@designack.com Linkedin Ngaire Ackerley
8. 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
http://lbdesign.tv http://designack.com twitter @ngaireackerley
ngaire@lbdesign.tv ngaire@designack.com Linkedin Ngaire Ackerley
9. Slideshow
with text
Multiple
featured
images
http://lbdesign.tv http://designack.com twitter @ngaireackerley
ngaire@lbdesign.tv ngaire@designack.com Linkedin Ngaire Ackerley
10. 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
http://lbdesign.tv http://designack.com twitter @ngaireackerley
ngaire@lbdesign.tv ngaire@designack.com Linkedin Ngaire Ackerley
11. 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
http://lbdesign.tv http://designack.com twitter @ngaireackerley
ngaire@lbdesign.tv ngaire@designack.com Linkedin Ngaire Ackerley
12. 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.
http://lbdesign.tv http://designack.com twitter @ngaireackerley
ngaire@lbdesign.tv ngaire@designack.com Linkedin Ngaire Ackerley
13. 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
http://lbdesign.tv http://designack.com twitter @ngaireackerley
ngaire@lbdesign.tv ngaire@designack.com Linkedin Ngaire Ackerley
14. 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
http://lbdesign.tv http://designack.com twitter @ngaireackerley
ngaire@lbdesign.tv ngaire@designack.com Linkedin Ngaire Ackerley
15. 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/
http://lbdesign.tv http://designack.com twitter @ngaireackerley
ngaire@lbdesign.tv ngaire@designack.com Linkedin Ngaire Ackerley
16. 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
http://lbdesign.tv http://designack.com twitter @ngaireackerley
ngaire@lbdesign.tv ngaire@designack.com Linkedin Ngaire Ackerley
17. Unity / Consistency: In WordPress and
Web design
http://www.virgin.com
http://lbdesign.tv http://designack.com twitter @ngaireackerley
ngaire@lbdesign.tv ngaire@designack.com Linkedin Ngaire Ackerley
18. Website Design Principles
Symmetrical Balance
Horizontal symmetry
For more information http://www.digital-web.com/articles/principles_of_design/
http://lbdesign.tv http://designack.com twitter @ngaireackerley
ngaire@lbdesign.tv ngaire@designack.com Linkedin Ngaire Ackerley
19. Website Design Principles
Asymmetrical Balance
Asymmetry
For more examples http://www.webdesignerdepot.com/2011/10/asymmetrical-balance-in-web-design/
http://lbdesign.tv http://designack.com twitter @ngaireackerley
ngaire@lbdesign.tv ngaire@designack.com Linkedin Ngaire Ackerley
20. 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
http://lbdesign.tv http://designack.com twitter @ngaireackerley
ngaire@lbdesign.tv ngaire@designack.com Linkedin Ngaire Ackerley
21. Balance: In WordPress and Web design
Grids
• Great starting point
• Can overlap columns/rows
Including various content into web pages
get_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”>»</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 lengths
http://lbdesign.tv http://designack.com twitter @ngaireackerley
ngaire@lbdesign.tv ngaire@designack.com Linkedin Ngaire Ackerley
22. 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
http://lbdesign.tv http://designack.com twitter @ngaireackerley
ngaire@lbdesign.tv ngaire@designack.com Linkedin Ngaire Ackerley
23. 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
w3c box model
Remember margin is outside of the element width, but padding and borders add to the element width
http://lbdesign.tv http://designack.com twitter @ngaireackerley
ngaire@lbdesign.tv ngaire@designack.com Linkedin Ngaire Ackerley
24. 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
http://lbdesign.tv http://designack.com twitter @ngaireackerley
ngaire@lbdesign.tv ngaire@designack.com Linkedin Ngaire Ackerley
25. 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
http://lbdesign.tv http://designack.com twitter @ngaireackerley
ngaire@lbdesign.tv ngaire@designack.com Linkedin Ngaire Ackerley
26. Website Design Principles
KISS - Keep it Simple Stupid
http://lbdesign.tv http://designack.com twitter @ngaireackerley
ngaire@lbdesign.tv ngaire@designack.com Linkedin Ngaire Ackerley
27. 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
http://lbdesign.tv http://designack.com twitter @ngaireackerley
ngaire@lbdesign.tv ngaire@designack.com Linkedin Ngaire Ackerley
28. Keep it Simple: In WordPress and
Web design
WordPress Functionality
• Thumbnails, image sizes, featured images
• Excerpts
• Widgets
http://lbdesign.tv http://designack.com twitter @ngaireackerley
ngaire@lbdesign.tv ngaire@designack.com Linkedin Ngaire Ackerley
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 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/
http://lbdesign.tv http://designack.com twitter @ngaireackerley
ngaire@lbdesign.tv ngaire@designack.com Linkedin Ngaire Ackerley