• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Design
 

Design

on

  • 936 views

Designing for Drupa

Designing for Drupa

Statistics

Views

Total Views
936
Views on SlideShare
839
Embed Views
97

Actions

Likes
1
Downloads
5
Comments
1

3 Embeds 97

http://www.prometsource.com 90
http://prometsource.prometdev.com 6
http://prometsource.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Design Design Presentation Transcript

    • What is Design?-Execute-Plan-Purpose-Specific Function
    • 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
    • Design Basics for the Web-Layout-Color-Typography
    • 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.
    • Layout
    • Layout
    • Layout
    • LayoutWhat is a grid? -visual tool to organize information - equally sized vertical columnsWhy 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
    • 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 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.
    • 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 - 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
    • 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 cross browser support- designing a component that doesn’t exist...yet- lack of design documentation- NOT COMMUNICATING WITH THE DEVELOPER
    • 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.comalistapart.comsixrevisions.com
    • Thanks contact info: chad@promethost.com