Search 6,000+ CA Community College Courses

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

Skillshare

Web & UI Design Using Figma & Webflow

via Skillshare

Go to class Write review

Overview

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

TOOLS USED IN THIS CLASS:

Webflow - Responsive web design tool, CMS, and hosting platform

Figma - An interface design tool

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: Webpage Building Blocks
  • 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
  • Client Project: Good Design Process
  • Client Project: Project brief
  • Client Project: Moodboard
  • Client Project: Why Wireframing?
  • Client Project: Figma styles
  • Client Project: Figma components
  • Client Project: Wireframe kit
  • Client Project: Wireframes - Homepage Part 1
  • Client Project: Wireframes - Homepage Part 2
  • Client Project: Wireframes Post Page
  • Client Project: Wireframes - Blog
  • Client Project: Homepage Design Part 1
  • Client Project: Homepage Design Part 2
  • Client Project: Homepage Design Part 3
  • Client Project: Blog Post Design
  • Client Project: Blog 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: Dynamic styles
  • Blog & CMS: Main image
  • Blog & CMS: Rich Text
  • Blog & CMS: Author Block Bottom
  • Webflow Components
  • Blog & CMS: Responsive Post
  • Blog & CMS: Blog Homepage
  • Collection Lists
  • Blog & CMS: Pagination
  • Blog & CMS: Responsive Blog Page
  • Going Live: SEO & Publish
  • Going Live: Form submissions
  • Going Live: Custom domain
  • 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)
  • Photoshop: How To Create a Stretch Crop
  • Photoshop: How to Cut Out an Image (Unboxing)
  • Photoshop: Stick Out Tutorial

Taught by

Vako S.

Reviews

Start your review of Web & UI Design Using Figma & Webflow

Go to class

Never Stop Learning.

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

Sign up for free
Someone learning on their laptop while sitting on the floor.