Design

-Execute-Plan-Purpose-Specific Function

What is Design?

1. http://theselvedgeyard.files.wordpress.com/2009/01/jacksonpollock.jpg

2. http://nickross.tumblr.com/post/6044611025/jesuisperdu-neue-grafik-new-graphic-design

Design is not the same thing as art

Art Design

Design Basics for the Web

-Layout-Color-Typography

Layout

Wireframes

Visual designers use the wireframe as the basis for renderings that show the hierarchical importance and location of the elements (with each general section of the page labelled); free of any potentially distracting design treatments.

Layout

Layout

Layout

Layout

What is a grid?

-visual tool to organize information- equally sized vertical columns

Why use a grid?

-establishes standardization-increases readability and usability

Lots of content, but well organized

This slide and the next are from presentation by Khoi Vinh & Mark Boulton: Grids are Good

...because of the grid

Grid Standards

- 12 columns, this can vary- include gutters and margins it total width- 960 px wide total

Grid Example

- availability

- commonly installed fonts on mac and windows

- typefaces- sizing and hierarchy

Typography

- Either serif or sans-serif fonts are fine for body copy and headings, but sans serif fonts are still more popular for both.

- Common choices for headlines are Georgia, Arial and Helvetica.- Common choices for body copy are Georgia, Arial, Verdana and

Lucida Grande.- The most popular font size for headings is a range between 18 and

29 pixels.- The most popular font size for body copy is a range between 12 and

14 pixels.

- Header font size ÷ Body copy font size = 1.96.- Line height (pixels) ÷ body copy font size (pixels) = 1.48..75- Line length (pixels) ÷ line height (pixels) = 27.8.- Space between paragraphs (pixels) ÷ line height (pixels) = 0.754.- The optimal number of characters per line is between 55 and 75, but

between 75 and 85 characters per line is more popular,- Body text is left-aligned, image replacement is rarely used and links

are either underlined or highlighted with bold or color.

Typography

Typography

type specimen based on findings

Typography

websafe fonts

Color

- Consistency- Defined palette- Branding

Brand Colors

Design as it relates to Drupal

Drupal elements to style

-Header-Footer-H1 - H5-Body-Link-Unordered List-Blockquote-Image Style-Code- Admin Tabs

(secondary tabs)-Secondary Admin Tabs (listed under

admin tabs)-Collapsable Field Sets-Block Headers-Block Typography-More button

-"Read More" link/button-Submit Button or general button style-Input Field-Input Title style-Input Text style-Tags-Pagination-Basic Node Page Layout Style (margins)-Table Style-Error Message-Status Message-Warning Message-Help Message-Default Profile Layout-Blog title and Byline-Breadcrumbs

http://www.chapterthree.com/blog/nica_lorber/design_drupal_template_approach

Potential pitfalls

- non web-safe fonts or unlicensed fonts- background images that may need to be resized- lack of cross browser support- designing a component that doesn’t exist...yet- lack of design documentation

- NOT COMMUNICATING WITH THE DEVELOPER

Potential pitfalls

Online Tools

Firebug-a must have tool

- inspection tool- view and edit css- getfirebug.com

Firebug Demo

http://www.kurieuze.com/

random Drupal site I picked from http://www.drupalsites.net

Online color tools

- Kuler- Color Palette Generator- Colourlovers.com

Grid Tools

- 960.gs- Grid Generator- gridr buildrrr

Type Tools

- pxtoem.com- csstypeset.com- font squirrel

Demo of completed design

see my other pdf that’s uploaded to slideshare.net

A few sites with lots of web design info

smashingmagazine.comnoupe.com (sub-site of smashingmagazine)webdesignerdepot.comalistapart.comsixrevisions.com

Thanks

contact info:[email protected]