Designing for Drupa

1. What is Design?
-Execute
-Plan
-Purpose
-Specific Function

2. Design is not the same thing as art
Art Design
1. http://theselvedgeyard.files.wordpress.com/2009/01/jacksonpollock.jpg
2. http://nickross.tumblr.com/post/6044611025/jesuisperdu-neue-grafik-new-graphic-design

3. Design Basics for the Web
-Layout
-Color
-Typography

4. 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.

5. Layout

6. Layout

7. Layout

8. Layout
What is a grid?
-visual tool to organize information
- equally sized vertical columns
Why use a grid?
-establishes standardization
-increases readability and usability

9. Lots of content, but well organized
This slide and the next are from presentation by Khoi Vinh & Mark Boulton: Grids are Good

10. ...because of the grid

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

12. Grid Example

13. Typography
- availability
- commonly installed fonts
on mac and windows
- typefaces
- sizing and hierarchy

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. Typography
type specimen based on findings

16. Typography
websafe fonts

17. Color
- Consistency
- Defined palette
- Branding

20. Brand Colors

21. Design as it relates to Drupal

22. 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

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

24. Potential pitfalls

25. 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

26. Online Tools

27. Firebug-a must have tool
- inspection tool
- view and edit css
- getfirebug.com

28. Firebug Demo
random Drupal site I picked from
http://www.drupalsites.net
http://www.kurieuze.com/

29. Online color tools
- Kuler
- Color Palette Generator
- Colourlovers.com

30. Grid Tools
- 960.gs
- Grid Generator
- gridr buildrrr

31. Type Tools
- pxtoem.com
- csstypeset.com
- font squirrel

32. Demo of completed design
see my other pdf that’s uploaded to
slideshare.net

33. A few sites with lots of web design info
smashingmagazine.com
noupe.com (sub-site of smashingmagazine)
webdesignerdepot.com
alistapart.com
sixrevisions.com

34. Thanks
contact info:
chad@promethost.com