018 Fireworks

19 Oct 2012

If you are creating a hi-fidelity mockup for your web application, then Adobe Fireworks is a great software! We will build a little project to learn how to view CSS properties, build hover effects, insert html, rounded ractangles, styles and more. At the same time we will get to review some of the common design principles and legends such as Dieter Rams.

Download video: mp4

Sample code: Github

Version: CS6

Similar episodes: 007 Web fonts

Tools used for Fireworks:

  1. Adobe Fireworks
  2. Adobe Kuler for generating color themes
  3. 960 Grid System
  4. Google web font pairings with Bree and Open Sans

Things to learn in Fireworks

This episode covers the following steps/features that we explored while creating the project:

  1. Create new file from Templates: File > New from Template > Grid Systems > 960.png
  2. Show/Hide guides: cmd + ; to hide and show guides
  3. Extensions for Adobe Kuler: Window > Extensions > Kuler
  4. Pages to create Master pages: Window > Pages > Right Click > Set as Master Page
  5. Create hover effects with states:
    1. Create a hotspot: Slice Tool
    2. Duplicate a state: Window > Slice
    3. Change Statge 2 accordingly
    4. Select the hotspot, the 2 states in the state panel with cmd and then Windows > Behaviours + Add Behaviours > Simple Rollover
  6. Copy elements easily: "Drag and alt an item to copy
  7. Rounded Rectangles: Vector tool Panel > Shapes > Rounded Rectangles
  8. Shadows: Click the shape > Properties panel at the bottom > Filters + > Photoshop Like Effects
  9. CSS3 Properties: Click the shape > Windows > CSS Properties
  10. Filters: Click the shape > Properties panel at the bottom > Filters +
  11. Styles: Click the shape to copy the styles from > Windows > Styles > New Styles > Select the styles to copy
  12. Alignment: Windows > Alignment
  13. Icons and other shapes from the Common Library: Window > Common Library
  14. Preview in HTML: File > Preview in browser > Preview all pages in the browser
  15. Transform/Scale a shape: Click a shape > Cmd + T
  16. Create a Hotspot to slice/export or create hover effect: Web tool > Slice tool > Select the hover area
  17. Insert HTML to embed a Vimeo or YouTube video/Google Maps: Slice Tool > Properties Panel at the bottom > Type > HTML > Edit > Paste in the HTML code

More Resources on Fireworks

  1. Fireworks in Smashing Magazine
  2. Learn Fireworks through AdobeTV
  3. Fireworks interview by Linus
  4. Fireworks resources
  5. Fireworks vs Photoshop image compression
  6. Fireworks extensions by John Dunning
  7. FW Police - more resource

More resources on the project

In creating this episode's project, we have used the names of the following design principles:

  1. 30 usability issues to be aware of
  2. Dieter Rams 10 Principles of “Good Design” [video]
  3. Ten Usability Heuristics
  4. Kano Model

Build Link of this Episode

Smashing Magazine is an amazing website with too many resource on UX, coding, design, wordpress with blog posts as well as eBooks. Much to explore in this resourceful site!