SlideShare a Scribd company logo
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
Tweet! #WCNYC @studio404design
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
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
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
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! #WCNYC @studio404design
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. 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
RHYTHM
Tweet! #WCNYC @studio404design
DESIGN ELEMENTS
CREATIVE ELEMENTS
• Color
• Textures
• Typography
• Graphic Elements / Iconography
• Photography
Tweet! #WCNYC @studio404design
UNDERSTANDING DESIGN PRINCIPLES
COMMON DESIGN MISTAKES
• Overcrowded / Lack of Focus
• Color Problems
• Inconsistency
• Non-Responsive
Tweet! #WCNYC @studio404design
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
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
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
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
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 usually
structured during the wireframe process.
Tweet! #WCNYC @studio404design
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 strategy.
Remember, design in the absence of content is
just decoration.
Tweet! #WCNYC @studio404design
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
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 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
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
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. 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
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 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
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 generously.
Source: https://premium.wpmudev.org/blog/typography-tips
Tweet! #WCNYC @studio404design
DESIGN PRINCIPLES - TYPOGRAPHY
USING WEB TYPOGRAPHY
• Google Fonts
• TypeKit
• Hoefler & Co. - Cloud Typography
Tweet! #WCNYC @studio404design
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
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
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 of Heart + Hustle Podcast
Twitter: @studio404design
E-mail: angel@sevenality.com
Slideshare: www.sevenality.com/blog

More Related Content

Similar to Basic Design Principles for Every WordPress User

Overcoming the Challenges to Creating an Online User Experience
Overcoming the Challenges to Creating an Online User ExperienceOvercoming the Challenges to Creating an Online User Experience
Overcoming the Challenges to Creating an Online User Experience
Rachel Vacek
 
UI/UX Fundamentals
UI/UX FundamentalsUI/UX Fundamentals
UI/UX Fundamentals
Dijup Tuladhar
 
Intro to UX Design
Intro to UX DesignIntro to UX Design
Intro to UX Designjayyearley
 
How to create accessible websites - WordCamp New York
How to create accessible websites - WordCamp New YorkHow to create accessible websites - WordCamp New York
How to create accessible websites - WordCamp New York
Rachel Cherry
 
The school’s guide to modern design trends corwin bermudez
The school’s guide to modern design trends   corwin bermudezThe school’s guide to modern design trends   corwin bermudez
The school’s guide to modern design trends corwin bermudezBlackbaud
 
Combined Presentation
Combined PresentationCombined Presentation
Combined Presentation
Devon Walker
 
UX Without Documentation
UX Without DocumentationUX Without Documentation
UX Without Documentation
Comrade
 
How to create accessible websites - WordCamp Boston
How to create accessible websites - WordCamp BostonHow to create accessible websites - WordCamp Boston
How to create accessible websites - WordCamp Boston
Rachel Cherry
 
Hiring - Discovery Education
Hiring - Discovery EducationHiring - Discovery Education
Hiring - Discovery Education
Logan D.
 
TrueSpirit.com Case Study
TrueSpirit.com Case StudyTrueSpirit.com Case Study
TrueSpirit.com Case Study
Roxanne Mustafa
 
How to Create Content for SEO That Earns Me Links?
How to Create Content for SEO That Earns Me Links?How to Create Content for SEO That Earns Me Links?
How to Create Content for SEO That Earns Me Links?
Digital Third Coast
 
Designing for Interactive User Interfaces
Designing for Interactive User InterfacesDesigning for Interactive User Interfaces
Designing for Interactive User Interfaces
Freerange Future
 
Designing for Interactive User Interfaces
Designing for Interactive User InterfacesDesigning for Interactive User Interfaces
Designing for Interactive User Interfaces
Kieran Wallis
 
Designing for Interactive User Interfaces
Designing for Interactive User InterfacesDesigning for Interactive User Interfaces
Designing for Interactive User Interfaces
Kieran Wallis
 
Designers whodoeswhatsps2019
Designers whodoeswhatsps2019Designers whodoeswhatsps2019
Designers whodoeswhatsps2019
Jeanndre Spies
 
Garbage In, Garbage Out: Optimizing Design Inputs for Successful Prototypes
Garbage In, Garbage Out: Optimizing Design Inputs for Successful PrototypesGarbage In, Garbage Out: Optimizing Design Inputs for Successful Prototypes
Garbage In, Garbage Out: Optimizing Design Inputs for Successful Prototypes
Kamaria Campbell
 
Designing for the User
Designing for the UserDesigning for the User
Designing for the User
Devon Walker
 
Triple Crown of Custom Content - IA Strategy Session
Triple Crown of Custom Content - IA Strategy SessionTriple Crown of Custom Content - IA Strategy Session
Triple Crown of Custom Content - IA Strategy Session
Gloria Antonelli
 
Colorblindness and design
Colorblindness and design Colorblindness and design
Colorblindness and design
kaikikazuki
 

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

Overcoming the Challenges to Creating an Online User Experience
Overcoming the Challenges to Creating an Online User ExperienceOvercoming the Challenges to Creating an Online User Experience
Overcoming the Challenges to Creating an Online User Experience
 
UI/UX Fundamentals
UI/UX FundamentalsUI/UX Fundamentals
UI/UX Fundamentals
 
Intro to UX Design
Intro to UX DesignIntro to UX Design
Intro to UX Design
 
How to create accessible websites - WordCamp New York
How to create accessible websites - WordCamp New YorkHow to create accessible websites - WordCamp New York
How to create accessible websites - WordCamp New York
 
The school’s guide to modern design trends corwin bermudez
The school’s guide to modern design trends   corwin bermudezThe school’s guide to modern design trends   corwin bermudez
The school’s guide to modern design trends corwin bermudez
 
Combined Presentation
Combined PresentationCombined Presentation
Combined Presentation
 
UX Without Documentation
UX Without DocumentationUX Without Documentation
UX Without Documentation
 
How to create accessible websites - WordCamp Boston
How to create accessible websites - WordCamp BostonHow to create accessible websites - WordCamp Boston
How to create accessible websites - WordCamp Boston
 
Hiring - Discovery Education
Hiring - Discovery EducationHiring - Discovery Education
Hiring - Discovery Education
 
TrueSpirit.com Case Study
TrueSpirit.com Case StudyTrueSpirit.com Case Study
TrueSpirit.com Case Study
 
How to Create Content for SEO That Earns Me Links?
How to Create Content for SEO That Earns Me Links?How to Create Content for SEO That Earns Me Links?
How to Create Content for SEO That Earns Me Links?
 
Designing for Interactive User Interfaces
Designing for Interactive User InterfacesDesigning for Interactive User Interfaces
Designing for Interactive User Interfaces
 
Designing for Interactive User Interfaces
Designing for Interactive User InterfacesDesigning for Interactive User Interfaces
Designing for Interactive User Interfaces
 
Designing for Interactive User Interfaces
Designing for Interactive User InterfacesDesigning for Interactive User Interfaces
Designing for Interactive User Interfaces
 
Designers whodoeswhatsps2019
Designers whodoeswhatsps2019Designers whodoeswhatsps2019
Designers whodoeswhatsps2019
 
Garbage In, Garbage Out: Optimizing Design Inputs for Successful Prototypes
Garbage In, Garbage Out: Optimizing Design Inputs for Successful PrototypesGarbage In, Garbage Out: Optimizing Design Inputs for Successful Prototypes
Garbage In, Garbage Out: Optimizing Design Inputs for Successful Prototypes
 
UX101
UX101UX101
UX101
 
Designing for the User
Designing for the UserDesigning for the User
Designing for the User
 
Triple Crown of Custom Content - IA Strategy Session
Triple Crown of Custom Content - IA Strategy SessionTriple Crown of Custom Content - IA Strategy Session
Triple Crown of Custom Content - IA Strategy Session
 
Colorblindness and design
Colorblindness and design Colorblindness and design
Colorblindness and design
 

More from Angelica Yarde

Starting Your Podcasting Journey
Starting Your Podcasting JourneyStarting Your Podcasting Journey
Starting Your Podcasting Journey
Angelica Yarde
 
Optimizing Your WordPress Blog
Optimizing Your WordPress BlogOptimizing Your WordPress Blog
Optimizing Your WordPress Blog
Angelica Yarde
 
Growing Your Blog into a Podcast
Growing Your Blog into a PodcastGrowing Your Blog into a Podcast
Growing Your Blog into a Podcast
Angelica Yarde
 
#Blogalicious8 - Content Strategies for WordPress
#Blogalicious8 - Content Strategies for WordPress#Blogalicious8 - Content Strategies for WordPress
#Blogalicious8 - Content Strategies for WordPress
Angelica Yarde
 
Creating Content Strategies for WordPress
Creating Content Strategies for WordPressCreating Content Strategies for WordPress
Creating Content Strategies for WordPress
Angelica Yarde
 
Content Strategies for WordPress
Content Strategies for WordPressContent Strategies for WordPress
Content Strategies for WordPress
Angelica Yarde
 
WordCamp Orlando 2015 - WordPress for Everyone
WordCamp Orlando 2015 - WordPress for EveryoneWordCamp Orlando 2015 - WordPress for Everyone
WordCamp Orlando 2015 - WordPress for Everyone
Angelica Yarde
 
WordCamp Content Workshop 2015
WordCamp Content Workshop 2015WordCamp Content Workshop 2015
WordCamp Content Workshop 2015
Angelica Yarde
 

More from Angelica Yarde (8)

Starting Your Podcasting Journey
Starting Your Podcasting JourneyStarting Your Podcasting Journey
Starting Your Podcasting Journey
 
Optimizing Your WordPress Blog
Optimizing Your WordPress BlogOptimizing Your WordPress Blog
Optimizing Your WordPress Blog
 
Growing Your Blog into a Podcast
Growing Your Blog into a PodcastGrowing Your Blog into a Podcast
Growing Your Blog into a Podcast
 
#Blogalicious8 - Content Strategies for WordPress
#Blogalicious8 - Content Strategies for WordPress#Blogalicious8 - Content Strategies for WordPress
#Blogalicious8 - Content Strategies for WordPress
 
Creating Content Strategies for WordPress
Creating Content Strategies for WordPressCreating Content Strategies for WordPress
Creating Content Strategies for WordPress
 
Content Strategies for WordPress
Content Strategies for WordPressContent Strategies for WordPress
Content Strategies for WordPress
 
WordCamp Orlando 2015 - WordPress for Everyone
WordCamp Orlando 2015 - WordPress for EveryoneWordCamp Orlando 2015 - WordPress for Everyone
WordCamp Orlando 2015 - WordPress for Everyone
 
WordCamp Content Workshop 2015
WordCamp Content Workshop 2015WordCamp Content Workshop 2015
WordCamp Content Workshop 2015
 

Recently uploaded

一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
h7j5io0
 
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
h7j5io0
 
Expert Accessory Dwelling Unit (ADU) Drafting Services
Expert Accessory Dwelling Unit (ADU) Drafting ServicesExpert Accessory Dwelling Unit (ADU) Drafting Services
Expert Accessory Dwelling Unit (ADU) Drafting Services
ResDraft
 
一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理
一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理
一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理
smpc3nvg
 
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
ameli25062005
 
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
7sd8fier
 
Moldes de letra 3D Alfabeto completo esp
Moldes de letra 3D Alfabeto completo espMoldes de letra 3D Alfabeto completo esp
Moldes de letra 3D Alfabeto completo esp
Hess9
 
Research 20 slides Amelia gavryliuks.pdf
Research 20 slides Amelia gavryliuks.pdfResearch 20 slides Amelia gavryliuks.pdf
Research 20 slides Amelia gavryliuks.pdf
ameli25062005
 
Portfolio.pdf
Portfolio.pdfPortfolio.pdf
Portfolio.pdf
garcese
 
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
smpc3nvg
 
projectreportnew-170307082323 nnnnnn(1).pdf
projectreportnew-170307082323 nnnnnn(1).pdfprojectreportnew-170307082323 nnnnnn(1).pdf
projectreportnew-170307082323 nnnnnn(1).pdf
farazahmadas6
 
Top Israeli Products and Brands - Plan it israel.pdf
Top Israeli Products and Brands - Plan it israel.pdfTop Israeli Products and Brands - Plan it israel.pdf
Top Israeli Products and Brands - Plan it israel.pdf
PlanitIsrael
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
cy0krjxt
 
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
gpffo76j
 
Can AI do good? at 'offtheCanvas' India HCI prelude
Can AI do good? at 'offtheCanvas' India HCI preludeCan AI do good? at 'offtheCanvas' India HCI prelude
Can AI do good? at 'offtheCanvas' India HCI prelude
Alan Dix
 
LORRAINE ANDREI_LEQUIGAN_HOW TO USE TRELLO
LORRAINE ANDREI_LEQUIGAN_HOW TO USE TRELLOLORRAINE ANDREI_LEQUIGAN_HOW TO USE TRELLO
LORRAINE ANDREI_LEQUIGAN_HOW TO USE TRELLO
lorraineandreiamcidl
 
一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理
一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理
一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理
h7j5io0
 
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANEEASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
Febless Hernane
 
Technoblade The Legacy of a Minecraft Legend.
Technoblade The Legacy of a Minecraft Legend.Technoblade The Legacy of a Minecraft Legend.
Technoblade The Legacy of a Minecraft Legend.
Techno Merch
 
RTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,DRTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,D
cy0krjxt
 

Recently uploaded (20)

一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
一比一原版(Bolton毕业证书)博尔顿大学毕业证成绩单如何办理
 
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
一比一原版(BU毕业证书)伯恩茅斯大学毕业证成绩单如何办理
 
Expert Accessory Dwelling Unit (ADU) Drafting Services
Expert Accessory Dwelling Unit (ADU) Drafting ServicesExpert Accessory Dwelling Unit (ADU) Drafting Services
Expert Accessory Dwelling Unit (ADU) Drafting Services
 
一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理
一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理
一比一原版(Bristol毕业证书)布里斯托大学毕业证成绩单如何办理
 
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
Коричневый и Кремовый Деликатный Органический Копирайтер Фрилансер Марке...
 
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
一比一原版(UNUK毕业证书)诺丁汉大学毕业证如何办理
 
Moldes de letra 3D Alfabeto completo esp
Moldes de letra 3D Alfabeto completo espMoldes de letra 3D Alfabeto completo esp
Moldes de letra 3D Alfabeto completo esp
 
Research 20 slides Amelia gavryliuks.pdf
Research 20 slides Amelia gavryliuks.pdfResearch 20 slides Amelia gavryliuks.pdf
Research 20 slides Amelia gavryliuks.pdf
 
Portfolio.pdf
Portfolio.pdfPortfolio.pdf
Portfolio.pdf
 
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
一比一原版(Brunel毕业证书)布鲁内尔大学毕业证成绩单如何办理
 
projectreportnew-170307082323 nnnnnn(1).pdf
projectreportnew-170307082323 nnnnnn(1).pdfprojectreportnew-170307082323 nnnnnn(1).pdf
projectreportnew-170307082323 nnnnnn(1).pdf
 
Top Israeli Products and Brands - Plan it israel.pdf
Top Israeli Products and Brands - Plan it israel.pdfTop Israeli Products and Brands - Plan it israel.pdf
Top Israeli Products and Brands - Plan it israel.pdf
 
Design Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinkingDesign Thinking Design thinking Design thinking
Design Thinking Design thinking Design thinking
 
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
 
Can AI do good? at 'offtheCanvas' India HCI prelude
Can AI do good? at 'offtheCanvas' India HCI preludeCan AI do good? at 'offtheCanvas' India HCI prelude
Can AI do good? at 'offtheCanvas' India HCI prelude
 
LORRAINE ANDREI_LEQUIGAN_HOW TO USE TRELLO
LORRAINE ANDREI_LEQUIGAN_HOW TO USE TRELLOLORRAINE ANDREI_LEQUIGAN_HOW TO USE TRELLO
LORRAINE ANDREI_LEQUIGAN_HOW TO USE TRELLO
 
一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理
一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理
一比一原版(UCB毕业证书)伯明翰大学学院毕业证成绩单如何办理
 
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANEEASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
EASY TUTORIAL OF HOW TO USE CAPCUT BY: FEBLESS HERNANE
 
Technoblade The Legacy of a Minecraft Legend.
Technoblade The Legacy of a Minecraft Legend.Technoblade The Legacy of a Minecraft Legend.
Technoblade The Legacy of a Minecraft Legend.
 
RTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,DRTUYUIJKLDSADAGHBDJNKSMAL,D
RTUYUIJKLDSADAGHBDJNKSMAL,D
 

Basic Design Principles for Every WordPress User

  • 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
  • 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
  • 8. DESIGN ELEMENTS PROPORTION Proportion is important and represents the scale of elements compared to each other. 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
  • 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
  • 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
  • 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