May 13, 2019 at 14:09Food Design Digest, April 2019
The digest has been collecting fresh articles on interface design, as well as tools, patterns, cases, trends and historical stories since 2009. I carefully filter a large stream of subscriptions so that you can upgrade your professional skills and better solve work tasks. Previous issues: April 2010-March 2019 .
Patterns and best practices
Spectacle - The Best Video Marketing Inspiration
A collection of good video presentations of products and their updates.
Building to learn - The role of prototyping in Design
A gorgeous Adobe Christian Cantrell article on how a design team uses prototypes to better understand the problem and improve the interface. He talks in detail about the tasks that the prototype solves in complex product work.
From Like Buttons to Message Bubbles - The UX Designs You Can't Use
Christie Tang studied and described the interface patents of large technology companies. Apple, Facebook, Microsoft, Snapchat, Samsung, Netflix, Airbnb, Tinder.
Design recommendations to improve digital payment experience
Adil Siddiqui has compiled visual guidelines for the design of mobile payment interfaces. All examples are accompanied by animation in context.
Privacy UX - Better Cookie Consent Experiences
Vitaly Friedman from Smashing Magazine parses examples of requests for the use of cookies in modern sites. A fairly large collection of one of the most clumsy in the history of interfaces methods of informing users.
In the next article, he gives tips on a user-friendly product notification policy . It takes into account all the channels - the product itself, the browser, the operating system, additional channels like mail and SMS.
At the end of the cycle, he offers a mini-framework for accurate work with personal data of users .
Baymard Institute Research
The importance of cross-links to different configurations and product versions .
Design systems and guidelines
Acronis design system
Acronis has been developing its design system for several years and released several articles about it, but little was known about it. The other day, guys posted a video presentation that shows the main features. It turned out to be a powerful tool where there is a library of components in the code and their combination with symbols in Sketch. It shows use for page assembly, test coverage, component usage statistics - all the things that are fashionable in design systems. I’m eager to add a link to a live guide to the club of the creators of domestic systems .
VKUI Styleguide
VK system design system for mobile applications. Supports theming based on tokens . Repository .
Mikhail Likhachev talks about creating a dark theme for mobile applications . To do this, they needed to transfer some of the variables to tokens, so they improved the basis for the design system.
United States Web Design System
The second version of the design system of US gossites USWDS 2.0. Tokens, theming and all that .
Designing Our Design Systems Team
Ben Lister talks about creating the Sprout Social design system and how her team has changed. As often happens, it began with a group of enthusiasts who allocated 30% of the time to work on it, but a full-fledged dedicated group gradually formed. A very cool example of how such a team evolves with clearly defined problems, goals and objectives.
Bonus: Sprout Social Design Team Blog .
Size in Design Systems
Nathan Curtis shows how to describe multiple component densities in a design system.
Managing Z-Index In A Component-Based Web Application
Pavel Pomerantsev gives advice on systemic work with z-index in component design systems. How to ensure that components do not break when pasted into different pages.
Design systems publication
Jina Anne mini-magazine about Medium design systems with interesting third-party articles.
Why Don't We Just Use Material Design?
Ben Moss discusses the limits of usefulness of open design systems of well-known companies using Material Design as an example.
Storybook
- Moves towards a full-fledged live guide for designers, not just developers - in the new version, you can display the basics of the visual language (colors, typography, pictograms) and generally describe the components better.
- Chromatic : Add-in for visual component testing.
User understanding
Children's Exposure to Digital Technology Causes Parental Anxiety
Kim Flaherty and Kate Moran of the Nielsen / Norman Group write about fears about the excessive use of gadgets by children and how parents struggle with it.
The fight to regulate dangerous design is heating up
In the UK, a law restricting digital products for use by children is being discussed. They are easily bought for all the tricks in involving users, which leads to addiction.
Sympathy vs. Empathy in UX
Sarah Gibbons of the Nielsen / Norman Group writes about the differences between sympathy and empathy. Designers do not always use these terms correctly, but somewhere they confuse them with pity and compassion.
The map is not the territory - Empathy in design
David Siegel and Susan Dray talk about empathy cards that go the way of characters - they become “like” substitutes for the understanding of users, without actually giving the necessary depth.
Information architecture, conceptual design, content strategy
Lisa Maria Martin - Everyday Information Architecture
A List Apart released Lisa Maria Martin's “Everyday Information Architecture” book in April 2019. They publish an excerpt from chapter 4 .
Journey Mapping - 9 Frequently Asked Questions
Sensible advice from Alita Joyce and Kate Kaplan from Nielsen / Norman Group on creating a customer journey map. Is it worth it to split the map into several, how to involve non-designers, what research to conduct and other useful introductory ones.
The User's Perspective - Using Story Structure To Stand In Your User's Shoes
John Rhea offers a simplified version of the customer journey map in the format of "hero travel".
Translation, localization or transcreation?
AnneSophie Delafosse from Deliveroo describes three approaches to adapt content for other countries - translation, localization, and re-creation from the original brief.
Reference Service: Fitness Clubs
Stanislav Khrustalyov continues a series of chic publications about the Customer Journey Map with a detailed analysis of the client experience of a fitness club visitor.
Why we made a content design playbook
Pete Kowalczyk from Deliveroo talks about how to prepare content for interfaces. These are five stages: problem definition, information structuring, expressive means, specification and polishing.
New Interface Design Tools
Sketch 54
There are no revolutions: improving a dark theme, guides, inserting pictures and symbols.
Plugins
- Sketch Lint : Brings the idea of linting to test layouts against the basic design system parameters. It highlights inconsistencies in the interface elements.
Adobe xd
Collection of free illustrations .
Figma
Rasmus Andersson about redesigning the interface . Read also an overview of working with grids .
Sheet 2 Site
The second version of the generator of simple sites from tables in Google Sheets. A bunch of new templates and important integrations.
Mock
A simple online service inserts an interactive prototype video into the phone’s frame for promos.
Mockdown
The service makes a schematic version of the layout for presentations and promotional sites.
Google earth studio
The Google Earth team has released a tool that allows you to collect video flights over cities based on their maps.
Speak human
Generator of fishy interface texts that are believable.
Workbench suite
A bunch of simple tools for working on layouts - cutting the right sizes, tagging, meta tags, creating a color palette from photos and others.
Geenes
Visual service for selecting a color palette for the interface. Immediately trying on them on the abstract screen of a mobile application.
Moleskine studio
Moleskine launched their tablet sketching app.
Vector Flow
Procedural tool for working with vector graphics. In a format similar to Origami, you build nodes and their dependencies, as a result you get a generative illustration.
Dislack
Another form constructor. Collects and stores the entered data.
Plectica
Another collaboration tool in a digital analog whiteboard. Charts, mental maps, conceptual models and all that.
Sketch vs Figma, Adobe XD, And Other UI Design Applications
Compare Sketch, Figma, and Adobe XD for key features from Ashish Bogawat. A good way to quickly figure out for those who know only one product.
Awesome design tools
A good catalog of design tools in different categories.
Sketchkeys
Keyboard Stickers with Sketch, Figma and Photoshop hotkeys.
User research and analytics
Hawkeye
The mobile application allows you to test sites on the iPhone using eye tracking. Of course, you need a phone from the latest generations.
How a Team Matures Its User Research Integration
Jared Spool offers a user research maturity model as a team. Its important clarification is that it makes sense to evaluate maturity with a particular team, and not with the organization as a whole.
The lean research memo
Athenahealth Dani Nordin shows a template for preparatory documents and user research reports in a lean format.
Give Your Research Skills Away - Why Coaching Product Teams Won't Put You Out of a Job
Good advice from Nancy Lincoln Perry from Microsoft on getting the entire product team involved in user research. How to increase their design literacy and put in their hands tools for conducting quick product evaluations so that researchers themselves can focus on strategic tasks.
Skip User Research Unless You're Doing It Right - Seriously
Joe Munko talks about the importance of reusing insights found in user research. During an endless race to test product solutions, they forget about it, but investing in a knowledge base will pay off very well later.
Visual programming and design in the browser
Andy Clarke - Art Direction For The Web
Smashing Magazine released Andy Clarke's Art Direction for the Web. It talks about the possibilities of modern technology for the effective presentation of brands on the web. One of the articles shows what a spectacular magazine layout can be done using CSS Shapes .
New scripts
- Lax.js : A library for animating elements when scrolling a page.
- Animation of a sphere consisting of dynamic lines .
- Opening photos in the gallery .
- Animation of letters in headlines .
- Glitch effect on the photo under the cursor .
Important browser updates
- Chrome 74 will allow users to turn off animations on the site . It causes motion sickness in some users.
Metrics and ROI
Why You Should Measure UX Attitudes
Jeff Sauro describes ways to assess brand relationships based on three criteria: beliefs, feelings, and perceived behavior. Evaluations within each category may be contradictory, but this is why they are important for focused work on products.
Design Management and DesignOps
Design Leadership Notebook
Dennis Hambeukers launched a blog on design management, which describes his vision of the systematic development of design in companies (before that, he led a similar design of services ). The entire archive (there are about 50 articles) is hardly worth reading (many repetitions, selected articles summarize the main ideas well). But it’s clear that he is not bad at getting all kinds of conceptual design models, so there’s enough useful.
The design maturity model he compiled based on the recent InVision approach and the 1972 classic Larry Greiner concept . To the familiar “ladder” is added the strong idea of growth crises that push to the next step.
Approach to changes in design and organization . Cover articleabout specific steps.
Approach to design scaling in the company . An accompanying article with a model of the benefits of design at different levels, allowing you to move from product design to organization design.
A model of the design process based on two popular approaches - a double diamond and a gradually unraveling tangle. He called it a “kite” and generally seems to be true.
Three stages of growing up the design process : do, learn, think -. As you progress, the return on it also increases.
Stages of design development (offline brand, business software, end-user software) and the modern world where the brand and UX merge into one.
The key role of prototyping in the modern design process - All stages of product development revolve around them.
UX Responsibilities in Scrum Ceremonies
Gorgeous reminder for designers working in the agile process, from Anna Kaley of the Nielsen / Norman Group. It shows how to effectively participate in all meetings and meetings, which are quite intense in the canonical approach.
Developing UX Teams
Shopify's Matt Griffin talks about the approach to developing designers on his team. How pair work helps to transfer skills from strong to growing professionals. The first two parts were a little less interesting, but could also be useful.
The feedback you choose not to give is as important as the one you do
Fabricio Teixeira gives tips for conducting design review sessions. How to convey your point of view and comments to other people's decisions.
Bonus: How to conduct a review in Asana and IBM .
Design your team
Dropbox's Jennifer Brook has published a small framework for defining shared values for a design team. Download instructions and cards .
The Need to Think and Talk like an Executive
Jared Spool provides five criteria for the value of design for a business in terms of money: increase revenues, reduce operating costs, increase revenues from a new or existing business, and increase the value of the business for shareholders. For each of them, he shows examples of useful things from the design side.
Product Management and Analytics
Assumption Slam - How not to make an A ** out of U and ME
Shopify's Julie Booth describes her approach to working with hypotheses through her familiar 2 × 2 priority matrix.
(Value ÷ Effort) x Confidence = Priority
Jared Spool talks about a prioritization approach for a product team that product designers can use. It takes into account value, complexity of implementation and confidence in success.
Cases
New Mail.ru Mail and what does the octopus have to do with it
Artyom Gladkov spoke about the redesign of Mail.ru. The article tells the story of the work on the eighth version of the product - the principles of design, initial concepts, embedded ideas and their implementation on users.
Rebranding as a distributed team - How we collaborated with a design agency
Egor Korobeinikov talks about the rebranding of RealtimeBoard, which later became Miro. Nice and detailed enough about the process and key stages. Barbara Gago on the prerequisites for rebranding and the use of brand sprint .
How We Redesigned Heap's App in Three Months
Dave Feldman talks about redesigning the Heap service.
Lessons learned from our App Store screenshots redesign
Gil Bouhnick studied the best practices for presenting screenshots in application stores and put together his solution, which gave a good exhaust.
How to create a dark theme and not harm. Yandex.Mail Team Experience
Vladimir Klepov from the Yandex Mail team talks about several approaches to the automated repainting of mailing letters for a dark topic.
Trends
Web Design Trends 2019 - Voice Interfaces, Image Search, Fortnite, Alexa and other crazy things that are rocking our world
A very good overview of trends from Awwwards. Since many of the tedious things like animation and large typography have simply turned into genres, they consider the specific nuances of their application, rather than just availability. There are also about visual techniques, and about interfaces, and about the profession as a whole.
For general and professional development
April Fools articles
- Jakob Nielsen about eartracking's new custom research method to replace eyetracking.
- Kara Pernice analyzes the usability of public toilets .
- Jamal Nichols describes a humorous method of gorilla testing (similar to guerilla, partisan approach).
The 10 Usability Heuristics - Free posters for every design office
Visual posters for the classic 10 heuristics of Jacob Nielsen.
Scapegoating User Experience Design
Khoi Vinh parses a Washington Post article on how Nest and other smart home companies put their customers at risk . Ease of use is important for them, which is why they reduce important security measures like two-factor authentication, which is critical for a personal data-related product.
People and companies in the industry
Shopping for design studios by large companies
Subscribe to the digest on Facebook , VKontakte , Telegram or by mail - there fresh links appear every week. Thanks to everyone who shares the links in the group, especially Gennady Dragun, Pavel Skripkin, Dmitry Podluzhny, Anton Artemov, Denis Efremov, Alexei Kopylov, Taras Brizitsky, Evgeny Sokolov and Anton Oleinik.