Become a Designer in 2023! Master Mobile and Web Design, User Interface + User Experience (UI/UX Design), HTML, and CSS
Instructed by Andrei Neagoie 27.5 hours on-demand video, 1 coding exercises & 63 article, 17 downloadable resources.
What you’ll learn
-
Build beautifully designed web and mobile projects for your customers using modern tools used by top companies in 2021
-
Get hired as a Designer or become a freelancer that can work from anywhere and for anyone. Designers are in high demand!
-
Includes 100+ assets and premium design templates that you can keep and use to customize for all your future projects
-
Master Figma for your design needs then learn to convert your designs into a live HTML an CSS website
-
Have an amazing design portfolio customized and professionally completed by the end of the course (we provide it for you!)
-
Master both Web and Mobile design principles and how to go from sketching to fully fledged high fidelity designs that will wow customers
-
Learn to design for all types of devices using Figma and other tools used by some of the top designers in the world
-
Learn to use HTML5 and CSS3 to make your designs come to life and create fully working websites
-
Learn best practices that takes years to learn in the design industry
-
Learn to make professional logos and design choices for all branding needs
-
Learn UI/UX best practices using the latest trends in the industry
-
Learn to be a designer as well as a web developer at the same time (a rare combination of skills that is in high demand)!
The topics covered in the course are…
- 00 Web & Mobile Design Principles + Design vs Web Development
- 01 GETTING STARTED – Sketching, Inspiration + Structure
- 1. Sketching
- Intro to sketching
- Sketching UX flows
- Sketching tips
- 2. Inspiration
- How to stay inspired
- How to find inspiration online
- 3. User Flows
- What are user flows?
- The do’s and don’ts
- Speeding up our workflow with components
- Creating our own user flows (Registration) Part 1
- Creating our own user flows (Search) Part 2
- Creating our own user flows (Checkout) Part 3
- 4. Sitemaps
- An intro to sitemaps
- Creating a basic sitemap
- What you should be doing before you start
- Creating a sitemap (part 1)
- Creating a sitemap (part 2)
- Tips for getting started
- 1. Sketching
- 02 EXPLORE AND ITERATE – Wireframes, Prototyping and Feedback
- 1. Wireframes
- What is a wireframe?
- How do I create a wireframe?
- Speeding up your workflow in Figma
- Creating our home page
- Creating a product page
- Creating a checkout page
- 2. Prototyping
- Prototyping basics in Figma (Device + Triggers)
- Prototyping basics in Figma (Actions)
- Prototyping basics in Figma (Overflow)
- Prototyping basics in Figma (Presentation + Collaboration)
- Linking together a quick user flow in Figma
- Working on small interactions with Figma
- 3. Getting feedback
- Why is feedback so important?
- How to get constructive feedback
- 1. Wireframes
- 03 VISUAL DESIGN – Design Theory + Accessibility
- 1. Grids + Spacing
- Spacing and Grid Basics
- Responsive Grids in Figma
- Creating our own grid in Figma
- The rules of the grid
- 2. Typography
- Typography basics Part 1
- Matching typefaces to an era
- Typography basics Part 2
- Selecting the right typeface
- Typography basics Part 3
- Picking a typeface
- Does your typeface suit your scenario?
- Expanding an existing type system
- Choosing typefaces in Google Fonts
- Narrowing down your typography choices
- Creating a type system in Figma
- 3. Color
- Color Schemes
- Important questions to ask before picking colors
- Helpful tips for creating color palettes
- Creating a monochromatic color palette
- Applying a our simple color palette
- Expanding a strict color palette
- Creating our own color palette
- 4. Forms + UI Elements
- What are UI Elements
- Best practices Part 1: Forms
- Best practices Part 2: Inputs Part 1
- Best practices Part 2: Inputs Part 2
- Best practices Part 2: Inputs Part 3
- Best practices Part 2: Inputs Part 4
- Best practices Part 3: Buttons
- How to create components in Figma
- Using atomic elements in Figma
- Using Instances in Figma
- Editing instances to create new components
- Using constraints to create responsive components
- Creating a registration form in Figma
- 5. Imagery + Iconography
- Resources and techniques to create great visual assets
- Working with photos in Figma Part 1
- Working with photos in Figma Part 2
- Working with illustrations in Figma
- Using Figma plugins to find Icons quickly
- Creating our very own custom icons
- 6. Accessibility
- What is accessibility?
- Assistive technologies
- Visual patterns for accessibility (Part 1)
- Tools to make your design accessible
- Visual patterns for accessibility (Part 2)
- 1. Grids + Spacing
- 04 DESIGN EXPLORATION – Application Design + Design Systems
- 1. Design Patterns
- What are design patterns?
- Why are design patterns valuable?
- How to apply design patterns
- Analyzing design patterns together
- Dissecting and choosing design patterns together
- 2. Mobile Design
- Mobile design best practices (Part 1)
- Mobile design best practices (Part 2)
- 3. Applying Visual Design
- Design Fidelity
- Style exploration (Navigation)
- Style exploration (Cards)
- Style exploration (Interests)
- Style exploration (New elements)
- 4. Motion
- The importance of motion
- The purpose of motion
- Intro to Smart Animate
- Showcasing the power of Smart Animate
- 5. Microinteractions
- What are microinteractions?
- Why are they so important?
- Creating our own microinteractions (Part 1)
- Creating our own microinteractions (Part 2)
- Using Figmotion (Part 1)
- Using Figmotion (Part 2)
- 1. Design Patterns
- 05 PUTTING IT ALL TOGETHER – Using our Design System and Hi-Fi prototyping with Figma
- 1. Design Systems
- What is a design system?
- Foundation (color)
- Foundation (grids and spacing)
- Foundation (typography)
- Foundation (iconography)
- Components (buttons)
- Components (Inputs)
- Components (cards)
- Recipes (card layouts)
- Recipes (search)
- Recipes (orders)
- 2. Final Compositions
- Using our design system (Search)
- Using our design system (Product Description)
- Using our design system (Cart)
- 1. Design Systems
- 06 FROM FIGMA TO WEBSITE (take a Figma design and convert it to a live website using HTML and CSS)
- 07 HTML + HTML5
- 08 CSS + CSS3 – CSS Basics, CSS Grid, Flexbox, CSS Animations
- 09 PUTTING YOUR WEBSITE ONLINE
Who this course is for:
- Anyone who wants to start a Web or Mobile Design business on the side as a freelancer, or work as a designer at a company
- Web Developers and Mobile Developers wanting to add another valuable skill to their tool belt
- Anyone who wants to get hired as a Web Designer, Mobile Designer, UI/UX Designer
- Anyone who want to learn about the latest CSS3 features like Flexbox, CSS Grid and CSS Variables as well as HTML5
Suggested Courses
Deal Score-12
Disclosure: This post may contain affiliate links and we may get small commission if you make a purchase. Read more about Affiliate disclosure here.