Designing in the Grey...
This is the second chapter of the template approach.
We are always looking for ways to improve our process and workflow. At the start of a project, we are often sketching out our ideas while discussing the project at hand with the client. Putting pen to paper to sketch out a simple wireframe helps us identify the grid and structure of the site, and allows us to look at the UI from a usability standpoint, without all the factors of type, color and imagery.
Wireframing on paper is great to kick-start a clear idea before we start the design, but jumping straight into a design from a wireframe on paper (this can be digital as well - eg. there are some great wireframing tools out there for the iPad) to computer can sometimes be a big leap.
Enter “Greyboxing.” Greyboxing is a great in-between solution in our wireframe-to-design workflow. This method also allows the actual design process to be more in touch with the initial wireframe.
This can certainly be done in Photoshop or Illustrator, but we prefer Adobe Fireworks for multiple reasons:
- Fireworks allows for multi-page mockups
- You can set up a “Master Page” (ala inDesign)
- Creating libraries containing styles and symbols greatly increases workflow
- You can easily integrate vector artwork, or import it from Illustrator
If you’ve never used Fireworks before or if you used it a long time ago, I urge you to download the 30-day trial. The learning curve is minimal compared to a more complex application such as Photoshop. (It’s also much cheaper!)
The process described below are showcased in version 2.0 of our Chapter Three Template. This time, we've constructed a new version using the greyboxing technique so that you can adopt the practices that we've learned. You can Download the template here.
Setup
The first step to setting up a greybox template in Fireworks, is to define your pages. To enable the pages window, select “Windows,” then “Pages.” In default view, the Pages tab is usually grouped with the Layers tab. We use the 960 grid as a starting point, although we like to make the width of the file larger.
The following is a list of our pages we created within the new template:
1) Home Page
2) Blog or News List Page
3) Blog or News Full View with Comments
4) Default Node Page w. Sidebar
5) Default Node Page no Sidebar
6) Contact Page
7) Profile Page
8) Admin Login
9) Styles
Within each Page, we define the following Layer Structure:
1) Header:
The header contains the logo, search input, login & sign-up links, and primary navigation.
2) Content:
Elements within this layer will change from page to page.
3) Footer
Using Styles and Symbols
1) Styles
We use Styles the same way InDesign uses styles. We can create and edit styles for typography and objects such as image styles. Using styles is critical to increasing the speed of our workflow because it enables us to make fast changes that effect all the pages in the file and only have to be done once. This is especially useful once you get to the stage in the process when a client may want to simply "look" at multiple variations of the same thing to make a decision.
In any given design, we determine the basic typography of the design (H1, H2, H3 ... blockquote, list-style, etc.).
For example, in our greybox example, we have selected all the H2 headers, and created a style called H2:
Of course, in the Greybox Template, we have not defined any color or other attributes to H2 yet, but we have defined it as H2, so that when we DO apply a style to all H2 headers, they will all adopt the style that we choose in the design phase.
Once we are ready to define the style, we select one instance of H2, select the font color, etc, and by clicking the “re-define style” button in the properties panel:
This will automatically change all the H2’s in your template to change to the desired style! This also goes for more complex styles that you might have defined, like block headers with a specific background (you might have changed the background, added a drop-shadow and a gradient, etc. - all these can be contained within one style, and once you are ready, simply click on the re-define style button in the properties panel, and this will define the style in the entire template.
2) Symbols
Let’s move on to the use of “Symbols” in Fireworks. Symbols are one of the great time-saving features of Fireworks. When you find yourself using certain elements over and over again (a logo, navigation, buttons, etc.), you will soon find that symbols are your best friend.
With symbols you can contain multiple objects within a single asset, but still have quick access to editing those objects.
If you look at the layer that is labeled “Header,” you’ll see that it contains a single symbol called “Header.” Double-click on the symbol, which takes you into the “symbol editing mode,” and you’ll see that within this symbol, there are a few other symbols and styles nested here: the logo (symbol), the primary navigation (a symbol, containing styles), breadcrumbs (style), search (symbol) and login + signup (symbol).
Double-click on the “logo” symbol. This will take you to the editing mode of only that symbol. Here you can define what elements go within the “logo symbol”. After you have created the logo, click on the blue arrow to exit “symbol editing mode,” which will take you back to the template.
You’ll see that all instances of your symbol “logo” has been updated template-wide! Symbols are great to use for elements that you use a lot. Don’t be afraid to create as many symbols as you need, this is one of the most useful functionalities in Fireworks.
A collection of symbols can also be saved as libraries, and shared with other users. This can become really useful, especially when you are creating a lot of wireframes, and find yourself re-using buttons, forms, navigation, etc.
To sum up...
The methodes described above have transformed our workflow and we hope that you'll adopt them and build on them. Use the grebox template as a resource to study how we set things up, and try the technique on your next project making sure to start defining styles for everything early on in the process. Let us know if you come up with something else that helps streamline things. Download the template now.
The list below outlines the elements present on each page of the template.
List of Pages with their Corresponding Elements:
* The “Header” and “Footer” elements have been omitted in this list, as they appear on each page.
1) Home Page
Focus area
Introduction text
Home page blocks
2) Blog or News List Page
Page title
Blog/News teaser:
H2 title,
date posted,
author,
number of comments,
teaser paragraph,
more link,
tags
Sidebar content:
Tag cloud,
other block content
Possible pagination
3) Blog or News List Page with Comments
Page title
Full blog entry:
h2 title
date posted
author
number of comments
blog copy
Comments:
author thumbnail
author name
date posted
reply link
leave a comment link
Post new comment area:
form input fields
send button
4) Default Node Page with Sidebar
(eg. “About”, or any other main content page. We include a default node page in our template, so we know what a simple page with basic content would look like.)
- Page Title
(H1)
- Basic Typography:
H1, H2, H3, H4
- Blockquote
- Unordered List
-
Code
-
Table
- Link
- HR
- Image
-
Pagination
5) Default Node Page without Sidebar
(This page s also useful to design, as we can determine padding, which in turn aids legibility)
-
As per above, but without a sidebar
6) Contact Page
- Page title
- Input labels
- Input Fields
- Submit button
7) Profile Page
- basic layout for profile page
8) Admin Elements
- Login:
- Admin tabs
- Input field labels
- Input fields
- Submit button
- Error message
- Help message
- Warning message
- Status message
9) Styles
-basic style guide
