Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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: Typograph...
SECTION 1:
UNDERSTANDING
DESIGN PRINCIPLES
Tweet! #WCNYC @studio404design
THE FIRST RULE OF DESIGN
Remember the question “Who am I designing for?”
Every design has an intended audience, the people...
DESIGN ELEMENTS
BALANCE
Balance is how the elements of a design are
distributed throughout a layout. Balance is achieved
t...
SYMMETRICAL
Tweet! #WCNYC @studio404design
ASYMMETRICAL
Tweet! #WCNYC @studio404design
DESIGN ELEMENTS
PROPORTION
Proportion is important and represents the
scale of elements compared to each other.
Tweet! #WC...
PROPORTION
Tweet! #WCNYC @studio404design
DESIGN ELEMENTS
RHYTHM
The rhythm of the page is the principle that makes the
human eye move from one element to another. ...
RHYTHM
Tweet! #WCNYC @studio404design
DESIGN ELEMENTS
CREATIVE ELEMENTS
• Color
• Textures
• Typography
• Graphic Elements / Iconography
• Photography
Tweet! #W...
UNDERSTANDING DESIGN PRINCIPLES
COMMON DESIGN MISTAKES
• Overcrowded / Lack of Focus
• Color Problems
• Inconsistency
• No...
COMMON DESIGN MISTAKES
NON-RESPONSIVE
Responsive web design (RWD) is an approach to web design
aimed at crafting sites to ...
NOT ACCESSIBILITY COMPATIBLE
WHAT IS WEB ACCESSIBILITY?
Web accessibility refers to the inclusive practice of
removing bar...
NOT ACCESSIBILITY COMPATIBLE
TYPES OF DISABILITIES TO CONSIDER
• Vision Impairment
• Physical Handicap
• Speech recognitio...
NOT ACCESSIBILITY COMPATIBLE
POINTS TO REMEMBER
• Web content must be perceivable
• Web content must be operable
• Web con...
SECTION 2:
LAYOUT
Tweet! #WCNYC @studio404design
DESIGN PRINCIPLES - LAYOUT
DEFINITION OF LAYOUT
The layout is the overall plan for the
arrangement of content. Layouts are...
DESIGN PRINCIPLES - LAYOUT
Tweet! #WCNYC @studio404design
DESIGN PRINCIPLES - LAYOUT
Tweet! #WCNYC @studio404design
DESIGN PRINCIPLES - LAYOUT
Tweet! #WCNYC @studio404design
DESIGN PRINCIPLES - LAYOUT
CONTENT-FIRST DESIGN
Having an idea of what you’re designing for
helps create a better design s...
DESIGN PRINCIPLES - LAYOUT
THE IMPORTANCE OF WHITE SPACE
White space is the portion of the page that is
left unmarked. Hav...
DESIGN PRINCIPLES - LAYOUT
THE IMPORTANCE OF WHITE SPACE
Tweet! #WCNYC @studio404design
DESIGN PRINCIPLES - LAYOUT
CUSTOM POST TYPES IN WORDPRESS
Using custom post types allows you to better
strategize your lay...
DESIGN PRINCIPLES - LAYOUT
ADVANCED CUSTOM FIELDS PRO
ACF Pro allows users to have more control over
different types of co...
SECTION 3:
COLOR THEORY
Tweet! #WCNYC @studio404design
DESIGN PRINCIPLES - COLOR THEORY
COLOR PSYCHOLOGY
Color psychology is the study of hues as a determinant
of human behavior...
DESIGN PRINCIPLES - COLOR THEORY
COLORS IN BRANDING & MARKETING
Tweet! #WCNYC @studio404design
DESIGN PRINCIPLES - COLOR THEORY
REMEMBERING ACCESSIBILITY IN COLOR CHOICES
• WCAG 2.0 requires that the foreground and ba...
DESIGN PRINCIPLES - COLOR THEORY
REMEMBERING ACCESSIBILITY IN COLOR CHOICES
Tweet! #WCNYC @studio404design
DESIGN PRINCIPLES - COLOR THEORY
REMEMBERING ACCESSIBILITY IN COLOR CHOICES
Tweet! #WCNYC @studio404design
DESIGN PRINCIPLES - COLOR THEORY
REMEMBERING ACCESSIBILITY IN COLOR CHOICES
Tweet! #WCNYC @studio404design
SECTION 4:
TYPOGRAPHY
Tweet! #WCNYC @studio404design
DESIGN PRINCIPLES - TYPOGRAPHY
RULES FOR TYPOGRAPHY
Select simple fonts, style them conservatively,
and size them generous...
DESIGN PRINCIPLES - TYPOGRAPHY
USING WEB TYPOGRAPHY
• Google Fonts
• TypeKit
• Hoefler & Co. - Cloud Typography
Tweet! #WC...
DESIGN PRINCIPLES - TYPOGRAPHY
CHOOSING HEADER TYPOGRAPHY
• Size is not the only way to define hierarchy – it
can also be ...
DESIGN PRINCIPLES - TYPOGRAPHY
CHOOSING BODY TYPOGRAPHY
• Leading
• For legible body text that's comfortable to read,
a ge...
DESIGN PRINCIPLES - TYPOGRAPHY
Tweet! #WCNYC @studio404design
DESIGN PRINCIPLES - TYPOGRAPHY
Tweet! #WCNYC @studio404design
HELLO WORLD!
Angelica Yarde
Partner and Director of Projects at Sevenality
Editor & Designer at Studio 404 Paper
Co-Host o...
Upcoming SlideShare
Loading in …5
×

Basic Design Principles for Every WordPress User

404 views

Published on


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.

Published in: Design
  • Be the first to comment

Basic Design Principles for Every WordPress User

  1. 1. BASIC DESIGN PRINCIPLES FOR EVERY WORDPRESS USER Tweet! #WCNYC @studio404design
  2. 2. OVERVIEW • Section 1: Understanding Design Principles • Section 2: Layout • Section 3: Color Theory • Section 4: Typography Tweet! #WCNYC @studio404design
  3. 3. SECTION 1: UNDERSTANDING DESIGN PRINCIPLES Tweet! #WCNYC @studio404design
  4. 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. 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. 6. SYMMETRICAL Tweet! #WCNYC @studio404design
  7. 7. ASYMMETRICAL Tweet! #WCNYC @studio404design
  8. 8. DESIGN ELEMENTS PROPORTION Proportion is important and represents the scale of elements compared to each other. Tweet! #WCNYC @studio404design
  9. 9. PROPORTION Tweet! #WCNYC @studio404design
  10. 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. 11. RHYTHM Tweet! #WCNYC @studio404design
  12. 12. DESIGN ELEMENTS CREATIVE ELEMENTS • Color • Textures • Typography • Graphic Elements / Iconography • Photography Tweet! #WCNYC @studio404design
  13. 13. UNDERSTANDING DESIGN PRINCIPLES COMMON DESIGN MISTAKES • Overcrowded / Lack of Focus • Color Problems • Inconsistency • Non-Responsive Tweet! #WCNYC @studio404design
  14. 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. 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. 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. 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. 18. SECTION 2: LAYOUT Tweet! #WCNYC @studio404design
  19. 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. 20. DESIGN PRINCIPLES - LAYOUT Tweet! #WCNYC @studio404design
  21. 21. DESIGN PRINCIPLES - LAYOUT Tweet! #WCNYC @studio404design
  22. 22. DESIGN PRINCIPLES - LAYOUT Tweet! #WCNYC @studio404design
  23. 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. 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. 25. DESIGN PRINCIPLES - LAYOUT THE IMPORTANCE OF WHITE SPACE Tweet! #WCNYC @studio404design
  26. 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. 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. 28. SECTION 3: COLOR THEORY Tweet! #WCNYC @studio404design
  29. 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. 30. DESIGN PRINCIPLES - COLOR THEORY COLORS IN BRANDING & MARKETING Tweet! #WCNYC @studio404design
  31. 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. 32. DESIGN PRINCIPLES - COLOR THEORY REMEMBERING ACCESSIBILITY IN COLOR CHOICES Tweet! #WCNYC @studio404design
  33. 33. DESIGN PRINCIPLES - COLOR THEORY REMEMBERING ACCESSIBILITY IN COLOR CHOICES Tweet! #WCNYC @studio404design
  34. 34. DESIGN PRINCIPLES - COLOR THEORY REMEMBERING ACCESSIBILITY IN COLOR CHOICES Tweet! #WCNYC @studio404design
  35. 35. SECTION 4: TYPOGRAPHY Tweet! #WCNYC @studio404design
  36. 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. 37. DESIGN PRINCIPLES - TYPOGRAPHY USING WEB TYPOGRAPHY • Google Fonts • TypeKit • Hoefler & Co. - Cloud Typography Tweet! #WCNYC @studio404design
  38. 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. 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. 40. DESIGN PRINCIPLES - TYPOGRAPHY Tweet! #WCNYC @studio404design
  41. 41. DESIGN PRINCIPLES - TYPOGRAPHY Tweet! #WCNYC @studio404design
  42. 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

×