basic design principles for every wordpress user

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

Upload: angelica-yarde

Post on 22-Jan-2018

294 views

Category:

Design


1 download

TRANSCRIPT

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 wi l l be viewing the design and receiving the

communication. Remember that whi le your design

may look good, i t 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

distr ibuted throughout a layout. Balance is achieved

through shapes, colors, textures, l ines. Three types

of balance: symmetrical , asymmetrical , and radial .

Tweet! #WCNYC @studio404design

SYMMETRICAL

Tweet! #WCNYC @studio404design

ASYMMETRICAL

Tweet! #WCNYC @studio404design

DESIGN ELEMENTS

PROPORTION

Proport ion 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. I t

ensures the f low of the eye and in which order users

should see the elements. There are two types of

rhythms: the f luid 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 craft ing sites to provide an optimal viewing and

interaction experience—easy reading and navigation with a

minimum of resizing, panning, and scrol l ing—across a wide

range of devices (from desktop computer monitors to mobile

phones).

Tweet! #WCNYC @studio404design

NOT ACCESSIBILITY COMPATIBLE

WHAT IS WEB ACCESSIBILITY?

Web accessibi l i ty refers to the inclusive practice of

removing barr iers that prevent interaction with, or

access to websites, by people with disabi l i t ies. When

sites are correctly designed, developed and edited, al l

users have equal access to information and functional ity.

Tweet! #WCNYC @studio404design

NOT ACCESSIBILITY COMPATIBLE

TYPES OF DISABILITIES TO CONSIDER

• Vision Impairment

• Physical Handicap

• Speech recognit ion

• Head pointer

• Eye gaze systems

• Deaf or Hard Hearing

• Limited Bandwidth

Source: http://www.washington.edu/accessibi l i ty/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 overal l plan for the

arrangement of content. Layouts are usual ly

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 port ion of the page that is

lef t 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 al lows you to better

strategize your layout design. Having an idea of what

type of content you wil l be using gives you the

f lexibi l i ty to come up with dif ferent ways to arrange

your content.

Tweet! #WCNYC @studio404design

DESIGN PRINCIPLES - LAYOUT

ADVANCED CUSTOM FIELDS PRO

ACF Pro al lows users to have more control over

dif ferent types of content. I t offers f lexibi l i ty

and ease of use for forms, gal ler ies, and other

types of f lexible 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 inf luences perceptions that are

not obvious, such as the taste of food. Colors can also

enhance the effectiveness of placebos. For example, red

or orange pi l ls are general ly used as st imulants.

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 rat io at Level AA and a 7:1 contrast rat io at Level

AAA. You can use our contrast checker tool to determine what the

rat io 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 dist inguishing 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 s imple 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 def ine hierarchy – i t

can also be achieved with color, spacing and

weight.

• Make sure your header typography is able to be

dist inguished 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 s ize; anywhere from

1.25 to 1 .5 t imes.

Tweet! #WCNYC @studio404design

DESIGN PRINCIPLES - TYPOGRAPHY

Tweet! #WCNYC @studio404design

DESIGN PRINCIPLES - TYPOGRAPHY

Tweet! #WCNYC @studio404design

H E L LO WO R L D !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: [email protected]

Slideshare: www.sevenality.com/blog