Design Crash Course Overview

Jul 12, 2024

Design Crash Course Overview Lecture Notes

Key Highlights

Introduction

  • Presenter: Daniel Shafano, a product designer with almost 10 years of experience, has led design for major VC-backed companies.
  • Course Scope: In-depth design skills covering Figma, user flows, sitemaps, wireframes, tips, tricks, and industry insight.
  • Content Origin: Part of Daniel's complete web and mobile design boot camp which boasts over 100,000 students and high ratings online.

Case Study: Bruno's Project

  • Scenario: Bruno from Keiko Corp wants to rival Amazon with a new shopping experience, and you're the designer tasked to lead the project.
  • Objective: Design the product's mobile and web interface to compete with Amazon's UX.
  • Course Task: You’ll build a dream portfolio through practical design tasks culminating in a complete design system from scratch.

Approach to Client Interaction

  • Core Focus: Solving the client's problems and wowing them with your expertise.
  • Flexibility: As a designer, you should be capable of designing across various platforms (web, mobile, VR, etc.) adapting to tech evolution.
  • Goal: Understand client needs and create designs they cannot produce independently.

Initial Steps

  1. Skill Building: Learning to sketch user interactions, wireframes, and use Figma effectively.
  2. Portfolio Development: Working on real-world projects to build a solid design portfolio.
  3. Client Acquisition: Tips on finding and engaging first clients post-course.

Design Foundation

Graphic Design

  • Elements: Colors, layout, typography, sketching, fonts, imagery.
  • Purpose: Visual storytelling to convey feelings or target specific audiences.

UX/UI (User Experience/User Interface) Design

  • Key Learnings: Designing for user interaction and optimal flow using scientific and artistic principles.

Goal Conversion/Conversion-Focused Design

  • Objective: Designing to drive specific user actions per client goals (e.g., mailing list sign-ups, product purchases).
  • Method: Understanding science behind user motivation and action triggers.

Platform-Specific Development

  • Basics: Understanding HTML, CSS, and how design elements apply across tech platforms for optimum results.

Tools and Resources

Key Tools Used in Design

  1. Figma: Main design tool for creating interfaces from scratch.
  2. Concepts: Application for digital sketching.
  3. Plugins: Unsplash for images, Lorem Ipsum for placeholder text, Content Reel for realistic dummy data.
  4. Online Resources: GoodUI.org for conversion tips, Awards.com for inspiration, Pinterest, Dribble, Behance, etc.

Sketching Techniques

  1. Preparation: Having necessary tools and understanding your goals & audience.
  2. Idea Generation: Quick, low-detail sketches for brainstorming solutions.
  3. Detailing Sketches: Refining promising ideas into more detailed sketches and wireframes.
  4. Annotation and Documentation: Noting down purposes and interactions to avoid misinterpretations.

Multiple Design Scenarios

  • Addressing various “user flow” scenarios to enhance practical understanding and real-world application.

Collaboration and Review Process

  • Continuous engagement with teams (developers, QA, product managers) for feedback and improvement.

Practical Application in Design

Assignment Examples

  • Home Screen: Creating personalized welcome and recommendation sections.
  • Profile Page: Information layout including editable sections for user details and preferences.
  • Cart Screen: Simplified design focused on quick checkout and order overview.

Working with Components and Variants

  • Leveraging reusable design elements for efficiency (buttons, forms, navigation items, etc.).
  • Creating dynamic elements (variants) that adapt to different content requirements.

User Flows and Site Maps

  • User Flows: Mapping detailed user journeys to ensure intuitive navigation and goal completion.
  • Site Maps: Structured layout of product navigation, enhancing discoverability and hierarchy clarity.

Constructive Feedback and Iterations

  • Emphasizing the importance of feedback loops and iterative design for refining solutions.

Final Notes

  • Final Project: A comprehensive portfolio piece that showcases skills learned.
  • Next Steps: Continuation to the complete boot camp for deeper learning and mastering design concepts.

Encouragement and Motivation

  • Reassurance to students on their progress and the value of their perseverance.