Adobe Illustrator for Web Designers

The Communication Problem Between Designers and Developers

Anyone who has worked in the industry of creating websites knows that there is a definitive communication gap between designers and developers. Designers know how to make things look good and developers know how to make things function. But most of the time one does not have a clue how the other one thinks. For example, a designer may create a stunning-looking page that would seem to have no issues and then the developer receives the design only to find out it is impossible to accomplish this in the language of code! However, without the design, the developer is lost and does not know where to start with applying styles and layouts. There are hybrid designer/developers out there, but for the most part designers speak one language and developers speak another.

As a designer, I started to fall in love with using Adobe illustrator to create my designs and then send the Ai files over to the developer. There are many good reasons why this program is great as a designing tool and can be very helpful in the development process as well. While working for the first time designing with Ai, I thought to myself how beneficial this could be for communicating the design elements effectively to the developer, but then came to a sad realization. How would a developer ever know how to navigate a file in Illustrator?? I looked online for tutorials that would cover that and found nothing! Illustrator is meant for designers and there is no explanation of any connection to a developer. So in order to have this be effective for the project I was working on, I had to create my own tutorials that walked through how to navigate the Ai interface and get the information necessary in the design files. The flow of communication works both ways, so in order for developers to ask the important questions in their process, the designer must understand that a creative suite program may not be so intuitive to their eyes. Thus it is essential to learn how to create a design file that is intuitive.

Benefits of Designing with Adobe Illustrator

More and more designers are beginning to use illustrator to create their designs for websites. The main reasons are because of illustrator’s ease of creating and modifying vector shapes, powerful artboard tools, and the CSS properties panel.

Vector Shape Tools

Adobe Illustrator is easily one of the best programs out there for vector shape creation. If you have used illustrator before, chances are that you are using it because of its vector abilities. To create shapes of all sizes and kinds and then having the ability to modify their properties are important tasks in the web design process. You will need to create buttons, sections, icons, and clipping masks regularly and this program allows you to do so easily with unlimited modification options.

CSS Properties Panel

This is probably the most obvious connection between illustrator and the web development process. There is a panel you can open that will display the CSS code for a selected object. If you select text, it will display the font name, the font size, and the color. This will skip a whole step for the developer who would be asking the designer for the specs of that text. If a rectangular button is selected, the panel will display the fill color hex# code, the border color, and the pixel dimensions. This takes away the guesswork and gives numbers to work with, which is what developers will understand.

Designing for Multiple Devices

The use of artboards in illustrator is unparallelled when compared with other programs in its ease of use. By using multiple artboards, you can design the layouts for a website’s desktop version, tablet version, and mobile phone version all inside one project and placed side-by side. Not only is it so helpful to visualize the flow of objects across different screen views, but the developer can view the size and font changes easily between the device layouts using the CSS panel.

Setting up a Developer-Friendly Design File

The key is organization. When the developer looks at your file, they will most likely be overwhelmed at all the information that is presented. Aside from the artboard, all the panels are confusing and there may be well over a hundred layers. It is your job to make this breakdown process as easy as possible for them.

Label Layers and Groups

The developer should be able to navigate through the elements in both the artboard and the layers panel. In order to make this easy, try and create an intuitive label for each object and group of objects within the layers panel. For example: each element that will be a working button should have a prefix like “BTN” before it. Images used on the page should have a prefix such as “IMG” followed by the exact name of the file you will include in your images folder. When names are consistent between the Ai file and the images folder, it streamlines the workflow.

A group of objects may be confusing to the developer because by default, the selection tool selects a whole group before it selects the individual layers in that group. If you put all your top menu buttons in one group, it would be helpful to label the group itself something like “GRP-MenuButtons” and then label each button within that group as well.

Using Sublayers to Organize Page Sections

It is very intuitive to stack your layers in the layers panel from top to bottom as they are seen in the artboard. For example, place your top menu layers at the top and your footer elements at the bottom of the stack. Sublayers are a very useful way to organize the entire page layout without having to use groups. Separate the page sections into sublayers and then put the content inside those sublayers. You may have a “Menu Bar” sublayer in which all the buttons, backgrounds, dropdowns all reside. Then below that you may have a “Hero Image” sublayer that will contain all the images you want to include in a slider as well as text elements and a button. This should continue all the way to the bottom of the sublayer stack with the “Footer” sublayer.Organizing content into sublayers is also a good way for you to navigate your own file and be able to access the objects intuitively to modify 

Set Up a Notes Layer

Sometimes it is helpful to give some extra information to the developer if the CSS properties panel does not cover it. When you place a text box around an image and want your text to wrap around that image, there is no way for the developer to see how much padding to use with the text. So you can set up a layer (made invisible by default) that may have an arrow pointing to the text box and saying “text padding = 18px”.

Or maybe you have a large image inside a smaller frame and want to have a specific way of cropping that image. You can make a note that this image will be aligned center to the frame or maybe top-left etc. This is a way of achieving the look you want in the final developed process by giving the developer specifications to work with.

Communicate with the Developer

The languages of design and development are not only different in regards to terminology, but they are different in parts of the brain that are used to start and finish a project. It will work in your best interest to become familiar with how your developer thinks. Learning as much as you can about a basic foundation of HTML and CSS will also be extremely helpful because you need to understand what they are able to do and what is just not possible in the world of code.

Everyone has their different process so you may not be able to apply the methods you used with one developer to a different one. The idea is to have a basic understanding of how they are using the information you give them to create the final product. The best thing you can do is work together to bridge that communication gap between right-brain designers and left-brain developers. The only way to do that is to understand that they think differently than you do and to try and create your designs as universally intuitive as possible.On the other side, in order for developers to understand, we must rise up against the coders and make it a designer-only world….just kidding, we can do this! In my next article, “Adobe Illustrator for Web Development” I will walk through how to open and navigate an Ai file if you are a web developer who is unfamiliar with the program.