Embed Size (px)
DESCRIPTION
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.
Citation preview
CREATING FIREWORKS TEMPLATES FOR DRUPALDani Nordin :: @danigrrl :: tzk-design.com
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@[email protected]
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
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
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
CREATING FIREWORKS LAYOUTSWhat you need to remember
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)
Global/Shared Layers• Page Grid (Square Grid, 960.gs)• Logo• Navigation Styles• Footer Elements
Global/Shared Styles• h1, h2, h3, h4• p, ul, ol• blockquote• code snippets• Buttons• Admin Tabs
Resources• Chapter Three’s blog post: Template Approach (includes
template download)• http://www.chapterthree.com/blog/nica_lorber/
design_drupal_template_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-firewo
rks/
• 960.gs templates for Fireworks• http://www.robbiemanson.com/resources/960px-grid-templates/
QUESTIONS?@danigrrl on [email protected]
