#131 - Jesse James Garrett Layers
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
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.
Beautiful screen recordings in minutes. Promo videos of your digital product as easy as taking a screenshot.
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.
Fuel-Saving Designer’s Asset Box. Googling for images is a hassle. Instead, keep 1M+ icons, illustrations, and photos at your fingertips. Store your own graphics and let AI tag them for you.
The next changelog for your productGetlog is a stunning free changelog for your product, it’s completely free and takes just minutes to set up.
Capture and edit beautiful, shareable screenshots. A browser extension for capturing and editing beautifully styled product screenshots with ease.