By Vincent Le Moign
www.webalys.com
@webalys

Speed Design with Illustrator

14 tips to create interfaces in minutes

1Dynamic Buttons

Save time creating buttons with the dynamic button style. Apply the style to any text and it become a dynamic button. Change the button label: the button shape will automatically extend to fit the new text width.

Tutorial: how to create Dynamic buttons

2Text Styles

Apply complex paragraph styles to your text in one click. When you update a paragraph style, the changes will be applied to all the text in the paragraph. As with the CSS stylesheets, you can apply changes to all your application or website screens... and make sure that your typography is consistent.

3Global colors

A lesser-known but powerful Illustrator feature: the global colors. This is the fastest way to apply a color change to the whole design, and to keep you colors consistent. When you modify a global color, the new color is updated for every object using this color.

4 Modular design

Create modular components using the Symbols panel. This will allow you to reuse and modify elements across an entire website. Not only does it save you time, but it guarantees consistency.

Use it for shared components like footer, menu, panels...

When you modify the menu on one page, the changes are instantly updated on all other page menus as well.

5Icon Fonts

Easily insert icons from icon fonts in your designs. These days a lot of icon fonts are available, like Font Awesome or my Streamline Icons Set. Once installed on your OS, they are easy to use via the glyph panel in Illustrator.

Open the Glyphs Panel (Window → Type → Glyphs), and double-click on an icon to insert it into a line of text.

6CSS frameworks Columns

In Illustrator, define a column grid based on your favorite CSS framework.
I personally use these Bootstrap settings: 940px width artboard, 12 columns grid.

Check my Starter template: I've set up a hidden layer that I can display to show the underlying grid.

7Snap to the grid

Set up a grid for webdesign, with a minimum grid unit of 5px. I personally use a grid unit of 10px, by using these settings: gridline every 100px, 10 subdivisions. So a subdivision equals 10px.

Then, activate the"snap to grid" feature. Now elements snap to the grid, and you save time in composing your layout.

8 Multiple screen Design

Use up to 99 artboards for all your application or website screens. You will have a global view for all your screens. Any change you make to a text style, color or component (like a footer) is applied to every screen.

Thanks to the Illustrator vector format, even with dozen of different screens the file stay small and easy to manage.

9Resize without distorting

Resize an object without distorting it with the "9 slices" scaling tool. You define which object parts can be rescaled, and which parts to preserve. That way, if you resize a tab with rounded corners, the corners won't be distorted. If you save this object as a symbol, you will also have a reusable GUI component.

10Image Masks

No need to use Photoshop to crop an image. You can use the Illustrator's masks features to choose which part of an image to show. Use circles, ellipse, or any vector shape as a mask...

11 Starter templates

Save time when you start a new project with the Illustrator's templates. Your favorite settings are ready: guides, grids, zoom level, symbols, swatches, styles...

12 Graphic styles

Use your library of graphic styles, which you can quickly apply to your buttons, menus, panels, and so on. The changes you make to the graphic styles are updated on every object using it. It's fast and consistent.

13 Text wrapping

Wrap text around images , just as you would in full-strength text-layout programs such as InDesign and QuarkXPress. The text will automatically adjust to changes in image size and define outside margins.

14 Round individual corners

With Illustrator CC you can easily round an individual corner, and even define the corner style: rounded, chamfer, etc.

Want more Tips and Videos?

Get an email alert when I release more tutorials:


Download the Illustrator Template

Only for Illustrator CC - Use this template as a reference. It includes grids, columns guides, global colors, dynamic buttons, modular footer & headers, etc.

Download template

How to Use all these Tips?

Read this article I've written for Smashing Magazine:
It explains in details how to be productive with Adobe Illustrator

Free Resources for UX Design

Streamline Icons - 100 Free iOS7 Vector Icons



Minicons - 210 Free Minimal Vector Icons



Fontastic- Generate Your Icon Fonts in Seconds!



GUI Design Framework- Design faster with Illustrator



Nasty Icons- 45 icons to spice up your designs




Created by Webalys   -  Follow me on Twitter