Learn how Adobe Illustrator is a great web design tool that allows you to create a coherent workflow.
- [Instructor] Let's talk about how Illustrator fits into the web design landscape. As you know, the web is an ever-changing landscape. As designers, we have to be cognizant of all the new screen sizes and devices that are constantly flooding the market. The days of designing a basic desktop version of a website are over, and as a designer we must adapt. In my opinion, the web isn't necessarily a target by itself anymore. Instead, it's becoming more of an overarching category that now encompasses many targets that we must design for.
So what is the one thing that all of these targets have in common? It's screens. Whether it's a desktop, a laptop, an iPad, or a PlayBook, we have to know and understand the screens on which our designs are being viewed so that we can provide a better user experience for the end user. Illustrator is part of a web workflow for these major reasons. It's resolution independent. You can output SVG, PNG, GIF, or JPG files without any problems.
You're able to include icon fonts, and these are part of the Adobe Creative Cloud Typekit library, which means that you have access to a slew of fonts that you can use in your designs. Most websites are designed on a grid these days, and with Illustrator you have the ability to have pixel perfect alignment. You can create wireframes or full-blown designs. You decide what you need. Illustrator also plays well with raster-based images.
So if you wanna use photos, you'll have no problem incorporating those into your designs as well. In addition, you can use symbols and other time-saving features. You have the ability to create text and graphic styles to maintain consistency and allow you to work much faster. You can use shared libraries so that you can integrate the assets into multiple files quickly. And you have the ability to extract CSS right out of Illustrator.
This is a feature that I rarely use, but I do see its potential. So what is the Illustrator role in regards to web design? Well, it's flexible. You can create a couple assets, or you can create the entire design right inside of Illustrator. Illustrator offers the following benefits for web designers. You can easily create responsive web designs. With the latest version of Illustrator, you're not limited to a specific size or resolution. You can create several art boards in one document that allow you to mock up multiple layouts and designs.
Illustrator allows you to create UX prototyping and wireframing very easily. It also supports SVG and icon fonts. And finally, the workflow allows you to work easily with web developers. All of these reasons make Illustrator a great choice for creating web designs. You can work efficiently, quickly, and have a lot of flexibility.
- Customizing a web workspace
- Using the artboards to create multiple sized files easily
- Laying out responsive web experiences using Illustrator
- Creating and using character and paragraph styles
- Working with symbols
- Recoloring selected artwork
- Creating a site map
- Creating moodboards
- Creating wireframes
- Creating full-blown comps
- Exporting icons for screens
- Extracting CSS styles