Published on

Designing for Drupa

Published in: Design, Technology, Art & Photos
1 Comment
1 Like
No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  1. 1. What is Design?-Execute-Plan-Purpose-Specific Function
  2. 2. Design is not the same thing as artArt Design1.
  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.
  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-
  26. 26. Firebug Demorandom Drupal site I picked from
  27. 27. Online color tools - Kuler - Color Palette Generator -
  28. 28. Grid Tools- Grid Generator- gridr buildrrr
  29. 29. Type Tools- font squirrel
  30. 30. Demo of completed designsee my other pdf that’s uploaded
  31. 31. A few sites with lots of web design (sub-site of smashingmagazine)
  32. 32. Thanks contact info:
  1. A particular slide catching your eye?

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