Complete Web Design: from Figma design to Webflow development

THIS IS A SIX-PART COMPLETE WEB DESIGN CLASS

Part 1: Secrets of Good Design

Part 2: Practice Design Like a Pro

Part 3: Webflow Development

Part 4: Client Project From Start to Finish

Part 5: Freelancing

Part 6: Advanced

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.

ABOUT THIS CLASS:

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.

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.

For example, this is a Design class 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.

Part three and four are Development classes. 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.

• 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: Overlapping
• Assignment: Overlapping
• Design Trick: Tension
• Assignment: Tension
• Design Trick: Consistency
• 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
• Canvas Settings
• Webflow: Images
• Webflow: Float & Display
• Webflow: Flexbox
• Webflow: Debugging Checklist
• Webflow: Navbar (Chat App)
• Webflow: Hover
• Webflow: Middle Section
• Webflow: HTML tags
• Webflow: Combo classes
• Webflow: CTA section
• 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
• Responsive: Overflow
• Responsive: CTA section
• Responsive: Footer
• Going Live: SEO
• Going Live: Publishing
• 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
• Blog & CMS: Symbols
• Blog & CMS: Responsive post
• Blog & CMS: Homepage
• Blog & CMS: Collection list
• Blog & CMS: Pagination
• Blog & CMS: Responsive Blog Page
• Going Live: SEO & Publish
• Going Live: Form submissions
• Going Live: Custom domain
• PART 5: FREELANCING
• Portfolio website theme
• Portfolio website tour
• Installing portfolio website
• Finding work: Online
• Finding work: Studios
• Finding work: Networking
• Finding work: Conclusion
• Upwork Tips: Overview
• Upwork Tips: Get your profile approved
• Upwork Tips: Profile that attracts clients
• Upwork Tips: Best match badge
• Upwork Tips: Propose the right price
• Upwork Tips: Freelancer they can't resist
• Upwork Tips: Cover letters
• Upwork Tips: Don't get suspended
• Upwork Tips: 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
• Client billing feature
• PART 6: ADVANCED
• Webflow: Custom Modal
• Webflow: Custom Code Embed
• Photoshop: Stretch Crop
• Photoshop: Cut Out Tutorial
• Photoshop: Stick Out Tutorial