In this session, all-level attendees will learn basic design principles that they can use to build a better WordPress site. I will cover the importance of layout and whitespace, basic color theory for branding, and choosing better typography for the best user experience practices. I will also provide examples of three user case studies and offer tips that every WordPress user can begin implementing for better design.

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

2. OVERVIEW
• Section 1: Understanding Design Principles
• Section 2: Layout
• Section 3: Color Theory
• Section 4: Typography
Tweet! #WCNYC @studio404design

3. SECTION 1:
UNDERSTANDING
DESIGN PRINCIPLES
Tweet! #WCNYC @studio404design

4. 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.
Tweet! #WCNYC @studio404design

5. 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.
Tweet! #WCNYC @studio404design

6. SYMMETRICAL
Tweet! #WCNYC @studio404design

7. ASYMMETRICAL
Tweet! #WCNYC @studio404design

8. DESIGN ELEMENTS
PROPORTION
Proportion is important and represents the
scale of elements compared to each other.
Tweet! #WCNYC @studio404design

9. PROPORTION
Tweet! #WCNYC @studio404design

10. 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.
Tweet! #WCNYC @studio404design

11. RHYTHM
Tweet! #WCNYC @studio404design

12. DESIGN ELEMENTS
CREATIVE ELEMENTS
• Color
• Textures
• Typography
• Graphic Elements / Iconography
• Photography
Tweet! #WCNYC @studio404design

13. UNDERSTANDING DESIGN PRINCIPLES
COMMON DESIGN MISTAKES
• Overcrowded / Lack of Focus
• Color Problems
• Inconsistency
• Non-Responsive
Tweet! #WCNYC @studio404design

14. 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).
Tweet! #WCNYC @studio404design

15. 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.
Tweet! #WCNYC @studio404design

16. NOT ACCESSIBILITY COMPATIBLE
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/
Tweet! #WCNYC @studio404design

17. NOT ACCESSIBILITY COMPATIBLE
POINTS TO REMEMBER
• Web content must be perceivable
• Web content must be operable
• Web content must be understandable
• Web content must be robust
Tweet! #WCNYC @studio404design

18. SECTION 2:
LAYOUT
Tweet! #WCNYC @studio404design

19. 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.
Tweet! #WCNYC @studio404design

20. DESIGN PRINCIPLES - LAYOUT
Tweet! #WCNYC @studio404design

21. DESIGN PRINCIPLES - LAYOUT
Tweet! #WCNYC @studio404design

22. DESIGN PRINCIPLES - LAYOUT
Tweet! #WCNYC @studio404design

23. DESIGN PRINCIPLES - LAYOUT
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.
Tweet! #WCNYC @studio404design

24. DESIGN PRINCIPLES - LAYOUT
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.
Tweet! #WCNYC @studio404design

25. DESIGN PRINCIPLES - LAYOUT
THE IMPORTANCE OF WHITE SPACE
Tweet! #WCNYC @studio404design

26. DESIGN PRINCIPLES - LAYOUT
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.
Tweet! #WCNYC @studio404design

27. DESIGN PRINCIPLES - LAYOUT
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.
Tweet! #WCNYC @studio404design

28. SECTION 3:
COLOR THEORY
Tweet! #WCNYC @studio404design

29. 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.
Tweet! #WCNYC @studio404design

30. DESIGN PRINCIPLES - COLOR THEORY
COLORS IN BRANDING & MARKETING
Tweet! #WCNYC @studio404design

31. DESIGN PRINCIPLES - COLOR THEORY
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
Tweet! #WCNYC @studio404design

32. DESIGN PRINCIPLES - COLOR THEORY
REMEMBERING ACCESSIBILITY IN COLOR CHOICES
Tweet! #WCNYC @studio404design

33. DESIGN PRINCIPLES - COLOR THEORY
REMEMBERING ACCESSIBILITY IN COLOR CHOICES
Tweet! #WCNYC @studio404design

34. DESIGN PRINCIPLES - COLOR THEORY
REMEMBERING ACCESSIBILITY IN COLOR CHOICES
Tweet! #WCNYC @studio404design

35. SECTION 4:
TYPOGRAPHY
Tweet! #WCNYC @studio404design

36. DESIGN PRINCIPLES - TYPOGRAPHY
RULES FOR TYPOGRAPHY
Select simple fonts, style them conservatively,
and size them generously.
Source: https://premium.wpmudev.org/blog/typography-tips
Tweet! #WCNYC @studio404design

37. DESIGN PRINCIPLES - TYPOGRAPHY
USING WEB TYPOGRAPHY
• Google Fonts
• TypeKit
• Hoefler & Co. - Cloud Typography
Tweet! #WCNYC @studio404design

38. DESIGN PRINCIPLES - 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.
Tweet! #WCNYC @studio404design

39. DESIGN PRINCIPLES - 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.
Tweet! #WCNYC @studio404design

40. DESIGN PRINCIPLES - TYPOGRAPHY
Tweet! #WCNYC @studio404design

41. DESIGN PRINCIPLES - TYPOGRAPHY
Tweet! #WCNYC @studio404design

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