How to teach yourself UX design

What is UX design

• [Wikipedia] User Experience Design: This wiki page explains in a nutshell what is UX design and its origin.
• [Infographic] The Intricate Anatomy Of UX Design: A mega graph that tackles the relationship between UX and all other aspects of design.

Design process

• [Article] An Introduction to Design Thinking Process Guide (by Hasso Plattener from Stanford d.school): The design iteration process going through empathizing with users, defining problems, ideation, prototyping solutions and testing.
• [Book] Basics Design 08: Design Thinking (by Gavin Ambrose and Paul Harris): Introduce seven steps of the design process — define, research, ideate, prototype, select, implement and learn.
• [Video] IDEO Shopping Cart Project: I’ve been asked to watch this video at least 4+ times in different classes throughout my design education.
• [Website] The design sprint (by Google Ventures): The sprint is a five-day process for answering critical business questions through design, prototyping, and testing ideas with customers. This process is super useful for fast-pace organizations and start-ups.

Design/research methods

• [Article] Complete Beginner’s Guide to UX Research (by UX Booth): A nice overview about the UX research practice.
• [Book] Observing the User Experience, Second Edition: A Practitioner’s Guide to User Research: This is the required reading for the research course I took in the HCI Master’s program at University of Washington. Although I didn’t read this cover to cover, I found it to be a good reference book with a decent amount of quality examples.
• [Book] 101 Design Methods: A Structured Approach for Driving Innovation in Your Organization (by Vijay Kumar): A good reference book when you are looking for new design/research methods.
• [Website] Design Kit from IDEO.org: An introduction to some design methods and case studies.

Product design

• [Book] The Design of Everyday Things: Revised and Expanded Edition(by Don Norman): A powerful primer by an industry guru on how — and why — some products satisfy customers while others only frustrate them based on psychology, ergonomics, and design practice.

Web design

• [Book] Don’t Make Me Think, Revisited: A Common Sense Approach to Web Usability (3rd Edition) (Voices That Matter) (by Steve Krug): One of the best-loved and most recommended books in the web design domain outlining the principles of intuitive navigation and information design.

UI design

• [Website] Material Design Guidelines: Google’s visual language guidelines draw inspiration from the physical world.
• [Website] iOS Human Interface Guidelines: Apple’s visual language guidelines outline expectations for quality and functionality. I have read both Google and Apple’s guidelines word for word and often revisit particular sections when looking for specific UI recommendations.

Graphic design

• [Book] Design Elements, 2nd Edition: Understanding the rules and knowing when to break them — Updated and Expanded (by Timothy Samara): The graphic design basics including form, space, color, type, image and the combination.
• [Article] Design Principles: Visual Perception And The Principles Of Gestalt: This theory explains how and why the entirety of design is more crucial than individual objects.
• [Article] Font Design — How Designers Choose Which Fonts To Use (by Janie Kliever): Learn how to select fonts and where to find them.

Motion design

• [Article] Creating Usability with Motion: The UX in Motion Manifesto (by Issara Willenskomer): The basics you need to know when discussing & designing UI motion effects.

How to learn

I found that watching online tutorials is the most efficient way to learn a new design software. You can put your screen next to the instructors’ and shadow the technique in real time and at your own pace. There are many websites (free or subscription) providing countless design tutorials for a wide variety of topics: Lynda.com, Tuts+, Skillshare, Udemy, Coursera, to name a few.

Whenever I need to learn a new tool, I usually go to these sites and complete at least one essential training for that tool (3–8 hours). Doing this should be enough to get the grasp of the basics and start “playing around” with the software. In addition to that, I would periodically follow courses that I’m interest in to expand the range of my techniques.

What to learn

• Graphic design: Adobe Photoshop, Adobe Illustrator, Affinity. (Affinity is a newly risen software I personally use that’s very similar to Adobe programs but with a much more affordable rate)
• Interface design: Sketch. I use Sketch for making both wireframes and high-fidelity screens. Design + Code (first half) is a great e-book course for mobile design using Sketch.
• Interactive prototyping: I recommend using InVision to build simple “hot-spot” prototypes, and Principle or Framer to build more customized and complex prototypes.
• Animation / Video demo: Adobe After Effects. This program includes all you need for making animating icons or product demo videos.

Front-end Development

How to learn

It has been a long debate on “if designers need to know how to code.” Based on my own experience, learning how to code not only helps me design working interfaces, but also makes me gain empathy with developers’ work. As a result, my relationship with coworkers and the quality of our communications has improved to a noticeable degree. Therefore, my answer is — Yes, designers should learn as much coding as they can!

Similar to design, there are many websites providing basic tutorials for programming: Treehouse, Lynda.com, Udemy, Code School, Codecademy, FreeCodeCamp.

However, different from design, I found it more effective to learn programming by reading books if you are starting with zero to limited knowledge, because books usually go deeper into the logic of code, which is the foundation necessary for understanding more advanced concepts later on.

What to learn

• HTML: [Book] HTML5: The Missing Manual (by Matthew MacDonald)
• CSS: [Book] CSS: The Missing Manual (by David Sawyer McFarland): I spent two months thoroughly going through the above two books while hand-coding my first portfolio site. These two months became my most valuable time invested in learning programming.
• Javascript & jQuery: [Book] JavaScript & jQuery: The Missing Manual(by David Sawyer McFarland): I know learning Javascript (JS) for designers can be a daunting task. To be honest, I didn’t/couldn’t finish this book, but finishing the first five chapters has taken me really far in terms of writing simple transitions and applying JS libraries!
• iOS development: [e-Book] Design + Code (second half) is a great course aimed at teaching designers the basics of iOS development written by a designer.

The Industry