Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Skillshare

Complete Web Design from Figma to Webflow (New UI)

via Skillshare

Write review

Overview

Coursera Spring Sale
40% Off Coursera Plus Annual!
Grab it

UPDATE: The latest update to this class was made Dec 2025. I keep all tutorial videos up-to-date to the latest versions of Figma and Webflow. If you notice any discrepancies just post in the Q&A and I'll get the update shipped.

TOOLS USED IN THIS CLASS:

Webflow - No-code website builder and CMS

Figma - Interface design tool

THIS IS A FOUR-PART WEB DESIGN CLASS

Part 1: Fundamentals of Good Design

Part 2: Design Practice

Part 3: Webflow Development

Part 4: Client Project

JOIN OUR STUDENT HANGOUT ON DISCORD:

We have Discord channel for students from this class. There you can chat directly with other students from the course, share content, exchange ideas, help each other with design, Figma, Webflow, and make friends.

You can join with this invite link.

Syllabus

  • Class Overview
  • What is Webflow?
  • Webflow Teaser
  • PART 1: SECRETS OF GOOD DESIGN
  • Getting started with Figma
  • Layout is King
  • Join our student hangout on Discord
  • Assignment: Alignment & Grid
  • Layout: Importance of Visual Hierarchy
  • Assignment: Visual Hierarchy
  • Layout: Beware of Optical Illusions
  • Layout: Proximity
  • How to Use Typography Beautifully
  • Typography: Typeface Comes With a Personality
  • Typography: Typeface Categories
  • Assignment: Typeface Personality
  • Typography: Setting type
  • Assignment: Setting type
  • Typography: Two fonts only
  • Typography: Where to find fonts
  • Assignment: Typeface Pairing
  • The Art of Color
  • Colors: Sampling Colors
  • Assignment: Sampling Colors
  • Colors: Fine-tuning Colors
  • Assignment: Fine-tuning Colors
  • Colors: Color hunting
  • Colors: Brand Colors
  • How to Use Photos to Create Mouthwatering Websites
  • Photos: Image Overlays
  • Assignment: Image Overlays
  • Photos: Cropping Techniques - Extreme Crop
  • Photos: Cropping Techniques - Soft Crop
  • Assignment: Photo Cropping
  • Photos: Rule of Thirds
  • Photos: Unbox it!
  • Photos: Pick photos Like a Pro
  • Photos: Where to Find Photos
  • Assignment: Finding Photos
  • 6 Design Tricks Every Designer Should Know
  • Design Trick: Contrast
  • Design Trick: White Space
  • Design Trick: Repetition
  • Design Trick: Consistency
  • Design Trick: Overlapping
  • Assignment: Overlapping
  • Design Trick: Tension
  • Assignment: Tension
  • PART 2: PRACTICE DESIGN LIKE A PRO
  • The Mimic Method
  • The Biggest secret of designers - Inspiration
  • Assignment: Mood Board
  • Assignment: Figma Homepage Design
  • Chat App homepage design: Part 1
  • Chat App homepage design: Part 2
  • Chat App homepage design: Part 3
  • Chat App homepage design: Part 4
  • PART 3: WEB DEVELOPMENT (WEBFLOW)
  • Web Basics: Webflow designer
  • Web Basics: HTML and CSS
  • Web Basics: The Box model
  • Webflow: Element Hierarchy
  • Webflow: Section, Container, Div Block
  • Webflow: Size Settings
  • Webflow: Padding & Margins
  • Webflow: Web Typography
  • Webflow: Buttons & Links
  • Webflow: CSS Classes
  • Webflow vs Figma Sizes
  • Webflow: Images
  • Webflow: Float & Display
  • Webflow: Flexbox
  • Webflow: Debugging Checklist
  • Webflow: Navbar (Chat App)
  • Webflow: Hover
  • Webflow: Middle Section (Chat App)
  • Webflow: HTML tags
  • Webflow: Combo classes
  • Webflow: CTA section (Chat App)
  • Webflow: Footer (Chat App)
  • 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)
  • Going Live: SEO (Chat App)
  • Going Live: Publishing (Chat App)
  • Going Live: Editor
  • PART 4: CLIENT PROJECT FROM START TO FINISH
  • Good Design Process
  • Client Project: Project brief
  • Client Project: Moodboard
  • Why Wireframing?
  • Figma styles
  • Figma components
  • Wireframe kit
  • Wireframes - Homepage Part 1
  • Wireframes - Homepage Part 2
  • Wireframes - Post Page
  • Wireframes - Blog Grid
  • TeamApp Homepage Design: Part 1
  • TeamApp Homepage Design: Part 2
  • TeamApp Homepage Design: Part 3
  • Blog Post Design
  • Blog Grid Design
  • Webflow Development 2
  • Webflow 2: Background styles
  • Webflow 2: Navbar (Team App)
  • Webflow 2: Hero content
  • Webflow 2: Forms
  • Webflow 2: Mockup section 1
  • Webflow 2: Mockup section 2
  • Webflow 2: Photo sections
  • Webflow 2: Slider Component
  • Webflow 2: Testimonial slider
  • Webflow 2: Positioning
  • Webflow 2: Slider arrows
  • Webflow 2: Footer (Team App)
  • Webflow 2: Footer form
  • Interactions: Breathing Life Into Your Website
  • Interactions: Card interaction
  • Interactions: Arrow interaction 1
  • Interactions: Arrow interaction 2
  • Responsive: Navbar (Team App)
  • Responsive: Hero section
  • Responsive: Mockup Section
  • Responsive: Body
  • Responsive: Testimonial & Footer
  • Blog & CMS: Going From Static to Dynamic Website
  • Blog & CMS: Webflow CMS
  • Blog & CMS: CMS Items
  • Blog & CMS: Collection page
  • Blog & CMS: Navbar & headline
  • Blog & CMS: Author block
  • Blog & CMS: Reference field
  • Blog & CMS: Object Fit
  • Blog & CMS: Main image
  • Blog & CMS: Rich Text
  • Blog & CMS: Author Block Bottom
  • Webflow Components
  • Blog & CMS: Responsive Post
  • Blog & CMS: Blog Homepage
  • Collection List
  • Blog & CMS: Pagination
  • Blog & CMS: Responsive Blog Page
  • Going Live: SEO & Publish
  • Going Live: Form submissions
  • Portfolio website
  • Portfolio website tour
  • Installing portfolio website
  • Finding work online
  • Finding work studios
  • Finding work networking
  • Finding work conclusion
  • 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
  • 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
  • Intro to Advanced
  • Webflow: Custom Modal (Pop-Up)
  • Webflow: Custom Code Embed - Commenting Plugin (Needs a Paid Plan)
  • Going Live: Custom domain
  • Photoshop: How To Create a Stretch Crop
  • Photoshop: How to Cut Out an Image (Unboxing)
  • Photoshop: Stick Out Tutorial

Taught by

Vako S.

Reviews

4.8 rating at Skillshare based on 201 ratings

Start your review of Complete Web Design from Figma to Webflow (New UI)

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.