#131 - Jesse James Garrett Layers

Sent the November 15th

Issue Artwork by Rafael Eifler

Article written by

Juan Jesús Millo

Writing of the week

Jesse James Garrett in the book The elements of UX (2011) develops a dissertation on the UX design process from a diagram that divides the stages into five layers.

Strategy: What are the needs of our users and what are the objectives of our project. Research techniques, gather information to build the foundations of our design.

Definition: We define the scope of the project, we specify the functional and content specifications that our design has to cover to achieve its objective. Modeling techniques of archetypes of people and usage scenarios on which to visualize the IxD process in order to detect both the functional and information requirements necessary to carry out the tasks.

Structure: In this layer is where the interaction is designed, from the requirements we start to define how the system will behave to meet the user's needs. Diagramming and schematics to determine how the content will be presented and in which action sequences it will be organized in order to facilitate the user to complete his tasks in an intuitive way.

Skeleton: Prototyping techniques are used to implement specific aspects of the interaction, such as how we are going to allow the user to move between the different options or how we are going to make it easier for the user to operate them. They are implemented schematically, but with enough definition to apply inspection and evaluation methods to help us refine the design to achieve the highest possible level of satisfaction.

Surface: The most sensory layer of the experience is developed. It defines the look and feel and unleashes the design's potential to generate emotions. Visual and artistic language variables of shape, color, texture, composition, movement and sound are applied to build a UI capable of connecting emotionally with our users.

Articles & Ideas

The Looking Glass: Back on the Saddle

How to think of our careers during layoffs + why the promise of data is better than its reality. Julie Zhuo

Classic HCI Demos

A curated collection of HCI demo videos produced during the golden age from 1983-2002. Jack Rusher & ACM's SIGCHI

RelationshipOps: An Emerging Aspect of ResearchOps

It’s a relationship world out there. We all know it, yet we treat our relationship with customers – or potential customers – as transactional in user research. Rachel Miles

Dialogs, modality and popovers seem similar. How are they different?

Web platform concepts can sometimes be quite different, yet seem very similar. Semantics, behaviours and characteristics can be tricky to distinguish. Hidde de Vries

Design Systems: Useful Examples and Resources

In complex projects, you’ll sooner or later get to the point where you start to think about setting up a design system. In this post, we explore some interesting design systems and their features, as well as useful resources for building a successful design system that works well for you and your team. Cosima Mielke

Transactional Notifications: Their Characteristics and When to Use Them

Though they share similarities, notifications differ from emails because users expect them to be more concise, timelier, and only for urgent content. Choose to send SMS or push notifications strategically, depending on the context. Feifei Liu

Calendar UI design best practices & Datepicker inspiration

Calendars and date pickers use cases, anatomy, and samples. States, ranges, timelines, and managing event patterns are now studied and explained. Enjoy, steal, and remake with this Figma calendar template. SET Product

Products

Air

Creativity, operationalized. Air is the Creative Ops platform for visual assets, designed to send team productivity soaring. Flexible organization • Powerful searching • Secure sharing • Smooth collaboration.

Design System ROI Calculator

Investing in a design system can have broad impact - on consistency, sentiment, accessibility, and even how much your team can ship. But the easiest ROI to align to business metrics is cost savings, most easily calculated based on efficiency.

Screen Studio

Beautiful screen recordings in minutes. Promo videos of your digital product as easy as taking a screenshot.

Frontitute

Manage your UX writing workflow in one place. Bring all your product copy together in a single workspace that’s supercharged with advanced search capabilities, smart tagging, and version control. Sync it back effortlessly to the design tool, code repositories, and spreadsheets.