IIRF Online > Development > No-Code Development > Web Design > Complete Web Design: from Figma to Webflow to Freelancing
Complete Web Design: from Figma to Webflow to Freelancing by Udemy
3 in 1 Course: Learn to design websites with Figma, build with Webflow, and make a living freelancing.
Course Highlights
- You will learn graphic design concepts like layout, typography, visual hierarchy, design tricks, and more.
- You will learn how to design beautiful websites using Figma, an interface design tool used by designers at Uber, Airbnb and Microsoft.
- You will learn how to take the designs and build them into websites using Webflow — a powerful site builder used by teams at Adobe, Dell, NASA and more.
- You will learn secret tips of freelance web designers and how they make great money freelancing online.
Skills you will learn!
Curriculum
4 Topics
What is Webflow?
Bookmark the Resources Page
Sign up with Webflow
Webflow Teaser
2 Topics
Intro to Good Design
Getting started with Figma
11 Topics
It All Starts With Alignment & Grid
Practice: Alignment & Grid
Alignment & Grid Practice
Assignment Feedback
Importance of Visual Hierarchy
Practice: Visual Hierarchy
Visual Hierarchy Practice
Join the Student Hangout on Discord
Beware of Optical Illusions
Proximity
Section Notes
13 Topics
Intro to Typography
Typeface Comes With a Personality
Typeface Categories
Practice: Typeface Personality
Typeface Personality Practice
Setting type
Practice: Setting type
Setting Type Practice
Two fonts only
Where to Find Fonts
Practice: Typeface Pairing
Typeface Pairing Practice
Section Notes
10 Topics
Intro to Colors
Sampling Colors
Practice: Sampling Colors
Sampling Colors Practice
Fine-tuning Colors
Practice: Fine-tuning Colors
Fine-tuning Colors Practice
Color Hunting
Brand Colors
Section Notes
15 Topics
Intro to Photos
Image Overlays
Practice: Image Overlays
Image Overlays Practice
Photo Cropping Techniques - Extreme Crop
Photo Cropping Techniques - Soft Crop
Practice: Photo Cropping
Photo Cropping Practice
Rule of Thirds
Unbox it!
Pick Photos Like a Pro
Where to Find Photos
Practice: Finding Photos
Finding Photos Practice
Section Notes
12 Topics
Intro to Design Tricks
Contrast
White Space
Repetition
Consistency
Overlapping
Practice: Overlapping
Overlapping Practice
Tension
Practice: Tension
Tension
Section Notes
1 Topic
Intro to Design Practice
7 Topics
Mimic Method
The Biggest SECRET of Great Designers: Inspiration
Practice: Mood Board
Mood Board Practice
Practice: Figma Homepage Design
Figma Homepage Design
Section Notes
6 Topics
Chat App homepage design: Part 1
Chat App homepage design: Part 2
Chat App homepage design: Part 3
Chat App homepage design: Part 4
Chat App Homepage Design
Section Notes
1 Topic
Intro to Webflow Development
5 Topics
Webflow Designer Intro
HTML & CSS
The Box Model
Element Hierarchy
Section Notes
22 Topics
Section & Div Block
Read-Only Version of Chat App
Size Settings
Padding & Margins
Section Notes
Web Typography
Webflow Tutorials
Buttons and Links
CSS Classes
Images
Float Columns Display
Flexbox
Webflow vs Figma Sizes
Flexbox Game
Navbar (Chat App)
Webflow Debugging Checklist
Hover State
Middle Section (Chat App)
HTML Tags
Combo Classes
CTA Section (Chat App)
Footer (Chat App)
8 Topics
Intro to Responsive Web Design
Responsive: Hero Section - Tablet
Responsive: Hero Section - Mobile 1
Responsive: Hero Section - Mobile 2
Responsive: Nav Menu (Chat App)
Responsive: Overflow
Responsive: CTA Section (Chat App)
Responsive: Footer (Chat App)
4 Topics
Going Live: SEO (Chat App)
Going Live: Publishing (Chat App)
Webflow Editor
Final Result – Chat App
1 Topic
Intro to Client Project
18 Topics
Good Design Process
Project Brief
Mood Board
Why Wireframing?
Figma Styles
Figma Components
Wireframe Kit
Wireframes – Homepage Part 1
Wireframes – Homepage Part 2
Wireframes – Post Page
Wireframes – Blog
Final Result – Team App Wireframes
Team App Homepage Design: Part 1
Team App Homepage Design: Part 2
Team App Homepage Design: Part 3
Team App Blog Post Design
Team App Blog Design
Final Result – Team App Designs
15 Topics
Intro
Background Styles
Read-Only Mode of Team App
Navbar (Team App)
Hero Content (Team App)
Forms
Mockup Section – Part 1 (Team App)
Mockup Section – Part 2 (Team App)
Photo Sections (Team App)
Slider Component
Testimonial Slider (Team App)
Positioning
Slider Arrows
Footer (Team App)
Footer Form (Team App)
4 Topics
Interactions Intro
Card Interaction
Arrow Interaction – Part 1
Arrow Interaction – Part 2
6 Topics
Responsive: Navbar (Team App)
Responsive: Hero (Team App)
Responsive: Mockup Section (Team App)
❗️Webflow UI update❗️
Responsive: Body (Team App)
Responsive: Testimonials & Footer (Team App)
17 Topics
CMS & Dynamic Content
Webflow CMS
CMS Items
Collection Page
Blog: Navbar & Headline
Blog: Author & Date Block
Reference Field
Object Fit
Blog: Main Image
Rich Text
Blog: Author Block Bottom
Webflow Components
Blog: Responsive Post Page
Blog: Homepage
Collection List
Pagination
Blog: Responsive Homepage
6 Topics
SEO & Publish (Team App)
Form Submissions
Custom Domain
Final Result – Team App Website
More Webflow Videos
Webflow Plans Accounts and How to Handover the Website to the Client
1 Topic
Intro to Freelancing
3 Topics
Portfolio Website
Portfolio Website Tour
Installing Portfolio Website
5 Topics
Finding work – Online
Finding work – Studios
Finding work – Networking
Finding work – Conclusion
Freelancing Tips From a Successful Student
9 Topics
Upwork Overview
Tips 1-3: Getting your profile approved
Tips 4-9: Create a profile that attracts clients
Tips 10-12: Get the "best match" badge
Tips 13-14: Propose the right price
Tips 15-16: Be the freelancer they can't resist
Tips 17-22: Write damn good cover letters
Tips 23-25: Don't get yourself suspended
Tips 26-28: Don't get scammed
6 Topics
Pricing: How much do you charge?
Pricing: Hourly vs Fixed Rate
Proposal Template: Fixed Rate
Proposal Template: Hourly Rate
Freelance Contract
Selling Webflow to Clients
7 Topics
Intro to Advanced
Extra content
Webflow: Custom Modal (Pop-Up)
Webflow: Custom Code Embed - Commenting Plugin (Needs a Paid Plan)
Photoshop: How To Create a Stretch Crop
Photoshop: How to Cut Out an Image (Unboxing)
Photoshop: Stick Out Tutorial
1 Topic
Bonus Lecture: Discord Links
Complete Web Design: from Figma to Webflow to Freelancing
Related Web Design Courses
Thank You!
Your review has been submitted successfully.