[Re]Encoded.com

Prototyping a web layout in illustrator: tips and tricks part 1

Two out of three times when I’m approached by a client to build them a website, I ask for prototype images to give me an idea of what they want. This is always met by baffled and suspicious looks of my true intentions as they assume a website is built off the top of the developers head. This couldn’t be further from the truth.

For that top-notch, breath-taking website you have in mind with 3-D like effects, drop shadows on starry background, round corners and flickering flash images, you need to put that into still images called prototypes. These are high-resolution pictures, usually JPEG for its fantastic pixels that capture screenshots of the proposed website. They are used to quickly communicate visual ideas between a web designer/client and the developer about the proposed website’s layout and design before coding. The devil is in replicating the images details painstakingly in HTML code.

Illustrator is probably the best graphic design software I’ve encountered so far. Other major contenders for this coveted position are FireBuilder , Balsamiq, MindNode, and OmniGaffle which use a combination of wireframing and rapid prototyping to generate the layout and designing of a website.

Coming back to illustrator, drawing web concepts is so practically simplified that, save for the creativity aspect, one would credit it for the picturesque art it facilitates a designer to create! Below are some cunning, behind-the-scenes tricks I use to make web design a lesser nightmare than coding:

Automating simple tasks

Illustrator enables one to define simple tasks, called actions, that come up in a typical design activity and it plays them back whenever need to execute the task arises. These are normally repetitive tasks that do not require creativity such as correcting mistakes, replacing images, defining what goes where in the web pages and other trivial but crucial tasks. This leaves one more time to concentrate on the more interesting task of actual design that requires some brain work.

Actions are recorded while one is working in illustrator, much like macros in Microsoft’s Word. They are stored in the Action palette, a floating window in the illustrators workspace for ease of access by the user.

Fig 1.1: Action palette for storing prerecorded actions

To start recording an action, just before you start doing the task;

• Click on the “Create a new set” button in the bottom border of the action palette. This is to avoid tampering with the default sets defined by Adobe.
• Give it a functional name, like “Replacing images” for easier identification and click “OK”. The new but empty set becomes upended in the list of sets.
• With the new set highlighted, click on the “Create new action” button in the action palette. A new action palette dialog box appears. Name it appropriately, choose a functional key for a shortcut to the action and click “Record” to start recording.

Fig 1.2 New set and action dialog boxes

• Go ahead and, for the last time, do that mundane task and Illustrator will be recording it in the background for playback whenever you need it performed.
• As soon as you are through, click the “Stop recording button” for Illustrator to install the action in the palette.
• When the need arises, all you have to do is choose the action defining the particular action and click the “Play action button”.

Data-driven graphics

Assume you are making 300, unique web banners or header boards based on a template with data consisting of images or text. Illustrator turns any prototype into a basic template for data driven graphics. You use a script to reference a database to generate the unique web templates.

All you need to do is define which objects on the prototype are dynamic using session variables. These enable changing of text, linked images, visibility settings and other items in your images.

This gives you, as the web designer, control over the non-static data elements in your design. When you hand over the prototype for development, rest assured the variable items will change in tandem.

Color Format

The cardinal rule in graphics design is color, color, color. The format you save your prototype images in determines a lot how the images will look like in tone and texture and how the designer will interpret them. Say you want to make a banner with a sandy feel and you have designed it to virtually look like a piece of the Nyali beach, you need to save it in a form that will retain the color.

Illustrator’s options for saving graphics include JPEG, GIF, Web Colors, PNG-8 and SVG. Each has its own characteristic and uses. JPEG preserves variations in brightness and hue while GIF and PNG-8 compress solid areas of color at the same time preserving crisp detail. The rest maintain high-quality, vector artwork while compressing the images. The latter are the best for saving prototype images for preserving image quality.

Fig1.2 different graphic formats and their quality: JPEG, PNG and GIF

In the next part of this series, we shall explore more Illustrator tips and tricks to make your web design work much easier.

• Tweet