User Experience Design - Learn UI UX App Design with Figma

Create a Figma account and familiarize yourself with the Figma tool. Build a simple wireframe using frames, shapes, lines, and stroke settings.

Design a low-fidelity Gmail app wireframe in Figma by using a four-column layout grid, Android large frame, and basic UI elements like search, hamburger, and user avatar.

Design the second wireframe for the YouTube Studio app in a mid-fidelity, using a four-column grid in Android small mockups, including header icons, channel analytics, and latest content.

Design a low fidelity Instagram wireframe using an Android small frame and a four-column layout with ten-pixel gutters and margins. Add avatars and bold Instagram text.

Design a low-fidelity LinkedIn wireframe in Figma, establishing a four-column grid, avatar and post elements, search bar, chat icon, bottom menu, and reusable styles for a LinkedIn feed prototype.

Design wireframes for a cafe food delivery app guided by user research and personas. Audit competitors, login to Figma, create the project 'food delivery app', and prepare prototypes.

Design the home page wireframe for a food delivery app, detailing a four-column grid, a hamburger menu, avatar, search bar, and category and popular foods sections.

Design a search page wireframe for a food delivery app in Figma, creating a search foods frame with item cards, titles, ratings, and prices.

Design a single food page for a food delivery app in figma, building a frame, header, image gallery, title, ratings, price, and add-to-cart with a quantity selector and reviews.

Design a cart page for a food delivery app in Figma, showing a food list with images, item titles, prices, and adjustable counts, plus subtotal, total, and place order button.

Design an order confirm popup for a food delivery app in Figma, covering alignment, margins, and a dedicated order success page with back button, order id, and track order button.

Design a food added to cart pop-up for a food delivery app in Figma. Create a 340x340 frame with corners 10, add text and two buttons, then prototype the pop-up.

Polish the wireframe in Figma by resizing frames for mobile view and adding a footer menu, then group components for the prototype preview.

Convert wireframes into a functional prototype in Figma by turning icons into components, linking navigation from home, cart, search, and profile pages, and reusing components to streamline the flow.

Create a food delivery app prototype by adding an add-to-cart action, building an overlay popup, and wiring components for my cart, continue shopping, and order success navigation.

Test a low fidelity wireframe prototype by exploring the home page, searching for food, viewing burger details with image slider, and adding items to cart.

Discover the essential building blocks of visual design for UI UX, including color selection, typography choices, and icons, and explore the riverine design system to create user-friendly apps.

Explore how color psychology guides app branding using a color emotion guide to choose green for a bakery delivery app, and apply a color wheel and 60-30-10 rule.

Select a primary green for your app by exploring Kolisko palettes, copying the color code, and applying it as the primary color.

Apply the 60-30-10 rule to UI color palettes, with 60% dominant, 30% secondary, and 10% accent colors for balance, a beginner-friendly approach seen in Netflix and Slack examples.

Explore creating a color palette for ui design by selecting a primary apple green, a white secondary, and a dark accent, while checking contrast for accessibility.

Explore color accessibility by using the Adobe color contrast checker to test and adjust text and background colors, ensuring strong contrast and accessible UI elements.

Discover an easy, fast method to select app colors by creating a mood board from competitors and design sources like Dribbble, Behance, and Pinterest, then apply color psychology insights.

Explore fundamentals of typography for UI design, comparing serif and sans serif type classifications and clarifying typeface versus font to craft clear, engaging digital interfaces.

Choose typography that matches your app’s message and emotion using serif, sans serif, and handwritten fonts from Google Fonts, prioritizing readability for digital content.

Learn to select typography by brand emotion and competitor analysis using Google Fonts, test headers and body text, and optimize readability with sizing and line height.

Select a minimalistic sans serif font strategy for a food delivery app, using one or two fonts, test header 32 and paragraph 16, and prioritize readability and accessibility.

Explore iconography as a language of symbols that guides users, conveys information, and boosts engagement. Learn to choose clear, consistent, accessible icons, pair them with text, and test with users.

Think of a design system as a toolbox of reusable components and guidelines that ensure brand consistency across platforms. It saves time, boosts collaboration, and delivers an intuitive user experience.

Apply user centric design by empathizing with users through early research and prototyping, and promote consistency, accessibility, and gestalt principles like similarity and proximity for inclusive user experience.

Explore information architecture to create clear, navigable apps and websites, improving findability, understandability, and usability through card sorting, site maps, user personas, and content audits.

Create a Figma account, set up a design file on an iPhone frame, and explore frames, shapes, text, comments, and sharing for collaborative UI design.

Explore creating phone, tablet, and desktop frames and master layout grid settings to align UI elements with column counts, margins, and gutters.

Master auto layout in Figma to save time, create responsive designs, and adapt layouts with padding, alignment, and fill container techniques.