FoD Optimized

8/10/2019 FoD Optimized

1/201


2/201

Content is KingTe designers one essential tak ito 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 tpe that intentionally mahes wirregular shapes to reinforce their grap 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 tpe at varying sizes and angles create a

dynamic without being overtly dark or graphic, so ato remain


7/201

Audience: Age? Race? Gender? Cultural Nich

Tone: Casual? Formal? Friendly? Sarcastic?

Purpose: Informational? Conversions?

Atributes that Inuence Design


8/201

CHAPTER 1

Typography


9/201

Typography

Sle GuideReference document with stles 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 ofen taken for granted with the thousandeaily availableefonts. Invest the time to choose gootpefaces that will really complement the content well

SOME FONTS ARE


12/201

Verbal &VisualTe 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 journalim or hitorical applications

Emulates Calligraphy contrasting strokes


15/201

Typography

Great for traditional academia and legal applications

TRANSITIONAL

Strong, Stlish, &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 fiendly

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 been 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 ia script font, and shouldnever be used for body copy

Typography


25/201

Typography

Mix &MingleWhile one tpeface iofen enough, adding

another tpeface can create a beautiful effect.

FEEL FREE TO


26/201

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


27/201

Typography

From The Same Style

Tese 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 tpefaces, 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 humanit 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, viual details or tpeface desigbeen otherwie 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 tpefaces to use alo

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

STRIVE FOR


32/201

TypographyA geometric sans used sparingly aheadline and pull-quote t

transitional serif body-copy creates a great pairing


33/201

TypographyUsing a script next to a geometric sans iaboutamuch contratay

variance in handwriting vs. the objectivitof 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, thii

DONT FEEL OBLIGATED


35/201

TypographyTe entire Code School site idesigned using the different we

just one sans-serif font family.


36/201

Typography

Use Web Licensed FonTen 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 ned 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 gren square? A big and a small s

Typography


39/201

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

HUMANS CREATE RELATIONSHIPS

Typography


40/201

Visual HierarchyCreate viual relationships been 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 tpe and lifelike photographielements strewn about in an apparently chaotic manne

order to add viual intrigue to a mundane item.


43/201

Differences in SizeTe 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

Seting Body CopyTere ino 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 thicourse, were going to suggest 16px athe ideal b

copy size. Weigh each cae 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

Tisets 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 emphaiand 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) ioptima

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 i1000px 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 iset 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 ned to be saved too.

FINALLY

Typography


74/201

Typography

Widow :(


75/201

Typography

Orphan :( :(


76/201

A Perfect SolutionEspecially when dealing with large blockof 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.


78/201


79/201


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

Te entire color space can beviualized 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 stle 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

Eaily grabs aention and evokes sped and energy.Heat, Passion, Excitement


99/201

Colors

Associated with reliabilitand playfulnessWarmth, Vitalit


100/201

Colors

Represents sunshine, cher and happinessOptimism, Creativit


101/201

Colors

Connotes growth, nature andeshnessSerenit, Health


102/201


103/201

Colors

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


104/201

Colors

Conveys energy, fun and excitementYouthful intensit


105/201

Colors

Represents age, stabilitand relaxationDurabilit, Class


106/201

Colors

Its serious, bold and strongPower, Drama


107/201

Colors

Its message iyouthful, mild and pureSimplicit, Cleanliness


108/201

Conveys intensitor 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 bae 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 bae 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 schemesaa bae,eakaneded

COLOR SCHEMES


117/201

Color &TypeMIXING

Colors

Type color must be high contrat on the background


118/201

Difference in ColorsLets look at Hue, Saturation &Brightness

CONTRAST IS THE

Colors

Hue 30


119/201

ColorsContrat of Hue

Hue 120


120/201

Colors

Contrat of Saturation

210100%50%

H:S:L:

21050%50%

H:S:L:


121/201

Colors

Contrat of Lightness

210100%75%

H:S:L:

210100%50%

H:S:L:


122/201

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

MOST CONTRASTS ARE

Colors

Tis is hard toread amirite?


123/201

Colors

Contrat of Hue

read, amirite?

Tis is similarlyhard to consume

OMG thatsmuch beter


124/201

Colors

Contrat of Hue &Brightness

much beter

Now my eyesdont hurt

Even Beter


125/201

Colors

Contrat of Hue, Saturation &Brightness

Fo Realz, yo


126/201

WCAG 2Web Content AccessibilitGuidelines

THERE ARE STANDARDS FOR THAT

Colors

Te best contrast


127/201

Colors

Very simple, high-contrat colors are best

Is black on white

Same hue, high sa& bright contrast


128/201

Colors

Very simple, high-contrat 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.

Tis is awkward


130/201

Colors

Dontght nature

Abraham Lincoln

Tis is awkward

Abraham Lincoln


131/201

Colors

Youll lose

Abraham Lincoln

So much beter

Whew

Example text

Warm Cool


132/201

Colors

Warm &cold colors dont contrat well for tpe

is geting 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 been elements on the page

COMBINE COLORS TO REINFORCE

Colors

Background color darker, anchoring


135/201

TYPE ON AN IMAGE


136/201

Dont Be Tack

Colors

Treat the image to make the text stand out, dontadd effects to the text.


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 contrat 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 lefcorner 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 iideal for navigations with only a few item


146/201

Tough vertical workwell in a similar fahion


147/201

Vertical igreat when youve got a lot of nested page


148/201

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


149/201

Layout

Both layouts are great for drop-downs


150/201

LayoutAmazonsy-out vertical menu workvery well


151/201

LayoutESPN haa great horizontal drop down

VERTICAL NAVIGATION


152/201

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

reaon to use it!

VERTICAL NAVIGATION

Layout


153/201

Layout

Te 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

Te 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 i

Ext


159/201

Layout

Secondary content should be smaller and relegated to the

advcont


160/201

Layout

Can also be broken into chunkand 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

Te Grid SystemA structural guideline for organizing elements on the pa

Layout


164/201

columgutte


165/201

Layout

Te vertical lines create columns with guters in bee


166/201

Layout

And are used to proportionately ditribute elements on the


167/201

Layout

Horizontal lines create a baeline for text that should equal lin

BASELINES ARE


168/201

Tough to ImplemenTey work great when designing in graphics sofware,

but the browser support inil. Use it aa guideline and

do your best to implement well.

Layout


169/201

Te Apple Store uses a grid system to organize their con


170/201

Te 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 shrink) with the browser win


174/201

Layout

Columns are either added or dropped to beer serve that

FOR SIMPLICITY SAKE


175/201

Well Use a Fixed Gr

Layout

Get used to a grid here, but do your research andimplement auid grid in the wild wild web


176/201

Layout

Use the grid to break the site down into manageable chu


177/201

Layout



178/201

Layout



179/201

Te Apple store uses all thre


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

Te grid iversatile 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 viualrelationships that make content eaier to consume.

h

ABSENCE HAS PRESENCE


186/201

Incorporate Whitespa

Layout

Ample emptspace around elements can increaereadabilitand create a mood of elegance

The plain area on an image with a strong

focal point is whitespace


187/201

Layout

Whitespace int always white


188/201

Content site uses whitespace to draw user in without overwhe


189/201

Using whitespace on a high level been major elements i


190/201

But only if nuanced whitespace been elements within containers

B l All T Ti

YOUVE GOT TO


191/201

Balance All Te Ting

Layout

A good design ia balanced design


192/201

Layout

Symmetry


193/201

Symmetry portrays a sense of stabilitand trust


194/201

Overall paerns of symmetry create a sense of balance


195/201

Layout

Asymmetry


196/201

An unrepeated large element creates aymmetry

Gridadherencebrings truebalance


197/201

Toughaymmetry 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, Contrat, Alignment (grid), Whitespace(or lack thereofdensit) and Symmetry create balance


200/201

E i t Of

ONE FINAL NOTE


201/201

Experiment Ofen

Layout

Terst solution irarely the best one, dont rush the pro

Date post:	02-Jun-2018
Category:	Documents
Upload:	nvk12a1
View:	226 times
Download:	0 times

FoD Optimized

Documents