Complete Web Design: from Figma to Webflow to Freelancing By Vako Shvili
$100 $15
Buy
Complete Web Design: from Figma to Webflow to Freelancing
English English, Spanish, French (+5)
18 Hours Course

Complete Web Design: from Figma to Webflow to Freelancing

Watch Trailer
$100 $15
Buy course

3 in 1 Course: Learn to design websites with Figma, build with Webflow, and make a living freelancing.

Web Design is fun. It's creative. It gives you a huge self-satisfaction when you look at your work and say, "I made this!". I love that feeling after I'm done working on something. When I lean back in my chair, look at the final result with a smile, and have this little "spark joy" moment.

It's especially satisfying when I know I just made $5,000.

Wouldn't you want to have that?

  • Wouldn't you want to be your own boss?
  • Working 2-3 hours per day and making more than what people make working full-time?
  • Waking up whenever you want?
  • Working from home? Or Starbucks? Or bathtub? If that's your thing. Or from some awesome place like Bali?

I do! And that's why I got into this field. Not for the love of Web Design, which I do now. But for the LIFESTYLE!

There are many ways one can achieve this lifestyle. This is my way. This is how I achieved a lifestyle I've been fantasizing about for five years. And I'm going to teach you the same.

Often people think Web Design is complicated. That it needs some creative talent or knack for computers. Sure, a lot of people make it very complicated. People make the simplest things complicated. Like most subjects taught in the universities.

But I don't like complicated. I like easy. I like life hacks. I like to take the shortest and simplest route to my destination. I haven't gone to an art school or have a computer science degree. I'm an outsider to this field who hacked himself into it, somehow ending up being a sought-after professional.

That's how I'm going to teach you Web Design. So you're not demotivated on your way with needless complexity. So you enjoy the process because it's simple and fun. So you can become a Freelance Web Designer in no time.

For example, this is a Design course but I don't teach you Photoshop. Because Photoshop is needlessly complicated for Web Design. But people still teach it to web designers. I don't. I teach Figma – a simple tool that is taking over the design world. You will be designing a complete website within a week while others are still learning how to create basic layouts in Photoshop.

Second, this is a Development course. But I don't teach you how to code. Because for Web Design coding is needlessly complicated and takes too long to learn. Instead, I teach Webflow – a tool that is taking over the web design world. You will be building complex websites within two weeks while others are still learning the basics of HTML & CSS.

Third, this is a Freelancing course. But I don't just teach you how to write great proposals. I give you a winning proposal template. When you're done with the course, you will have a stunning portfolio website with portfolio pieces already in it.

  • UX Design
  • Web Development
    •    
  • Freelancing
  • Typography
  • Responsive Design
  • Photoshop
  • UI Design
  • Webflow
  • Figma
Course Table of Contents
What will you learn?

28 sections • 200 lectures • 18 Hours total length

  • Getting Started
    4 lectures 11:18 Mins
    • What is Webflow?
      7:06 Mins
    • Sign up with Webflow
    • Webflow Teaser
      4:12 Mins
    • Check out the Resources Page
  • Part 1: Secrets of Good Design
    2 lectures 9:29 Mins
    • Intro to Good Design
      2:34 Mins
    • Getting started with Figma
      6:55 Mins
  • Layout is King
    9 lectures 36:15 Mins
    • It All Starts With Alignment & Grid
      6:49 Mins
    • Practice: Alignment & Grid
      9:18 Mins
    • Assignment: Alignment & Grid
    • Importance of Visual Hierarchy
      7:20 Mins
    • Practice: Visual Hierarchy
      8:34 Mins
    • Assignment: Visual Hierarchy
    • Join the Student Hangout on Discord
    • Beware of Optical Illusions
      3:52 Mins
    • Proximity
      1:42 Mins
  • How to Use Typography Beautifully
    12 lectures 44:11 Mins
    • Intro to Typography
      1:37 Mins
    • Typeface Comes With a Personality
      1:51 Mins
    • Typeface Categories
      6:14 Mins
    • Practice: Typeface Personality
      6:12 Mins
    • Assignment: Typeface Personality
    • Setting type
      8:30 Mins
    • Practice: Setting type
      7:03 Mins
    • Assignment: Setting Type
    • Two fonts only
      2:51 Mins
    • Where to Find Fonts
      3:57 Mins
    • Practice: Typeface Pairing
      7:16 Mins
    • Assignment: Typeface Pairing
  • The Art of Color
    9 lectures 26:41 Mins
    • Intro to Colors
      1:11 Mins
    • Sampling Colors
      1:56 Mins
    • Practice: Sampling Colors
      13:31 Mins
    • Assignment: Sampling Colors
    • Fine-tuning Colors
      3:58 Mins
    • Practice: Fine-tuning Colors
      2:30 Mins
    • Assignment: Fine-tuning Colors
    • Color Hunting
      2:35 Mins
    • Brand Colors
      2:20 Mins
  • How to Use Photos to Create Stunning Websites
    14 lectures 49:53 Mins
    • Intro to Photos
      00:23 Mins
    • Image Overlays
      1:59 Mins
    • Practice: Image Overlays
      4:57 Mins
    • Assignment: Image Overlays
    • Photo Cropping Techniques - Extreme Crop
      4:28 Mins
    • Photo Cropping Techniques - Soft Crop
      4:37 Mins
    • Practice: Photo Cropping
      11:10 Mins
    • Assignment: Photo Cropping
    • Rule of Thirds
      4:38 Mins
    • Unbox it!
      4:47 Mins
    • Pick Photos Like a Pro
      6:13 Mins
    • Where to Find Photos
      3:27 Mins
    • Practice: Finding Photos
      4:53 Mins
    • Assignment: Finding Photos
  • 6 Design Tricks Every Designer Should Know
    11 lectures 30:21 Mins
    • Intro to Design Tricks
      00:24 Mins
    • Contrast
      3:53 Mins
    • White Space
      5:07 Mins
    • Repetition
      3:56 Mins
    • Overlapping
      3:43 Mins
    • Practice: Overlapping
      00:57 Mins
    • Assignment: Overlapping
    • Tension
      2:32 Mins
    • Practice: Tension
      3:45 Mins
    • Assignment: Tension
    • Consistency
      7:56 Mins
  • Part 2: Practice Design Like an Artist
    1 lectures 00:18 Mins
    • Intro to Design Practice
      00:18 Mins
  • Practice by Mimicking Pros
    6 lectures 23 Mins
    • Mimic Method
      4:57 Mins
    • The Biggest secret of GREAT DESIGNERS: Inspiration
      5:50 Mins
    • Practice: Mood Board
      5:42 Mins
    • Assignment: Mood Board
    • Practice: Figma Homepage Design
      7:11 Mins
    • Assignment: Figma Homepage Design
  • Designing Your First Beautiful Web Page
    5 lectures 40:20 Mins
    • Chat App homepage design: Part 1
      7:18 Mins
    • Chat App homepage design: Part 2
      11:08 Mins
    • Chat App homepage design: Part 3
      11:45 Mins
    • Chat App homepage design: Part 4
      10:01 Mins
    • Final Project: Chat App Homepage Design
  • Part 3: Webflow Development
    1 lectures 00:24 Mins
    • Intro to Webflow Development
      00:24 Mins
  • How Web Pages Work
    4 lectures 13:10 Mins
    • Webflow Designer Intro
      4:07 Mins
    • HTML & CSS
      3:36 Mins
    • The Box Model
      2:15 Mins
    • Element Hierarchy
      3:52 Mins
  • Building Your First Web Page
    17 lectures 2 Hours 20:32 Mins
    • Section & Div Block
      3:53 Mins
    • Read-Only Version of Chat App
    • Size Settings
      12:47 Mins
    • Padding & Margins
      11:55 Mins
    • Web Typography
      6:18 Mins
    • Buttons and Links
      5:14 Mins
    • CSS Classes
      6:15 Mins
    • Images
      6:26 Mins
    • Float, Columns, Display
      8:55 Mins
    • Flexbox
      7:38 Mins
    • Navbar (Chat App)
      10:15 Mins
    • Hover
      7:54 Mins
    • Middle Section (Chat App)
      4:22 Mins
    • HTML Tags
      10:05 Mins
    • Combo Classes
      7:58 Mins
    • CTA Section (Chat App)
      14:15 Mins
    • Footer (Chat App)
      11:45 Mins
  • Responsive Web Design: Beautiful on Any Device
    8 lectures 43:56 Mins
    • Intro to Responsive Web Design
      6:27 Mins
    • Responsive: Hero Section - Tablet
      3:42 Mins
    • Responsive: Hero Section - Mobile 1
      4:47 Mins
    • Responsive: Hero Section - Mobile 2
      3:07 Mins
    • Responsive: Nav Menu (Chat App)
      9:53 Mins
    • Responsive: Overflow
      7:01 Mins
    • Responsive: CTA Section (Chat App)
      4:05 Mins
    • Responsive: Footer (Chat App)
      5:12 Mins
  • Going Live: Launching Your First Web Page
    4 lectures 12:11 Mins
    • Going Live: SEO (Chat App)
      4:49 Mins
    • Going Live: Publishing (Chat App)
      4:59 Mins
    • Webflow Editor
      3:03 Mins
    • Assignment: Final Result – Chat App
  • Part 4: Client Project from Start to Finish
    1 lectures 1:32 Mins
    • Intro to Client Project
      1:32 Mins
  • Nail the Designs: Project Brief, Mood Board, Wireframes, Design
    18 lectures 2 Hours 26:38 Mins
    • Good Design Process
      8:03 Mins
    • Project Brief
      5:09 Mins
    • Mood Board
      5:02 Mins
    • Why Wireframing?
      7:35 Mins
    • Figma Styles
      2:49 Mins
    • Figma Components
      6:03 Mins
    • Wireframe Kit
      4:09 Mins
    • Wireframes – Homepage Part 1
      11:28 Mins
    • Wireframes – Homepage Part 2
      12:37 Mins
    • Wireframes – Post Page
      7:46 Mins
    • Wireframes – Blog
      7:16 Mins
    • Assignment: Final Result – Team App Wireframes
    • Team App Homepage Design: Part 1
      11:32 Mins
    • Team App Homepage Design: Part 2
      16:52 Mins
    • Team App Homepage Design: Part 3
      12:12 Mins
    • Team App Blog Post Design
      6:19 Mins
    • Team App Blog Design
      13:31 Mins
    • Assignment: Final Result – Team App Designs
  • Development: From Designs to Functional Website
    14 lectures 1 Hour 40 Mins
    • Intro
      1:02 Mins
    • Background Styles
      7:37 Mins
    • Navbar (Team App)
      8:50 Mins
    • Hero Content (Team App)
      7:22 Mins
    • Forms
      11:01 Mins
    • Mockup Section – Part 1 (Team App)
      9:49 Mins
    • Mockup Section – Part 2 (Team App)
      4:26 Mins
    • Photo Sections (Team App)
      4:21
    • Slider Component
      4:27 Mins
    • Testimonial Slider (Team App)
      12:34 Mins
    • Positioning
      8:34 Mins
    • Slider Arrows
      6:04 Mins
    • Footer (Team App)
      7:33 Mins
    • Footer Form (Team App)
      9:11 Mins
  • Interactions: Breathing Life Into Your Website
    4 lectures 21:21 Mins
    • Interactions Intro
      2:18 Mins
    • Card Interaction
      10:08 Mins
    • Arrow Interaction – Part 1
      2:45 Mins
    • Arrow Interaction – Part 2
      6:50 Mins
  • Responsive Web Design (Team App Website)
    5 lectures 27:40 Mins
    • Responsive: Navbar (Team App)
      5:26 Mins
    • Responsive: Hero (Team App)
      4:42 Mins
    • Responsive: Mockup Section (Team App)
      5:42 Mins
    • Responsive: Body (Team App)
      6:23 Mins
    • Responsive: Testimonials & Footer (Team App)
      5:51 Mins
  • Blog & CMS: Going From Static to Dynamic Website
    17 lectures 1 Hour 34:45 Mins
    • CMS & Dynamic Content
      1:33 Mins
    • Webflow CMS
      5:22 Mins
    • CMS Items
      3:10 Mins
    • Collection Page
      4:08 Mins
    • Blog: Navbar & Headline
      4:55 Mins
    • Blog: Author
      3:37 Mins
    • Reference Field
      5:47 Mins
    • Dynamic Styles
      3:08 Mins
    • Blog: Main Image
      2:31 Mins
    • Rich Text
      9:57 Mins
    • Blog: Author Block Bottom
      4:08 Mins
    • Symbols
      6:09 Mins
    • Blog: Responsive Post Page
      5:30 Mins
    • Blog: Homepage
      13:28 Mins
    • Collection List
      11:16 Mins
    • Pagination
      7:29 Mins
    • Blog: Responsive Homepage
      4:59 Mins
  • Going Live: Your Fully Functional Dynamic Website
    4 lectures 21:49 Mins
    • SEO & Publish (Team App)
      6:32 Mins
    • Form Submissions
      2:15 Mins
    • Custom Domain
      13:02 Mins
    • Assignment: Final Result – Team App Website
  • Part 5: Secrets of Making Money Freelancing
    1 lectures 1:22 Mins
    • Intro to Freelancing
      1:22 Mins
  • Stunning Portfolio Website Made for You
    3 lectures 23:51 Mins
    • Portfolio Website
      4:34 Mins
    • Portfolio Website Tour
      6:15 Mins
    • Installing Portfolio Website
      12:42 Mins
  • Where to Find Freelance Work
    4 lectures 19:30 Mins
    • Finding work – Online
      9:51 Mins
    • Finding work – Studios
      6:35 Mins
    • Finding work – Networking
      3:12 Mins
    • Finding work – Conclusion
      00:32 Mins
  • 28 Tips to Win on Upwork
    9 lectures 49:30 Mins
    • Upwork Overview
      6:05 Mins
    • Tips 1-3: Getting your profile approved
      5:02 Mins
    • Tips 4-9: Create a profile that attracts clients
      7:02 Mins
    • Tips 10-12: Get the "best match" badge
      3:30 Mins
    • Tips 13-14: Propose the right price
      4:09 Mins
    • Tips 15-16: Be the freelancer they can't resist
      6:03 Mins
    • Tips 17-22: Write damn good cover letters
      8:03 Mins
    • Tips 23-25: Don't get yourself suspended
      6:31 Mins
    • Tips 26-28: Don't get scammed
      3:05 Mins
  • Pricing, Proposal Template, & More
    7 lectures 46:51 Mins
    • Pricing: How much do you charge?
      11:25 Mins
    • Pricing: Hourly vs Fixed Rate
      4:15 Mins
    • Proposal Template: Fixed Rate
      8:37 Mins
    • Proposal Template: Hourly Rate
      2:28 Mins
    • Freelance Contract
      5:55 Mins
    • Selling Webflow to Clients
      12:32 Mins
    • Client Billing Feature
      2:59 Mins
  • Part 6: Advanced
    6 lectures 53:30 Mins
    • Intro to Advanced
      1:51 Mins
    • Webflow: Custom Modal (Pop-Up)
      15:40 Mins
    • Webflow: Custom Code Embed - Commenting Plugin (Needs a Paid Plan)
      7:16 Mins
    • Photoshop: How To Create a Stretch Crop
      5:16 Mins
    • Photoshop: How to Cut Out an Image (Unboxing)
      13:57 Mins
    • Photoshop: Stick Out Tutorial
      10:11 Mins
Vako Shvili
Work Work Work 
Work Work Work 
Duke portfolio
Duke portfolio
portfolio-website-theme.webflow.io
Content First
Content First
contentfirst.com.au
Vako Shvili Theme
Vako Shvili Theme
vakoshvili.com/portfolio/purposed

A few words spring to mind when I think of Vako - cleverly creative, persuasive, extremely detailed, exceptional comms, I could carry on... and all this means he is one brilliant designer who we love to work with
Robin Noguier
Robin Noguier Adam Wallace, Content First
Course details

Complete Web Design: from Figma to Webflow to Freelancing

Complete Web Design: from Figma to Webflow to Freelancing

By Vako Shvili

  • UX Design
  • Web Development
    •    
  • Freelancing
  • Typography
  • Responsive Design
  • Photoshop
  • UI Design
  • Webflow
  • Figma
$15 85% off $100
  • English
  • English, Spanish, French, Japanese, Italian, Chinese, German, Portuguese
  • Beginners and those with some web design experience
  • Access on mobile and Desktop
  • Full time access
  • Certificate of completion
About the Speaker
Learn from the best
  • Vako Shvili

    Vako Shvili

    Web Designer, UX/UI Designer

    @vako_shvili

    One day Vako had enough with the 9-to-5 grind, or more like 9-to-9 in his case, and quit his job, or more like got himself fired from his own startup. He decided to work on his dream: be his own boss, travel the world, only do the work he enjoyed, and make a lot more money in the process. No more begging for vacation days and living from paycheck to paycheck. After trying everything from e-commerce stores to professional poker his lucky break came when he started freelance design. Vako fell in love with the field that gives him the lifestyle of his dreams. Vako realizes that people who take courses on Udemy want to transform their lives. Today with his courses and mentoring Vako is helping thousands of people transform their lives, just like he did once.

    vakoshvili.com

Similar Courses