fundamental of design-code school
TRANSCRIPT
-
8/10/2019 Fundamental of Design-code School
1/201
-
8/10/2019 Fundamental of Design-code School
2/201
Content is Kinge designers one essential tk to interpretand communicate the content
DESIGN THEORY 101:
-
8/10/2019 Fundamental of Design-code School
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 Fundamental of Design-code School
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.
-
8/10/2019 Fundamental of Design-code School
5/201
Playfully themed lm festival for horror entertainment entsupporting local business and the common good.
CONTENT:
-
8/10/2019 Fundamental of Design-code School
6/201
Decorative, sketched pe at varying sizes and angles create a
dynamic without being overtly dark or graphic, so to remain
-
8/10/2019 Fundamental of Design-code School
7/201
Audience: Age? Race? Gender? Cultural Nich
Tone: Casual? Formal? Friendly? Sarcastic?
Purpose: Informational? Conversions?
Aributes that Inuence Design
-
8/10/2019 Fundamental of Design-code School
8/201
CHAPTER 1
Typography
-
8/10/2019 Fundamental of Design-code School
9/201
Typography
Sle GuideReference document with sles for multipleinstances throughout your application
LETS CREATE A
-
8/10/2019 Fundamental of Design-code School
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 Fundamental of Design-code School
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
-
8/10/2019 Fundamental of Design-code School
12/201
Verbal Visuale reader surveys the overall graphical paerns of the
page, and then parse the language and read.
TYPOGRAPHY IS BOTH
Typography
-
8/10/2019 Fundamental of Design-code School
13/201
Serifs are the small lines tailingom the edges of leer
Typography
-
8/10/2019 Fundamental of Design-code School
14/201
Typography
Classic TraditionalHUMANIST
Great for journalm or htorical applications
Emulates Calligraphy contrasting strokes
-
8/10/2019 Fundamental of Design-code School
15/201
Typography
Great for traditional academia and legal applications
TRANSITIONAL
Strong, Slish, Dynamic
Sharper serif
More contrasting strokes
-
8/10/2019 Fundamental of Design-code School
16/201
Typography
Great for arts and culture a lications
MODERN
Structured, Clear, Elegant
Thin, horizontalserif
High contrast stroke
-
8/10/2019 Fundamental of Design-code School
17/201
Typography
Great for marketing and promotional applications
EGYPTIAN (SLAB SERIF)
Authoritative, yet iendly
Heavy, boxyserifs
Very Low contrast stroke
-
8/10/2019 Fundamental of Design-code School
18/201
Fonts that lack serifs are called sans-serif
Typography
-
8/10/2019 Fundamental of Design-code School
19/201
Typography
Great for government or education applications
HUMANIST SANS SERIF
Tension ben perfect and imperfec
Emulates Calligraphy
contrasting strokes
-
8/10/2019 Fundamental of Design-code School
20/201
Typography
Great for technology or transportation applications
TRANSITIONAL SANS SERIF
Unassuming Modern
Upright, uniformcharacters
Strong strokes
-
8/10/2019 Fundamental of Design-code School
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 Fundamental of Design-code School
22/201
Mimics handwriting or calligraphy
Typography
-
8/10/2019 Fundamental of Design-code School
23/201
Typography
-
8/10/2019 Fundamental of Design-code School
24/201
Comic Sans a script font, and shouldnever be used for body copy
Typography
-
8/10/2019 Fundamental of Design-code School
25/201
Typography
Mix MingleWhile one peface oen enough, adding
another peface can create a beautiful effect.
FEEL FREE TO
-
8/10/2019 Fundamental of Design-code School
26/201
Using a serif for headline text and sans serif for body copy vice versa the simplest way to mix pefaces.
-
8/10/2019 Fundamental of Design-code School
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)
-
8/10/2019 Fundamental of Design-code School
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)
-
8/10/2019 Fundamental of Design-code School
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)
-
8/10/2019 Fundamental of Design-code School
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)
-
8/10/2019 Fundamental of Design-code School
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
-
8/10/2019 Fundamental of Design-code School
32/201
TypographyA geometric sans used sparingly headline and pull-quote t
transitional serif body-copy creates a great pairing
-
8/10/2019 Fundamental of Design-code School
33/201
TypographyUsing a script next to a geometric sans aboutmuch contrty
variance in handwriting vs. the objectiviof shapes can be s
-
8/10/2019 Fundamental of Design-code School
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
-
8/10/2019 Fundamental of Design-code School
35/201
Typographye entire Code School site designed using the different we
just one sans-serif font family.
-
8/10/2019 Fundamental of Design-code School
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
-
8/10/2019 Fundamental of Design-code School
37/201
Type SizeOnce weve selected a font, we nd to set the sizes in ouguide. Butrst, lets take a quiz.
STEP TWO
Typography
-
8/10/2019 Fundamental of Design-code School
38/201
WHAT DO YOU SEE?
Two squares? A blue and a grn square? A big and a small s
Typography
-
8/10/2019 Fundamental of Design-code School
39/201
Its How We ProcesWe relate thto that in order to understand things
HUMANS CREATE RELATIONSHIPS
Typography
-
8/10/2019 Fundamental of Design-code School
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
-
8/10/2019 Fundamental of Design-code School
41/201
Informative site promoting a new ist on atraditional everyday food item, dipping sauce.
CONTENT:
Typography
-
8/10/2019 Fundamental of Design-code School
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.
-
8/10/2019 Fundamental of Design-code School
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
-
8/10/2019 Fundamental of Design-code School
44/201
Difficult-to-processsea of text
Typography
Variance gives a
-
8/10/2019 Fundamental of Design-code School
45/201
Variance gives auser somethingto latch on to
Typography
-
8/10/2019 Fundamental of Design-code School
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 Fundamental of Design-code School
47/201
Seing Body Copyere no golden standard, good designers advocate for b
copy anywhereom 16 - 26px
START WITH
Typography
W ll
-
8/10/2019 Fundamental of Design-code School
48/201
Well-respecuses 1
-
8/10/2019 Fundamental of Design-code School
49/201
-
8/10/2019 Fundamental of Design-code School
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
-
8/10/2019 Fundamental of Design-code School
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 Fundamental of Design-code School
52/201
between lin
Leading that is tonegatively affects re
-
8/10/2019 Fundamental of Design-code School
53/201
t t
Leading that is too tight can create aclaustrophobic feel and rush the reader
-
8/10/2019 Fundamental of Design-code School
54/201
claustrophobic feel and rush the reader
Typography
Good leading is around 120-150%of the body copy size
-
8/10/2019 Fundamental of Design-code School
55/201
Typography
-
8/10/2019 Fundamental of Design-code School
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.
-
8/10/2019 Fundamental of Design-code School
57/201
Use Bold/Italic WeighDifferent weights add emphand intrigue.
ANOTHER VISUAL HIERARCHY TOOL
Typography
Too much bold canmuddy your hierarchy
-
8/10/2019 Fundamental of Design-code School
58/201
Typography
So can weights that goagainst the natural value
-
8/10/2019 Fundamental of Design-code School
59/201
Typography
against the natural value
Use a less is more approach toreally enhance your hierarchy
-
8/10/2019 Fundamental of Design-code School
60/201
Typography
y y y
-
8/10/2019 Fundamental of Design-code School
61/201
Line-WidthNEXT UP:
Typography
Lines that are too short aredifficult to read
-
8/10/2019 Fundamental of Design-code School
62/201
Typography
t t
Lines that are too long arealso tough to read
-
8/10/2019 Fundamental of Design-code School
63/201
Typography
also tough to read
-
8/10/2019 Fundamental of Design-code School
64/201
Measured in CPL
Characters per line, 50-70(including spaces) optima
LINE WIDTH IS
Typography
55-65 CPL
-
8/10/2019 Fundamental of Design-code School
65/201
Typography
As the type size in
-
8/10/2019 Fundamental of Design-code School
66/201
Typography
As th typ s z line-width also inc
the CPL remains
-
8/10/2019 Fundamental of Design-code School
67/201
IN THE CSS, USE
Typography
max-width: ;
1000px
-
8/10/2019 Fundamental of Design-code School
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
-
8/10/2019 Fundamental of Design-code School
69/201
Typography
20-25 CPL
font-size
26px
-
8/10/2019 Fundamental of Design-code School
70/201
Typography
30-40 CPL
font-size16px
-
8/10/2019 Fundamental of Design-code School
71/201
TypographyWhen viewing on the desktop, the max-width set to730px with a font-size of 22px, averaging 70-80 CPL
-
8/10/2019 Fundamental of Design-code School
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 Fundamental of Design-code School
73/201
Save the Orphans
And the Widows, they nd to be saved too.
FINALLY
Typography
-
8/10/2019 Fundamental of Design-code School
74/201
Typography
Widow :(
-
8/10/2019 Fundamental of Design-code School
75/201
Typography
Orphan :( :(
-
8/10/2019 Fundamental of Design-code School
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
-
8/10/2019 Fundamental of Design-code School
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
-
8/10/2019 Fundamental of Design-code School
78/201
Colors
Cyan ma
yellow
black
ADDITIVE COLOR (RGB)All colors mix to yield white
-
8/10/2019 Fundamental of Design-code School
79/201
red g
blue
white
-
8/10/2019 Fundamental of Design-code School
80/201
Humans Process HSHue, Saturation, Lightness
RGB IS HARD
Colors
Red (0)
-
8/10/2019 Fundamental of Design-code School
81/201
Hue
Green (120)Blue (240)
-
8/10/2019 Fundamental of Design-code School
82/201
Saturation
0% 100%
-
8/10/2019 Fundamental of Design-code School
83/201
Lightness
0% 100%50%
-
8/10/2019 Fundamental of Design-code School
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 Fundamental of Design-code School
85/201
HSL COLOR SPACE
Colors
e entire color space can bevualized in a 3D cylinder, letsat each dimension individually.
Hue
-
8/10/2019 Fundamental of Design-code School
86/201
Hue
STEP ONE
Colors
Hue
-
8/10/2019 Fundamental of Design-code School
87/201
Saturation
STEP TWO
0%100%
Colors
Saturation 0%100%
-
8/10/2019 Fundamental of Design-code School
88/201
Lightness
STEP THREE
t t 0%100%
0%
Colors
Try to
-
8/10/2019 Fundamental of Design-code School
89/201
Try tovisualize
the cylinder
Colors
-
8/10/2019 Fundamental of Design-code School
90/201
+
0100%50%
=H:S:L:
Colors
-
8/10/2019 Fundamental of Design-code School
91/201
+ =H:S:L:
Colors
-
8/10/2019 Fundamental of Design-code School
92/201
+ =H:S:L:
Colors
Brightness
-
8/10/2019 Fundamental of Design-code School
93/201
Colors
Lightness
-
8/10/2019 Fundamental of Design-code School
94/201
A Color Scheme4-5 colors built into the sle guide
NOW WE NEED
Colors
Headline Text
-
8/10/2019 Fundamental of Design-code School
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 Fundamental of Design-code School
96/201
Colors
A Base ColorDifferent colors create different moods.
START BY SELECTING
Ever seen this before?
-
8/10/2019 Fundamental of Design-code School
97/201
Colors
How about this?
-
8/10/2019 Fundamental of Design-code School
98/201
Colors
Eily grabs aention and evokes spd and energy.Heat, Passion, Excitement
-
8/10/2019 Fundamental of Design-code School
99/201
Colors
Associated with reliabiliand playfulnessWarmth, Vitali
-
8/10/2019 Fundamental of Design-code School
100/201
Colors
Represents sunshine, chr and happinessOptimism, Creativi
-
8/10/2019 Fundamental of Design-code School
101/201
Colors
Connotes growth, nature andeshnessSereni, Health
-
8/10/2019 Fundamental of Design-code School
102/201
Colors
Implies loyal, reliabiliand an open communicationSecuri, Truth, Stabili
-
8/10/2019 Fundamental of Design-code School
103/201
Colors
Can also mean royal, sentimental, creative and sophticaSpirituali, Intelligence, Wealth
-
8/10/2019 Fundamental of Design-code School
104/201
Colors
Conveys energy, fun and excitementYouthful intensi
-
8/10/2019 Fundamental of Design-code School
105/201
Colors
Represents age, stabiliand relaxationDurabili, Class
-
8/10/2019 Fundamental of Design-code School
106/201
Colors
Its serious, bold and strongPower, Drama
-
8/10/2019 Fundamental of Design-code School
107/201
Colors
Its message youthful, mild and pureSimplici, Cleanliness
-
8/10/2019 Fundamental of Design-code School
108/201
Colors
Kp Culture in MinDifferent colors mean different things to
different demographics
ALWAYS REMEMBER
Conveys intensior energyWESTERN
-
8/10/2019 Fundamental of Design-code School
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 Fundamental of Design-code School
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
-
8/10/2019 Fundamental of Design-code School
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
-
8/10/2019 Fundamental of Design-code School
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 Fundamental of Design-code School
113/201
ColorsComplementary Colors
Hue 210
-
8/10/2019 Fundamental of Design-code School
114/201
Colors
Explore the World of CAn objectively correct color scheme can still suck
THERE ARE MANY MORE
COMPLEMENTARY
-
8/10/2019 Fundamental of Design-code School
115/201
Colors
Gross
COMPLEMENTARY
-
8/10/2019 Fundamental of Design-code School
116/201
Colors
Dont have to be perfeUse the named schemesa be,eaknded
COLOR SCHEMES
-
8/10/2019 Fundamental of Design-code School
117/201
Color TypeMIXING
Colors
Type color must be high contrt on the background
-
8/10/2019 Fundamental of Design-code School
118/201
Difference in ColorsLets look at Hue, Saturation Brightness
CONTRAST IS THE
Colors
Hue 30
-
8/10/2019 Fundamental of Design-code School
119/201
ColorsContrt of Hue
Hue 120
-
8/10/2019 Fundamental of Design-code School
120/201
Colors
Contrt of Saturation
210100%50%
H:S:L:
21050%50%
H:S:L:
-
8/10/2019 Fundamental of Design-code School
121/201
Colors
Contrt of Lightness
210100%75%
H:S:L:
210100%50%
H:S:L:
-
8/10/2019 Fundamental of Design-code School
122/201
Multi-facetedIts common to combine contrts of Hue, Saturation or Brig
MOST CONTRASTS ARE
Colors
is is hard toread amirite?
-
8/10/2019 Fundamental of Design-code School
123/201
Colors
Contrt of Hue
read, amirite?
is is similarlyhard to consume
OMG thatsmuch beer
-
8/10/2019 Fundamental of Design-code School
124/201
Colors
Contrt of Hue Brightness
much beer
Now my eyesdont hurt
Even Beer
-
8/10/2019 Fundamental of Design-code School
125/201
Colors
Contrt of Hue, Saturation Brightness
Fo Realz, yo
-
8/10/2019 Fundamental of Design-code School
126/201
WCAG 2Web Content AccessibiliGuidelines
THERE ARE STANDARDS FOR THAT
Colors
e best contrast
-
8/10/2019 Fundamental of Design-code School
127/201
Colors
Very simple, high-contrt colors are best
Is black on white
Same hue, high sa bright contrast
-
8/10/2019 Fundamental of Design-code School
128/201
Colors
Very simple, high-contrt colors are best
bright contrast
Are a close second
If youre color
bli d thi h ld
-
8/10/2019 Fundamental of Design-code School
129/201
Colors
Some colors are intrinsically tough for humans to differen
blind, this should
be especially
tough for you.
is is awkward
-
8/10/2019 Fundamental of Design-code School
130/201
Colors
Dontght nature
Abraham Lincoln
is is awkward
Abraham Lincoln
-
8/10/2019 Fundamental of Design-code School
131/201
Colors
Youll lose
Abraham Lincoln
So much beer
Whew
Example text
Warm Cool
-
8/10/2019 Fundamental of Design-code School
132/201
Colors
Warm cold colors dont contrt well for pe
is geing tough to
make up. Go away.
Warm colors appear closer
-
8/10/2019 Fundamental of Design-code School
133/201
Colors
But work well to create depth
So using background
-
8/10/2019 Fundamental of Design-code School
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
-
8/10/2019 Fundamental of Design-code School
135/201
-
8/10/2019 Fundamental of Design-code School
136/201
-
8/10/2019 Fundamental of Design-code School
137/201
Overlaying a paern and darkening the photo can reallytext stand out on the page
TYPE IN AN IMAGE
-
8/10/2019 Fundamental of Design-code School
138/201
Dont Do It
Colors
Unless its a picture of a cat thinking like a human
-
8/10/2019 Fundamental of Design-code School
139/201
Colors
A combination of analogcomplementary colors wenough contrt for text and backgrounds.
-
8/10/2019 Fundamental of Design-code School
140/201
ComplemeHigh-contrasttext/bg colors
LAYOUT
-
8/10/2019 Fundamental of Design-code School
141/201
Visual Hierarchy, AgaArrange elements to engage and
direct the users eye
LAYOUT
Layout
-
8/10/2019 Fundamental of Design-code School
142/201
Layout
Users start at the top lecorner of thepage and then scanom there.
-
8/10/2019 Fundamental of Design-code School
143/201
Layout
Start with placing the logo
-
8/10/2019 Fundamental of Design-code School
144/201
Layout
Navigation can be horizontal or vertical
-
8/10/2019 Fundamental of Design-code School
145/201
Horizontal ideal for navigations with only a few item
-
8/10/2019 Fundamental of Design-code School
146/201
ough vertical worwell in a similar fhion
-
8/10/2019 Fundamental of Design-code School
147/201
Vertical great when youve got a lot of nested page
-
8/10/2019 Fundamental of Design-code School
148/201
ough if you drop your horizontal below the logo, a tiesystem with lots of items work well
-
8/10/2019 Fundamental of Design-code School
149/201
Layout
Both layouts are great for drop-downs
-
8/10/2019 Fundamental of Design-code School
150/201
LayoutAmazonsy-out vertical menu worvery well
-
8/10/2019 Fundamental of Design-code School
151/201
LayoutESPN ha great horizontal drop down
VERTICAL NAVIGATION
-
8/10/2019 Fundamental of Design-code School
152/201
Isnt Really Used MucWhile it does work, make sure youve got a good
reon to use it!
VERTICAL NAVIGATION
Layout
-
8/10/2019 Fundamental of Design-code School
153/201
Layout
e main content area can be under a horizontal nav
-
8/10/2019 Fundamental of Design-code School
154/201
Layout
Or next to a vertical nav
MAKE SURE THE CONTENT
-
8/10/2019 Fundamental of Design-code School
155/201
Reinforces the HierarcUse images that face in, place text appropriately, etc.
Colors
-
8/10/2019 Fundamental of Design-code School
156/201
Layout
e eye will follow the directional cues of elements on the p
-
8/10/2019 Fundamental of Design-code School
157/201
Layout
Make sure directional cues point towards the content
-
8/10/2019 Fundamental of Design-code School
158/201
Layout
Making the contentrst and directional cues reinforce it
Ext
-
8/10/2019 Fundamental of Design-code School
159/201
Layout
Secondary content should be smaller and relegated to the
advcont
-
8/10/2019 Fundamental of Design-code School
160/201
Layout
Can also be broken into chunand placed under main co
-
8/10/2019 Fundamental of Design-code School
161/201
Layout
Footers anchor the page and provide quick-hit info
-
8/10/2019 Fundamental of Design-code School
162/201
Layout
No maer what layout, they should span the width of the p
ITS ALL ABOUT
-
8/10/2019 Fundamental of Design-code School
163/201
e Grid SystemA structural guideline for organizing elements on the pa
Layout
-
8/10/2019 Fundamental of Design-code School
164/201
Layout
A system of horizontal and vertical lines
columgutte
-
8/10/2019 Fundamental of Design-code School
165/201
Layout
e horizontal lines create columns with guers in be
-
8/10/2019 Fundamental of Design-code School
166/201
Layout
And are used to proportionately dtribute elements on the
-
8/10/2019 Fundamental of Design-code School
167/201
Layout
Vertical lines create a beline for text that should equal line
-
8/10/2019 Fundamental of Design-code School
168/201
-
8/10/2019 Fundamental of Design-code School
169/201
e Apple Store uses a grid system to organize their con
-
8/10/2019 Fundamental of Design-code School
170/201
e Apple Store uses a grid system to organize their con
GRIDS COME IN MANY
-
8/10/2019 Fundamental of Design-code School
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 Fundamental of Design-code School
172/201
Layout
With axed grid, the browser can get bigger (or smalland the grid will remain constant.
-
8/10/2019 Fundamental of Design-code School
173/201
Layout
But auid grid grows (or shrin) with the browser win
-
8/10/2019 Fundamental of Design-code School
174/201
Layout
Columns are either added or dropped to beer serve that
-
8/10/2019 Fundamental of Design-code School
175/201
-
8/10/2019 Fundamental of Design-code School
176/201
Layout
Use the grid to break the site down into manageable chu
-
8/10/2019 Fundamental of Design-code School
177/201
Layout
Use the grid to break the site down into manageable chu
-
8/10/2019 Fundamental of Design-code School
178/201
Layout
Use the grid to break the site down into manageable chu
-
8/10/2019 Fundamental of Design-code School
179/201
e Apple store uses all thr
-
8/10/2019 Fundamental of Design-code School
180/201
-
8/10/2019 Fundamental of Design-code School
181/201
-
8/10/2019 Fundamental of Design-code School
182/201
Layout
!"#$%&'()
#$%*"%*
!"#$%&'()
#$%*"%*
!"#$%&'()
#$%*"%*
We can lay out all the elementsom the previous challeto the grid, giving order to the chaos
!"#$%&'()
#$%*"%*
-
8/10/2019 Fundamental of Design-code School
183/201
Layout
e grid versatile enough to accept all of the layouts wev
-
8/10/2019 Fundamental of Design-code School
184/201
Layout
Also, avoid cluer by respecting the guers
h lf f h
WERE ESTABLISHING RELATIONSHIPS
-
8/10/2019 Fundamental of Design-code School
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
-
8/10/2019 Fundamental of Design-code School
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
-
8/10/2019 Fundamental of Design-code School
187/201
Layout
Whitespace nt always white
-
8/10/2019 Fundamental of Design-code School
188/201
Content site uses whitespace to draw user in without overwhe
-
8/10/2019 Fundamental of Design-code School
189/201
Using whitespace on a high level ben major elements
-
8/10/2019 Fundamental of Design-code School
190/201
But only if nuanced whitespace ben elements within containers
B l All i
YOUVE GOT TO
-
8/10/2019 Fundamental of Design-code School
191/201
Balance All e ing
Layout
A good design a balanced design
-
8/10/2019 Fundamental of Design-code School
192/201
Layout
Symmetry
-
8/10/2019 Fundamental of Design-code School
193/201
Symmetry portrays a sense of stabiliand trust
-
8/10/2019 Fundamental of Design-code School
194/201
Overall paerns of symmetry create a sense of balance
-
8/10/2019 Fundamental of Design-code School
195/201
Layout
Asymmetry
-
8/10/2019 Fundamental of Design-code School
196/201
An unrepeated large element creates ymmetry
Gridadherencebrings truebalance
-
8/10/2019 Fundamental of Design-code School
197/201
oughymmetry must still be balanced on the page
The density
on this sidebalancesthe page
-
8/10/2019 Fundamental of Design-code School
198/201
Asymmetry demands aention and creates intrigue
C ib B l
ALL OF THE PRINCIPLES TOGETHER
-
8/10/2019 Fundamental of Design-code School
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
-
8/10/2019 Fundamental of Design-code School
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
-
8/10/2019 Fundamental of Design-code School
201/201
Experiment Oen
Layout
erst solution rarely the best one, dont rush the pro