back

Design 101 for developers

by Dee Sadler

In today’s economy, companies are looking to hire hybrid team members that can perform both designer and developer tasks. A true hybrid is hard to find. A small investment in learning some basic design skills will go a long way towards improving your job opportunities. In the past, designs were “thrown over the wall” to the Dev team. They were expected to take the design requirements, and as Captain Jean-Luc Picard says, “Make it so. ” Quite often, the Dev team wasn’t even asked to participate in the planning meetings before the design was finalized.

Expectations have changed. In order to be successful, it’s time to embrace a new philosophy. By building a foundation of design techniques, you can bridge the gap of the designer/developer workflow. In this article, you’ll find some tips and tricks to increase your design chops using Fireworks CS5. Fireworks is an excellent tool for wire framing, laying out a design, and exporting standards-based CSS and HTML code. You can use it to prototype Rich Internet Applications and create interfaces for mobile devices. And it’s extremely versatile—vector objects, object styles, and bitmaps are equally managed with ease. Fireworks CS5 includes a library containing frequently used components (symbols) and you can display a group of common elements across all of your pages, by setting a master page.

Use Fireworks to design like a pro

Many developers don’t realize that most design conventions are based on common sense. In many ways, good design is like elegant programming. It is defined by both logic and structure. Good design uses a hierarchy, weaving complementary colors, typography and imagery to convey a message.

Working with grids and white space

When creating a new document, Fireworks includes an option to create a new document from a template. Folders for mobile presets and grid systems to lay out a site mockup or application, as well as mobile, web and wireframe templates are presented when you click the Templates button in Figure 1.

Click the Templates button in the New Document dialog box to access the Grid systems folder.

Figure 1. Click the Templates button in the New Document dialog box to access the Grid systems folder.

The Grid systems folder contains grids for 4, 8, 12 and 16 column layouts. It is extremely helpful to use these grids when laying out designs for sites using CSS positioning. The 960 Grid System and the Blueprint CSS framework are both very popular right now. These are a series of grids and the corresponding CSS rules to define specific structures. The 960 Grid System download file includes a Fireworks template, and DMXzone offers a free Dreamweaver extension to add and edit CSS Grid Cells.

Look at inspiration sites, such as CSS Beauty, Best CSS Vault and Smashing Magazine to examine how structure facilitates design. The best applications combine usability with good presentation. This explains why wireframes are an excellent way to begin laying out a UI design. The goal is to display information in a format that makes it easy for users to find the items they need. Effective use of white space leads to intuitive interfaces; users become frustrated when presented with too much information. Less really is more. It is a helpful exercise to visit your favorite sites and consider why you like them. While great content is critical to a successful project, the information must be easy to navigate. Using grids to add sufficient white space between columns of text, images, and media makes the content more discoverable.

Typography

Typography is the art of using type effectively to communicate to a target audience. When used correctly, it sells products, promotes events and compels a person to take action. The use of legible and expressive type is especially important when designing websites and RIA applications, because users are looking at increasingly smaller screens with varying resolutions.

Over the last few years, the use of fonts in websites and applications has changed significantly. In many situations, it is still safe to keep typography simple. However, when your client insists on using a particular font, you can leverage Typekit. When comparing fonts, focus on the white space and the contrast with the background. Above all, ensure that the text is legible. Experiment by updating the settings in the Property inspector in Fireworks to affect the display of text elements.

The following two examples illustrate the display of text content before and after applying simple formatting. In Figure 2, the text is displayed with a uniform size and color.

The original text as it appears before formatting.

Figure 2. The original text as it appears before formatting.

In Figure 3, white space, varying font sizes, and color make the different sections of text content stand out.

The formatted text makes the content easier to scan.

Figure 3. The formatted text makes the content easier to scan.

Creating vector shapes in Fireworks

Fireworks is a vector web graphic program. It uses many of the Illustrator conventions, although it is often compared to Photoshop. While Fireworks is a powerful image manipulation tool, it excels at creating vector shapes. The Toolbar includes a section of vector tools shown in Figure 4 that generate two different types of vector shapes. You can create regular shapes (rectangles, ellipses and polygons), and auto shapes.

Use the Toolbar to access the vector tools.

Figure 4. Use the Toolbar to access the vector tools.

When drawing rectangles, you can use the roundness slider in the Property inspector to create rounded corners. However, to draw a shape with two right angle corners and two rounded corners, you’ll use auto shapes. Follow these steps:

  1. Select the Rounded Rectangle Auto Shape in Figure 5.

    The auto shapes are displayed below the dividing line.

    Figure 5. The auto shapes are displayed below the dividing line.

  2. Click and drag to draw a rectangle on the canvas. The auto shape displays yellow diamond handles.
  3. Press Alt (Windows) or Option (Mac) while clicking and dragging one of the diamond handles to the corner as shown in Figure 6. Repeat this step to create a second right angle corner.

    Drag the yellow diamond handles while pressing the modifier key to adjust the corners of the rounded rectangle auto shape.

    Figure 6. Drag the yellow diamond handles while pressing the modifier key to adjust the corners of the rounded rectangle auto shape.

All auto shapes include multiple options to expand and edit the original shapes they create.

Selecting a harmonious color palette

The Property inspector in Fireworks makes it easy to apply colors to elements. Additionally, Fireworks is integrated with Adobe Kuler, a tool for picking color themes. To access the Kuler panel, choose Window > Extensions > Kuler.

Kuler is a web app that enables you to explore, create and share color themes. It has a thriving community that participates by uploading unique color combinations. You can drill down to select colors based on themes, search with keywords, or choose a single base color and generate a custom palette of five other colors. Using a client’s logo, you can create a palette by selecting the PMS or CMYK version of the main color. Kuler returns the hexadecimal value and suggests complementary colors for a custom palette. This tool is very helpful when choosing a color scheme for your site or application. The interface allows you to name and share your color selections with others.

Incorporating styles

You can design graphic elements, such as glassy buttons and textured backgrounds, using the pre-defined styles in the Styles panel. It includes chrome, diagonal, input, paper, pastel, plastic, text, and wood styles. Any styles you apply are displayed in the Property inspector, making them easy to change. You can also create your own styles by formatting an object on the canvas. When you are ready to save it, click the New Style button (page icon) in the Property Inspector. Enable the attributes you want to preserve, enter the name of the custom style and then click OK (see Figure 7).

Enter a descriptive name for the style in the New Style dialog box.

Figure 7. Enter a descriptive name for the style in the New Style dialog box.

Once you create your style, it will be included in the menu in the Styles panel so that you can easily re-apply the same style on other elements in your document.

Adding HTML, form and Flex component elements

Use the items in the Common Library when creating a wireframe. The Common Library includes HTML code snippets, 2D objects, Mac, Windows, and Flex components to add to your projects.

When you drag Flex components onto the canvas, you’ll use the Symbol Properties panel to set the different states and labels. By default, the Symbol Properties panel is displayed in a tab next to the Property inspector, although you can rearrange the panels to suit your preference. It’s important to note that the Flex components provided in Fireworks CS5 are MX components, rather than Spark (Flex 4) components as listed in Figure 8.

Select an item in the Common Library and drag it out to the canvas to use it.

Figure 8. Select an item in the Common Library and drag it out to the canvas to use it.

When you use the HTML elements in the Common Library, the document can be exported using standards-based CSS. To learn more about creating CSS layouts in Fireworks, see the section on CSS Layouts in the Fireworks CS5 Help documentation.

The Common Library includes many useful graphic and code assets, so be sure to review its contents and learn about elements you can add as displayed in Figure 9.

Create a sample project and drag out elements from the Common Library to identify them.

Figure 9. Create a sample project and drag out elements from the Common Library to identify them.

Working with master pages

Pages and master pages are a fantastic feature in Fireworks. Place common page elements, such as header elements, logos and navigation bars in the master page. It helps organize your projects and makes them easier to update.

The example in Figure 10 displays the pages of a mobile application design.

Name each page descriptively as you build out the design.

Figure 10. Name each page descriptively as you build out the design.

The key to working with pages in Fireworks is naming, duplicating and sharing layers across pages.

To rename a page, double-click the page’s name. You can also use the options in the Options menu in the upper right corner of the Pages panel to duplicate a page, turn off numbering, set a page as a master page, create a new page and more. Right-click (or Control-click) to access the context menu that also includes the options listed in Figure 11.

Use the options in the context menu to work with pages.

Figure 11. Use the options in the context menu to work with pages.

Note: If you are designing a project for Flash Catalyst, you can create pages in Fireworks, export the document as an FXG file, and then import it into Flash Catalyst. The pages you set up in Fireworks are recognized as Pages/States in Flash Catalyst.

After creating multiple pages, you may encounter situations where it makes sense to share a layer across pages. This is helpful when dealing with elements that are likely to change and are displayed on multiple pages. Shared layers allow you to inserted the element on many pages. If you need to update the element, simply update it once on the original page and it will update automatically on the shared pages.

To share a layer across pages, select the option to Share Layer to Pages in the Layers panel Options menu. When a layer is shared across pages, it will display a page icon in the Layers panel.

When using pages, each page of the document can be set to a different length. Simply select each page in the Pages panel and set the size of the canvas. Deselect all other elements first, and then click the Canvas Size button in the Property inspector. Make sure the option Current page only is selected, click the top middle anchor (or other desired location) to specify the starting point to use for the resize operation, and then enter the numeric dimension in the Height field to reset the canvas size as shown in Figure 12.

Click to set the anchor that Fireworks uses when applying the new height settings to the canvas.

Figure 12. Click to set the anchor that Fireworks uses when applying the new height settings to the canvas.

Create compelling designs with beautiful graphics

If you don’t have much design experience, it may seem safer to avoid using more than one image file. However, if you analyze the sites with the highest design ratings, you’ll discover that creative imagery is the aspect that separates them from the competition. Professional-looking and thought-provoking graphics make designs more attractive, similar to the conventions for using white space and contrast.

Over the past five years, the use of CSS positioning has revolutionized how imagery is used in websites. There are many affordable stock photography sites, including iStockphoto and Shutterstock that make it easier than ever before to obtain high quality image files. Although this goes without saying, steer clear of clipart and animated GIF files. Studies show that humans are naturally drawn to other humans, so use images of faces when applicable. Also strive to find strong foreground images, to use as the basis of a design.

When it comes to cropping images, use common sense as the visuals relate to the message. If the project is focused on food and the image depicts a plate of food sitting on a table, be sure to crop in on the food. When a user views the project, they should be able to immediately understand the topic being presented. If the images you are using do not support the message, find better images to incorporate. It is worth the extra effort.

When you are finished with a design in Fireworks, choose File > Export. If you are creating a website, it’s likely you’ll choose the CSS and Images (.htm) option shown in Figure 13.

Select the format of the exported files in the Export menu.

Figure 13. Select the format of the exported files in the Export menu.

When you are prepping a mockup to share with clients, it’s common to export the project using the Adobe PDF option.

As you build a design, always consider the intended output needed for the final deliverable. Fireworks offers many different file formats you can choose from when exporting a document. For example, if you created slices to create web graphics, you can export a table-based HTML file or simply export the slices as image files. If you are designing a project for Flash Catalyst, select the option to export a FXG file. If you designed pages for HTML, you can export the project as a CSS layout. Investigate the options available when you choose File > Export, File > Save As, and File > Preview in Browser to learn about the available operations. When previewing your site, you can choose to view the document in a browser or Device Central.

If you find yourself working on a project that requires design work, Fireworks offers many features to streamline the production process. Fireworks can output stunning designs and make a hybrid out of any developer.

Check out the following online resources to learn more design techniques:

Laying out designs with Grids and CSS

Inspiring design sites

Working with typography

Obtaining stock photography

‹ Back


Dee Sadler is a Certified Adobe Expert and Instructor. Based in Kansas City, Dee is a UX, UI, web stylist who codes and is passionate about Community.