A Guide to Maps & Models for UX Designers
Originally gathered together for my students, this booklet was intended to help them differentiate between the different kinds of diagrams I was teaching and to help them understand when you might use each kind.
This mini guide is intended to be an overview of the landscape. It is not exhaustive but does go into detail about different kinds of maps, models and diagrams, what they would be used for and for most of them I include step by step instructions for how to work through making one. The mini guide also contains multiple examples of each kind of diagram from my own consulting professional practice.
By making these diagrams we can determine what is in or out, what elements or actors we need to pay attention to and we can start to see relationships between the concepts of a topic or system.
The later models show how you might visualize the taxonomy in a system and how to map user and system tasks, and experience journeys. The radial time and task diagrams and service blueprints explore what people actually need to do at different stages in a lifecycle.
Other diagrams include sitemaps, timelines, schedules, data (information) models and other kinds of information that when presented visually can become more clear and help you have tactical discussions with development and content teams.
A Mini Guide Visual Design Bundle
Visual design basics for UX designers including working with grids, understanding Gestalt theory and how to use these principles for smart, effective UIs, color theory and using type for readability.
A Guide to Type & Its Use for UX Designers
Ever wonder why the space between lines of type is called leading? Or why Egyptian Slab Serifs have that name? This booklet covers a brief history of type design and printing through the different eras and the categories that we now use to classify typefaces. The booklet covers the parts of a typeface, the basics for specification both traditionally and in CSS and offers best practices for designing with type across textual content for reading accessibility and interface design. Filled with examples, this mini guide will help both new and seasoned user experience designers better understand the legacy of traditional type design and how to get started mastering type in their own work.
A Guide to Color Theory & Use in Digital Products
A mini visual design guide about color and its use for user experience designers. There are a lot of resources on the internet about color but to get the whole picture you have to find a lot of URLs, wade through examples from print sources to find digital examples of color in action and hunt around for useful tools to help you determine color palettes, accessibility issues and tools for specifying colors for CSS.
This guide covers some early color wheel history, color theory and gives a bunch of examples of color in action across mobile and content sites and applications. There are more resources provided to dig in deeper.
A Guide to Using Grids in Digital Design
The guide covers the use of grids for digital web designers and application designers. Material has been synthesized from several years of teaching visual design concepts to interaction designers in as simple a way as possible to help them create organized and readable web pages. The guide covers terminology and provides pages of practice grids to photocopy and sketch on to explore working with grids and discover the unlimited numbers of layouts available. This is not a super technical guide—it’s not going to tell you how to implement Bootstrap or Material Design grids in your HTML but will show you how to use those as a base grid to build upon.
The guide and practice grid pages print out onto standard 11″x8.5″ paper size.
A Guide to Gestalt Principles for UX Designers
The guide covers the principles of Gestalt theory as applied to UX design and the rules for creating visual and information Hierarchy. Filled with examples from digital web and mobile application design. The guide also provides example templates for documenting animation and microinteractions that may later show up as tokens, in design systems and in the CSS.
The guide prints out onto standard 11″x8.5″ paper size. The spreadsheet templates print out on standard 14″x8,5″ legal size paper.
