Slide 1
Slide 1 text
Monday, March 26, 12
Slide 2
Slide 2 text
by Eric D. Fields / UX Director at HipHost
Stylish Content
Monday, March 26, 12
Slide 3
Slide 3 text
Goals
• reevaluate the design of our site as it
relates to our content
• empower you to start customizing your
own content
Monday, March 26, 12
Slide 4
Slide 4 text
When we talk about good web
design…
• we empathize with the user…
• … to make informed decisions…
• … that lead to the best possible user
experience
• we educate the client about the design
process
Monday, March 26, 12
Slide 5
Slide 5 text
The Rules of Good Web Design
• present information clearly
• provide intuitive navigation
• make it easy on the eyes
Monday, March 26, 12
Slide 6
Slide 6 text
The Results of Good Web Design
• site becomes a destination
• keeps the user on the site
• increased virality
• helps establish trust & authority
Monday, March 26, 12
Slide 7
Slide 7 text
The Results of Stylish Web Design
• get noticed
• builds or reinforces a brand
• creates an emotional response
Monday, March 26, 12
Slide 8
Slide 8 text
What should we style?
• banner?
• background?
• sidebar?
• images?
Monday, March 26, 12
Slide 9
Slide 9 text
What did the users come for?
CONTENT
Monday, March 26, 12
Slide 10
Slide 10 text
CONTENT
=
TYPOGRAPHY
Monday, March 26, 12
Slide 11
Slide 11 text
What is typography?
The style and
appearance of text.
And why should I care?
Monday, March 26, 12
Slide 12
Slide 12 text
What is typography?
The style and
appearance of text.
And why should I care?
composition, attitude, look, feel
Monday, March 26, 12
Slide 13
Slide 13 text
What is typography?
The style and
appearance of text.
And why should I care?
shape, color, bare attributes
Monday, March 26, 12
Slide 14
Slide 14 text
Slab serif, Script, Blackletter, Monospaced, Hand,
Decorative
Weight
Width
Typographic Elements
Letterforms
Sans serif, Serif,
Monday, March 26, 12
Slide 15
Slide 15 text
Typographic Elements
Words
Monday, March 26, 12
Slide 16
Slide 16 text
Typographic Elements
Words & Phrases
Monday, March 26, 12
Slide 17
Slide 17 text
Typographic Elements
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
Words & Phrases Come
Together (At Long Last!)
Monday, March 26, 12
Slide 18
Slide 18 text
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui of cia deserunt mollit anim id est laborum.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque
ipsa quae ab illo inventore veritatis et quasi architecto beatae
vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia
voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
magni dolores eos qui ratione voluptatem sequi nesciunt.
Neque porro quisquam est, qui dolorem ipsum quia dolor sit
amet, consectetur, adipisci velit, sed quia non numquam eius
modi tempora incidunt ut labore et dolore magnam aliquam
quaerat voluptatem. Ut enim ad minima veniam, quis nostrum
exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid
ex ea commodi consequatur?
Words & Phrases Come
Together (At Long Last!)
Monday, March 26, 12
Slide 19
Slide 19 text
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam,
eaque ipsa quae ab illo inventore veritatis et quasi architecto
beatae vitae dicta sunt explicabo. Neque porro quisquam est,
qui dolorem ipsum quia dolor sit amet, consectetur, adipisci
velit, sed quia non numquam eius modi tempora incidunt ut
labore et dolore magnam aliquam quaerat voluptatem. Ut
enim ad…
Words & Phrases Come
Together (At Long Last!)
“Nemo enim ipsam voluptatem quia
voluptas sit aspernatur aut odit aut fugit,
sed quia consequuntur magni eos qui”
Monday, March 26, 12
Slide 20
Slide 20 text
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui of cia deserunt mollit anim id est
laborum.
Words & Phrases Come
Together (At Long Last!)
Sed ut perspiciatis unde omnis iste
natus error sit
Voluptatem accusantium doloremque laudantium, totam rem
aperiam. Eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam
voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
consequuntur magni dolores eos qui ratione voluptatem sequi
nesciunt.
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
consectetur, adipisci velit, sed quia non numquam eius modi
tempora incidunt ut labore et dolore magnam aliquam…
Monday, March 26, 12
Slide 21
Slide 21 text
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit
anim id est laborum.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam,
eaque ipsa quae ab illo inventore veritatis et quasi architecto
beatae vitae dicta sunt explicabo.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut
odit aut fugit, sed quia consequuntur magni dolores eos qui
ratione voluptatem sequi nesciunt.
Neque porro quisquam est, qui dolorem ipsum quia dolor sit
amet, consectetur, adipisci velit, sed quia non numquam eius
modi tempora incidunt ut labore et dolore magnam aliquam…
Words & Phrases Come
Together (At Long Last!)
Quis nostrum exercitationem
ullam corporis suscipit
laboriosam, nisi ut aliquid ex
ea commodi consequatur?
Monday, March 26, 12
Slide 22
Slide 22 text
Good typography is readable
• high contrast
• line-height: 1.5
• left-aligned (never justified)
• ~ 80 characters per line
• 16px font size
Monday, March 26, 12
Slide 23
Slide 23 text
Stylish typography is emotional
• Strict color palette
• Mix serif headlines w/ sans-serif copy
• Headlines ~ 2x body copy size
• Embrace whitespace
• Custom fonts?!
Monday, March 26, 12
Slide 24
Slide 24 text
Web font services
• TypeKit (http://typekit.com)
• Google Web Fonts (http://www.google.com/webfonts)
• Fonts.com (http://webfonts.fonts.com/en-US)
• H&FJ (http://www.typography.com/ — soon… $$$)
Monday, March 26, 12
Slide 25
Slide 25 text
kottke.org barackobama.com
Monday, March 26, 12
Slide 26
Slide 26 text
So how do we style our blog?
CSS
Monday, March 26, 12
Slide 27
Slide 27 text
CASCADING
STYLE
SHEETS
Monday, March 26, 12
Slide 28
Slide 28 text
CSS is 1/3 of your (or most)
websites
• HTML – content
• JavaScript – behavior
• CSS – presentation
Monday, March 26, 12
Slide 29
Slide 29 text
How CSS Works
• Every page of your blog links back to one or many stylesheets
(*.CSS files)
• Within the CSS file, selectors describe elements in the
HTML
• Properties are defined within selectors that describe
the presentation elements
• The browser matches elements based on CSS selectors
and renders them according to defined properties
Monday, March 26, 12
Slide 30
Slide 30 text
CSS Selectors Look Like
• h1 (tag-based selector)
• strong (tag-based selector)
• .gallery (class-based selector)
• .post p (class-based selector)
• #footer (id-based selector)
• #main-content li a (id-based selector)
Monday, March 26, 12
Slide 31
Slide 31 text
CSS Properties Look Like
• font-size: 24px;
• margin-top: 12px;
• padding-left: 80px;
• color: #9988ac;
• text-decoration: underline;
• font-weight: bold;
Monday, March 26, 12
Slide 32
Slide 32 text
CSS Looks Like…
h1 {
font-size: 24px;
font-weight: bold;
color: red;
margin-bottom: 11px;
}
.special-paragraph {
font-style: italic
border-top: 1px solid #9999AC;
padding-top: 10px;
padding-bottom: 10px;
}
.entry-header .comments-link a {
background: #EEE url(images/comment-bubble.
color: #666;
font-size: 13px;
font-weight: normal;
line-height: 35px;
overflow: hidden;
padding: 0 0 0;
position: absolute;
top: 1.5em;
right: 0;
text-align: center;
text-decoration: none;
width: 43px;
height: 36px;
}
Monday, March 26, 12
Slide 33
Slide 33 text
Here we go!
Monday, March 26, 12
Slide 34
Slide 34 text
Thank You! Any questions?
Monday, March 26, 12