UX / UI Web Design in Figma | Advanced Level | Eng

Prioritize consistency and naturalness as the core rules of design, guiding spacing, headings, text format, button color, and element behavior. Learn how real-world cues like shading produce intuitive, cohesive interfaces.

Explore the world’s first ux/ui through typography, tracing fonts from text-only interfaces to vector fonts, and learn how typography shapes professional design and information delivery.

Master typography basics for web design in Figma, including font, weight, size, letter spacing, line height, 60–70 characters per line, and left-aligned 16 px body text.

Explore the five font types: serif, sans serif, script, display, and monospaced, and learn how typefaces and fonts differ, plus where each style fits in print and web design.

Choose two distinct font families for headings and body text, ensuring strong contrast and readability with minimal font styles and two weights. Favor Google Fonts for accessible, brand-aligned typography.

Learn how to transform plain text into a readable, visually engaging web design in Figma by applying headings, spacing, bullets, quotes, and highlights with consistent formatting.

Master formatting text in Figma by turning paragraphs into clear headings, body text, and bullet lists. Apply line spacing, font sizes, and auto layout to craft cohesive article layouts.

Practice #1 guides you to build a standard 1440–1920 px site frame in Figma and format text beautifully with consistent headings, bullets, lines, and two-column layouts using auto layout.

Explore what glyphs are and how they enhance typography with symbols and icons. Learn to use fonts that support glyphs, check compatibility, and copy glyphs for design in Figma.

Learn text-driven web design in Figma by enforcing consistency, optimizing readability and line spacing, and applying diverse text styling techniques with moodboards and real examples.

Identify the designer's dilemma and learn a practical checklist to diagnose why a design feels off, focusing on consistency, naturalness, alignment, spacing, contrast, hierarchy, and typography using auto layouts.

Develop your visual taste by studying Dribble, Behance, and Pinterest where designers post work to spot trends and evaluate designs. Learn to explain design decisions with a practical checklist.

Explore six Chrome plugins for visual inspiration, including font detector, screen ruler, grid ruler, color zilla, eyedropper, and go full page to boost design sense and consistency.

Explore seven web design styles, including minimalism, brutalism, new morphism (skeuomorphism), flat design, glass morphism, and trendy or mixed styles, and learn to keep your designs consistent.

Explore how neural networks can help develop visual taste by spotting design mistakes, assessing visual hierarchy and contrast, and offering tips to refine a landing page.

Explore the four main grid types—12-column, baseline, modular, and hierarchical—and learn how consistency, visual hierarchy, and narrative logic guide element placement in design.

Create a five-column grid in Figma to introduce variety, using a 1600-wide layout, a 150 margin, and a 24 gutter, then remove a column if needed.

Analyze grids from various sites to understand layout logic, using three lines or two-thirds/one-third divisions; use grid ruler tools and inspiration from Pinterest to craft coherent, design-driven grids.

Explore typography and grids as the foundation of professional web design, emphasizing text-led layout, consistency, and a black-and-white aesthetic over graphics or animations.

Explore placing bilingual poster text inside grids, using columns (3, 6, 12), modular grids, or a hierarchy to design posters or flyers. Minimize images and use Pinterest references for inspiration.

Design a poster using a modular grid on an A4 frame with five columns and layout guides in a Figma workflow. Apply typography rules, color contrast, and baseline alignment.

Practice #2 guides the creation of a circular, radial poster inspired by music in the park, using a vinyl record motif, masking, and circular text paths in Illustrator.

Explore the first project by outlining assignment options and building a 1440–1920 px frame for a text-based, black-and-white site with a grid and hero, menu, product description, and brand story.

Explore where to obtain stock photos for your first project. Learn to convert images to black and white in Figma by desaturation, and access the provided resources and project folder.

Create and apply a modular grid to mark up a layout in figma, building a nine-square grid with frames and repeated copies to guide content alignment.

Create the hero section by defining color and text styles and building a style map to ensure consistent headings, body text, and a button.

Finish the section in Figma by placing and cropping an image, applying auto layout, and refining headers and body text. Fade nonessential text to highlight key words and balance design.

Design the second section in Figma by repeating the first section’s style, applying 20-pixel margins and auto layout, and adding a brand story with 'elements of innovation'.

Continue building the third section of the site in a consistent, simple layout by adding a technical overview and factoids in a grid, mirroring the heading style and fast facts.

Create an informational banner to separate sections with a three-cell stripe and a call-to-action. Crop the image, remove backgrounds, and align text, button, and lines in Figma for timeless design.

Continue building the website layout in Figma by adding a two-part section with classic and compact heading formats, images, and an order button, using auto layout and UI kit styles.

Create a second banner in figma showcasing ex pro bike customization options—colors and materials—using a checkerboard two-column layout with text on the right and a materials image on the left.

Modify the button to show availability across all formats, and assemble a cohesive fifth section with headings, reviews, and auto layout to create a consistent, user-friendly Figma web design.

Create the context section as a banner, add a footer with contact details, social links, and a callback button, and include a map with pins and icons.

Finish the website footer in Figma by adding brand heading, logos, social icons, and a navigation block with placeholder info. Use auto layout for even spacing and a white background.

Create a navigation menu and select a site font in Figma, using auto layout and icons, with Montserrat for headlines and Inter for body text.

Finish the website by polishing the layout, breaking the grid for clarity, and applying consistent spacing with repetition to create a minimal black-and-white design with two buttons and icons.

Apply the right angle rule to all elements, ensuring corner spacing is identical vertically and horizontally, and use auto layout with 16 pixels for a clean, balanced design.

Set a four-based spacing scale, use 16 pixels for body text (18 if needed), and minimize indentation variations to keep the interface concise and consistent.

Start with the maximum possible empty space between elements and sections, then reduce as needed. Don't save space; generous breathing room enhances design across cards, sections, and websites.

Explore visual hierarchy as the foundation of clean design, identifying primary and secondary elements through contrast, size, color, placement, spacing, grouping, and animation.

Rank visual hierarchy techniques from most to least effective, noting motion and animation as the strongest attention grabber, then color, contrast, size, and placement.

Decide which element to emphasize on web layouts by establishing a clear visual hierarchy, labeling items as primary or secondary, and using color, animation, or size. Explain decisions aloud.

Avoid gray text on colored backgrounds; instead use a darker version of the background hue for readability and consistency, and always use a solid color—not opacity—to prevent issues.

Apply the do the opposite rule to emphasize the main object by removing visual noise. Reduce or remove nonessential elements to heighten contrast and follow the less is more principle.

Practice #3 guides you to set up visual hierarchy by building at least one card and adjusting color, emphasis, size, and spacing to group elements effectively.

Identify the most important elements, prioritize the heading and call to action, and refine auto layout, padding, color, and readability to sharpen the visual hierarchy of the card.

Practice #3 part 2 guides you to design a complex card in figma, refining color distribution, contrast, typography, and auto layout to create clear visual hierarchy and legibility.

Explore border radius choices for UI elements by analyzing zero, medium, and large corner rounding, and ensure design consistency across frames, cards, images, and typography.

Analyze inconsistent corner rounding in a phone design and apply the outer radius equals inner radius plus padding rule to achieve visually pleasing, consistent elements.

Explore how colors in web design challenge the 60/30/10 rule and its real-world flaws, and learn to create palettes with multiple shades in Figma.

Create a color scale by selecting a primary color from the hue palette and generating nine shade variations from light to dark, labeled 100–900. Explore gray scale and shade generators.

Create a color scale in figma from 100 to 900 with intermediate shades and auto layout; use a generator and the foundation color generator plugin to produce and style shades.

Apply the 60:30:10 rule to color palettes, selecting three core colors and boundary shades. Learn that the color scale ends look different, and use minimal shade variations for cohesive interfaces.

Discover when to use more than three colors in web design, recognizing that the less is more rule has exceptions and color choices should be meaningful and well justified.

Explore how to use system colors red, yellow, and green to convey errors, warnings, and successes in UI design, and fine-tune shades for harmonious brightness and saturation across palettes.

Explore how warm and cool grays influence interface mood, and learn to adjust tints—blue or yellow—along a gray scale to avoid a flat, gray design.

Explore color associations and practical rules for web design, mapping hues like red, green, and blue to medicine, ecology, and finance, and noting colors to avoid.

Learn to design natural, subtle gradients by using a few shades, avoiding 100% saturated colors, and placing lighter tones at the top for realistic light direction on small elements.

Explore three color design rules in Figma: pick an accent color, ensure text readability, and keep backgrounds neutral, with button color experiments and contrast checks to guide choices.

Explore how artificial intelligence and neural networks relate to color selection in web design, noting tools offer palettes and inspiration, and try a tip with ChatGPT on your Figma layout.

Color two layouts, then create a color style guide with palettes and the rationale for color choices, testing the 60-30-10 rule and color gradations.

Complete the first part of the practice by selecting a green turquoise primary color for buttons, icons, and stars, using a plugin palette and gradients, while preserving minimalism.

Experiment with accent colors and palettes in layout two, using blue, purple, pink, and orange gradients to improve readability while applying consistent styles to icons and links.

Explore typography on images in web design and learn why beginners should avoid overlaying text on photos, instead placing text separately or beside solid-background images.

Select high quality, professional photos for your site, avoid unprofessional or fake stock images, ensure consistent light, shadows, and backgrounds, and leverage AI tools to optimize raster images without overuse.

Explore how to work with icons in modern web design, focusing on small unobtrusive SVG icons, vector versus raster graphics, six main categories, and drawing your own icons in Figma.

Learn to use screenshots effectively in web design by highlighting the main feature, reducing noise with diagrams or masks, and boosting readability.