UX Design Resource Guide

UX How
12 min readDec 7, 2016

--

Recommended tools, articles, services, products and resources used through a product UX design lifecycle and beyond including:

  • Top UX Reference Books
  • Best UX Design Tools
  • Best Prototyping Tools
  • Best Native Mobile App Design Resources
  • Pattern Library, Design Languages and Style Guide Examples
  • Recommended Disney Inspired UX Articles
  • Must Read UX, Design and Product Articles
  • Best UX Design Career and Interview Advice
  • Top UX Design Portfolio Articles & Examples
  • Best UX Overview Guides
  • Must View Design Principles & Checklists

Top UX Reference Books

How to Make Sense of Any Mess: Information Architecture for Everybody — Abby Covert

This gem is an instant classic and introduction to IA (Information Architecture) from Abby Covert who “wrote this book for anyone making anything”. Get the best primer out there and be able to explain IA to partners, colleagues and parents alike.

Don’t Make Me Think, Revisited: A Common Sense Approach to Web Usability — Steve Krug

First edition of this book was standard issue at my first in-house design team and it still is in my book. Even the chapter titles are timeless lessons: “How we reallyuse the web” and “Omit needless words”

Understanding Comics: The Invisible Art — Scott McCloud

Yes, I love comic books. This book is here, however, because it is really is a masterpiece on human visual communication, knowledge transference and information graphics disguised as a meta-comic.

The Visual Display of Quantitative Information — Edward R. Tufte

I am a Tufteian at heart and the Amazon description says it all: “The classic book on statistical graphics, charts, tables… with detailed analysis of how to display data for precise, effective, quick analysis.”

Creativity, Inc.: Overcoming the Unseen Forces That Stand in the Way of True Inspiration

What is the recipe for magic? Ed Catmull, co-founder (with Steve Jobs and John Lasseter) of Pixar Animation Studios discusses creativity in business.

Go: A Kidd’s Guide to Graphic Design — Chip Kidd

If you are looking for the essence and understanding of graphic design principles on form, type and content look no further than this book which contains my favorite UX quote: “The best solution is found in the best definition of the problem.”

Information Architecture: For the Web and Beyond — Louis Rosenfeld, Peter Morville and Jorge Arango

Affectionately known as the polar bear book, this latest edition chronicles the 3 Principles of IA to build systems, and not just websites, under the continuing glut of information overload.

Lean UX: Applying Lean Principles to Improve User Experience — Jeff Gothelf and Josh Seiden

A cross discipline reference and introduction into the intersection of User Experience, Product Design for Market Fit and Lean Development Practices based on agile methodologies.

Universal Principles of Design: 125 Ways to Enhance Usability, Influence Perception, Increase Appeal, Make Better Design Decisions, and Teach through Design

I don’t see this book on many lists, but I think it should be. I apply and recite these principles on a regular, if not daily, basis including the 80/20 Rule, Chunking and the Fallacy of Scaling.

Envisioning Information — Edward R. Tufte

Told you I was a Tufte-ian. The most purely design oriented of the series covers everything from Napoleon’s March by Minard, computer interfaces, courtroom exhibits, timetables and… PowerPoint.

Design Is a Job — Mike Monteiro

‘Nuff said. Go read this.

The Brand Gap: How to Bridge the Distance Between Business Strategy and Design — Marty Neumeier

This is more around visual communication, but instrumental to understanding why design is different and how brand matters in experiences.

The Only UX Reading List Ever — Simon Pan

Looking for even more books on UX? This is a collection of over 60 must reads on Thinking, Methods, Principles and Best Practices.

Best UX Design Tools

Have a Conversation

Sounds simple to start at the beginning… but having a real dialog and not just talking at each other is where understanding begins. Go listen (and talk) to your Customers, Product Managers, Customer Support and Developers.

White (Dry Erase) Boards, Dry Erase Markers and Post It Notes

An old school tip that often goes best hand in hand with conversation. Digital equivalents can work to — the key is using a consistent low barrier medium that works quickly with your cross functional team.

Pencil and Paper

Yes… another analog technique that is often overlooked for quickly capturing thoughts before getting tunnel vision from a tool. The Engineer in me still loves graph paper.

Keynote, PowerPoint or Google Slides

Wait… You recommend Tufte and use Presentation software? Yes. It is not the tool, but how you use it. My suggestions: Learn how to tell a story, keep one idea per slide and show, not tell.

Sketch

I tend to design high fidelity and Sketch is built from the ground up to focus on UI Design workflow and offers time saving Mobile App optimizations.

The Tools Designers Are Using Today

The Subtraction.com Design Tools Survey by Khoi Vinh provides a snapshot of the changing marketplace of applications and utilities for digital based designers.

Best Prototyping Tools

InVision

Billed as the world’s leading prototyping, collaboration & workflow platform — there simply isn’t anything else out there that maximizes speed with fidelity.

Framer.js & Framer Studio

Framer is the secret weapon to prototype anything — especially high fidelity platforms and fluid native apps — and the results are astounding. Don’t forget CoffeeScript for Framer.js

Principle for Mac

If you are looking to make quick Apple-level fidelity motion studies to design animated and interactive UI, without the ramp of heavy scripting, check out Principle.

Adobe After Effects CC

I am not an After Effects guru and this is more of a motion study tool, but the influence and persuasion of a full video render of a graceful flow and animation of UI is undeniable.

Bootstrap

Prototyping a website? Why not use the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web?

Xcode and Swift

Designing an App? Use the tools developers use and gain true understanding and appreciation. I learned to dive right in Design + Code from Meng To.

Designer’s Toolkit: Prototyping Tools

A living document of reviews and rankings for prototyping tools as they are road tested by the designers at Cooper.

Best Native Mobile App Design Resources

Material Design

A beautiful design language and Human Interface Guidelines (HIG) built on 3 principles: Material is the Metaphor, Being Graphically Bold and Motion Provides Meaning.

The iOS Design Guidelines and Ultimate Guide to iPhone Resolutions

Up-to-date information to design for iOS and get started within seconds. Not the Official iOS Human Interface Guidelines — but they should be.

Facebook iOS 10 GUI for iPhone

In the tradition of Teehan+Lax: Sketch, Photoshop and XD templates of GUI elements found in the public release of iOS 10 from Facebook Design.

Designer’s Guide to DPI

Phenomenal guide to cross-DPI and cross-platform design. I use this resource regularly to explain the difference between PX, DP, PT and SP along with the 5 asset sizes for Android.

Little Big Details

Your daily dose of design inspiration and micro-interactions and the key for turning app moments into delights.

User Onboarding

A deep look into onboarding an first-run experiences (with detailed teardowns) — key for any app.

UI Design Do’s and Don’ts

Consider these common design concepts to enhance the usability and appeal of your apps.

What Does it Take to be a Mobile Designer Today?

Being a successful mobile designer requires an evolved understanding of how people use their devices, a robust toolkit, and the flexibility to adapt to new technology.

How to design for thumbs in the Era of Huge Screens — Scott Hurff

What does it mean to design for thumbs? It means building interfaces that are the most comfortable to use within our thumb’s natural, sweeping arc.

How Do Users Really Hold Mobile Devices?

One handed, cradled, two handed and not even looking at the screen.

Pattern Library, Design Languages and Style Guide Examples

Atomic Design — Brad Frost

Atoms, Molecules, Organisms, Templates and Pages make up a system of designed components instead of a random collection of elements.

Material Design

A beautiful design language and Human Interface Guidelines (HIG) built on 3 principles: Material is the Metaphor, Being Graphically Bold and Motion Provides Meaning.

Pantsuit: The Hillary Clinton UI Pattern Library

Front end system for moving at the speed of presidential elections.

Design Doesn’t Scale

How Spotify used GLUE to make design scale.

The Way We Build

How rethinking the Airbnb app changed the way design was approached. This article is a kick-off into Airbnb’s new Design Language System.

Facebook iOS 10 GUI for iPhone

In the tradition of Teehan+Lax, Sketch, Photoshop and XD templates of GUI elements found in the public release of iOS 10 from Facebook Design.

Netflix Branding — The Stack

Innovative branding solution to the world’s leading streaming media service and how design is carried out to unify every touchpoint.

MailChimp Patterns and Content Style Guide

MailChimp shows how important Design Patterns are, but also that most important of all is the content a design must serve.

Website Style Guide Resources

Examples of real life pattern libraries and content style guides, including this gem from the never before published for sale 1982 DC Comics Style Guide.

Recommended Disney Inspired User Experience Articles

The Illusion of Life

The 12 Principles of Animation by Disney Masters — more important today than ever — to express character and personality.

Walt Disney: The World’s First UX Designer

Attention to detail, a focus on immersion, and the desire constantly improve his products made Walt Disney one of the earliest designers of user experience.

Beyond the UX Tipping Point

Surprisingly, few are talking about what could be the biggest user experience story of 2014: The introduction of the Disney Magic Band. — Jared Spool.

22 Rules of User Experience

Pixar’s 22 rules of storytelling adapted for UX — because both are about creating great experiences.

The Principles of UX Choreography

The intersection of Disney and UX and why learning how to draw Mickey Mouse will change how you approach design.

How Pixar Solves Problems From The Inside Out

It’s easy to forget that Pixar is a technology company. Mostly because the invention that they do is in service of a narrative.

Disney’s $1 Billion Bet on a Magical Wristband

If you want to imagine how the world will look in just a few years, once our cell phones become the keepers of both our money and identity, skip Silicon Valley and book a ticket to Orlando. Go to Disney World.

Effective Feedback: The Little Known Secret To Pixar’s Creative Success

Often, feedback sessions are seen as a chance for people to give their input. Nothing could be further from the truth. The purpose of creative feedback is to move the project forward.

Must Read UX, Design and Product Articles

What Super Mario Taught Us About UX
Original Super Mario Was Designed on Graph Paper
Design Club — How Super Mario Mastered Level Design

The revolutionary game that changed everything taught users how to play through level design and was designed all on graph paper.

Why UX Designers Need to Think like Architects

A look at the parallels between architects and user experience designers, and how the latter group can benefit from the work of the former.

Designing For (and With) Color Blindness

As designers, we constantly worry about legibility, how engaging content is, whether hit targets are big enough, or if a user can navigate through a workflow. But we often forget about the one in ten people that are colorblind.

The Rules of successful Skunk Works Project

Need to make a product on limited time with tight deadlines? Use the rules that helped Lockheed Martin invent a fighter jet in 143 days.

Product Strategy Means Saying No

If you’re building a product, you have to be great at saying no. Not “maybe” or “later”. The only word is no.

The Double Diamond Model of Product Definition and Design

Design makes strategy concrete and a model for how to get from definition to execution.

Team Models for Scaling a Design System by Nathan Curtis

Evolving Past Overlords to Centralize or Federate Design Decision-Making Across Platforms.

Behind the Wheel with Product and UX

Four things UX needs to know about product management.

Start with a Cupcake

Gall’s Law, true Product MVP and the value of experience in one tidy little analogy I use everyday.

Best UX Design Career and Interview Advice

The Usability Counts UX Resume Template and Career Guide

The single best UX Career resource out there. Period. I personally follow Patrick’s template, advice and passion for telling stories.

The former Director of User Experience at Jobvite, Patrick has a mammoth collection of articles, insights, templates, tips and guides for the new UX professional. Looking for a place to start from the scores of articles? Try Getting Started in UX for People I want to Hire. Don’t forget the bulletproof free resume template and slideshow presentations on Slideshare, including this Slideshare Presentation of the Day:

What Kind of Design Work Should I do?

The only flow chart you need is from Julie Zhuo and answers: What project should I take on? Where should I work? and What should my career look like?

This 90-Day Plan Turns Engineers into Remarkable Managers

Great advice for making the jump from contributor to managers of all kinds, not just Engineers, and perfect for UX Designers.

Nick Finck gives an overview of the core disciplines of UX, what it means to be T-shaped and how to start building a personal brand to break into UX.

Top UX Design Portfolio Articles & Examples

How to Tell Your UX Story

My collaboration with Patrick Neeman on presenting your portfolio with examples from our own personal portfolios.

Building your design portfolio? Here are 8 things I wish I’d known.

In building a company that creates new UX Designers on a daily basis, a look back an old portfolio and lessons learned.

Great Design Portfolios Are Great Stories

How to become a better designer by telling the story of you behind your work. Great Article by Simon Pan and great portfolio to match.

Your Portfolio Probably Sucks

Designers are not making user-centered portfolios. They are making self-centered portfolios.

Etsy’s Product Page by Cap Watkins is a great example of telling a story through a design project.

The 10 things to remember when building your portfolio by Lynn Teo.

Best UX Overview Guides

Wally Wood’s 22 Panels That Always Work

“Never draw what you can swipe. Never swipe what you can trace. Never trace what you can photocopy. Never photocopy what you can clip out and paste down.”

UX Crash Course: 31 Fundamentals

A quick overview to go from zero-to-hero as quickly as possible in 31 daily lessons. Don’t forget UX Crash Course: User Psychology.

52 Weeks of UX

A discourse on the process of designing for real people with an article for each week of the year.

UX Myths

UX Myths collects the most frequent user experience misconceptions and explains why they don’t hold true.

Butterick’s Practical Typography in 10 Minutes

If you learn and fol­low these five ty­pog­ra­phy rules, you will be a bet­ter ty­pog­ra­pher than 95% of pro­fes­sional writ­ers and most designers.

Pixel Perfect Precision Handbook

For those looking for snap to alignment precision on design principles, do’s and don’ts and Photoshop.

Must View Design Principles & Checklists

Government Digital Service Design Principles

A refreshing look at applying Design Principles like “Do Less” and “Build digital services, not websites” when designing for everyone.

Dieter Rams: Ten Principles for Good Design

As good design cannot always be measured in a finite way, Dieter Rams set about expressing the ten most important principles for what he considered was good design.

Design by Numbers: A Checklist

An adaptation of Maslow’s Hierarchy of Needs representing the five criteria of good design and magnitude of importance.

UX Project Checklist

Just like a pilot before taking off, run your designs through this quick checklist at each phase of the process.

Design Kit: How Might We?

These 3 little words are the key to developing a framework by reframing your design challenge as a question.

Design Principles For the Win

The biggest collection of Design Principles on Internet including: Facebook, Google, Microsoft and Amazon.

(Updated and revised for Medium on December 2016. Originally published at uxhow.com on January 2016.)

--

--

UX How

Troy Parke. Product Design & UX “How To” insights. Sr Manager Product Design @disney. Former design @alaskaair @bigfishgames. Donuts, LEGO & Hello Kitty.