fundamental of design-code school

8/10/2019 Fundamental of Design-code School

1/201


2/201

Content is Kinge designers one essential tk to interpretand communicate the content

DESIGN THEORY 101:


3/201

Design studios formal mission statement targetingbusiness leaders who are looking to bring their compan

out of the analog-only world.

CONTENT:


4/201

Elegant, simple and large pe that intentionally mhes wirregular shapes to reinforce their grp on the tension be

old business and new technology.


5/201

Playfully themed lm festival for horror entertainment entsupporting local business and the common good.

CONTENT:


6/201

Decorative, sketched pe at varying sizes and angles create a

dynamic without being overtly dark or graphic, so to remain


7/201

Audience: Age? Race? Gender? Cultural Nich

Tone: Casual? Formal? Friendly? Sarcastic?

Purpose: Informational? Conversions?

Aributes that Inuence Design


8/201

CHAPTER 1

Typography


9/201

Typography

Sle GuideReference document with sles for multipleinstances throughout your application

LETS CREATE A


10/201

Headline Text

B-Head (Or Sub-Head) Text

Nav Item 1 | Nav Item 2 | Nav Item 3

Byline Text on July 5th, 1987

This is body copy. Lorem ipsum dolor sit amet, con-

sectetur adipisicing elit, sed do eiusmod tempor incid-

idunt ut labore et dolore magna aliqua. Ut enim ad

minim veniam, quis nostrud exercitation ullamco

laboris nisi ut aliquip ex ea commodo consequat.


11/201

Just Plain Awful

Typography

Good fonts are oen taken for granted with the thousandeily availablefonts. Invest the time to choose goopefaces that will really complement the content well

SOME FONTS ARE


12/201

Verbal Visuale reader surveys the overall graphical paerns of the

page, and then parse the language and read.

TYPOGRAPHY IS BOTH

Typography


13/201

Serifs are the small lines tailingom the edges of leer

Typography


14/201

Typography

Classic TraditionalHUMANIST

Great for journalm or htorical applications

Emulates Calligraphy contrasting strokes


15/201

Typography

Great for traditional academia and legal applications

TRANSITIONAL

Strong, Slish, Dynamic

Sharper serif

More contrasting strokes


16/201

Typography

Great for arts and culture a lications

MODERN

Structured, Clear, Elegant

Thin, horizontalserif

High contrast stroke


17/201

Typography

Great for marketing and promotional applications

EGYPTIAN (SLAB SERIF)

Authoritative, yet iendly

Heavy, boxyserifs

Very Low contrast stroke


18/201

Fonts that lack serifs are called sans-serif

Typography


19/201

Typography

Great for government or education applications

HUMANIST SANS SERIF

Tension ben perfect and imperfec

Emulates Calligraphy

contrasting strokes


20/201

Typography

Great for technology or transportation applications

TRANSITIONAL SANS SERIF

Unassuming Modern

Upright, uniformcharacters

Strong strokes


21/201

Typography

Great for a science or architecture application

GEOMETRIC SANS SERIF

Strict, Objective Universal

Geometric shapes form thebackbones of the letters


22/201

Mimics handwriting or calligraphy

Typography


23/201

Typography


24/201

Comic Sans a script font, and shouldnever be used for body copy

Typography


25/201

Typography

Mix MingleWhile one peface oen enough, adding

another peface can create a beautiful effect.

FEEL FREE TO


26/201

Using a serif for headline text and sans serif for body copy vice versa the simplest way to mix pefaces.


27/201

Typography

From The Same Style

ese fonts are too close to one another to really look goo

DONT CHOOSE TWO FONTS

Epic (HGaramond

(Humanist serif)


28/201

Typography

From The Same Clas

Unless you really know your pefaces, its difficult to choo serifs oro sans that actually complement one anoth

GOING FURTHER, DONT CHOOSE TWO FON

Epic (H

Agora

(Slab Serif)


29/201

Typography

Find a Similar Trait

Using fonts that share one thing in common but are otherdifferent (like a humant sans and serif) creates a great pa

WHEN MIXING CLASSES

Epic (Humanist

Myriad (Humanist Sans)


30/201

Typography

Be Largely Abstract

Like theseo fonts, that were both designed by Eric GiSimilarities in chronology, vual details or peface desigben otherwe different fonts create great pairings

THAT TRAIT CAN EVEN

Perpetua (Transitiona

Gill Sans (Humanist Sans)


31/201

Typography

Contrast Over HarmoA good rule to follow when searching for pefaces to use alo

each other: Kp it exactly the same or change it a lot

STRIVE FOR


32/201

TypographyA geometric sans used sparingly headline and pull-quote t

transitional serif body-copy creates a great pairing


33/201

TypographyUsing a script next to a geometric sans aboutmuch contrty

variance in handwriting vs. the objectiviof shapes can be s


34/201

Typography

Single Typeface is Ok

Many font families are versatile enough to only use oyour entire project. For the beginning designer, th

DONT FEEL OBLIGATED


35/201

Typographye entire Code School site designed using the different we

just one sans-serif font family.


36/201

Typography

Use Web Licensed Fonen use a font-face generator to prepare all the css

includes andles for use in your project.

DONT BE A PIRATE


37/201

Type SizeOnce weve selected a font, we nd to set the sizes in ouguide. Butrst, lets take a quiz.

STEP TWO

Typography


38/201

WHAT DO YOU SEE?

Two squares? A blue and a grn square? A big and a small s

Typography


39/201

Its How We ProcesWe relate thto that in order to understand things

HUMANS CREATE RELATIONSHIPS

Typography


40/201

Visual HierarchyCreate vual relationships ben elements in your desthat users can latch on to. If they cant latch on, theyll le

ESTABLISH

Typography


41/201

Informative site promoting a new ist on atraditional everyday food item, dipping sauce.

CONTENT:

Typography


42/201

Typography

Use large, handwrien pe and lifelike photographielements strewn about in an apparently chaotic manne

order to add vual intrigue to a mundane item.


43/201

Differences in Sizee eye naturally movesom big elements down to the sm

elements, and helps users process the content

VISUAL HIERARCHY 101

Typography


44/201

Difficult-to-processsea of text

Typography

Variance gives a


45/201

Variance gives auser somethingto latch on to

Typography


46/201

Headline Text

B-Head (Or Sub-Head) TextNav Item 1 | Nav Item 2 | Nav Item 3





minim veniam, quis nostrud exercitation ullamco

laboris nisi ut aliquip ex ea commodo consequat.


47/201

Seing Body Copyere no golden standard, good designers advocate for b

copy anywhereom 16 - 26px

START WITH

Typography

W ll


48/201

Well-respecuses 1


49/201


50/201

Huge pe is annoyinFor thcourse, were going to suggest 16px the ideal b

copy size. Weigh each ce individually.

PERSONALLY,

Typography

B d


51/201

Body c

Headline TextB-Head (Or Sub-Head) Text

Nav Item 1 | Nav Item 2 | Nav Item 3





minim veniam, quis nostrud exercitation ullamcolaboris nisi ut aliquip ex ea commodo consequat.

Body copy at 150%

Body copy at 1

Body copy

Body copy at 75%(2-4 px smaller)

Typography

Leading is the ambetween lin


52/201

between lin

Leading that is tonegatively affects re


53/201

t t

Leading that is too tight can create aclaustrophobic feel and rush the reader


54/201

claustrophobic feel and rush the reader

Typography

Good leading is around 120-150%of the body copy size


55/201

Typography


56/201

Typography

line-height: 1.5;

SET LEADING RELATIVELY

sets the leading to be 150% of the body copy, so yodont have to re-adjust if the font size changes.


57/201

Use Bold/Italic WeighDifferent weights add emphand intrigue.

ANOTHER VISUAL HIERARCHY TOOL

Typography

Too much bold canmuddy your hierarchy


58/201

Typography

So can weights that goagainst the natural value


59/201

Typography

against the natural value

Use a less is more approach toreally enhance your hierarchy


60/201

Typography

y y y


61/201

Line-WidthNEXT UP:

Typography

Lines that are too short aredifficult to read


62/201

Typography

t t

Lines that are too long arealso tough to read


63/201

Typography

also tough to read


64/201

Measured in CPL

Characters per line, 50-70(including spaces) optima

LINE WIDTH IS

Typography

55-65 CPL


65/201

Typography

As the type size in


66/201

Typography

As th typ s z line-width also inc

the CPL remains


67/201

IN THE CSS, USE

Typography

max-width: ;

1000px


68/201

Typography

55-65 CPL

fon2

630px

Even though our browser window 1000px wide, our contenmax-width of 630px, in order to preserve optimal line-wi


69/201

Typography

20-25 CPL

font-size

26px


70/201

Typography

30-40 CPL

font-size16px


71/201

TypographyWhen viewing on the desktop, the max-width set to730px with a font-size of 22px, averaging 70-80 CPL


72/201

TypographyBut on mobile devices, its 360px with a font-size of 19p

Leaving us with an average CPL of 40-45


73/201

Save the Orphans

And the Widows, they nd to be saved too.

FINALLY

Typography


74/201

Typography

Widow :(


75/201

Typography

Orphan :( :(


76/201

A Perfect SolutionEspecially when dealing with large blocof content, therealways a way to prevent it. Try eaking with font size, we

line width or leading tox the problem

THERE REALLY ISNT

Typography

Color you can touch

COLOR THEORY 101


77/201

Colors

Color you can touch Color you cant to

Subtractive Color Additive Colo

Vs.

SUBTRACTIVE COLOR (CMYK)

All colors mix to yield black


78/201

Colors

Cyan ma

yellow

black

ADDITIVE COLOR (RGB)All colors mix to yield white


79/201

red g

blue

white


80/201

Humans Process HSHue, Saturation, Lightness

RGB IS HARD

Colors

Red (0)


81/201

Hue

Green (120)Blue (240)


82/201

Saturation

0% 100%


83/201

Lightness

0% 100%50%


84/201

025%50%

H:S:L:

0100%50%

H:S:L:

0100%75%

H:S:

L:

0100%

25%

H:S:

L:

Colors


85/201

HSL COLOR SPACE

Colors

e entire color space can bevualized in a 3D cylinder, letsat each dimension individually.

Hue


86/201

Hue

STEP ONE

Colors

Hue


87/201

Saturation

STEP TWO

0%100%

Colors

Saturation 0%100%


88/201

Lightness

STEP THREE

t t 0%100%

0%

Colors

Try to


89/201

Try tovisualize

the cylinder

Colors


90/201

+

0100%50%

=H:S:L:

Colors


91/201

+ =H:S:L:

Colors


92/201

+ =H:S:L:

Colors

Brightness


93/201

Colors

Lightness


94/201

A Color Scheme4-5 colors built into the sle guide

NOW WE NEED

Colors

Headline Text


95/201

Colors

B-Head (Or Sub-Head) Text

!"# %&'( ) * !"# %&'( + * !"# %&'( ,

!"#$%& (&)* +% ,-#" .*/0 1234

(/$5 $5 6+7" 8+9": ;+=&*0 8+%5&8*&*-< >7$9$5$8$%? $*0 5&7 7+ &$-5

=+7 *&=9+< $%8$7$7-%* -* #>6+ >#$A->: B* &%$= >7 =$%$= C&%$>=0 A-

%+5*=8+ #>6+#$A-$9 &) &> 8+==+7+ 8+%5&A->*:


96/201

Colors

A Base ColorDifferent colors create different moods.

START BY SELECTING

Ever seen this before?


97/201

Colors

How about this?


98/201

Colors

Eily grabs aention and evokes spd and energy.Heat, Passion, Excitement


99/201

Colors

Associated with reliabiliand playfulnessWarmth, Vitali


100/201

Colors

Represents sunshine, chr and happinessOptimism, Creativi


101/201

Colors

Connotes growth, nature andeshnessSereni, Health


102/201

Colors

Implies loyal, reliabiliand an open communicationSecuri, Truth, Stabili


103/201

Colors

Can also mean royal, sentimental, creative and sophticaSpirituali, Intelligence, Wealth


104/201

Colors

Conveys energy, fun and excitementYouthful intensi


105/201

Colors

Represents age, stabiliand relaxationDurabili, Class


106/201

Colors

Its serious, bold and strongPower, Drama


107/201

Colors

Its message youthful, mild and pureSimplici, Cleanliness


108/201

Colors

Kp Culture in MinDifferent colors mean different things to

different demographics

ALWAYS REMEMBER

Conveys intensior energyWESTERN


109/201

Colors

Good luck color

CHINESE

Color of mourningSOUTH AFRICAN

Associated with communismRUSSIAN

MONOCHROMATICAll colors have the same hue but vary in saturation brig


110/201

Colors

201100%

75%

H:S:

L:

20159%

26%

H:S:

L:

201100%

62%

H:S:

L:

20130%

32%

H:S:

L:

Constant Hue

ANALOGOUSColors adjacent to the be color on the hue spectrum


111/201

Colors

166100%

59%

H:S:

L:

18677%

53%

H:S:

L:

201100%

62%

H:S:

L:

22278%

51%

H:S:

L:

Descending Hue Ascending Hue

COMPLEMENTARYColors opposite to the be color on the hue spectrum


112/201

Colors

201100%

92%

H:S:

L:

20171%

37%

H:S:

L:

201100%

62%

H:S:

L:

2185%

34%

H:S:

L:

Same Hue Opposite Hue

Hue 30


113/201

ColorsComplementary Colors

Hue 210


114/201

Colors

Explore the World of CAn objectively correct color scheme can still suck

THERE ARE MANY MORE

COMPLEMENTARY


115/201

Colors

Gross

COMPLEMENTARY


116/201

Colors

Dont have to be perfeUse the named schemesa be,eaknded

COLOR SCHEMES


117/201

Color TypeMIXING

Colors

Type color must be high contrt on the background


118/201

Difference in ColorsLets look at Hue, Saturation Brightness

CONTRAST IS THE

Colors

Hue 30


119/201

ColorsContrt of Hue

Hue 120


120/201

Colors

Contrt of Saturation

210100%50%

H:S:L:

21050%50%

H:S:L:


121/201

Colors

Contrt of Lightness

210100%75%

H:S:L:

210100%50%

H:S:L:


122/201

Multi-facetedIts common to combine contrts of Hue, Saturation or Brig

MOST CONTRASTS ARE

Colors

is is hard toread amirite?


123/201

Colors

Contrt of Hue

read, amirite?

is is similarlyhard to consume

OMG thatsmuch beer


124/201

Colors

Contrt of Hue Brightness

much beer

Now my eyesdont hurt

Even Beer


125/201

Colors

Contrt of Hue, Saturation Brightness

Fo Realz, yo


126/201

WCAG 2Web Content AccessibiliGuidelines

THERE ARE STANDARDS FOR THAT

Colors

e best contrast


127/201

Colors

Very simple, high-contrt colors are best

Is black on white

Same hue, high sa bright contrast


128/201

Colors

Very simple, high-contrt colors are best

bright contrast

Are a close second

If youre color

bli d thi h ld


129/201

Colors

Some colors are intrinsically tough for humans to differen

blind, this should

be especially

tough for you.

is is awkward


130/201

Colors

Dontght nature

Abraham Lincoln

is is awkward

Abraham Lincoln


131/201

Colors

Youll lose

Abraham Lincoln

So much beer

Whew

Example text

Warm Cool


132/201

Colors

Warm cold colors dont contrt well for pe

is geing tough to

make up. Go away.

Warm colors appear closer


133/201

Colors

But work well to create depth

So using background


134/201

Visual HierarchyUse the color differences weve learned to contribute

to relationships ben elements on the page

COMBINE COLORS TO REINFORCE

Colors

Background color darker, anchoring


135/201


136/201


137/201

Overlaying a paern and darkening the photo can reallytext stand out on the page

TYPE IN AN IMAGE


138/201

Dont Do It

Colors

Unless its a picture of a cat thinking like a human


139/201

Colors

A combination of analogcomplementary colors wenough contrt for text and backgrounds.


140/201

ComplemeHigh-contrasttext/bg colors

LAYOUT


141/201

Visual Hierarchy, AgaArrange elements to engage and

direct the users eye

LAYOUT

Layout


142/201

Layout

Users start at the top lecorner of thepage and then scanom there.


143/201

Layout

Start with placing the logo


144/201

Layout

Navigation can be horizontal or vertical


145/201

Horizontal ideal for navigations with only a few item


146/201

ough vertical worwell in a similar fhion


147/201

Vertical great when youve got a lot of nested page


148/201

ough if you drop your horizontal below the logo, a tiesystem with lots of items work well


149/201

Layout

Both layouts are great for drop-downs


150/201

LayoutAmazonsy-out vertical menu worvery well


151/201

LayoutESPN ha great horizontal drop down

VERTICAL NAVIGATION


152/201

Isnt Really Used MucWhile it does work, make sure youve got a good

reon to use it!

VERTICAL NAVIGATION

Layout


153/201

Layout

e main content area can be under a horizontal nav


154/201

Layout

Or next to a vertical nav

MAKE SURE THE CONTENT


155/201

Reinforces the HierarcUse images that face in, place text appropriately, etc.

Colors


156/201

Layout

e eye will follow the directional cues of elements on the p


157/201

Layout

Make sure directional cues point towards the content


158/201

Layout

Making the contentrst and directional cues reinforce it

Ext


159/201

Layout

Secondary content should be smaller and relegated to the

advcont


160/201

Layout

Can also be broken into chunand placed under main co


161/201

Layout

Footers anchor the page and provide quick-hit info


162/201

Layout

No maer what layout, they should span the width of the p

ITS ALL ABOUT


163/201

e Grid SystemA structural guideline for organizing elements on the pa

Layout


164/201

Layout

A system of horizontal and vertical lines

columgutte


165/201

Layout

e horizontal lines create columns with guers in be


166/201

Layout

And are used to proportionately dtribute elements on the


167/201

Layout

Vertical lines create a beline for text that should equal line


168/201


169/201

e Apple Store uses a grid system to organize their con


170/201

e Apple Store uses a grid system to organize their con

GRIDS COME IN MANY


171/201

Shapes Sizes

Layout

960 grid system used to be the standard, but more andmore websites are leaving xed grids behind


172/201

Layout

With axed grid, the browser can get bigger (or smalland the grid will remain constant.


173/201

Layout

But auid grid grows (or shrin) with the browser win


174/201

Layout

Columns are either added or dropped to beer serve that


175/201


176/201

Layout

Use the grid to break the site down into manageable chu


177/201

Layout



178/201

Layout



179/201

e Apple store uses all thr


180/201


181/201


182/201

Layout

!"#$%&'()

#$%*"%*

!"#$%&'()

#$%*"%*

!"#$%&'()

#$%*"%*

We can lay out all the elementsom the previous challeto the grid, giving order to the chaos

!"#$%&'()

#$%*"%*


183/201

Layout

e grid versatile enough to accept all of the layouts wev


184/201

Layout

Also, avoid cluer by respecting the guers

h lf f h

WERE ESTABLISHING RELATIONSHIPS


185/201

On Behalf of the Use

Layout

By adhering to the grid, were creating vualrelationships that make content eier to consume.

h

ABSENCE HAS PRESENCE


186/201

Incorporate Whitespa

Layout

Ample empspace around elements can increereadabiliand create a mood of elegance

The plain area on an image with a strong

focal point is whitespace


187/201

Layout

Whitespace nt always white


188/201

Content site uses whitespace to draw user in without overwhe


189/201

Using whitespace on a high level ben major elements


190/201

But only if nuanced whitespace ben elements within containers

B l All i

YOUVE GOT TO


191/201

Balance All e ing

Layout

A good design a balanced design


192/201

Layout

Symmetry


193/201

Symmetry portrays a sense of stabiliand trust


194/201

Overall paerns of symmetry create a sense of balance


195/201

Layout

Asymmetry


196/201

An unrepeated large element creates ymmetry

Gridadherencebrings truebalance


197/201

oughymmetry must still be balanced on the page

The density

on this sidebalancesthe page


198/201

Asymmetry demands aention and creates intrigue

C ib B l

ALL OF THE PRINCIPLES TOGETHER


199/201

Contribute to Balanc

Layout

Size, Color, Contrt, Alignment (grid), Whitespace(or lack thereofdensi) and Symmetry create balance

Ch It

IF YOU CANT DEFEND IT


200/201

Change It

Layout

Design with intentionali, the abilito defend yourdesign decions in a conversational manner. If you

cant defend it, its probably not the right choice.

E i t O

ONE FINAL NOTE


201/201

Experiment Oen

Layout

erst solution rarely the best one, dont rush the pro

fundamental of design-code school

Documents