Illustrator for Web Design

Use Illustrator to create high-quality web content and assets. Discover how to set up a project design, responsively create wireframes and moodboards, export assets, and more.

Introduction

• Welcome
• Illustrator and web design
• How to use the exercise files

1. Set Up the Project

• Document settings
• Custom web workspaces
• Artboards
• Grids
• Color modes and settings

2. Design Responsively

• What is responsive design?
• Set breakpoints
• Libraries: Work with Adobe Stock
• Libraries: Manage your resources
• Libraries: Collaborate
• Text styles
• Dynamic buttons
• Graphic styles
• Symbols
• 9-slice scaling
• Edit color
• Recolor artwork
• Seamless backgrounds

3. Development Process

• Site maps
• Moodboards
• Wireframe overview
• Create a wireframe
• Develop comps
• Navigation
• Templates

4. Collaborate and Share

• Style guides
• Comps for client review

5. Export Assets

• Assets panel
• SVG format
• Export icons for screens
• Extract CSS styles

Conclusion

• Design tips and tricks
• Next steps