A quick guide to best practices for User Interface Design on Illustrator

As a creative professional working on Graphical User Interfaces (be it for products, apps or websites) you are bound to come in contact with Adobe Illustrator, the leading vector graphics package out there. It’s an amazingly handy piece of software, that when used correctly, can make your whole workflow a breeze.

In the past, I created a handy manual for the design teams I’ve worked with, highlighting some of the best practices I’ve gathered through my experience working with it, and I figured it was time to share it with the rest of the world, you know… because sharing is caring 😉

WHY ILLUSTRATOR?

Using Adobe Illustrator for the design process allows you to:

• Keep your complete project organized in one file (multiple artboards)
• Easily make design changes at the last moment (this always happens)
• Easily update individual components (e.g. new version of an icon) that appear throughout the entire system
• Export your assets in different resolutions for different display-sizes

Using Photoshop is possible, but has some drawbacks:

• Last-minute design changes become tricky because they involve lots of manual work
• Making a single file with all necessary screens (many, mamy layers), or several independent files (assets are spread throughout multiple files) makes managing your design quite difficult
• Once made in Photoshop, objects (e.g. icons) cannot be scaled up without compromising the quality (pixilation occurs).
• This means that future changes in screen sizes can require you to make everything again.

Before we start… An example illustrator file

To make things a bit easier to follow for you, I’ve created a handy example file that includes all of the best practices mentioned in this guide. You can download it by clicking the link below.

DOCUMENT SET-UP

Since we are designing for graphical user interfaces, and not for print, here are some suggestions on how to set-up your document to start working:

• Use the .AI file format when saving
• Use RGB colour mode
• Use Pixels as units and use an artboard size equal to the resolution of the screen of your project (e.g. 1920 x 1080 for a full HD desktop application).

New document prompt

Tips

• When setting up a new document, choose WEB from the “New Document Profile” to get most of the settings ready.
• Pay attention to the option “Align New Objects to Pixel Grid”. It can be really helpful if your final output must be pixel perfect, but VERY annoying while working if you need to align objects.

Best practices for document management

• Try to keep the file size under 20 Mb for easy editing and file management (See tips further in this document regarding symbols and linking/embedding of files).
• Save regularly under a new name, especially when a big modification has been applied to the file. Use an increasing identification number at the end of the file name (e.g. “ TestUI-v1.0.ai”, “TestUI-v1.2.ai”, “TestUI-v2.0.ai”) and if necessary while working on a variant with other colleagues, add your name to the end between parenthesis (e.g. “TestUI-v3.1 [David].ai”).

 

ARTBOARDS

Artboards should be used to define different screens or alternatives for a screen. There are many advantages for the use of artboards, such as exporting each individual screen separately or the ability to paste an item in place for every single screen.

Artboards overview. The one with the thicker outline is the currently selected artboard

Tips:

• Crtl+1 – Center currently selected artboard in TRUE SIZE mode
• Crtl+0 – Center currently selected artboard in FIT IN WINDOW mode
• Crtl+Alt+0 – Fit all artboards in Window
• Shift+PageUp / PageDown – Jump from artboard to artboard

Artboard Dock

• Artboards can be managed through the Artboard Dock (if the dock is not visible, you can activate it through the Window/Artboards menu).
• Through the artboards “Extra options menu”, artboards can be added, duplicated or deleted from the stage.
  Note: When duplicating artboards you need to unlock all the layers which you want to be duplicated in the new artboard, just as in the instructions ahead on “moving artwork with artboard”

Artboard dock and the extra options menu

• Artboards can be organized in rows and columns. This can be done by using the “Rearange Artboards” option from the extra options menu.

Rearrange artboards prompt

• Select the number of columns and an appropriate spacing between artboards (e.g. 80px).
• It is recommended that you select the “Move Artwork with Artboard” check box, but for this to work properly, make sure NONE of the layers are locked and ALL are visible so that all objects can be moved.

In this case, the contents of the bottom two layers will not be moved when the artboards are rearranged because they are locked

Best practices for artboards

• Set up the artboard size to match the required screen size in pixels by using the “Artboard Options”

The artboard options prompt, where artboard size can be changed. Make sure you have the correct artboard selected before using it.

• Make use of separate artboards for each individual screen or screen variation made.
• Keep the artboards organized neatly on a grid. This can help you to keep a proper overview of your screens.

 

LAYERS & GROUPS

Layers are useful to keep certain objects separated from each other for easy management.

• Create separate layers for different types of content such as docks, tabs, etc. and name these layers with a descriptive text (e.g. “Texts”, “Tabs”, etc)
• Set up a layer called “Comments” at the top of your layer hierarchy were comments and revisions can be placed and easily shown/hidden as required.
• Layers can also be used to show different states of certain items on the same screen

Using Layers to show different states of a screen. On the left, the layer containing the alarm item is hidden

• Use them to show/hide information when exporting. The comments layer for example, can be hidden when the separate screens are being exported for a user review, but they can be left on when exported for a presentation.

Using Layers to hide content during export. On the right, the “Comments” layer is hidden before exporting the different screens

• Associated objects should be grouped so that they can be easily selected as a whole (e.g. the background and text of a button).
• Groups within groups can be made to add further hierarchy to a document (e.g. group a button background with its text label and then group all similar buttons together)

Tips:

• Use CTRL+G to group selected items together
• Use CTRL+SHIFT+G to ungroup items
• By double clicking a group you can “open” it to rearrange the contents without ungrouping. When you are done, just double click outside the group to go back.

Copying & Pasting Items:

• When pasting content on an artboard, make sure to do it on the right layer. Choosing “Paste Remember Layers” from the extra options menu of the layers dock pastes the copied items in the same layer from which they were copied (very handy when copying from multiple layers as the system remembers the layer for each individual object).

The extra options menu of the layers dock, with the “Paste Remember Layers” option

Tips:

• Use CTRL+SHIFT+V to paste in place between artboards. Make sure the correct artboard is selected when copying AND pasting
• Use ALT+CTRL+SHIFT+V to paste in place on ALL artboards at the same time. Handy when adding a new item to all screens for example.

 

LINKING & PLACING EXTERNAL FILES

Sometimes you may want to include an external bitmap into your work (e.g. a map for a GPS app).

• Use “Place” to get images into Illustrator. DO NOT use Copy-paste since it increases file size.
• Check “link” (in the place dialog box) to ONLY save the link to the image in the Illustrator file
• Uncheck “link” (in the place dialog box) to save the image IN the Illustrator file
• Check “include linked files” (in the save as dialog box) to save the image IN the Illustrator file

Left the ‘Link’ checkbox within the Placing dialog box, found under the File tab. On the right side the ‘Include Linked Files’ checkbox within the Save As Dialog Box

Here are a couple of the combinations you could have when managing external files and their PROs and CONs:

• Placed with “link” checked, “include linked files” UNchecked
  • (+) Small filesize
  • (-) The original file of a linked image can get lost (big risk)
  • Advice: only use in hi-res, collage-type file. Store linked images in the same directory in a subfolder
• Placed with “link” UNchecked, “include linked files” UNchecked
  • (+) The linked file is saved with the “mother” file and cannot get lost
  • (-) Huge file size, especially when you use many duplicates of and image in a file (e.g. as background)
  • Advice: only use if amount of linked image data is very low
• Placed with “link” checked, “include linked files” checked
  • Same effect as previous option.
• Placed “link” UNchecked, “include linked files” Unchecked, all placed images converted to Symbols
  • (+) The linked file is saved with the “mother” file and cannot get lost
  • (+) Once converted to symbol, duplicates (e.g. as backgrounds) of images do not increase file-size
  • (-) Large file size if you use high-res images or a large amount of images
  • Advice: Use this method for most of your UI Design

 

REUSING MATERIAL: SWATCHES, STYLE LIBRARIES & SYMBOLS

• Save specific palette colors (to easily apply them to other objects) by dragging and dropping a color into the Swatches dock.

Adding a colour to the Swatches dock to be reused

• Use the “Appearance” dock to create complex visual effects combined into a single object (e.g. Rounded corners, a glow effect and two sets of outlines can be applied at the same time to an object). This avoids having to stack multiple objects on top of each other to achieve the desired visual effect.

The Appearance dock being used to apply a gradient fill and two outlines with different colours and thickness

• If the created appearance will be used in other screen items (e.g. styling for a button), save it by dragging it into the “Graphic Styles” library and name it accordingly (e.g. “ButtonStyle_Highlighted”).

Dragging an object into the “Graphic Styles” dock saves this object’s visual properties (appearance) as a Style that can be applied to other objects. Double click the style to give it a descriptive name

Applying a saved graphic style to a new object. Select the object and then click on the style from the dock

• A graphic style can be replaced in the library by holding the ALT key while dragging and dropping a new version of the graphic on TOP of the specified style in the library. This will update all objects already using this graphic style.
• Create symbols for objects used more than once throughout the design such as icons, window backgrounds, scrollbars, button backgrounds, buttons, etc. This way they are reusable and easy to update/replace

Create symbols by dragging an object into the “Symbols” panel. Give them a descriptive name and reuse them anywhere in the design

Working with symbol libraries

Once you have added a series of symbols to the Symbols palette, you can save this palette. This allows you to re-use the same symbols across different files (e.g. different UI projects for the same client).

• Click on the option button (top-right corner of the palette) and choose “Save Symbol Library”
• To open an existing Symbol Library, Choose “Open Symbol Library” in the same menu
• If you want to open a Symbol Library which is manually created, choose the “Other Library…” option in order to browse your own folders.

Saving (marked green) and opening (marked yellow) a Symbol Library

Tips:

• Be careful when pasting symbols from older versions of the file, as this can lead to duplicate symbols
• Monitor and clean up your symbol library regularly to make sure you do not have several versions of the same objects in them.
• Save them in a place that makes sense. We recommend somewhere in the project directory.

 

A symbol can be edited by double-clicking it. Once edited, it will be updated throughout the whole document

• You can easily replace a symbol already on the stage by selecting it and using the “Replace” drop down list found on the top bar of Illustrator. This is a list of all the symbols available within the document.

Replacing a symbol already on stage with another symbol

• A symbol can be changed in the library by holding the ALT key while dragging and dropping a new version of the graphic on TOP of the specified symbol in the library.

Replacing a symbol on the library with a new graphic

Registration Point in Symbols

• The registration point is a point which Illustrator uses to align your object with. Chose a registration point for your symbol wisely, as this can help when you are aligning or positioning your objects on screen

“Symbol Options” dialog box pops up when symbol is created

• If you are using symbols to make interchangeable objects (e.g. different icons to be used in a single place) make sure that the graphics of them are properly aligned to the anchor point of the symbol (cross hair). If you don’t , objects might shift in an unwanted way if you replace them. You can do this by including a transparent square as a background in each symbol. By making this square transparent (no fill or stroke) and the same size for each interchangeable symbol, you ensure that they center and resize in the correct way.
• For symbols which are different size but are aligned to, for example, the bottom; choose the bottom registration point.
• When an object is always placed in the top left corner of the interface, choose the registration point in the top left corner.
• This works as well for objects (e.g. icons) that you choose not to convert to symbol

Using a transparent square as background for 3 different icons helps in keeping them centred to the symbol’s anchor point

Tips:

• Symbols within symbols are possible and often a good idea. For instance, an icon which uses a highlight when it is active. This can be achieved by making a base icon as a symbol and then putting this symbol within a new symbol that includes the highlight. If the original icon is edited, so too is the highlighted version.
• Use “9-Slice scaling” for symbols which can be resized without scaling all of its features (e.g. A symbol of a window background that can be resized without changing the size of the title bar or the rounding of the corners)

Use the checkbox on the “Symbol options” pop-up to Turn 9-slice scaling ON for a symbol. The 9 areas work as pictured above

• If text (or another symbol) is used within a 9-slice symbol, an extra step needs to be made for this embedded symbol to scale properly. Select the embedded symbol, and click on Effect > Path > Outline object

Use the “Outline Object” option to allow symbols within a 9-slice to scale properly

• For repetitive patterns (e.g. a keyboard layout) the blending tool can be used (also in combination with symbols). Place two objects (or instances of a symbol) on the artboard. Double click the Blend tool and select “Specified Steps” and add the number of intermediate items you want. Click OK and then click on each of the initial two objects on the artboard. The system will create all the intermediate steps.

Using the blend tool to create a repetitive pattern