Basic Design Principles for Every WordPress User

BASIC DESIGN
PRINCIPLES FOR
EVERY WORDPRESS
USER
Tweet! #WCNYC @studio404design

OVERVIEW
• Section 1: Understanding Design Principles
• Section 2: Layout
• Section 3: Color Theory
• Section 4: Typography

SECTION 1:
UNDERSTANDING
DESIGN PRINCIPLES

THE FIRST RULE OF DESIGN
Remember the question “Who am I designing for?”
Every design has an intended audience, the people
that will be viewing the design and receiving the
communication. Remember that while your design
may look good, it might not be the best possible
communication for your audience.

DESIGN ELEMENTS
BALANCE
Balance is how the elements of a design are
distributed throughout a layout. Balance is achieved
through shapes, colors, textures, lines. Three types
of balance: symmetrical, asymmetrical, and radial.

SYMMETRICAL

ASYMMETRICAL

DESIGN ELEMENTS
PROPORTION
Proportion is important and represents the
scale of elements compared to each other.

PROPORTION

DESIGN ELEMENTS
RHYTHM
The rhythm of the page is the principle that makes the
human eye move from one element to another. It
ensures the flow of the eye and in which order users
should see the elements. There are two types of
rhythms: the fluid and the progressive.

RHYTHM

DESIGN ELEMENTS
CREATIVE ELEMENTS
• Color
• Textures
• Typography
• Graphic Elements / Iconography
• Photography

UNDERSTANDING DESIGN PRINCIPLES
COMMON DESIGN MISTAKES
• Overcrowded / Lack of Focus
• Color Problems
• Inconsistency
• Non-Responsive

COMMON DESIGN MISTAKES
NON-RESPONSIVE
Responsive web design (RWD) is an approach to web design
aimed at crafting sites to provide an optimal viewing and
interaction experience—easy reading and navigation with a
minimum of resizing, panning, and scrolling—across a wide
range of devices (from desktop computer monitors to mobile
phones).

NOT ACCESSIBILITY COMPATIBLE
WHAT IS WEB ACCESSIBILITY?
Web accessibility refers to the inclusive practice of
removing barriers that prevent interaction with, or
access to websites, by people with disabilities. When
sites are correctly designed, developed and edited, all
users have equal access to information and functionality.

TYPES OF DISABILITIES TO CONSIDER
• Vision Impairment
• Physical Handicap
• Speech recognition
• Head pointer
• Eye gaze systems
• Deaf or Hard Hearing
• Limited Bandwidth
Source: http://www.washington.edu/accessibility/web/

POINTS TO REMEMBER
• Web content must be perceivable
• Web content must be operable
• Web content must be understandable
• Web content must be robust

SECTION 2:
LAYOUT

DESIGN PRINCIPLES - LAYOUT
DEFINITION OF LAYOUT
The layout is the overall plan for the
arrangement of content. Layouts are usually
structured during the wireframe process.

CONTENT-FIRST DESIGN
Having an idea of what you’re designing for
helps create a better design strategy.
Remember, design in the absence of content is
just decoration.

THE IMPORTANCE OF WHITE SPACE
White space is the portion of the page that is
left unmarked. Having an ample amount of
whitespace in your design is crucial to keep
things clean and neat.

THE IMPORTANCE OF WHITE SPACE

CUSTOM POST TYPES IN WORDPRESS
Using custom post types allows you to better
strategize your layout design. Having an idea of what
type of content you will be using gives you the
flexibility to come up with different ways to arrange
your content.

ADVANCED CUSTOM FIELDS PRO
ACF Pro allows users to have more control over
different types of content. It offers flexibility
and ease of use for forms, galleries, and other
types of flexible content.

SECTION 3:
COLOR THEORY

DESIGN PRINCIPLES - COLOR THEORY
COLOR PSYCHOLOGY
Color psychology is the study of hues as a determinant
of human behavior. Color influences perceptions that are
not obvious, such as the taste of food. Colors can also
enhance the effectiveness of placebos. For example, red
or orange pills are generally used as stimulants.

COLORS IN BRANDING & MARKETING

REMEMBERING ACCESSIBILITY IN COLOR CHOICES
• WCAG 2.0 requires that the foreground and background colors have
a 4.5:1 contrast ratio at Level AA and a 7:1 contrast ratio at Level
AAA. You can use our contrast checker tool to determine what the
ratio is between any foreground and background color.
• WCAG 2.0 also requires (at Level A) that color not be used as the
sole method of conveying content or distinguishing visual elements

REMEMBERING ACCESSIBILITY IN COLOR CHOICES

SECTION 4:
TYPOGRAPHY

DESIGN PRINCIPLES - TYPOGRAPHY
RULES FOR TYPOGRAPHY
Select simple fonts, style them conservatively,
and size them generously.
Source: https://premium.wpmudev.org/blog/typography-tips

USING WEB TYPOGRAPHY
• Google Fonts
• TypeKit
• Hoefler & Co. - Cloud Typography

CHOOSING HEADER TYPOGRAPHY
• Size is not the only way to define hierarchy – it
can also be achieved with color, spacing and
weight.
• Make sure your header typography is able to be
distinguished from your body typography.

CHOOSING BODY TYPOGRAPHY
• Leading
• For legible body text that's comfortable to read,
a general rule is that your leading value should
be greater than the font size; anywhere from
1.25 to 1.5 times.

HELLO WORLD!
Angelica Yarde
Partner and Director of Projects at Sevenality
Editor & Designer at Studio 404 Paper
Co-Host of Heart + Hustle Podcast
Twitter: @studio404design
E-mail: angel@sevenality.com
Slideshare: www.sevenality.com/blog

Basic Design Principles for Every WordPress User

More Related Content

Similar to Basic Design Principles for Every WordPress User (20)

More from Angelica Yarde (8)

Recently uploaded (20)

Basic Design Principles for Every WordPress User