Everyone knows designers and developers are different breeds of people. They think differently, dress differently, speak different languages, and have their own unique cultures. More often than not they have no idea how to communicate with each other. This presents a problem when they are building a website, utilizing their individual skills, and must work together to complete the project seamlessly. In my previous article Adobe Illustrator for Web Designers, I discussed how the use of Adobe Illustrator could be a useful tool for designers to work with and then how to prepare their projects so that they are “developer friendly”. The goal of this article right now is to encourage developers to become familiar with Adobe Illustrator’s interface so that they can receive a project file (.Ai) from a designer and be able to understand exactly what the designer is trying to accomplish. After dissecting the Ai file, the developer should have most of what they need to build and style a page. Any more unanswered questions can be worked out through universal human-to-human communication.
4 Reasons Why An Illustrator File Can Help You
- CSS properties: Illustrator has a feature where you can click on an element in the design window (a box, a text element etc.) and then you can see the exact CSS code that element has! Such as height and width dimensions, color hex #, font size/family, and any styles like a box shadow.
- Multiple device designs in one project: Illustrator allows for multiple artboards (design spaces) in one project. That way, a designer can create the layouts for a page meant for a desktop, a tablet, and a mobile phone all right alongside each other. This is great for visualizing the flow of elements and how sizes may vary between the layouts.
- Layers and organization: If the designer has set up a “developer friendly” file, the project should be relatively easy to navigate with all the design elements intuitively labeled and organized. This will make it super clear what things are, which images are used, and where they are located in the page hierarchy.
- Communication notes: This is also dependent on if the designer wants to make things even more clear by including a layer (that you can toggle on and off) explaining things that you may not be able to find in CSS properties display. Something like margins or padding is a good example of where a designer may have specific numbers to communicate.