Fireworks Templates for Drupal (D4D Boston 2012)

2,223 views

Published on

This presentation, given at Boston's Design for Drupal Camp in July 2012, provides a framework and rationale for creating customized Fireworks templates for Drupal projects.

Published in: Design, Technology, Art & Photos
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,223
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
15
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Fireworks Templates for Drupal (D4D Boston 2012)

  1. 1. CREATING FIREWORKSTEMPLATES FOR DRUPALDani Nordin :: @danigrrl :: tzk-design.com
  2. 2. Dani Nordinfounder, the zen kitchen• UX Designer and Strategist• Specialize in design strategy, UX and prototyping for Drupal projects• Author, Drupal for Designers (O’Reilly, 2011/2012)Contact@danigrrldani@tzk-design.comtzk-design.com
  3. 3. Layout for Drupal: Photoshop• Working with shapes/path can be awkward, particularly when making changes• Text renders awkwardly• Have to slice images, or create new files, to get images for theming• Have to create a new file for every page you’re laying out (or hide and show layers and re-export)• Makes iteration annoying
  4. 4. Layout for Drupal: Illustrator• Better handling of shapes and rendering of text• Better control of color, particularly when using PMS values• Still have to slice images, or create new files, to get images for theming• Still have to create a new file for every page you’re laying out (or hide and show layers and re-export)• Makes iteration annoying
  5. 5. Why Use Fireworks?• Handle shapes like Illustrator: can easily adjust points, curves, etc.• Still renders in pixels• Keep multiple pages in one document• Share layers among pages: particularly useful for common elements• Support for text/image styles• Export entire layers as a web-ready image• Easily and efficiently iterate stylistic conventions without needing multiple files
  6. 6. CREATINGFIREWORKS LAYOUTSWhat you need to remember
  7. 7. Pages to Consider• Node without sidebar• Node with one and two sidebars• Specialty nodes (specific content types)• Views listings for text content• Views listings for image content• Home Page• 404 and 403 Pages• User Login/Account screen (Drupal admin defaults)
  8. 8. Global/Shared Layers• Page Grid (Square Grid, 960.gs)• Logo• Navigation Styles• Footer Elements
  9. 9. Global/Shared Styles• h1, h2, h3, h4• p, ul, ol• blockquote• code snippets• Buttons• Admin Tabs
  10. 10. Resources• Chapter Three’s blog post: Template Approach (includes template download) • http://www.chapterthree.com/blog/nica_lorber/design_drupal_temp late_approach• Chapter Three’s blog post: Greyboxing (includes template download) • http://www.chapterthree.com/greyboxing• Square Grid Template for Fireworks • http://www.idux.com/2010/10/04/square-grid-template-for- fireworks/• 960.gs templates for Fireworks • http://www.robbiemanson.com/resources/960px-grid-templates/
  11. 11. QUESTIONS?@danigrrl on Twitterdani@tzk-design.com

×