Unlock web design skills with our Adobe Illustrator online class. Learn UI essentials, pro techniques, workflows, and shortcuts. Enroll now Read more.
Access all courses in our library for only $9/month with All Access Pass
Get Started with All Access PassBuy Only This CourseAbout This Course
Who this course is for:
- This course is for beginners. Aimed at people new to the world of web and UI design. While no previous Illustrator experience is necessary.
What you’ll learn:Â
- You’ll learn to design a website with in Adobe Illustrator.
- User Interface essentials.
- 27 Completed files so you never fall behind.
- Learn how to wire-frame at all levels
- How to design for a responsive website.
- Downloadable exercise files & cheat sheet.
- Techniques used by professional website designers.
- Professional workflows and shortcuts.
- A wealth of other resources and websites to help your new career path.
Requirements:
- You’ll need a copy of Adobe Illustrator CC 2017 or above. A free trial can be downloaded from Adobe.
- No previous design skills are needed.
- No previous Illustrator skills are needed.
UI design skills are one of the most employable opportunities of our lifetime. In this course, you’ll learn how to design a professional website in Adobe Illustrator. We’ll start right at the basics of Illustrator and work our way through to building professional UI designs. This course doesn’t cover how to code a website but focuses on the design processes that professional UI designers use when working.
This is a project-based class for students who are new to the world of app & web design. I created this for people nervous about changing their careers into the world of user interface design.
We’ll build a professional portfolio website. You can use this course to build your own portfolio website (the one you’ve been putting off for years). You’ll learn how to design desktop, tablet and mobile versions of your website. You’ll learn what you’ll need to deliver at the end of a project to your client.
This course is for people serious about becoming a User Interface design professional.
Now it’s time to upgrade your skills, get that better job, and impress your clients.
Our Promise to You
By the end of this course, you will have the knowledge about web design using Adobe Illustrator.
10 Day Money Back Guarantee. If you are unsatisfied for any reason, simply contact us and we’ll give you a full refund. No questions asked.
Get started today and develop your skill on web design using Adobe Illustrator!
Course Curriculum
| Section 1 - Overview | |||
| Introduction | 00:00:00 | ||
| Am I A UI UX Designer Now? | 00:00:00 | ||
| UI Design Photoshop vs Illustrator vs Sketch vs InDesign vs Adobe XP | 00:00:00 | ||
| What Is Illustrator’s Role When Designing A Website | 00:00:00 | ||
| Section 2 - Getting Started | |||
| Download The Exercise Files, Completed Files & Cheat Sheet | 00:00:00 | ||
| Getting Your Workspace & Illustrator Preferences Ready For UI Work | 00:00:00 | ||
| Section 3 - Planning | |||
| Sitemap vs Wireframe | 00:00:00 | ||
| Creating A Sitemap In Illustrator CC 2017 | 00:00:00 | ||
| Section 4 - Setting Up Your First Pages | |||
| What Screen Sizes To Use For Desktop, Tablet, And Mobile Web Design | 00:00:00 | ||
| What Is A Grid System & Responsive Mobile & Tablet Design | 00:00:00 | ||
| How To Make A Responsive 12 Column Grid In Illustrator | 00:00:00 | ||
| Section 5 - It All Begins With Wireframing | |||
| Creating A Wireframe – Low Fidelity – Hand Drawn | 00:00:00 | ||
| Creating A Wireframe – High Fidelity – Illustrator | 00:00:00 | ||
| Creating The Tablet And Mobile Wireframes In Illustrator | 00:00:00 | ||
| Section 6 - Designing Your First Page | |||
| Inspiration For Your Web Design | 00:00:00 | ||
| Starting Your Web Design Using Illustrator Templates | 00:00:00 | ||
| Bring In Your Vector Logo To The Layout | 00:00:00 | ||
| Section 7 - Color | |||
| Using Adobe Color | 00:00:00 | ||
| Matching Brand Colors Using Adobe Illustrator | 00:00:00 | ||
| Section 8 - Fonts | |||
| Using The Right Web Fonts Google Fonts & Typekit | 00:00:00 | ||
| Production Video – Finalizing Nav, Hero Box And Fonts | 00:00:00 | ||
| Section 9 - Images | |||
| Free vs Royalty Free Images | 00:00:00 | ||
| Adding Linking Cropping & Masking Images In Illustrator | 00:00:00 | ||
| Washing Out Images In Illustrator With Coloured Background | 00:00:00 | ||
| How To Use Layers In Illustrator CC 2017 | 00:00:00 | ||
| Section 10 - Creating Symbols & Icons | |||
| Using The Adobe Market For Free Icons | 00:00:00 | ||
| Using Icon Finder For Free Website UI Social Icons | 00:00:00 | ||
| Align & Distribute Icons In Illustrator For Web Design | 00:00:00 | ||
| How To Adjust Vector Shapes In Illustrator CC 2017 | 00:00:00 | ||
| Creating Custom Icons & Logos Using The Shape Builder Tool In Illustrator CC 2017 | 00:00:00 | ||
| Drawing Icons & Logos In Illustrator Using The Pen Tool | 00:00:00 | ||
| Section 11 - Creating Mobile & Tablet Versions Websites | |||
| Creating A Tablet Version Of Our UI Web Design In Illustrator CC 2017 | 00:00:00 | ||
| Creating A Mobile Responsive UI Website Design In Illustrator CC 2017 | 00:00:00 | ||
| Section 12 - Exporting | |||
| Export Your Full Page Web UI Mockups From Illustrator CC 2017 | 00:00:00 | ||
| Should I Be Using SVG Export In Illustrator CC 2017 For Web Design | 00:00:00 | ||
| Exporting Images And Pictures From Illustrator CC 2017 For Web | 00:00:00 | ||
| Exporting Logos And Icons From Illustrator 2017 For UI | 00:00:00 | ||
| Retina – HiDPI And Responsive Image Export From Illustrator CC 2017 | 00:00:00 | ||
| Exporting Your UI For App Design Using Illustrator CC 2017 | 00:00:00 | ||
| Exporting CSS For Developers Using Adobe Illustrator CC 2017 | 00:00:00 | ||
| Section 13 - Working As UI Designers | |||
| Learning The Language Of UI User Interaction Design | 00:00:00 | ||
| How To Get Your First Work As A UI Designer | 00:00:00 | ||
| Section 14 - Next Steps | |||
| Next Steps To Becoming An Amazing Ui Designer | 00:00:00 | ||
| Your First Project – Adobe Illustrator CC 2017 | 00:00:00 | ||
| Section 15 - Cheat Sheet | |||
| Cheat Sheet – Adobe Illustrator CC 2017 | 00:00:00 | ||
About This Course
Who this course is for:
- This course is for beginners. Aimed at people new to the world of web and UI design. While no previous Illustrator experience is necessary.
What you’ll learn:Â
- You’ll learn to design a website with in Adobe Illustrator.
- User Interface essentials.
- 27 Completed files so you never fall behind.
- Learn how to wire-frame at all levels
- How to design for a responsive website.
- Downloadable exercise files & cheat sheet.
- Techniques used by professional website designers.
- Professional workflows and shortcuts.
- A wealth of other resources and websites to help your new career path.
Requirements:
- You’ll need a copy of Adobe Illustrator CC 2017 or above. A free trial can be downloaded from Adobe.
- No previous design skills are needed.
- No previous Illustrator skills are needed.
UI design skills are one of the most employable opportunities of our lifetime. In this course, you’ll learn how to design a professional website in Adobe Illustrator. We’ll start right at the basics of Illustrator and work our way through to building professional UI designs. This course doesn’t cover how to code a website but focuses on the design processes that professional UI designers use when working.
This is a project-based class for students who are new to the world of app & web design. I created this for people nervous about changing their careers into the world of user interface design.
We’ll build a professional portfolio website. You can use this course to build your own portfolio website (the one you’ve been putting off for years). You’ll learn how to design desktop, tablet and mobile versions of your website. You’ll learn what you’ll need to deliver at the end of a project to your client.
This course is for people serious about becoming a User Interface design professional.
Now it’s time to upgrade your skills, get that better job, and impress your clients.
Our Promise to You
By the end of this course, you will have the knowledge about web design using Adobe Illustrator.
10 Day Money Back Guarantee. If you are unsatisfied for any reason, simply contact us and we’ll give you a full refund. No questions asked.
Get started today and develop your skill on web design using Adobe Illustrator!
Course Curriculum
| Section 1 - Overview | |||
| Introduction | 00:00:00 | ||
| Am I A UI UX Designer Now? | 00:00:00 | ||
| UI Design Photoshop vs Illustrator vs Sketch vs InDesign vs Adobe XP | 00:00:00 | ||
| What Is Illustrator’s Role When Designing A Website | 00:00:00 | ||
| Section 2 - Getting Started | |||
| Download The Exercise Files, Completed Files & Cheat Sheet | 00:00:00 | ||
| Getting Your Workspace & Illustrator Preferences Ready For UI Work | 00:00:00 | ||
| Section 3 - Planning | |||
| Sitemap vs Wireframe | 00:00:00 | ||
| Creating A Sitemap In Illustrator CC 2017 | 00:00:00 | ||
| Section 4 - Setting Up Your First Pages | |||
| What Screen Sizes To Use For Desktop, Tablet, And Mobile Web Design | 00:00:00 | ||
| What Is A Grid System & Responsive Mobile & Tablet Design | 00:00:00 | ||
| How To Make A Responsive 12 Column Grid In Illustrator | 00:00:00 | ||
| Section 5 - It All Begins With Wireframing | |||
| Creating A Wireframe – Low Fidelity – Hand Drawn | 00:00:00 | ||
| Creating A Wireframe – High Fidelity – Illustrator | 00:00:00 | ||
| Creating The Tablet And Mobile Wireframes In Illustrator | 00:00:00 | ||
| Section 6 - Designing Your First Page | |||
| Inspiration For Your Web Design | 00:00:00 | ||
| Starting Your Web Design Using Illustrator Templates | 00:00:00 | ||
| Bring In Your Vector Logo To The Layout | 00:00:00 | ||
| Section 7 - Color | |||
| Using Adobe Color | 00:00:00 | ||
| Matching Brand Colors Using Adobe Illustrator | 00:00:00 | ||
| Section 8 - Fonts | |||
| Using The Right Web Fonts Google Fonts & Typekit | 00:00:00 | ||
| Production Video – Finalizing Nav, Hero Box And Fonts | 00:00:00 | ||
| Section 9 - Images | |||
| Free vs Royalty Free Images | 00:00:00 | ||
| Adding Linking Cropping & Masking Images In Illustrator | 00:00:00 | ||
| Washing Out Images In Illustrator With Coloured Background | 00:00:00 | ||
| How To Use Layers In Illustrator CC 2017 | 00:00:00 | ||
| Section 10 - Creating Symbols & Icons | |||
| Using The Adobe Market For Free Icons | 00:00:00 | ||
| Using Icon Finder For Free Website UI Social Icons | 00:00:00 | ||
| Align & Distribute Icons In Illustrator For Web Design | 00:00:00 | ||
| How To Adjust Vector Shapes In Illustrator CC 2017 | 00:00:00 | ||
| Creating Custom Icons & Logos Using The Shape Builder Tool In Illustrator CC 2017 | 00:00:00 | ||
| Drawing Icons & Logos In Illustrator Using The Pen Tool | 00:00:00 | ||
| Section 11 - Creating Mobile & Tablet Versions Websites | |||
| Creating A Tablet Version Of Our UI Web Design In Illustrator CC 2017 | 00:00:00 | ||
| Creating A Mobile Responsive UI Website Design In Illustrator CC 2017 | 00:00:00 | ||
| Section 12 - Exporting | |||
| Export Your Full Page Web UI Mockups From Illustrator CC 2017 | 00:00:00 | ||
| Should I Be Using SVG Export In Illustrator CC 2017 For Web Design | 00:00:00 | ||
| Exporting Images And Pictures From Illustrator CC 2017 For Web | 00:00:00 | ||
| Exporting Logos And Icons From Illustrator 2017 For UI | 00:00:00 | ||
| Retina – HiDPI And Responsive Image Export From Illustrator CC 2017 | 00:00:00 | ||
| Exporting Your UI For App Design Using Illustrator CC 2017 | 00:00:00 | ||
| Exporting CSS For Developers Using Adobe Illustrator CC 2017 | 00:00:00 | ||
| Section 13 - Working As UI Designers | |||
| Learning The Language Of UI User Interaction Design | 00:00:00 | ||
| How To Get Your First Work As A UI Designer | 00:00:00 | ||
| Section 14 - Next Steps | |||
| Next Steps To Becoming An Amazing Ui Designer | 00:00:00 | ||
| Your First Project – Adobe Illustrator CC 2017 | 00:00:00 | ||
| Section 15 - Cheat Sheet | |||
| Cheat Sheet – Adobe Illustrator CC 2017 | 00:00:00 | ||
Related Courses
Are you interested in higher education?
All Rights Reserved