Complete Web Design: from Figma to Webflow to Freelancing from Udemy

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.

Buy this course now and take it whenever the time is right for you.

What's inside

Learning objectives

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.

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.

Syllabus

Getting Started

What is Webflow?

Bookmark the Resources Page

Webflow Teaser

PART 1: SECRETS OF GOOD DESIGN

Intro to Good Design

Getting started with Figma

Layout is King

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

How to Use Typography Beautifully

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

The Art of Color

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

How to Use Photos to Create Mouthwatering Websites

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

6 Design Tricks Every Designer Should Know

Intro to Design Tricks

Contrast

White Space

Repetition

Consistency

Overlapping

Practice: Overlapping

Overlapping Practice

Tension

Practice: Tension

PART 2: PRACTICE DESIGN LIKE AN ARTIST

Intro to Design Practice

Practice by Mimicking Pros

Mimic Method

The Biggest SECRET of Great Designers: Inspiration

Practice: Mood Board

Mood Board Practice

Practice: Figma Homepage Design

Figma Homepage Design

Designing Your First Beautiful Web Page

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

PART 3: WEB DEVELOPMENT (WEBFLOW)

Intro to Webflow Development

How Web Pages Work

Webflow Designer Intro

HTML & CSS

The Box Model

Element Hierarchy

Building Your First Web Page

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Builds a strong foundation for beginners by explaining concepts like layout, typography, visual hierarchy, and design tricks

Provides real-world relevance by teaching popular tools and software used in the industry, such as Figma and Webflow

Practical and hands-on approach by walking learners through a complete website design and development process

Freelance-oriented focus, equipping learners with tips and templates for successful freelancing

Might require additional software or tools, which can result in extra costs

May require prior design or development experience for optimal learning

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Complete Web Design: from Figma to Webflow to Freelancing with these activities:

Review HTML and CSS

Show steps

Reviewing HTML and CSS will ensure you have the appropriate foundational knowledge to maximize your learning in this course.

Browse courses on HTML

Show steps

Review the syntax and structure of HTML and CSS.
Create a simple web page using HTML and CSS.

Explore Webflow's Features

Show steps

Familiarizing yourself with Webflow's features will enhance your ability to navigate and utilize the platform effectively.

Browse courses on Webflow

Show steps

Review Webflow's documentation and tutorials.
Explore the Webflow Designer interface.

Attend a Webflow Workshop

Show steps

Attending a Webflow workshop will provide you with structured guidance and hands-on practice in using the platform.

Browse courses on Webflow

Show steps

Find a Webflow workshop in your area or online.
Register for the workshop and attend.

Five other activities

Expand to see all activities and additional details

Show all eight activities

Design a Landing Page

Show steps

Designing a landing page will provide you with hands-on experience applying the design principles covered in the course.

Browse courses on Landing Page Design

Show steps

Choose a product or service to design a landing page for.
Develop a target audience and goals for the landing page.
Create a wireframe and layout for the landing page.
Use Figma to design the landing page.
Test and refine the design of the landing page.

Compile Web Design Resources

Show steps

Creating a compilation of web design resources will provide you with a valuable reference for future projects.

Show steps

Gather links to articles, tutorials, and tools related to web design.
Organize the resources into categories or folders.

Build a Personal Website

Show steps

Building a personal website will not only showcase your skills but also provide you with a valuable learning experience in applying the techniques taught in the course.

Browse courses on Webflow

Show steps

Plan the structure and content of your website.
Choose a template or design a custom layout using Webflow.
Develop the content and pages for your website.
Test and deploy the website.

Contribute to a Webflow Template

Show steps

Contributing to a Webflow template will allow you to practice your skills and collaborate with other web designers.

Browse courses on Webflow

Show steps

Find an open-source Webflow template on GitHub or other platforms.
Make a fork of the repository and create a new branch for your changes.
Make your changes to the template.
Submit a pull request to the original repository.

Design a Website for a Non-Profit

Show steps

Designing a website for a non-profit organization is a meaningful and practical application of the skills learned in this course.

Browse courses on Web Design

Show steps

Identify a non-profit organization to collaborate with.
Conduct research and gather requirements for the website.
Design and develop the website using Figma and Webflow.
Deploy and launch the website.

Career center

Learners who complete Complete Web Design: from Figma to Webflow to Freelancing will develop knowledge and skills that may be useful to these careers:

Web Designer

As a Web Designer, you will be responsible for designing and developing websites. This course will teach you the skills you need to succeed in this role, including graphic design concepts, Figma, and Webflow. With this knowledge, you will be able to create beautiful and functional websites that meet the needs of your clients.

See salaries and explore the career path for Web Designer

UX Designer

As a UX Designer, you will be responsible for ensuring that websites are user-friendly and easy to navigate. This course will teach you the skills you need to succeed in this role, including graphic design concepts, Figma, and Webflow. With this knowledge, you will be able to create websites that are both beautiful and functional.

See salaries and explore the career path for UX Designer

Front-End Developer

As a Front-End Developer, you will be responsible for developing the front-end of websites. This course will teach you the skills you need to succeed in this role, including HTML, CSS, and JavaScript. With this knowledge, you will be able to create websites that are both visually appealing and functional.

See salaries and explore the career path for Front-End Developer

Freelance Web Designer

As a Freelance Web Designer, you will be responsible for designing and developing websites for clients. This course will teach you the skills you need to succeed in this role, including graphic design concepts, Figma, and Webflow. With this knowledge, you will be able to create beautiful and functional websites that meet the needs of your clients.

See salaries and explore the career path for Freelance Web Designer

Web Developer

As a Web Developer, you will be responsible for developing and maintaining websites. This course will teach you the skills you need to succeed in this role, including HTML, CSS, and JavaScript. With this knowledge, you will be able to create websites that are both visually appealing and functional.

See salaries and explore the career path for Web Developer

Graphic designer

As a Graphic Designer, you will be responsible for creating visual concepts for websites, marketing materials, and other projects. This course will teach you the skills you need to succeed in this role, including graphic design concepts, Figma, and Photoshop. With this knowledge, you will be able to create visually appealing designs that communicate effectively.

See salaries and explore the career path for Graphic designer

Product Designer

As a Product Designer, you will be responsible for designing and developing new products. This course will teach you the skills you need to succeed in this role, including graphic design concepts, Figma, and prototyping. With this knowledge, you will be able to create products that are both user-friendly and visually appealing.

See salaries and explore the career path for Product Designer

UI Designer

As a UI Designer, you will be responsible for designing the user interface for websites and apps. This course will teach you the skills you need to succeed in this role, including graphic design concepts, Figma, and prototyping. With this knowledge, you will be able to create user interfaces that are both visually appealing and easy to use.

See salaries and explore the career path for UI Designer

Information Architect

As an Information Architect, you will be responsible for organizing and structuring websites and apps. This course will help you build the foundation you need to succeed in this role, by teaching you graphic design concepts and Figma. With this knowledge, you will be able to create websites and apps that are both user-friendly and easy to navigate.

See salaries and explore the career path for Information Architect

Interaction Designer

As an Interaction Designer, you will be responsible for designing the interactions between users and websites and apps. This course will help you build the foundation you need to succeed in this role, by teaching you graphic design concepts and Figma. With this knowledge, you will be able to create websites and apps that are both user-friendly and engaging.

See salaries and explore the career path for Interaction Designer

Content Strategist

As a Content Strategist, you will be responsible for planning and creating content for websites and apps. This course may be helpful for you, as it will teach you graphic design concepts and Figma. With this knowledge, you will be able to create content that is both visually appealing and informative.

See salaries and explore the career path for Content Strategist

Marketing Manager

As a Marketing Manager, you will be responsible for developing and executing marketing campaigns. This course may be helpful for you, as it will teach you graphic design concepts and Figma. With this knowledge, you will be able to create marketing materials that are both visually appealing and effective.

See salaries and explore the career path for Marketing Manager

Project Manager

As a Project Manager, you will be responsible for planning, executing, and closing projects. This course may be helpful for you, as it will teach you graphic design concepts and Figma. With this knowledge, you will be able to create project plans and other documents that are both visually appealing and informative.

See salaries and explore the career path for Project Manager

Business Analyst

As a Business Analyst, you will be responsible for analyzing business processes and identifying opportunities for improvement. This course may be helpful for you, as it will teach you graphic design concepts and Figma. With this knowledge, you will be able to create business documents that are both visually appealing and informative.

See salaries and explore the career path for Business Analyst

Technical Writer

As a Technical Writer, you will be responsible for creating documentation for software and other products. This course may be helpful for you, as it will teach you graphic design concepts and Figma. With this knowledge, you will be able to create documentation that is both visually appealing and easy to understand.

See salaries and explore the career path for Technical Writer