Article Contents (click to expand)
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.
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.
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 modifySet 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”.
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.