Introduction to UI & UX design
Published by O'Reilly Media, Inc.
Fundamentals of design for non-designers
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 live event 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
- No prior design experience needed or expected
Recommended follow-up:
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)
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)
Schedule
The time frames 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)
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
- Exercise: Let’s try some rapid fire ideation, we will spend time coming up with ideas and discuss what we would do next.
- Q&A (5 minutes)
- Break (5 minutes)
Colors and palettes (20 minutes)
- Lecture: What colors convey emotionally; how to use colors together effectively; easy-to-use tools to create color schemes and palettes
- Exercise: Explore and use an example of how to generate color palettes in seconds using free online tools from brand colors
Typography and font choices (10 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)
Quick guide to layout (10 minutes)
- Lecture: How to construct a professional and user friendly website or application; grid systems; visual hierarchy; responsive design; the mobile-first approach to web and application design
- Lecture: What is a CTA and how to add them to your designs and test them.
Spot the design mistake (10 minutes)
- Exercise: We’ll look at examples of web design and find common design mistakes to avoid and learn from.
Tools and a design cheat sheet (5 minutes)
- Lecture: Useful tools; a cheat sheet for fast, elegant designs
Wrap-up and Q&A (5 minutes)
Your Instructor
Dave Pinke
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.