Designing for WordPress
and Web Design
Bridging the Gap Between
Design and Development
Ngaire Ackerley
Design is a plan for arranging
elements in such a way as
best to accomplish a
particular purpose.
- Charles Eames
“
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
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!
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
Designing for Users
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:
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:
Website Design
Principles
and how we can implement them
in WordPress and Web Design
Guide the Eye / Hierarchy
• Consider the goals of the website
• Consider positioning
• Make important information easy to find
Guide the Eye / Hierarchy in
WordPress and Web Design
• Slideshows
• Good plugin: Soliloquy lite
Guide the Eye / Hierarchy in
WordPress and Web Design
• Customise blogs or news items
Guide the Eye / Hierarchy in
WordPress and Web Design
• Advanced Custom Fields Plugin
Guide the Eye / Hierarchy in
WordPress and Web Design
Unity / Consistency
• Making website elements relate and
work well together
• Written content/messages should also
be consistent
Inconsistencies in a design are
like spelling mistakes in an email.
They lower the quality and
professionalism of a company.
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/) !important; } !
!</style>'; !
} !
add_action('login_head', 'my_custom_login_logo');!
Unity / Consistency in WordPress
and Web Design
Unity / Consistency in WordPress
and Web Design
• Image sizes
- Featured images in the admin settings
- Template files
-
if ( function_exists( 'add_image_size' ) ) {
! !add_image_size( ’newimage', 220, 180,
true ); //(cropped)
}!
Unity / Consistency in WordPress
and Web Design
• Related/partner logos of different formats?
• Social media icons too colourful?
• Too much copy?
• Colours
- Tones and density
- Bold and sub colours
- Let images bring in more colour
Unity / Consistency in WordPress
and Web Design
• 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
Symmetrical Balance
Symmetrical Balance
Asymmetrical Balance
Asymmetrical Balance
Colour Balance
Colour Balance
Colour Balance
Colour Balance
Colour Balance
Layout Balance
• Grids
• Consider symmetrical and asymmetrical
grids
Balance in WordPress
and Web Design
• Posts per page and pagination
• Length of sidebar vs length of body copy
Balance in WordPress
and Web Design
Balancing sidebar and main content areas:
• get_template_part;!
• include(‘’);!
• Widgets
• Custom excerpt lengths
• the_field('field_name');
(Advanced custom fields plugin)
Balance in WordPress
and Web Design
• Line heights
• White space – empty/negative space
• Content positioning – don’t want to scroll for
important content
-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.
KISS – Keep it Simple Stupid
• Minimise content
• White space
• Simple design – create limitations for yourself
KISS – Keep it Simple Stupid
KISS in WordPress and Web Design
• Default themes/Starter themes:
- Twenty ten
- Twenty eleven
- Responsive
KISS in WordPress and Web Design
• Widgets
• Limiting plugins
• Clean admin
• Recycle content
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
“
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!
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
Resources
• Eye tracking study reveals 12 website tactics
• Minimalist Web Design: When Less is More
when-less-is-more/
• How Limitations Improve Design
design/
• The Invisible Side of Design, by Vitaly Friedman
• Understanding Visual Hierarchy in Web Design
visual-hierarchy-in-web-design/
• Colour Scheme Inspiration
