Transcript Presentation - Frameworks Conference

Design for Developers I
With Dave Powell
1
Dave Powell
 Dave is a developer/designer/project
manager at the University of North Carolina
at Chapel Hill
 He has been designing and developing
websites for 10 years
 He has been designing for print and
electronic media for 12 years
•
Clients/Brands include:
 Target, Wal-Mart, JCPenney, Banana Republic, GAP,
Costco, Publix, Peds, Vassarette, UNC-CH, UNC Sports
Media, etc.
2
Dee Sadler
 Painter, Illustrator, Photographer, and web geek
 Started with Quark in 1987
 Now… an Adobe® Certified Instructor
In: Photoshop, Illustrator, InDesign,
Dreamweaver, Flash and a Certified Web
Specialist
 In October 2006, retired from employment to
become a full time trainer/business owner.
(Worked on sites and Flash work for: Hills Pet Nutrition, XboxCup.com,
Xerox, Sprint, KFC, and many more for a National Ad agency.
3
Why do you need to know design?
 Do you ever interact with designers?
 Do you ever interact with clients?
 Have you ever rolled your own site (soup to
nuts)?
 Do you ever design UI?
 Does your site flow match your Information
Architecture?
 Using Interface Driven Architecture?
4
What should you get out of this talk?
 Steps for interacting with clients
 Steps for designing your pages
•
Including:
 Establish a visual heirarchy
 Choose colors and fonts
 Create a Comp or Demo design
 Steps for establishing a “Brand”
 How to implement this design
5
Let’s look at some award winning
web designs
 Functional Sites (all Alexa top 10)
•
•
•
Google
Craigslist
Yahoo!
 Fun Sites (scrappy top 100 sites)
•
•
•
•
Adobe
NFL
Technorati
Flickr
 Animated Sites (webby nominees and winners)
•
•
2advanced.com
Stylewars.com
6
Functional Sites
7
Mid Teir Sites
8
Mid Teir Sites (typical example)
9
“Fun” Sites
10
Why did they win these awards?
 They make use of these elements:








A clear visual hierarchy
Effective use of color to reinforce the information
architecture of the site
Visual themes that establish a “brand”
A cohesive use of typography
Effective use of graphical elements (photos and art)
The site is reasonably accessible
Depth, connotation
And of course…effective content
11
(but that’s up to you!)
How do I apply these concepts
to my site?
 Review your information architecture
 Create a comp (composite) design
 Review with the client
 Implement using CSS and Photoshop
12
Dummy Pages/Comps
•
•
•
•
•
Determine the number and size of the various elements,
text, pictures and pieces of art that will be placed on the
page
Decide which elements are related and how to group them
Select the major display element or elements for the page
Select the second major display element or elements for the
page
Identify the lead element…what’s the most important
element on the page?
 Workflow methodologies such as FLiP and Interface
Driven Architecture (Hal Helms and Clark Valberg)
which focus on client interaction support this idea
13
Design isn’t a four letter word!
Start with the basics
 Color choices.
 Basic Photoshop skills like:

color correction, cropping for content, etc.
 Using the concept of
 CSS starter templates
 Font choices
 Page layout basics
14
Visual Hierarchy
 Four main elements of Visual Hierarchy
 Positioning
 Weight
 Color
 White
Space
 Elements that incorporate all elements
 Photos/Animations
15
Positioning
16
Weight
17
Weight
18
19
20
Color basics
 Black isn’t a color choice…
 Choosing color sets


no more need for web safe colors
http://kuler.adobe.com/
 Using images to choose colors
 Using color effectively on a page
 White space… utilize it, don’t fill it
21
Color Heirarchy
 Hot  Cold
 Hot colors are picked up first…is red always
the hottest? No…
 Color Photos have a higher value than most
colors because they also carry weight
22
Fonts demystified






Serif or San Serif?
Font families
Types of fonts (why it’s important)
Fonts in headers
Easiest to read on screen
What the heck is anti-aliased text?
23
Serifs
 This is a serif font…
 The “Feet” of serif
fonts help distinguish
the letters at a small scale…in Print!
 Anti-Aliased Text - For Web use, Sans Serif is always clearer
than Serif…
 Serif type gives character to image text and headings…but
should be avoided for body text for accessibility reasons…
 See http://alistapart.com for a great example of both Serif and
Sans Serif fonts in a page
24
Sans-Serif
 Or without feet…
 The Sans-Serif
fonts are best when used for larger
presentation in Print…
 And for body text on the web…but why?
•
•
Aliasing…
Pixelation…
25
The ‘B’ Word: Branding
 Visual Themes
•
•
•
•
Colors
Icons
Formatting
Examples
26
Magazines: Branding Icons
 Anatomy of an Icon
27
Merchandising
 Product Placement
 Information Architecture
•
•
Color to accentuate architecture
Themes to reinforce architecture
28
Get feedback…
 Present the client with your Dummy
Page when you present your workflow
 Does the client like how you’ve handled
their brand?
 Do the visual themes lead the user to
the correct decisions/associations?
29
Photoshop/Fireworks basics
 Color correction made easy
 Cropping for content
 Non-destructive editing
 Using colors from images for your pages
 Fireworks or Photoshop for the web
30
CSS to the rescue
 CSS. What’s what?
3
types of CSS used
 Inline (only use if necessary)
 Document level - Embedded
 External (think being able to update a 1,000
page web site in one place)
31
Writing CSS
 3 main CSS rules
 Class
selectors
 .blue
 Tag
selectors
 body
 ID
or Advanced selectors
 #wrapper
32
Class Selectors



-
.blue
p.right {text-align: right}
p.center {text-align: center}
You have to use the class attribute in your HTML document:
<p class="right">
This paragraph will be right-aligned.
</p>
<p class="center">
This paragraph will be center-aligned.
</p>
To apply more than one class per given element, the syntax is:
<p class="center bold"> This is a paragraph. </p>
The paragraph above will be styled by the class "center" AND the class
"bold".
33
ID Selectors - #blue
 The style rule below will match the element that has an id
attribute with a value of "green":
#green {color: green}
The style rule below will match the p element that has an id with
a value of "para1":
p#para1 { text-align: center; color: red }
Do NOT start an ID name with a number! It will not work in
Mozilla/Firefox.
 ID selectors have a higher precedence than
attribute selectors.
34
Tag Selectors - body

body { background-color: white; font: small Georgia, serif; }
a { color: #004276; text-decoration: none; }
a:hover { text-decoration: underline; }
a:visited { color: #666699; }
35
Add Styles to Elements with Particular
Attributes
 You can also apply styles to HTML
elements with particular attributes.
 The style rule below will match all input
elements that has a type attribute with a
value of "text":
input[type="text"] {background-color:
blue}
36
CSS: Putting it all together
 Code Best practices


/* Comment, comment, comment your CSS */
Reuse, and recycle - make CSS templates
 Browsers: Why can’t they all just get along
 Keep things SIMPLE
•
•
Are you using JS to spin designs for every browser?
Are you using 50 divs just for one page?
 Your Styles should meet your requirements
•
•
Do you have to meet 508 standards for accessiblity?
What does your client need/want?
37
Usability and resources
 Books:

Bulletproof Web Design, CSS Mastery, Designing with Web
Standards, Eric Meyer on CSS, A Whole New Mind – Daniel Pink
 Online:

www.westciv.com, www.alistapart.com, www.w3schools.com,

The Rise of Right-Brained Thinking
 Inspiration:

www.csszengarden.com, www.cssbeauty.com, www.cssvault.com
38
Summary of Design Tips




Establish a visual heirarchy
Use typography as a graphical element
Use color and photos to provide focus
Visual themes provide predictability and
can provide connotation
 Use CSS to handle your layout and
establish themes
39
Look at your pages





White space use
Font usage
Graphical elements
Colors used
CSS
40