Creative UX/UI Design with Figma: Website to Prototype

Explore research and discovery to uncover opportunities and risks, align with clients, and design an informative Atiku brand site with mobile optimization, image effects, and intuitive navigation.

Gather inspiration and references to build a mood board, drawing ideas from web, books, and art exhibitions. Categorize references by typography, color, imagery, and interaction to guide a UI/UX design.

Explore how content strategy and information architecture guide website structure, from discovery to arranging placeholder content for client discussion, to lighten the customer burden and support design.

Explore the wireframing process in Figma to align with clients on site structure and navigation, create a visual proposal, and build scalable layouts with grids, buttons, and typography hierarchy.

Design and validate wireframes with footer contact details, explore low vs high fidelity, and create a Figma prototype linking pages like about and contact for client alignment.

Discover wireframing recommendations that align with the client, focusing on structure, content, and navigation to set a solid starting point for design.

Explore designing with a 12-column layout in Figma, adjust margins and gutters for desktop and mobile, and maintain rhythm using eight-pixel spacing.

Prepare Photoshop assets by removing backgrounds, refining masks, and exporting layers as png or jpeg. Create a poster with top and bottom layers using marquee tool and Ctrl+G.

Block the site by building the main page in Figma, using a 12-column grid, autolayout, and rectangles to craft a balanced layout with images, navigation, color, and typography concepts.

Create the collection page by arranging images in rectangles, layering a poster over the image, crop, adjust opacity, and align for balance and animation readiness.

Design the final main page, an elegant about us section, and a streamlined contact page using shapes, image alignment, and form fields for full name, email address, and your message.

Select typography by aligning font choices with client goals and brand, balancing emotion and readability, and using one or two typefaces with appropriate weights, leading, and line length.

Apply brand color palettes and accessible contrast to web pages using hex, rgb, and cmyk codes, test with contrast tools in Figma, and prioritize high-contrast elements.

Learn to add graphic elements for a website using SVGs, color palettes, arrows, dots, patterns, and rectangles, and apply color picking and a color extractor to guide design.

Explore motion design fundamentals for web proposals, including speed, easing, and parallax, and learn to use After Effects, Lottie, and Greensock to create expressive animations.

Master microinteractions and a vertical parallax animation in an interactive prototype using frames, collections, and smart animate. Enhance user experience with drag interactions, clip content, and usability throughout the design.

Create a mask-based image reveal with a rectangle mask, group layers, and animate image, text, and graphics using smart animate and keyframe opacity changes.

Learn to create a horizontal parallax animation by revealing three images with masks across multiple frames, positioning elements, clipping content, and building the final interactive sequence for a collection page.

Create a component animation in Figma by scaling layouts, setting center constraints, converting to a component set, and building a hover-triggered Smart Animate to scale images.

Create drag-driven page transitions between frames using smart animate, slow timing, and parallax reveals, linking arrows to the home page, collection page, about us, contact, and color picker pages.

Fine-tune the intro lesson by building a looped arrow animation, prototype interactions, and color picker links to reveal a cohesive, navigable, and readable interface.

Explore how graphic details and gesture enrich ux/ui design proposals by adding interactive elements such as cursor changes, draggable cards, and mouse-responsive visuals that elevate user engagement.

Represent design proposals to clients with assertive communication, linking decisions to the brief and research. Show justification with Figma prototypes and feedback written, visible, and actionable for development.

Build a practical style guide in Figma that defines typography, color, spacing, and components, aligning with design systems like Material Design and IBM Carbon for consistent, efficient development.

Design a complete user-centric website from concept to interactive prototype, selecting a real world business to create a responsive, engaging, and highly interactive portfolio piece.