Design for Developers SunshinePHP 2017

DESIGN for Developers

Kevin Bruce & Cathy Bruce

SunshinePHP • February 4, 2017

What is design?

SHAPE Color

Typography

Gestalt Theory

“Unified Whole”

Symmetry and Order

Symmetrical Balance

Asymmetrical Balance

Continuation

Closure

Figure-Ground

Proximity

Columns or Rows?

Proximity

Similarity

Mental Grouping

Linking Distant Objects

• Miami

• Pensacola

• Tampa

Focal Point

Isomorphic Correspondence

Grid System

Grids Define and

Reflect ProportionAlways proportionate to the size of the media canvas

(paper for print, window for electronic)

Modern Web Grid Systems

Grid Systems Responsive Design

Modern Web Grid Systems

Fibonacci Sequence

1 1

Fibonacci Sequence

1 1

2

Fibonacci Sequence

1 1

2 3

Fibonacci Sequence

1 1

2 3

5

Fibonacci Sequence

1 1

2 3

5

8

Fibonacci Sequence

Golden Ratio

Saturation / Chroma

Pure chroma No black or white added

Tint & Shade

Tint Shade

Original Blue

Monochromatic

Color Wheel

Primary Colors

Secondary Colors

Tertiary Colors

Analogous Colors

Complementary Colors

Triadic Colors

Types of color

Neutral Colors

Warm Colors

Cool Colors

Choosing & Matching Colors

Consistency in Use

Color ConnectionsBlue• Stability, confidence

• Used in high tech, medical, and corporate

Color ConnectionsPurple• Full of energy, without

message of warning

• Used by marketing, music, drugs, etc…

Color ConnectionsRed• Power, love, eroticism,

but also blood, danger & emergency

• Used by causes, politics, food, etc…

Color ConnectionsOrange• Warm, cheerful, but

also caution and anxiety if used too much

• Used by financial, publishing, and retail

Color ConnectionsYellow• Hope, joy, sunshine,

stay alert

• Used by beer, tourism, telecommunication, …and cabs

Color ConnectionsGreen• Growth, nature, wealth,

optimism, healthy

• Used by organic foods, energy, financial, and tourism

Resources

• Wikipedia—The Golden Ratio: https://en.wikipedia.org/wiki/Golden_ratio

• A Comprehensive Introduction to Color in Design: http://webdesign.tutsplus.com/articles/a-comprehensive-introduction-to-color-in-design--cms-26480

• How to Use the Psychology of Colors When Marketing https://smallbiztrends.com/2014/06/psychology-of-colors.html

https://en.wikipedia.org/wiki/Golden_ratio

http://webdesign.tutsplus.com/articles/a-comprehensive-introduction-to-color-in-design--cms-26480

https://smallbiztrends.com/2014/06/psychology-of-colors.html

Typography

Gotham PalatinoHummingbird

Gotham Medium

Palatino Bold Italic

Serif Typefaces

Palatino Bold

For as the one ship that held them all; though it was put together of all contrasting things—oak, and maple, and pine wood; iron, and pitch, and hemp—yet all these ran into each other in the one concrete hull, which shot on its way, both balanced and directed by the long central keel; even so, all the individualities of the crew, this man's valor, that man's fear; guilt and guiltiness, all varieties were welded into oneness, and were all directed to that fatal goal which Ahab their one lord and keel did point to.

Slab Serif

Sans Serif Typefaces

Monospace Typefaces

Script Typefaces

Boucherie Cursive

Snell Roundhand

Plea!, don’t do this:

F! a"the one#hip that held them all; though it wa"put t$ether of all contrasting thin%—&k, and maple, and pine wo'; iron, and pitch, and

hemp—yet all the()an into each other in the one concrete hull, which shot on it"way, both balanced and directed by the long central keel; even so, all the individualitie"of the crew, thi"man'"val!, that man'"fear; guilt and guiltine*, all varietie"were welded into onene*, and were all

directed to that fatal g&l which Ahab their one l!d and keel did point to.

Display Typefaces

Motter Corpus

Funkydori Grilled Cheese

How to choose fonts that look good… and

work

baseline

median

ascender height

descender height

cap height

x-heightSphere

For as the one ship that held them all; though it was put together of all contrasting things—oak, and maple, and pine wood; iron, and pitch, and hemp—yet all these ran into each other in the one concrete hull, which shot on its way, both balanced and directed by the long central keel; even so, all the individualities of the crew, this man’s valor, that man’s fear; guilt and guiltiness, all varieties were welded into oneness, and were all directed to that fatal goal which Ahab their one lord and keel did point to.

baseline

medianx-heighther

myriad pro

baseline

medianx-height

backtalk serif

herFor as the one ship that held them all; though it was put together of all contrasting things—oak, and maple, and pine wood; iron, and pitch, and hemp—yet all these ran into each other in the one concrete hull, which shot on its way, both balanced and directed by the long central keel; even so, all the individualities of the crew, this man’s valor, that man’s fear; guilt and guiltiness, all varieties were welded into oneness, and were all directed to that fatal goal which Ahab their one lord and keel did point to.

baseline

median

ascender height

descender height

cap heightSphereNeutraface TEXT book

baseline

median

ascender height

descender height

cap height

SphereNeutraface DISPLAY medium

For as the one ship that held them all; though it was put

together of all contrasting things—oak, and maple, and

pine wood; iron, and pitch, and hemp—yet all these ran

into each other in the one concrete hull, which shot on its

way, both balanced and directed by the long central keel;

even so, all the individualities of the crew, this man’s valor,

that man’s fear; guilt and guiltiness, all varieties were

welded into oneness, and were all directed to that fatal

goal which Ahab their one lord and keel did point to.

baseline

median

ascender height

descender height

cap heightSphere

Line height is the space between two baselines. It’s important to keep a consistent vertical rhythm. This is also known as a baseline grid.

For as the one ship that held them all; though it was p u t t o g e t h e r o f a l l contrasting things—oak, and maple, and pine wood; iron, and pitch, and hemp—yet all these ran into each other in the one concrete hull, which shot on its way, both balanced and directed by the long central keel; e v e n s o , a l l t h e individualities of the crew, this man’s valor, that man’s fear; guilt and guiltiness, all varieties were welded into oneness, and were all directed to that fatal goal which Ahab their one lord and keel did point to.

SAWSAW

T R A C K I N G

For as the one ship that held them all; though it was put together of all con-trasting things—oak, and maple, and pine wood; iron, and pitch, and hemp—yet all these ran into each other in the one concrete hull, which shot on its way, both balanced and directed by the long central keel; even so, all the in-dividualities of the crew, this man’s valor, that man’s fear; guilt and guiltiness, all varieties were welded into oneness, and were all directed to that fatal goal which Ahab their one lord and keel did point to.

For as the one ship that held them all; though it was put together of all contrasting things—oak, and maple, and pine wood; iron, and pitch, and hemp—yet all these ran into each other in the one concrete hull, which shot on its way, both balanced and directed by the long central keel; even so, all the indi-vidualities of the crew, this man’s valor, that man’s fear; guilt and guiltiness, all varieties were welded into oneness, and were all di-rected to that fatal goal which Ahab their one lord and keel did point to.

FONTPairings

Single Font Family

Raleway BlackRALEWAY LIGHT

Raleway Regular For as the one ship that held them all; though it was put together of all contrasting things—oak, and maple, and pine wood; iron, and pitch, and hemp—yet all these ran into each other in the one concrete hull, which shot on its way, both balanced and direct-ed by the long central keel; even so, all the individualities of the crew, this man’s valor, that man’s fear; guilt and guiltiness, all varieties were welded into oneness, and were all directed to that fatal goal which Ahab their one lord and keel did point to.

72 pt10 letterspacing


uppercase

18 pt

Display + One Font

GRAVITAS ONE

SOURCE SANS PRO SEMIBOLD

Source Sans Pro Regular. For as the one ship that held them all; though it was put together of all con-trasting things—oak, and maple, and pine wood; iron, and pitch, and hemp—yet all these ran into each other in the one concrete hull, which shot on its way, both balanced and directed by the long central keel; even so, all the individualities of the crew, this man’s valor, that man’s fear; guilt and guiltiness, all varieties were welded into oneness, and were all directed to that fatal goal which Ahab their one lord and keel did point to.



small caps

18 pt

Multiple fonts

CINZEL REGULARMONTSERRAT REGULAR

Lora Regular. For as the one ship that held them all; though it was put together of all contrasting things—oak, and maple, and pine wood; iron, and pitch, and hemp—yet all these ran into each other in the one concrete hull, which shot on its way, both balanced and directed by the long central keel; even so, all the individualities of the crew, this man’s valor, that man’s fear; guilt and guiltiness, all varieties were welded into oneness, and were all directed to that fatal goal which Ahab their one lord and keel did point to.



uppercase

14 pt

typecast.com

http://typecast.com

3 Pet Peevestypography

�NO!�″NO!″

“YES!”

“YES!”

“ ”

Three periods...Ellipsis…

&hellip:

–

hyphen-

en dash–

em dash——

hot water bottle

hot-water bottle

–

hyphen-

en dash–

em dash——

pages 45–49

October–December 2016

–

hyphen-

en dash–

em dash——

Maximize your getaway by staying in a neighborhood

you want to explore — you will probably be able to

get around by walking or biking and won’t waste time

commuting to other parts of town.

fonts.google.com

www.typography.com

www.myfonts.com

www.linotype.com

www.fontspring.com

Font Resources

http://www.linotype.com

http://www.fontspring.com

Gestalt + Grids + Color + Typography=

Beautiful Websites

Thank you.

Don’t forget to rate us on join.in! https://joind.in/talk/a5fda

Slide link will be posted in the comments.

https://joind.in/talk/a5fda

Design for Developers SunshinePHP 2017

Design

Transcript of Design for Developers SunshinePHP 2017