Post on 22-Jan-2018
transcript
OVERVIEW
• Section 1: Understanding Design Principles
• Section 2: Layout
• Section 3: Color Theory
• Section 4: Typography
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
DESIGN ELEMENTS
PROPORTION
Proport ion is important and represents the
scale of elements compared to each other.
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
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
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
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
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
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
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: angel@sevenality.com
Slideshare: www.sevenality.com/blog