Tài liệu Speaking in styles- P5 ppt

Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
C
HAPTER
7
Designing with CSS
My guess is that you already have your own personal or profes-
sional Web design process in place. Whether you are into Agile,
UML, waterfall, or something of your own devising, I’m not here
to upset the apple cart—maybe just add a couple of extra apples
to it. If you are a designer, CSS needs to become a central part of
your Web design process.
Using CSS is likely to change how you approach Web design.
Although you may still create wire frames and comps, you’ll  nd
yourself making re nements, adjustments, and wholesale changes
in CSS code. You may even  nd yourself going straight from
hand-drawn sketches to CSS code. You’ll save time and e ort,
and, before you know it your Web designs will start to really pop.
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
180
SPEAKING LIKE A NATIVE
DESIGNING WITH CSS
Once upon a time, it was enough for the designer to create a few
visual comps, maybe cut the chrome, and then hand everything
over to a developer. If you followed this process you probably
found that the developer never got things exactly the way you
wanted them: Elements didn’t line up, fonts were wrong, colors
shi ed. Never send a developer to do a designer’s job. It doesn’t
matter how great your comps look in Photoshop; what matters is
what the visitor sees in the Web browser. To get things right, it’s
important to become familiar with every aspect of the process,
and be able to step in to guide the  nal outcome.

01 Plan your site. Before you code, think carefully about what
you are doing, why you are doing it, and how you are doing
it: sketching, wire-framing, mood boards, and visual comps
are the best ways to plan before creating your site with CSS.
02 Build your site. One of the most important di erences
between print and Web design is not paper versus screen,
but static versus dynamic.  e great advantage of Web
design is that you can make changes at anytime, and with
CSS, you can make those changes extremely quickly.
Prototypes allow you to test ideas in context.
03 Deploy your site. Take your prototype online to test it in
the wild before  nally going live with the
hard launch.
04 Iterate the process. Creating a Web
site is an iterative process. You can’t just
love it and leave it. Never be afraid to go
back to anywhere within the process and
make changes based on feedback.
The Process: An Overview
voxLibris
speaking-in-styles.com/book/voxlibris
I’ll be using the fi ctitious site voxLibris in the
next several chapters to show the design pro-
cess. All of the code used to create this page is
listed in Appendix A.
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
181
Prototype
Beta
Alpha

DEPLOY
BUILD
PLAN
Sketches
Comps
Wire
Frames
Mood
Boards
Style Guide
Chrome
Launch
ITERATE
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
182
SPEAKING LIKE A NATIVE
DESIGNING WITH CSS
Every project should start with a plan. Whether it’s in your head
or formally spelled out, you need to de ne what the expectations
are for the project’s success. As the designer, your job is to con-
ceive the successful design solution using a process of discovery
and iteration. As you create your plans in advance of actual cod-
ing, it’s important to keep in mind how you will actually realize
your vision in code.
Sketches
Sketches are not meant to be detailed or complete plans, but to
help you get the rough ideas down and capture notes about the
project and rough dimensions. I like to put information like the
Web site’s purpose, audience, and content, as well as the site’s
message in big letters to remind me what this project is about. In

addition, I’ll quickly throw down di erent page types, mark stu
out, redraw them as necessary to experiment, looking for di er-
ent design angles.
 ere are a lot of di erent ways to sketch. I carry my Moleskin
graph paper sketchbook everywhere I go, ready to whip out
when inspiration strikes (or when I have a few spare minutes).
If I’m brainstorming with a group, I’ll get pasteboard-size paper
and start sketching while others throw out ideas. I’ve even been
known to do digital sketches in programs like Microso Visio
and OmniGra e, which can then quickly evolve into wire frames.
 e most important thing to remember about your sketches is to
keep them  uid. Try as many di erent design solutions as you can
come up with—never be tied to any one solution.
Plan
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
183
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
184
SPEAKING LIKE A NATIVE
DESIGNING WITH CSS
Plan
continued
Page Flow
 e  rst question you need to ask yourself when starting your
design is “Will my page be  uid or  xed?” Although  uidity is
generally considered for the width of the design, it can equally
be applied to the height of the design. While most Web designs
are based on a  xed width with a  uid height (that is, it stretches
to the height required to display all of the page content), this is
not your only option:

 Fixed width/ uid height:  e page width is constrained,
generally to prevent horizontal scrolling, and the height will
stretch to accommodate the content, requiring a vertical
scroll if it doesn’t  t in the browser window.
 Fluid width/ uid height:  e page stretches horizontally
and vertically to use the maximum area available in the
browser window. Content that does not  t in the area of the
open browser window will require a vertical scroll to view.
 Fixed width/ xed height: Both width and height are
constrained. How content that does not  t is treated will
depend on how the over ow attribute for the box is set.
Generally, with this design, content is carefully controlled so
as not to require more space than the available area, or scroll-
ing is controlled on a per module basis.
 Fluid width/ xed height:  e page stretches horizontally
to  ll the available area and can even cause the page to scroll
horizontally.
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
185
Fixed Width/Fluid Height Fluid Width/Fluid Height
Fixed Width/Fixed Height Fluid Width/Fixed Height
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
186
SPEAKING LIKE A NATIVE
DESIGNING WITH CSS
Plan
continued
Wire Frames
Wire frames are your chance to plan the structure of your page
without the distractions of visual design.  ey serve as the blue-

prints for construction and need to include placement and mea-
surements of elements in pixels. Here are the basic elements you
will need to include:
 Fluid or  xed: Determine whether the layout is  uid or
 xed. Fluid layouts allow visitors to make better use of their
screen real estate, but are generally harder to design to. For
general  xed page widths, I use 980px, which will allow most
visitors to see everything.
 Widths: Widths should be exactly speci ed in  xed layouts,
but can be exact or variable—generally indicated with an
asterisk (*)—in  uid designs.
 Heights: Heights should generally be variable, unless you
know the element needs a  xed height. In those cases, make
sure to account for how over ow content will be treated.
 Margins: Margins and padding should be indicated, but may
need to be adjusted in the visual comps.
 Scroll lines: Although not as important as it used to be, the
“fold” of the page should be indicated for di erent moni-
tor resolution heights so that you know roughly where the
page “fold line” will fall. I use heights of 290px , 410px, and
578px.
 Color: Use color only to indicate controls and links.
Generally, I use blue to show actionable items and grayscale
for everything else.
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
187
UI DESIGN
voxLIBRIS : Main
Thu Apr 23 2009
s.1

SCREEN
REFERENCE
NUMBER
980px
410px578px
C
Welcome and Main Navigation
300px x *
Top Navigation:
• Genres
• About
• News
• Reviews
• Donate
• Contact
D
Text Ads
300px x *
3 text ads provided by Oogle.
E
Page Header
470px x *
F
Genre Button
100px x 140px (with text label)
H
News and Reviews Text Blocks
210px x * each
I
Book Cover Links

150px x 225px
Ad
TEXT BLOCK
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Vestibulum commodo metus
sit amet libero. Cras nisl neque, lacinia id,
mollis vel, dictum ac, ante. Vestibulum tortor
dui, convallis a, dapibus vitae, volutpat nec,
justo. Integer dui. Nunc nec velit. Praesent
mollis, dolor ut elementum lobortis, turpis
orci vulputate tortor, quis condimentum tortor
leo non est. Maecenas ac elit. Cras porttitor
porta magna. Duis ultrices. Suspendisse
potenti. Nam posuere lacus in ligula. Fusce
vitae ligula. Nam nunc ante, laoreet eget,
adipiscing sit amet, sollicitudin sed, urna.
Header
980px by 100px
SEARCH
150px by 20px

Titles

Footer 980px by 30px
A
Header
980px x 100px
B
Book Search
User can input key words to search book text.

1. Title
2. Author
3. Full Text
A
Category Image
100px by 100px
Category Title
## Books
Category Image
100px by 100px
Category Title
## Books
Category Image
100px by 100px
Category Title
## Books
Category Image
100px by 100px
Category Title
## Books
Category Image
100px by 100px
Category Title
## Books
Category Image
100px by 100px
Category Title
## Books
Category Image
100px by 100px

Category Title
## Books
Category Image
100px by 100px
Category Title
## Books
Category Image
100px by 100px
Category Title
## Books
Category Image
100px by 100px
Category Title
## Books
Category Image
100px by 100px
Category Title
## Books
Category Image
100px by 100px
Category Title
## Books
Book Cover
150px by 225px
Book Title
By Author Name
Download Audio
Preview Audio
Read Text
Book Cover

150px by 225px
Book Title
By Author Name
Download Audio
Preview Audio
Read Text
Book Cover
150px by 225px
Book Title
B
y Author Name
Download Audio
Preview Audio
Read Text
TOP BOOKS
Book Cover
150px by 225px
Book Title
By Author Name
Download Audio
Preview Audio
Read Text
Book Cover
150px by 225px
Book Title
By Author Name
Download Audio
Preview Audio
Read Text
Genres

TEXT BLOCK
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Vestibulum commodo metus
sit amet libero. Cras nisl neque, lacinia id,
mollis vel, dictum ac, ante. Vestibulum tortor
dui, convallis a, dapibus vitae, volutpat nec,
justo. Integer dui. Nunc nec velit. Praesent
mollis, dolor ut elementum lobortis, turpis
orci vulputate tortor, quis condimentum tortor
leo non est. Maecenas ac elit. Cras porttitor
porta magna. Duis ultrices. Suspendisse
potenti. Nam posuere lacus in ligula. Fusce
vitae ligula. Nam nunc ante, laoreet eget,
adi
piscing sit amet, sollicitudin sed, urna.
TEXT BLOCK
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Vestibulum commodo metus
sit amet libero. Cras nisl neque, lacinia id,
mollis vel, dictum ac, ante. Vestibulum tortor
dui, convallis a, dapibus vitae, volutpat nec,
justo. Integer dui. Nunc nec velit. Praesent
mollis, dolor ut elementum lobortis, turpis
orci vulputate tortor, quis condimentum tortor
leo non est. Maecenas ac elit. Cras porttitor
porta magna. Duis ultrices. Suspendisse
potenti. Nam posuere lacus in ligula. Fusce
vitae ligula. Nam nunc ante, laoreet eget,
adi
piscing sit amet, sollicitudin sed, urna.


B
T
L
C
D
enres
E
F
G
T
H
J
Genres
About
News
Reviews
Donate
Contact
News
Reviews
TEXT BLOCK
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Vestibulum commodo metus
sit amet libero. Cras nisl neque, lacinia id,
mollis vel, dictum ac, ante. Vestibulum tortor
dui, convallis a, dapibus vitae, volutpat nec,
justo. Integer dui. Nunc nec velit. Praesent
mollis, dolor ut elementum lobortis, turpis
orci vulputate tortor, quis condimentum tortor

leo non est. Maecenas ac elit. Cras porttitor
porta magna. Duis ultrices. Suspendisse
potenti. Nam posuere lacus in ligula. Fusce
vitae ligula. Nam nunc ante, laoreet eget,
adipiscing sit amet, sollicitudin sed, urna.
TEXT BLOCK
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Vestibulum commodo metus
sit amet libero. Cras nisl neque, lacinia id,
mollis vel, dictum ac, ante. Vestibulum tortor
dui, convallis a, dapibus vitae, volutpat nec,
justo. Integer dui. Nunc nec velit. Praesent
mollis, dolor ut elementum lobortis, turpis
orci vulputate tortor, quis condimentum tortor
leo non est. Maecenas ac elit. Cras porttitor
porta magna. Duis ultrices. Suspendisse
potenti. Nam posuere lacus in ligula. Fusce
vitae ligula. Nam nunc ante, laoreet eget,
adipiscing sit amet, sollicitudin sed, urna.
About
Nulla sed felis. Sed et tellus. Vivamus venenatis suscipit magna. Vestibulum hendrerit iaculis
nunc. Morbi posuere tempus elit. Ut commodo mattis nisi. Vivamus elit. Nam nisi felis, egestas
et, varius in, suscipit at, risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
eget sapien. Mauris convallis dolor et nisl. Quisque nibh mauris, dictum quis, mollis et,
euismod quis, diam. Sed at purus. Nulla tempus libero non mi. Nulla leo dui, venenatis ut,
feugiat sit amet, fringilla nec, ligula. Praesent arcu neque, pretium vitae, tincidunt interdum,
laoreet non, felis.
I
G
About

470px x *
290px
s
s
d
,
,
,
40px
r
or
r
R
N
n
e
e
e
fe
la
20px
220px
2222
470px
200px
J
Footer
980px x 20px
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
188

SPEAKING LIKE A NATIVE
DESIGNING WITH CSS
Mood Boards
 ere are many kinds of mood boards—everything from collages
of seemingly random elements that re ect the desired style to
boards that are on the verge of being a design speci cation docu-
ment.  e style you choose should depend on your own strengths
as well as the needs of your client. If you are a strong visual
designer, a poster style format may work best; if you are an infor-
mation architect, a more structured document might be appro-
priate. Whatever style you choose, think carefully about what will
best communicate the  avor of the site you want to create.
Mood boards are meant to help de ne the visual style of your site
without you actually designing the entire interface. Generally, you
can quickly create two or three “looks” that can then be presented
to a client for feedback, without having to get bogged down in
the details of building the pages. You can include splashes from
the color palette, patterns, textures, typography, photos, and
illustrations. I also recommend including treatments of some
of the standard user interface elements such as form  elds, lists,
and tables.
Plan
continued
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
189
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
190
SPEAKING LIKE A NATIVE
DESIGNING WITH CSS
Visual Comps

Visual comps (short for compositions) combine the wire frames
to create mood boards: a static version of what the  nal Web
page will look like. If you skipped the mood boards, you may also
be relying on the visual comps to present to your client, possibly
showing several di erent skins for them to choose from. If you
are working with a developer who will be constructing the site,
this needs to be a pixel-perfect composition.
Once you get more comfortable with creating Web pages in CSS,
however, you may  nd that you can be less thorough, and can
leave some of the  nal design polishing until the prototype stage.
Here are some tips to keep in mind for your visual comps:
 Use guides to reconstruct the grid you created in your wire
frames as precisely as possible. You may ultimately want to
break out of that grid to a less blocky design, but you need
to know where the grid is to break it.
  ink carefully about how a background element will tile.
You can tile horizontally or vertically to  ll an area with a
pattern. Complex background patterns that don’t tile are
possible but generally lead to larger graphic  le sizes.
 If you want to use rounded corners or drop shadows, con-
sider creating these with CSS as design enhancements.  ey
are hard to create graphically but are easily added using CSS.
Keep in mind that these styles are not currently supported in
all browsers.
 If using Photoshop, make sure your proof setup (View>Proof
Setup) is set to RGB; otherwise your colors will look very
di erent in the browser.
Plan
continued
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

191
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
192
SPEAKING LIKE A NATIVE
DESIGNING WITH CSS
Build
 e faster you can move from planning to building, the better.
It’s easy to get bogged down trying to plan for every contin-
gency, to the point that the planning takes over the production.
Planning should give you direction, but, in an iterative design
process, you can always revisit wire frames and comps as the situ-
ation on the ground changes.
Cutting Chrome
Chrome (any graphics or visual e ects used to create the user
interface of a Web site) is generally cut from the visual comps.
How you cut the chrome depends on the so ware you use to cre-
ate your comps, but regardless of your so ware of choice, there
are a few guidelines to follow while you are working:
 Most chrome is added as a background image using CSS,
rather than as an image tag.
 Use transparent PNGs where possible to make overlapping
elements easier to create. In Photoshop, this means using
PNG 24. ImageReady allows you to create transparent
PNGs in both PNG 8 and PNG 36, although not in PNG
24 for some reason.
 Use JPEGs for complex images such as photos.
 Combine di erent states of a chrome graphic into a single
 le, and use CSS sprites to slide it back and forth.
Putting the chrome
back together to cre-

ate your interface is
covered in detail in
Chapter 11, “Chrome.”
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
193
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
194
SPEAKING LIKE A NATIVE
DESIGNING WITH CSS
The Style Guide
 e style guide pulls all of your planning together into a single
document, which is then a common point of reference for every-
one on the team when building the site. It serves as a blueprint
for constructing the site and provides notes for designers and
developers who may work on the site in the future.
You should include the following information in your docu-
ments, using CSS style notation:
 Typography:  e font families, styles, and weights being
used. You do not need to specify exact sizes or usage here.
 at will be included in the default styles. Because this is
Web design, though, you want to include a prioritized list
of fonts, starting with the most desired and ending with a
generic font-family as the ultimate fallback option.
 Colors: List all of the primary and secondary colors used in
the site, giving the hex and RGB values for each. I also like
to give each color a speci c project name, which generally
makes it easier to reference during discussions and feedback.
 Default styles: De nes the global styles such as font-family,
font-size, color, and page background that will be used over
most of the pages.

 Layout:  e widths, height, padding, and margins of every
element in the Web page.
 Chrome: For each element, show the image(s) with  le
name(s) being used to create it.
Build
continued
Typography is cov-
ered in Chapter 9,
“Typography.”
Default styles and
layout are covered in
Chapter 8, “Layout.”
Chrome is covered in
Chapter 11, “Chrome.”
Color values are
detailed in Appendix
B, “CSS Values.”
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
195
Primary Colors
Secondary Colors
Black
RGB 0, 204, 255
#000000
White
RGB 255, 255, 255
#ffffff
VLBeige
RGB 252, 249, 230
Gold

RGB 255, 215, 0
Red
RGB 255, 0, 0
#ff0000
Dark Gray
RGB 169, 169, 169
#a9a9a9
Dim Gray
RGB 105, 105, 105
#696969
Gray
RGB 128, 128, 128
#808080
Silver
RGB 192, 192, 192
#c0c0c0
VLAqua
RGB 0, 76, 94
Typography
Fontin Sans
Optima

Trebuchet MS
Sans-serif
Regular
Fontin Sans
Optima

Trebuchet MS
Sans-serif

Bold
Fontin Sans
Optima

Trebuchet MS
Sans-serif
Oblique
Fontin Sans
Optima

Trebuchet MS
Sans-serif
Bold/Oblique
FONTIN SANS
OPTIMA

TREBUCHET MS
SANS-SERIF
Capitalized
VLLightAqua
RGB 37, 105, 128
Garamond
Cochin

Times
Serif
Regular
Garamond
Cochin


Times
Serif
Bold
Garamond
Cochin

Tim es
Serif
Italic
Garamond
Cochin

Times
Serif
Bold/Italic
GARAMOND
COCHIN

TIMES
SERIF
Capitalized
Yellow
RGB 255, 0, 0
Family 1
Colors
Family 2
Wed Apr 22 2009
Page 2 of 4
Style Guide
voxLIBRIS :

Typography & Colors
Design Director
Jason Cranford Teague

15, 0
28, 128
Garamond
Coch

TimTT
Seri
Italic
Garamond
Bold/Italic
GARAMOND
Capitalip zed
body
background-color: RGB(0,78,94)
background-image: url(bg-page.png)
color: rgb(105,105,105)
font-family: "fontin sans", optima,
candara, "trebuchet-MS", sans-serif
font-size: 12px
h1, h2, h3, h4, h5, h6
color: rgb(128,128,128,)
font-family: garamond, cochin,
cambria, times, serif
font-weight: normal
p, ul, ol
line-height: 1.5

a
text-decoration: none
a:link
color: rgb(51, 204, 255)
a:visited
color: rgb(51,204,255)
a:hover
color: rgb(255,255,255)
text-decoration: underline
a:active
color: rgb(153, 102, 51)
text-decoration: underline
input
font-size: 14px;
color: rgb(128,128,128);
font-family: "fontin sans", optima,
candara, "trebuchet-MS", sans-serif
Defaults Chrome
Welcome
Wed Apr 22 2009
Page 3 of 4
Style Guide
voxLIBRIS :
Chrome
Design Director
Jason Cranford Teague

50% to scale
bg-sidebar1-top.png
bg-sidebar1-mid.png

bg-sidebar1-bottom.png
Ads
bg-ads-top.png
bg-ads-mid.png
bg-ads-bottom.png
flourish-down.png
icon-pointer.png
Section
flourish-up.png
bg sidebar1 bottom.png
Wed Apr 22 2009
Page 4 of 4
Style Guide
voxLIBRIS :
Layout
Design Director
Jason Cranford Teague

B
Left Sidebar
padding-left: 50px
padding-right: 40px
padding-top: 40px
padding-bottom: 50px
A
Left Sidebar
padding-left: 0
padding-right: 10px
padding-top: 10px
padding-bottom: 0

40px
40px
30px
20px
10px
30px
300px
220px
A
B
10px
60px
20px
5px
30px
C
C
Search Input
padding: 2px 5px
470px 200px
20px
20px
210px 33003300210px
10px
30px
20px
40px
40px
50% to scale
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.

196
SPEAKING LIKE A NATIVE
DESIGNING WITH CSS
Build
continued
Prototype
Ready to start coding?  e prototype is where you transform
your static visuals into living Web pages. If you are starting a pro-
totype from scratch (rather than re-skinning an existing site), you
will want to create your HTML  rst to de ne the general page
structure to which the CSS is then applied. Keep these tips in
mind while coding your CSS:
 Don’t be afraid to modify your design as you assemble
it.  is is the di erence between theory (the visual comp)
and practice (the prototype). O en what works in the free-
form world of the comp doesn’t work in the more structured
world of CSS code. For example, I used a di erent  ourish
with the “Genres” title than shown in the comp, because it
proved impossible to code e ectively. Remember: iterate.
 Use placeholder content.  e closer you can get to the  nal
content you will be using, the better, but don’t waste time
trying to get the exact content you will use for launch. For
example, greek text for copy is  ne at this point, as long as it
is approximately the same length as the  nal copy.
 Show an example of all use cases. Try to replicate a sample
of every element that will be on the page to show how it
works. For example, add dummy links to show how they will
be presented.
 Test, test, test! As you develop your prototype, make sure
to constantly test it in as many browsers as possible. Nothing

is more frustrating than  nding your design looks great in
Firefox but falls apart in Internet Explorer.
If you need to generate
greek text (also known
as “Lorem Ipsum” text)
for your placeholder
content, use the Web
site lipsum.com.
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
197
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.