2024 UI UX Design Fundamentals for Beginners (Revised)

Explore the main ui/ux design tools, led by Figma, with comparisons to Sketch, Adobe XD, and Miro, and a practical tour of Figma's interface and design elements.

Explore prototyping tools like Invision, Marvel, and Framer to convert static screens into interactive prototypes and learn collaboration tools like Notion, Zeplin, and Figjam for sharing and teamwork.

Discover inspiration platforms for UI/UX design, including Pinterest, Behance, Dribble, and awards, to find ideas, assemble elements, and showcase your portfolio to clients.

Master the complete design process from empathize to test through five steps: empathize, define, ideate, prototype, and test, using low- and high-fidelity mockups and real-user feedback.

Explore the empathize phase by identifying user needs, pain points, emotions, and behaviors through surveys, observation, and research techniques to inform the design process.

Define phase translates empathize insights into a concise problem statement and user personas, guiding design focus by identifying key issues and shaping a clear use case.

Lead the ideate phase by empathizing with the user, gathering the design team, and brainstorming a wide range of ideas without judgement, then sketch rough concepts of the final product.

Turn wireframes into low- and high-fidelity mockups in the prototype phase, visualize concepts, gather feedback, and validate user needs. Define typography, colors, icons, and UI components for an accessible design.

Explore the testing phase as the go-to-market stage, where real-user feedback guides iterative refinement of prototypes and mockups, ensuring a user-centered design with usability, functionality, and a bug-free final product.

Learn key UX laws and models to guide user-centered design and create visually appealing, effective products, including Fitts law, Higgs law, Miller's Law, Jakob's law, and Tesla's law.

Explore UX models and theories, including user centered design, information foraging theory, gestalt principles, affordance, cognitive load, and the hooked model for habit-forming products.

Explore the empathize and define stages of the ux design process and document a project with a title, overview, core user needs, and product codes.

Define basic user personas aligned with project goals, document research findings and discussion items, compare competitors, and empathize with pain points to guide initial wireframes and next design steps.

Discover information architecture as the structured layout of pages and content, linking home, product, cart, and account flows to organize information for clear, efficient interfaces.

Learn how information architecture structures content, enables navigation, labeling, search, and user flows, and supports wireframing, prototyping, consistency, and accessible site maps.

Learn about work flow or storyboards, user flow, and task flow, and how their paths, journeys, and task details guide onboarding, app use, and checkout experiences.

Explore the ideate phase with wireframes, the low-fidelity skeleton outlining the basic structure, layout, and content placement, overlapping with the prototype before visual design.

Learn how wireframes serve as blueprints for the final ui, showing user personas, screen layouts, and rapid paper or digital iterations toward a project management dashboard.

Define the UI foundation by detailing typography, icons, and color, and establish a design guideline with the Poppins font, consistent icons, and color palettes to guide the final UI.

The lecture covers grids, layout and spacing to create pixel-perfect digital products. It explains a 12-column grid, margins, gutters, and consistent eight-point or four-point spacing for cross-device user interface.

Explore visual hierarchy by using contrast, scale, and proximity to emphasize the CTA button and group related UI elements, then translate wireframes into high-fidelity mockups with colors, typography, and prototypes.

Understand design systems as a comprehensive library of guidelines, typography standards, color palettes, components, and assets that create a consistent, unified look and feel across websites, apps, and devices.

Define design system guidelines, grid, spacing, typography, and color standards to unify pages across platforms. Demonstrate reusable components in Figma, enabling consistent side menus, navigation, buttons, icons, and forms.

Understand how design systems streamline organizational design, what they are and how to create and use them, referencing Material Design for Android and Human Interface Guidelines for iOS.