Your SlideShare is downloading. ×
0
What is Design?-Execute-Plan-Purpose-Specific Function
Design is not the same thing as artArt                                            Design1. http://theselvedgeyard.files.wor...
Design Basics for the Web-Layout-Color-Typography
LayoutWireframesVisual designers use the wireframe as the basis forrenderings that show the hierarchical importance andloc...
Layout
Layout
Layout
LayoutWhat is a grid?    -visual tool to organize information    - equally sized vertical columnsWhy use a grid?    -estab...
Lots of content, but well organized    This slide and the next are from presentation by Khoi Vinh & Mark Boulton: Grids ar...
...because of the grid
Grid Standards- 12 columns, this can vary- include gutters and margins it total width- 960 px wide total
Grid Example
Typography- 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 popu...
Typographytype specimen based on findings
Typographywebsafe fonts
Color- Consistency- Defined palette- Branding
Brand Colors
Design as it relates to Drupal
Drupal elements to style-	Header                                       -	"Read More" link/button-	Footer                  ...
http://www.chapterthree.com/blog/nica_lorber/design_drupal_template_approach
Potential pitfalls
Potential pitfalls-   non web-safe fonts or unlicensed fonts-   background images that may need to be resized-   lack of c...
Online Tools
Firebug-a must have tool- inspection tool- view and edit css- getfirebug.com
Firebug Demorandom Drupal site I picked fromhttp://www.drupalsites.net    http://www.kurieuze.com/
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 designsee my other pdf that’s uploaded toslideshare.net
A few sites with lots of web design infosmashingmagazine.comnoupe.com (sub-site of smashingmagazine)webdesignerdepot.comal...
Thanks         contact info:         chad@promethost.com
Design
Design
Upcoming SlideShare
Loading in...5
×

Design

887

Published on

Designing for Drupa

Published in: Design, Technology, Art & Photos
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total Views
887
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
8
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Design"

  1. 1. What is Design?-Execute-Plan-Purpose-Specific Function
  2. 2. Design is not the same thing as artArt Design1. http://theselvedgeyard.files.wordpress.com/2009/01/jacksonpollock.jpg2. http://nickross.tumblr.com/post/6044611025/jesuisperdu-neue-grafik-new-graphic-design
  3. 3. Design Basics for the Web-Layout-Color-Typography
  4. 4. LayoutWireframesVisual designers use the wireframe as the basis forrenderings that show the hierarchical importance andlocation of the elements (with each general section ofthe page labelled); free of any potentially distractingdesign treatments.
  5. 5. Layout
  6. 6. Layout
  7. 7. Layout
  8. 8. LayoutWhat is a grid? -visual tool to organize information - equally sized vertical columnsWhy use a grid? -establishes standardization -increases readability and usability
  9. 9. Lots of content, but well organized This slide and the next are from presentation by Khoi Vinh & Mark Boulton: Grids are Good
  10. 10. ...because of the grid
  11. 11. Grid Standards- 12 columns, this can vary- include gutters and margins it total width- 960 px wide total
  12. 12. Grid Example
  13. 13. Typography- availability- commonly installed fonts on mac and windows- typefaces- sizing and hierarchy
  14. 14. 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.
  15. 15. Typographytype specimen based on findings
  16. 16. Typographywebsafe fonts
  17. 17. Color- Consistency- Defined palette- Branding
  18. 18. Brand Colors
  19. 19. Design as it relates to Drupal
  20. 20. Drupal elements to style- Header - "Read More" link/button- Footer - Submit Button or general button style- H1 - H5 - Input Field- Body - Input Title style- Link - Input Text style- Unordered List - Tags- Blockquote - Pagination- Image Style - Basic Node Page Layout Style (margins)- Code - Table Style-Admin Tabs - Error Message (secondary tabs) - Status Message- Secondary Admin Tabs (listed under - Warning Message admin tabs) - Help Message- Collapsable Field Sets - Default Profile Layout- Block Headers - Blog title and Byline- Block Typography - Breadcrumbs- More button
  21. 21. http://www.chapterthree.com/blog/nica_lorber/design_drupal_template_approach
  22. 22. Potential pitfalls
  23. 23. 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
  24. 24. Online Tools
  25. 25. Firebug-a must have tool- inspection tool- view and edit css- getfirebug.com
  26. 26. Firebug Demorandom Drupal site I picked fromhttp://www.drupalsites.net http://www.kurieuze.com/
  27. 27. Online color tools - Kuler - Color Palette Generator - Colourlovers.com
  28. 28. Grid Tools- 960.gs- Grid Generator- gridr buildrrr
  29. 29. Type Tools- pxtoem.com- csstypeset.com- font squirrel
  30. 30. Demo of completed designsee my other pdf that’s uploaded toslideshare.net
  31. 31. A few sites with lots of web design infosmashingmagazine.comnoupe.com (sub-site of smashingmagazine)webdesignerdepot.comalistapart.comsixrevisions.com
  32. 32. Thanks contact info: chad@promethost.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×