Overview
This session provides a beginner-friendly overview of UI and UX design fundamentals, outlining step-by-step procedures for designing a website or app, and sharing practical tools and resources for each stage.
Getting Started with UI/UX Design
- UI and UX design mastery requires understanding both the tools and the process.
- Every design starts with a core idea or a solution to a user problem.
- Examples illustrate starting with a specific need, like a web app to collect design inspirations.
Step 1: User Flow
- Map out the user’s main journey from landing on the site to achieving their objective.
- Userflow diagrams help visualize how users navigate and which information is essential at each step.
- For the example project, users should immediately see categories and available designs.
Step 2: Wireframing
- Create basic layouts for each screen or page guided by the user flow.
- Wireframes can be sketched with digital tools (e.g., Balsamiq, InVision, Figma).
- Analyze user behavior to ensure wireframes meet user needs and support the main goal.
- Example solution: a simple sidebar for categories and a grid showcasing design items with images and links.
Step 3: Design System
- Establish visual guidelines for consistency, including reusable components such as colors, fonts, and buttons.
- Choose colors that reflect brand identity and ensure accessibility; real-time tools can help preview color choices.
- Select appropriate fonts for readability and desired tone, testing with tools and setting responsive text sizes.
- Leverage icon libraries or create custom icons within design tools like Figma.
- Define other interface elements as needed (buttons, cards, inputs), drawing inspiration from platforms like Dribbble and Behance.
Step 4: Actual Designing
- Assemble design elements while applying key principles: visual hierarchy, contrast, balance, alignment, consistency, simplicity, and interaction feedback.
- Iterate, test, prototype, and refine designs based on user expectations and usability.
- Add placeholder text or real content to simulate the final product and set realistic expectations.
Bonus: Illustrations and Visuals
- Enhance the design with graphics from free or paid resources, or create custom illustrations in Figma or Spline.
- For minimalist projects, extensive illustration may be unnecessary.
Resources and Ongoing Learning
- The presented design was turned into a live website open for contributions and inspiration.
- Continued growth comes from regular practice, experimentation, and engagement with design communities and resources.