Complete Web Design: from Figma to Webflow to Freelancing

Discover that good design follows rules and guidelines, not innate talent, and learn to turn random content into a beautiful composition using Figma through practical assignments.

Set up Figma by downloading the desktop app or using the browser, sign up, and explore core tools, frames, assets, and collaboration features for freelance web design.

Master alignment and grid principles to create balanced, orderly web layouts by using left, center, and horizontal alignment, equal-width columns, and grid rules for predictable, responsive designs.

Practice alignment in Figma by building a simple hero section on a desktop frame using a 12-column grid, margins, and gutters, with a nav bar placeholder.

Apply visual hierarchy to guide attention with a clear focal point, hero shot, and prioritized elements through size and weight, using left-aligned grids and ghost versus full buttons.

Apply visual hierarchy and alignment in a figma-driven workflow to craft a hero section with a focal point, balancing typography and a grid for clear, effective messaging.

Explore how optical illusions affect web design, teaching you to adjust visual weights, sizes, and text placement by eye to achieve balanced, professional layouts.

Apply proximity to group related elements, placing navigation, headings, and buttons close together. Keep unrelated items apart to avoid confusion, such as slogans placed near navigation links.

Master typography by selecting and combining typefaces, fonts, and weights to boost readability and mood. Learn the rules guiding type, typeface, and font choices for effective designs.

Discover how typeface personality guides design choices, from Proxima Soft's casual friendliness to Bodoni's classic luxury, and learn to classify typefaces by mood.

Understand typeface categories to choose the right font for your projects, balancing serif and sans serif with display, script, and typography guidelines for headlines and body text.

Choose fitting typefaces and typeface personalities for seven phrases using Figma and Google Fonts, explore typography categories, and justify font decisions for fitness branding with a designer's thought process.

Explore how typographic adjustments like panorama letter spacing, line height, and font weights shape readability and visual hierarchy, with practical tips for pairing weights and maintaining legibility.

Set type to improve readability and hierarchy by adjusting font size, line height, and weight. Use the Figma file with text blocks to balance headlines and paragraphs within 500-pixel boxes.

Learn how to select at most two fonts per project, ensure strong contrast between typefaces like Playfair Display with Open Sans, and craft intentional typography for clear, readable design.

discover where to find fonts for web design, weighing free options like DaFont against paid fonts, and learn to license fonts via Google Fonts or Adobe Fonts for projects.

Practice typography by pairing two fonts for three text blocks to build hierarchy and readability. Apply type personality to context-rich headlines and neutral paragraph fonts, guided by Hawaii theme examples.

Explore how color choices shape a Go Green scooter app, contrasting vibrant electric-green branding with forest green, and learn to pick colors like a pro to make designs stand out.

Learn to sample colors from real-world inspiration—photos, posters, and websites—to build natural, harmonious palettes. Apply these colors to text and backgrounds by matching dominant hues from images in your design.

Sample dominant colors from images using a blurred preview, then apply those hues to the left content panel while refining typography and grid alignment for a balanced split-screen design.

Master fine-tuning color samples using a color picker in Figma, balancing hue, brightness, and saturation to create vibrant, high-contrast palettes for modern web design.

Fine-tune color combinations in Figma by reviewing frames, duplicating variations, and adjusting hue, brightness, and saturation using HSV color management to improve readability and image-background transitions.

Hunt colors through inspiration and sampling, borrowing from other designers on Dribbble or color generator tools like Coolors.co, then refine with eyedropper tools and avoid pure raw colors unless intentional.

Learn to determine when to use brand colors from the logo and rely on the style guide for colors and typography, with options to refresh or limit to neutrals.

Explore how photos elevate web design by pairing well-chosen images with typography and practical design tricks to create mouthwatering designs.

Use image overlays to boost contrast and readability by applying dark overlays or tinting with color fills, including selective overlays behind content.

Practice applying image overlays in figma to improve text readability by layering fills, adjusting opacity, and tinting with brand colors across multiple frames.

Explore extreme crop techniques to intensify emotion and mystery by zooming in on faces or objects, framing designs for banners, and teasing details without revealing the whole image.

Explore soft crop techniques: apply a fading overlay that blends with the white canvas to create breathing space and readable content while preserving a strong focal point and visual hierarchy.

Practice cropping techniques, including extreme crop, wide soft crop, and color soft crop in a split-screen layout, using gradient fades, color sampling, and alignment for a cohesive web design workflow.

Discover how the rule of thirds creates visual interest by placing subjects off-center along the frame's intersections, with exceptions for center-focused shots and faces.

Unbox images by removing backgrounds and placing them on the canvas edge to create depth, contrast, and blue, dentist-friendly color choices for a compelling dental hero section.

Learn to pick stock photos that feel real and credible by judging scene realism, genuine emotions, and appropriate wardrobe.

Discover free and paid photo sources. Compare Unsplash and Pexels for realism and diversity, and leverage paid stock sites like iStock, Shutterstock, and Bigstock with pricing and subscription options.

Practice finding stock photos for hero sections by analyzing the business, then search sites like Bigstock, Unsplash, and Pexels using office and happy keywords, and explain your photo choices.

Learn design tricks that make your work look beautiful and exciting, like a magic show. Discover common techniques designers use to create striking, engaging designs.

Master contrast by varying color, size, and weight to establish visual hierarchy and spark interest across headlines, paragraphs, and buttons.

Discover how whitespace directs attention and simplifies design, using examples from Google and Yahoo, image overlays, line spacing, and the principle that good design is as little design as possible.

Explore the repetition technique in web design, using color, layout, and photography to create cohesive, contrasting, and visually engaging pages. Learn how white space and pattern recognition drive human-centric design.

Master consistency across layout, typography, colors, and imagery to signal quality and build trust, using grid, alignment, and cohesive photos and icons.

Overlapping elements add drama and unity by tying disparate parts together, using intentional overlaps, shapes, and color repetition to break the grid.

Practice overlapping layouts and repetition by designing a travel app benefit section with three text blocks and photos, using a single overlapping style, an alternating layout, and clear grid hierarchy.

Explore how tension in design mirrors music, using contrast and whitespace to create momentum. Tilt layouts, edge placements, and intense cropping to induce movement and drama.

Design a tension-driven section by using angled shapes, masking, and edge alignment in Figma, then crop and position images to craft dynamic layouts.

Advance from part 1 by designing a home page from start to finish, applying the secrets of good design to make your work look beautiful.

Master the mimic method to learn web design by copying, remixing, and drawing inspiration from multiple works, practicing typography, layout, whitespace, and design habits until you create original work.

Choose inspiration beyond outdated templates and Google by exploring Dribbble, Pinterest, and live sites, then apply fonts, animations, and interactions to craft unique hero sections.

Practice creating a mood board by gathering website, app, art inspiration to shape a ride-sharing app homepage. Organize screenshots in a dark Figma frame and explore overlapping interface ideas.

Practice copying Figma's homepage pixel by pixel, mastering navigation, components, and the footer. Observe hierarchy, contrast, and alignment, and use guides to place elements.

Learn to remix a homepage concept from design to development in Webflow, using your own content, colors, and fonts on a 12-point grid in a four-part Figma-led walkthrough.

Design a chat app homepage with rounded and ghost buttons, maintain visual hierarchy and grid alignment, craft a cohesive hero collage, and import free Figma mockups while replacing missing fonts.

Design a chat app homepage in figma: create navbar with logo, apply poppins typography, tidy up spacing with 30px margins, export crisp mockups, and add shadows, patterns, and overlapping elements.

Design a persuasive call-to-action section with a sign-up form, blue and purple accents, and social proof to guide user decisions.