Upload
nvk12a1
View
226
Download
0
Embed Size (px)
Citation preview
8/10/2019 FoD Optimized
1/201
8/10/2019 FoD Optimized
2/201
Content is KingTe designers one essential tak ito interpretand communicate the content
DESIGN THEORY 101:
8/10/2019 FoD Optimized
3/201
Design studios formal mission statement targetingbusiness leaders who are looking to bring their compan
out of the analog-only world.
CONTENT:
8/10/2019 FoD Optimized
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.
8/10/2019 FoD Optimized
5/201
Playfully themed lm festival for horror entertainment entsupporting local business and the common good.
CONTENT:
8/10/2019 FoD Optimized
6/201
Decorative, sketched tpe at varying sizes and angles create a
dynamic without being overtly dark or graphic, so ato remain
8/10/2019 FoD Optimized
7/201
Audience: Age? Race? Gender? Cultural Nich
Tone: Casual? Formal? Friendly? Sarcastic?
Purpose: Informational? Conversions?
Atributes that Inuence Design
8/10/2019 FoD Optimized
8/201
CHAPTER 1
Typography
8/10/2019 FoD Optimized
9/201
Typography
Sle GuideReference document with stles for multipleinstances throughout your application
LETS CREATE A
8/10/2019 FoD Optimized
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.
8/10/2019 FoD Optimized
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
8/10/2019 FoD Optimized
12/201
Verbal &VisualTe reader surveys the overall graphical paerns of the
page, and then parse the language and read.
TYPOGRAPHY IS BOTH
Typography
8/10/2019 FoD Optimized
13/201
Serifs are the small lines tailingom the edges of leer
Typography
8/10/2019 FoD Optimized
14/201
Typography
Classic &TraditionalHUMANIST
Great for journalim or hitorical applications
Emulates Calligraphy contrasting strokes
8/10/2019 FoD Optimized
15/201
Typography
Great for traditional academia and legal applications
TRANSITIONAL
Strong, Stlish, &Dynamic
Sharper serif
More contrasting strokes
8/10/2019 FoD Optimized
16/201
Typography
Great for arts and culture a lications
MODERN
Structured, Clear, &Elegant
Thin, horizontalserif
High contrast stroke
8/10/2019 FoD Optimized
17/201
Typography
Great for marketing and promotional applications
EGYPTIAN (SLAB SERIF)
Authoritative, yet fiendly
Heavy, boxyserifs
Very Low contrast stroke
8/10/2019 FoD Optimized
18/201
Fonts that lack serifs are called sans-serif
Typography
8/10/2019 FoD Optimized
19/201
Typography
Great for government or education applications
HUMANIST SANS SERIF
Tension been perfect and imperfec
Emulates Calligraphy
contrasting strokes
8/10/2019 FoD Optimized
20/201
Typography
Great for technology or transportation applications
TRANSITIONAL SANS SERIF
Unassuming &Modern
Upright, uniformcharacters
Strong strokes
8/10/2019 FoD Optimized
21/201
Typography
Great for a science or architecture application
GEOMETRIC SANS SERIF
Strict, Objective &Universal
Geometric shapes form thebackbones of the letters
8/10/2019 FoD Optimized
22/201
Mimics handwriting or calligraphy
Typography
8/10/2019 FoD Optimized
23/201
Typography
8/10/2019 FoD Optimized
24/201
Comic Sans ia script font, and shouldnever be used for body copy
Typography
8/10/2019 FoD Optimized
25/201
Typography
Mix &MingleWhile one tpeface iofen enough, adding
another tpeface can create a beautiful effect.
FEEL FREE TO
8/10/2019 FoD Optimized
26/201
Using a serif for headline text and sans serif for body copy vice versa ithe simplest way to mix tpefaces.
8/10/2019 FoD Optimized
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)
8/10/2019 FoD Optimized
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)
8/10/2019 FoD Optimized
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)
8/10/2019 FoD Optimized
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)
8/10/2019 FoD Optimized
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
8/10/2019 FoD Optimized
32/201
TypographyA geometric sans used sparingly aheadline and pull-quote t
transitional serif body-copy creates a great pairing
8/10/2019 FoD Optimized
33/201
TypographyUsing a script next to a geometric sans iaboutamuch contratay
variance in handwriting vs. the objectivitof shapes can be s
8/10/2019 FoD Optimized
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
8/10/2019 FoD Optimized
35/201
TypographyTe entire Code School site idesigned using the different we
just one sans-serif font family.
8/10/2019 FoD Optimized
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
8/10/2019 FoD Optimized
37/201
Type SizeOnce weve selected a font, we ned to set the sizes in ouguide. Butrst, lets take a quiz.
STEP TWO
Typography
8/10/2019 FoD Optimized
38/201
WHAT DO YOU SEE?
Two squares? A blue and a gren square? A big and a small s
Typography
8/10/2019 FoD Optimized
39/201
Its How We ProcesWe relate thito that in order to understand things
HUMANS CREATE RELATIONSHIPS
Typography
8/10/2019 FoD Optimized
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
8/10/2019 FoD Optimized
41/201
Informative site promoting a new ist on atraditional everyday food item, dipping sauce.
CONTENT:
Typography
8/10/2019 FoD Optimized
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.
8/10/2019 FoD Optimized
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
8/10/2019 FoD Optimized
44/201
Difficult-to-processsea of text
Typography
Variance gives a
8/10/2019 FoD Optimized
45/201
Variance gives auser somethingto latch on to
Typography
8/10/2019 FoD Optimized
46/201
Headline Text
B-Head (Or Sub-Head) TextNav 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.
8/10/2019 FoD Optimized
47/201
Seting Body CopyTere ino golden standard, good designers advocate for b
copy anywhereom 16 - 26px
START WITH
Typography
W ll
8/10/2019 FoD Optimized
48/201
Well-respecuses 1
8/10/2019 FoD Optimized
49/201
8/10/2019 FoD Optimized
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
8/10/2019 FoD Optimized
51/201
Body c
Headline TextB-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 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
8/10/2019 FoD Optimized
52/201
between lin
Leading that is tonegatively affects re
8/10/2019 FoD Optimized
53/201
t t
Leading that is too tight can create aclaustrophobic feel and rush the reader
8/10/2019 FoD Optimized
54/201
claustrophobic feel and rush the reader
Typography
Good leading is around 120-150%of the body copy size
8/10/2019 FoD Optimized
55/201
Typography
8/10/2019 FoD Optimized
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.
8/10/2019 FoD Optimized
57/201
Use Bold/Italic WeighDifferent weights add emphaiand intrigue.
ANOTHER VISUAL HIERARCHY TOOL
Typography
Too much bold canmuddy your hierarchy
8/10/2019 FoD Optimized
58/201
Typography
So can weights that goagainst the natural value
8/10/2019 FoD Optimized
59/201
Typography
against the natural value
Use a less is more approach toreally enhance your hierarchy
8/10/2019 FoD Optimized
60/201
Typography
y y y
8/10/2019 FoD Optimized
61/201
Line-WidthNEXT UP:
Typography
Lines that are too short aredifficult to read
8/10/2019 FoD Optimized
62/201
Typography
t t
Lines that are too long arealso tough to read
8/10/2019 FoD Optimized
63/201
Typography
also tough to read
8/10/2019 FoD Optimized
64/201
Measured in CPL
Characters per line, 50-70(including spaces) ioptima
LINE WIDTH IS
Typography
55-65 CPL
8/10/2019 FoD Optimized
65/201
Typography
As the type size in
8/10/2019 FoD Optimized
66/201
Typography
As th typ s z line-width also inc
the CPL remains
8/10/2019 FoD Optimized
67/201
IN THE CSS, USE
Typography
max-width: ;
1000px
8/10/2019 FoD Optimized
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
8/10/2019 FoD Optimized
69/201
Typography
20-25 CPL
font-size
26px
8/10/2019 FoD Optimized
70/201
Typography
30-40 CPL
font-size16px
8/10/2019 FoD Optimized
71/201
TypographyWhen viewing on the desktop, the max-width iset to730px with a font-size of 22px, averaging 70-80 CPL
8/10/2019 FoD Optimized
72/201
TypographyBut on mobile devices, its 360px with a font-size of 19p
Leaving us with an average CPL of 40-45
8/10/2019 FoD Optimized
73/201
Save the Orphans
And the Widows, they ned to be saved too.
FINALLY
Typography
8/10/2019 FoD Optimized
74/201
Typography
Widow :(
8/10/2019 FoD Optimized
75/201
Typography
Orphan :( :(
8/10/2019 FoD Optimized
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
8/10/2019 FoD Optimized
77/201
Colors
Color you can touch Color you cant to
Subtractive Color Additive Colo
Vs.
8/10/2019 FoD Optimized
78/201
8/10/2019 FoD Optimized
79/201
8/10/2019 FoD Optimized
80/201
Humans Process HSHue, Saturation, Lightness
RGB IS HARD
Colors
Red (0)
8/10/2019 FoD Optimized
81/201
Hue
Green (120)Blue (240)
8/10/2019 FoD Optimized
82/201
Saturation
0% 100%
8/10/2019 FoD Optimized
83/201
Lightness
0% 100%50%
8/10/2019 FoD Optimized
84/201
025%50%
H:S:L:
0100%50%
H:S:L:
0100%75%
H:S:
L:
0100%
25%
H:S:
L:
Colors
8/10/2019 FoD Optimized
85/201
HSL COLOR SPACE
Colors
Te entire color space can beviualized in a 3D cylinder, letsat each dimension individually.
Hue
8/10/2019 FoD Optimized
86/201
Hue
STEP ONE
Colors
Hue
8/10/2019 FoD Optimized
87/201
Saturation
STEP TWO
0%100%
Colors
Saturation 0%100%
8/10/2019 FoD Optimized
88/201
Lightness
STEP THREE
t t 0%100%
0%
Colors
Try to
8/10/2019 FoD Optimized
89/201
Try tovisualize
the cylinder
Colors
8/10/2019 FoD Optimized
90/201
+
0100%50%
=H:S:L:
Colors
8/10/2019 FoD Optimized
91/201
+ =H:S:L:
Colors
8/10/2019 FoD Optimized
92/201
+ =H:S:L:
Colors
Brightness
8/10/2019 FoD Optimized
93/201
Colors
Lightness
8/10/2019 FoD Optimized
94/201
A Color Scheme4-5 colors built into the stle guide
NOW WE NEED
Colors
Headline Text
8/10/2019 FoD Optimized
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->*:
8/10/2019 FoD Optimized
96/201
Colors
A Base ColorDifferent colors create different moods.
START BY SELECTING
Ever seen this before?
8/10/2019 FoD Optimized
97/201
Colors
How about this?
8/10/2019 FoD Optimized
98/201
Colors
Eaily grabs aention and evokes sped and energy.Heat, Passion, Excitement
8/10/2019 FoD Optimized
99/201
Colors
Associated with reliabilitand playfulnessWarmth, Vitalit
8/10/2019 FoD Optimized
100/201
Colors
Represents sunshine, cher and happinessOptimism, Creativit
8/10/2019 FoD Optimized
101/201
Colors
Connotes growth, nature andeshnessSerenit, Health
8/10/2019 FoD Optimized
102/201
8/10/2019 FoD Optimized
103/201
Colors
Can also mean royal, sentimental, creative and sophiticaSpiritualit, Intelligence, Wealth
8/10/2019 FoD Optimized
104/201
Colors
Conveys energy, fun and excitementYouthful intensit
8/10/2019 FoD Optimized
105/201
Colors
Represents age, stabilitand relaxationDurabilit, Class
8/10/2019 FoD Optimized
106/201
Colors
Its serious, bold and strongPower, Drama
8/10/2019 FoD Optimized
107/201
Colors
Its message iyouthful, mild and pureSimplicit, Cleanliness
8/10/2019 FoD Optimized
108/201
Conveys intensitor energyWESTERN
8/10/2019 FoD Optimized
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
8/10/2019 FoD Optimized
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
8/10/2019 FoD Optimized
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
8/10/2019 FoD Optimized
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
8/10/2019 FoD Optimized
113/201
ColorsComplementary Colors
Hue 210
8/10/2019 FoD Optimized
114/201
Colors
Explore the World of CAn objectively correct color scheme can still suck
THERE ARE MANY MORE
COMPLEMENTARY
8/10/2019 FoD Optimized
115/201
Colors
Gross
COMPLEMENTARY
8/10/2019 FoD Optimized
116/201
Colors
Dont have to be perfeUse the named schemesaa bae,eakaneded
COLOR SCHEMES
8/10/2019 FoD Optimized
117/201
Color &TypeMIXING
Colors
Type color must be high contrat on the background
8/10/2019 FoD Optimized
118/201
Difference in ColorsLets look at Hue, Saturation &Brightness
CONTRAST IS THE
Colors
Hue 30
8/10/2019 FoD Optimized
119/201
ColorsContrat of Hue
Hue 120
8/10/2019 FoD Optimized
120/201
Colors
Contrat of Saturation
210100%50%
H:S:L:
21050%50%
H:S:L:
8/10/2019 FoD Optimized
121/201
Colors
Contrat of Lightness
210100%75%
H:S:L:
210100%50%
H:S:L:
8/10/2019 FoD Optimized
122/201
Multi-facetedIts common to combine contrats of Hue, Saturation or Brig
MOST CONTRASTS ARE
Colors
Tis is hard toread amirite?
8/10/2019 FoD Optimized
123/201
Colors
Contrat of Hue
read, amirite?
Tis is similarlyhard to consume
OMG thatsmuch beter
8/10/2019 FoD Optimized
124/201
Colors
Contrat of Hue &Brightness
much beter
Now my eyesdont hurt
Even Beter
8/10/2019 FoD Optimized
125/201
Colors
Contrat of Hue, Saturation &Brightness
Fo Realz, yo
8/10/2019 FoD Optimized
126/201
WCAG 2Web Content AccessibilitGuidelines
THERE ARE STANDARDS FOR THAT
Colors
Te best contrast
8/10/2019 FoD Optimized
127/201
Colors
Very simple, high-contrat colors are best
Is black on white
Same hue, high sa& bright contrast
8/10/2019 FoD Optimized
128/201
Colors
Very simple, high-contrat colors are best
&bright contrast
Are a close second
If youre color
bli d thi h ld
8/10/2019 FoD Optimized
129/201
Colors
Some colors are intrinsically tough for humans to differen
blind, this should
be especially
tough for you.
Tis is awkward
8/10/2019 FoD Optimized
130/201
Colors
Dontght nature
Abraham Lincoln
Tis is awkward
Abraham Lincoln
8/10/2019 FoD Optimized
131/201
Colors
Youll lose
Abraham Lincoln
So much beter
Whew
Example text
Warm Cool
8/10/2019 FoD Optimized
132/201
Colors
Warm &cold colors dont contrat well for tpe
is geting tough to
make up. Go away.
Warm colors appear closer
8/10/2019 FoD Optimized
133/201
Colors
But work well to create depth
So using background
8/10/2019 FoD Optimized
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
8/10/2019 FoD Optimized
135/201
TYPE ON AN IMAGE
8/10/2019 FoD Optimized
136/201
Dont Be Tack
Colors
Treat the image to make the text stand out, dontadd effects to the text.
8/10/2019 FoD Optimized
137/201
Overlaying a paern and darkening the photo can reallytext stand out on the page
TYPE IN AN IMAGE
8/10/2019 FoD Optimized
138/201
Dont Do It
Colors
Unless its a picture of a cat thinking like a human
8/10/2019 FoD Optimized
139/201
Colors
A combination of analogcomplementary colors wenough contrat for text and backgrounds.
8/10/2019 FoD Optimized
140/201
ComplemeHigh-contrasttext/bg colors
LAYOUT
8/10/2019 FoD Optimized
141/201
Visual Hierarchy, AgaArrange elements to engage and
direct the users eye
LAYOUT
Layout
8/10/2019 FoD Optimized
142/201
Layout
Users start at the top lefcorner of thepage and then scanom there.
8/10/2019 FoD Optimized
143/201
Layout
Start with placing the logo
8/10/2019 FoD Optimized
144/201
Layout
Navigation can be horizontal or vertical
8/10/2019 FoD Optimized
145/201
Horizontal iideal for navigations with only a few item
8/10/2019 FoD Optimized
146/201
Tough vertical workwell in a similar fahion
8/10/2019 FoD Optimized
147/201
Vertical igreat when youve got a lot of nested page
8/10/2019 FoD Optimized
148/201
Tough if you drop your horizontal below the logo, a tiesystem with lots of items work awell
8/10/2019 FoD Optimized
149/201
Layout
Both layouts are great for drop-downs
8/10/2019 FoD Optimized
150/201
LayoutAmazonsy-out vertical menu workvery well
8/10/2019 FoD Optimized
151/201
LayoutESPN haa great horizontal drop down
VERTICAL NAVIGATION
8/10/2019 FoD Optimized
152/201
Isnt Really Used MucWhile it does work, make sure youve got a good
reaon to use it!
VERTICAL NAVIGATION
Layout
8/10/2019 FoD Optimized
153/201
Layout
Te main content area can be under a horizontal nav
8/10/2019 FoD Optimized
154/201
Layout
Or next to a vertical nav
MAKE SURE THE CONTENT
8/10/2019 FoD Optimized
155/201
Reinforces the HierarcUse images that face in, place text appropriately, etc.
Colors
8/10/2019 FoD Optimized
156/201
Layout
Te eye will follow the directional cues of elements on the p
8/10/2019 FoD Optimized
157/201
Layout
Make sure directional cues point towards the content
8/10/2019 FoD Optimized
158/201
Layout
Making the contentrst and directional cues reinforce it i
Ext
8/10/2019 FoD Optimized
159/201
Layout
Secondary content should be smaller and relegated to the
advcont
8/10/2019 FoD Optimized
160/201
Layout
Can also be broken into chunkand placed under main co
8/10/2019 FoD Optimized
161/201
Layout
Footers anchor the page and provide quick-hit info
8/10/2019 FoD Optimized
162/201
Layout
No maer what layout, they should span the width of the p
ITS ALL ABOUT
8/10/2019 FoD Optimized
163/201
Te Grid SystemA structural guideline for organizing elements on the pa
Layout
8/10/2019 FoD Optimized
164/201
columgutte
8/10/2019 FoD Optimized
165/201
Layout
Te vertical lines create columns with guters in bee
8/10/2019 FoD Optimized
166/201
Layout
And are used to proportionately ditribute elements on the
8/10/2019 FoD Optimized
167/201
Layout
Horizontal lines create a baeline for text that should equal lin
BASELINES ARE
8/10/2019 FoD Optimized
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
8/10/2019 FoD Optimized
169/201
Te Apple Store uses a grid system to organize their con
8/10/2019 FoD Optimized
170/201
Te Apple Store uses a grid system to organize their con
GRIDS COME IN MANY
8/10/2019 FoD Optimized
171/201
Shapes &Sizes
Layout
960 grid system used to be the standard, but more andmore websites are leaving xed grids behind
8/10/2019 FoD Optimized
172/201
Layout
With axed grid, the browser can get bigger (or smalland the grid will remain constant.
8/10/2019 FoD Optimized
173/201
Layout
But auid grid grows (or shrink) with the browser win
8/10/2019 FoD Optimized
174/201
Layout
Columns are either added or dropped to beer serve that
FOR SIMPLICITY SAKE
8/10/2019 FoD Optimized
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
8/10/2019 FoD Optimized
176/201
Layout
Use the grid to break the site down into manageable chu
8/10/2019 FoD Optimized
177/201
Layout
Use the grid to break the site down into manageable chu
8/10/2019 FoD Optimized
178/201
Layout
Use the grid to break the site down into manageable chu
8/10/2019 FoD Optimized
179/201
Te Apple store uses all thre
8/10/2019 FoD Optimized
180/201
8/10/2019 FoD Optimized
181/201
8/10/2019 FoD Optimized
182/201
Layout
!"#$%&'()
#$%*"%*
!"#$%&'()
#$%*"%*
!"#$%&'()
#$%*"%*
We can lay out all the elementsom the previous challeto the grid, giving order to the chaos
!"#$%&'()
#$%*"%*
8/10/2019 FoD Optimized
183/201
Layout
Te grid iversatile enough to accept all of the layouts wev
8/10/2019 FoD Optimized
184/201
Layout
Also, avoid cluer by respecting the guers
h lf f h
WERE ESTABLISHING RELATIONSHIPS
8/10/2019 FoD Optimized
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
8/10/2019 FoD Optimized
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
8/10/2019 FoD Optimized
187/201
Layout
Whitespace int always white
8/10/2019 FoD Optimized
188/201
Content site uses whitespace to draw user in without overwhe
8/10/2019 FoD Optimized
189/201
Using whitespace on a high level been major elements i
8/10/2019 FoD Optimized
190/201
But only if nuanced whitespace been elements within containers
B l All T Ti
YOUVE GOT TO
8/10/2019 FoD Optimized
191/201
Balance All Te Ting
Layout
A good design ia balanced design
8/10/2019 FoD Optimized
192/201
Layout
Symmetry
8/10/2019 FoD Optimized
193/201
Symmetry portrays a sense of stabilitand trust
8/10/2019 FoD Optimized
194/201
Overall paerns of symmetry create a sense of balance
8/10/2019 FoD Optimized
195/201
Layout
Asymmetry
8/10/2019 FoD Optimized
196/201
An unrepeated large element creates aymmetry
Gridadherencebrings truebalance
8/10/2019 FoD Optimized
197/201
Toughaymmetry must still be balanced on the page
The density
on this sidebalancesthe page
8/10/2019 FoD Optimized
198/201
Asymmetry demands aention and creates intrigue
C ib B l
ALL OF THE PRINCIPLES TOGETHER
8/10/2019 FoD Optimized
199/201
Contribute to Balanc
Layout
Size, Color, Contrat, Alignment (grid), Whitespace(or lack thereofdensit) and Symmetry create balance
8/10/2019 FoD Optimized
200/201
E i t Of
ONE FINAL NOTE
8/10/2019 FoD Optimized
201/201
Experiment Ofen
Layout
Terst solution irarely the best one, dont rush the pro