O'Reilly logo
live online training icon Live Online training

Introduction to UI & UX design

Fundamentals of design for non-designers

Dave Pinke

Do you ever wonder how designers create functional and beautiful interfaces or why your designer chose blue instead of red for your app menu? Maybe you have a side project or business you'd like to add some professional polish to, but you worry that designers have some magical instinct that you don't. Designers don't need to be gifted artists. Anyone can create amazing designs for web and mobile apps. User experience (UX) design is the practice of building experiences that delight and satisfy the needs of users, bringing together business objectives with easy-to-use interfaces. User interface (UI) design is how you evoke emotion and brand style through your choice of fonts and colors.

In this practical, real-world-focused training, expert Dave Pinke shares the most useful concepts of UX and UI design and walks you through shortcuts and best practices for creating and understanding digital design. You'll leave knowing why and how designers make the decisions they do and ready to apply key design concepts to make your projects shine.

What you'll learn-and how you can apply it

By the end of this live, online course, you’ll understand: - The process and fundamentals of how UX and UI designs are created - What design thinking is and how to use it to innovate or test new ideas or concepts - How fonts, colors, and layout can be put together to create a beautiful, useful design - Build responsive, mobile-first wireframes through interactive tutorials

And you’ll be able to: - Make informed design decision regarding how color, typography, and other visual elements can dramatically affect the user experience - Use visual design concepts to create elegant user interfaces

This training course is for you because...

  • You want to better understand how design works and why design matters.
  • You want to apply design fundamentals to your career and endeavors.
  • You want to learn design tips and tricks to make great designs without any artistic ability.

Prerequisites

Recommended follow-up:

Design thinking - Take Getting started with design thinking (tutorial)

Colors and palettes - Read "Color Science" and "Color Theory" (chapters 8 and 9 in Design for Hackers)

Typography and font choices - Read On Web Typography (book) - Read Flexible Typesetting (book) - Read "Medium and Form in Typography" (chapter 3 in Design for Hackers)

Quick guide to layout - Read "Layout" (chapter 7 in Mobile First) - Read Responsive Design: Patterns & Principles (book)

Wireframing - Read "Wireframes and Prototyping" (section in chapter 7 of Practical UX Design)

Tools and a design cheat sheet - Read "UX Tools" (chapter 7 in Practical UX Design)

UX design - Follow Laith Wallace (YouTube channel) - Read Practical UX Design (book) - Listen to The UX Intern (podcast)

General - Listen to 99% Invisible (podcast)

About your instructor

  • Dave is a twelve-year veteran in the product design field, having overseen development and strategy at Sony Music, MTV Networks, Disney/ABC News, Condé Nast, Bloomberg LP, StockTwits and currently at Practising Law Institute. Working across an array of media companies, Dave has developed a keen sense of how to create leading mobile and web experiences that offer strong product market fit and monetization paths. He has taught product management at New York University, Pace University and for online learning platforms.

    Dave has a BA in English from Fordham University and an MBA from Pace University.

    In his free time, he loves playing guitar, teaching and goofing around with his dog Laika.

Schedule

The timeframes are only estimates and may vary according to how the class is progressing

Why design matters (5 minutes)

  • Lecture: Why design matters; how it reaches beyond the digital aspects of our lives; course introduction

Design doesn’t mean artistic ability (10 minutes)

  • Lecture: Breaking down the wall between artists and designers; what it takes to improve old designs or create new ones (hint: good research)

Types of design (10 minutes)

  • Lecture: The subgenres of design (e.g., graphic design, UX, and UI); how design relates to staffing and expertise needs; how specific types of designers impact business

Q&A (5 minutes)

Dieter Rams’s 10 principles of design (10 minutes)

  • Lecture: Overview of seminal designer Dieter Rams's 10 principles of modern digital and physical product design

Design thinking, the innovator’s framework (15 minutes)

  • Lecture: Design thinking; why it's so hot right now; how you can you apply it to things outside design

Design thinking exercise: Let’s solve a problem in 15 minutes (15 minutes)

  • Exercise: Work together as a class to formulate a problem statement, empathize with the user, come up with some solutions, and pick a few to test

Q&A (5 minutes)

Break (10 minutes)

Colors and palettes (15 minutes)

  • Lecture: What colors convey emotionally; how to use colors together effectively; easy-to-use tools to create color schemes and palettes

Color palette exercise (10 minutes)

  • Explore and use an example of how to generate color palettes in seconds using free online tools from brand colors

Typography and font choices (15 minutes)

  • Lecture: Font choice; the different types of fonts; the details that make a big difference; how to mix fonts together in an elegant way

Q&A (5 minutes)

Break (10 minutes)

Quick guide to layout (20 minutes)

  • Lecture: How to construct a professional and user friendly website or application; light; shadow; page gravity; grid systems; visual hierarchy; responsive design; the mobile-first approach to web and application design

Wireframing exercise (15 minutes)

  • Help build a low-fidelity wireframe to create a responsive website for a clothing brand

Tools and a design cheat sheet (10 minutes)

  • Lecture: Useful tools; a cheat sheet for fast, elegant designs

Wrap-up and Q&A (5 minutes)