UI & Web Design with Adobe Illustrator CC

Create primary, secondary, and ghost buttons with hover, pressed, and disabled states using Appearance panel effects.

Construct common form elements like text inputs, checkboxes, radio buttons, and toggle switches from vector shapes.

A deep dive into controlling stroke weight, corner radius, and layering multiple fills for depth and texture.

Design linear, radial, and freeform gradients. Learn to apply them to buttons, cards, and backgrounds for a modern look.

Select and pair web fonts effectively. Establish a clear visual hierarchy using size, weight, and line height.

Explore how variable fonts work and how to use their weight, width, and slant axes for flexible type in Illustrator.

Draw a set of custom icons using consistent stroke weights and optical adjustments. Organize them into a reusable library.

Stack multiple strokes, fills, and effects on a single object. Create styles you can apply and update across your design.

Combine your buttons, text, and icons to build composite components like notification badges and content cards.

Set up 8, 12, and 16-column grids with gutters and margins. Use guides to plan your page structure.

Establish a consistent spacing system (e.g., 8px increments) and plan how your layout adapts to different screen sizes.

Create a responsive navigation bar with logo, menu items, and a call-to-action button that works across breakpoints.

Build a compelling hero area and structure a content section with text columns, images, and supporting graphics.

Assemble a footer with multiple columns, links, and social icons. Review the complete desktop layout.

Design the first screens a user sees: a branded splash screen and an onboarding sequence with simple illustrations.

Create a main home screen with a tab bar and a secondary detail view with rich content and action buttons.

Convert your buttons, icons, and other elements into Symbols for easy reuse and single-point updates across artboards.

Learn to add your colors, character styles, and components to a Creative Cloud Library for team access.

Use grouping, isolation mode, and advanced alignment techniques to manage complex layouts without Auto Layout.

Link artboards together using the Links panel to create basic interactive flows you can preview in a browser.

A best-practice guide to exporting clean, optimized SVG files for icons, logos, and interface elements.

Configure export settings for raster graphics at multiple resolutions and for PDF documents and mockups.

Establish a clear naming system for your files and exported assets to keep projects organized and reduce confusion.

Publish your designs to the web, collect threaded feedback, and manage comments directly within Illustrator.

Measure spacing, extract color values, and generate basic CSS properties for key elements right from your artboards.

Assemble a dedicated spec artboard that documents colors, fonts, components, and key measurements for developers.

A workflow for sharing design assets and colors between Illustrator and Figma using Creative Cloud Libraries.

Sync your component library from Illustrator to Adobe XD to build interactive prototypes with your design system.

Use version history, cloud documents, and simple file management practices to track progress and avoid data loss.

A checklist for reviewing consistency, accessibility basics, and completeness in your final design files.

Recreate the glass effect and layered depth seen in modern interfaces using blends, opacity, and blurs.

Use Illustrator's 3D and materials tools to design subtle spatial interfaces and icon elements for a contemporary feel.

Explore Illustrator's AI features to generate initial layout ideas, color palettes, and font pairings as a starting point.

Adapt your existing light UI to a dark theme. Learn to adjust colors, contrasts, and shadows effectively.

Build a system to quickly generate multiple color theme variants (e.g., brand colors) from a single master design.

Design the visual states for animations: loading spinners, progress bars, transition keyframes, and success checkmarks.

Create a motion specification sheet that describes timing, easing, and property changes for your micro-interactions.

Start your capstone project by analyzing a sample client brief, defining goals, audience, and scope.

Sketch low-fidelity wireframes and create a visual moodboard in Illustrator to establish the project's direction.

Iterate through key pages and screens, applying your UI skills to build the final high-fidelity designs.

Prepare all final assets, create a developer handoff package, and document your design decisions.

Structure your project into a compelling case study: problem, process, solution, and outcome.

Place your designs into device mockups and build a clean presentation deck to showcase your project.

Final tips on organizing your best work, writing project descriptions, and setting up your portfolio website or Behance.