December digest of grocery design: Book Atomic Design, Adobe XD for Windows and UX-trends of 2017

For six years now I have been publishing regular reviews of fresh articles on the topic of interfaces, new tools and collections of patterns, interesting cases and historical stories. From the tapes of several hundred thematic subscriptions, approximately 5% of the worthwhile publications are selected that are interesting to share. Previous materials: April 2010-November 2016 .

Patterns and best practices

Baymard Institute Studies
')

• On the peculiarities of the work of determining the address of delivery by zip code .

Designing Interface Animation
UXmatters publishes Chapter 3 from Val Head Designing Interface Animations for Rosenfeld Media. She talks about the basic principles of good animation.

Guidelines for platforms and companies

Brad Frost - Atomic Design

The book Brad Frost "Atomic Design" about one of the most popular modular design methodologies has been published. A couple of words from the author .


Other design systems news:

• Sarah Drasner talks about how to describe animation in design systems . The first half of the article is quite typical water, but further interesting thoughts on the description of the parameters and the choice of priorities for implementation.
• Elliot Dahl writes about the benefits of the grid, based on the step / module (in this case, 8px).
• My colleague Konstantin Lebedev describes in detail the new generation of the Mail.Ru framework . In addition, it has the ability to visually edit components.
• How vertical rhythm helped Yammer designers work on the discussion screen . They were able to predictably vary its content without sacrificing the grid.
• Samantha Zhang describes a very interesting approach to the description of indents between elements and components based on LEGO .

Material design

• Updated material design guidelines . New sections about the adaptation of iOS-interfaces, context menus icons on the start screen, help and feedback.
• The team began publishing GitHub interface components for Android, iOS and the web .

iPhone 7

• Another animated iPhone 7 presentation template from Ruslan Latypov .

Understanding the user

Reading Content on Mobile Devices

Kate Meyer of the Nielsen / Norman Group reports research on reading speeds on mobiles. For simple texts, it is comparable to computers, but for complex texts it is already slower.



Accessibility

• German Gref tested Sberbank services in a special suit that simulates limited capabilities .
• In MS Office, check of documents for accessibility for people with disabilities has been added .

Information architecture, conceptual design, content strategy

Documenting Design Discovery

Dan Brown describes the EightShapes methodology for describing the results of the research phase and conceptual design. There are 6 key aspects in it - the problem, purpose, context, key idea, rules and models.



Combining Mental Patterns and Jobs To Be Done

James Kalbach shows how to use a bunch of mental model diagrams and jobs-to-be-done to find points for optimal product development.

Design Words with Data

Interface copywriter Josh Saito writes about what methods of assessing the recognition of names and readability of texts he uses in his work.

Design and design of interface screens

Adobe XD for Windows

Adobe XD is finally available for Windows. Works only on Windows 10.

Brand.ai

Another plugin for Sketch to sync styles between designers and, potentially, developers. The authors describe the current problems when using just Dropbox and GitHub , as well as specialized Craft and Brand.ai .



Figma

• Figma added components . They are adaptive and promise easy work with copies.

Principle

• Elegant step-by-step instructions for working with Principle from Marc Andrew . On the example of movie cards.
• Joe Toscano's workflow organization guidelines in Principle .

Sketch

• Excellent article by Seba Mantel on how to build a good template in Sketch . ( translation ).

Adobe After Effects

• Molly Lafferty of This Also wrote a review memo for creating interface concepts in AfterEffects .

Invision

• Inspect is now available for Photoshop .

UX-App - User Experience and Interaction Design Software

• The authors have released a second version of the tool .

Abstract

• Interview with Josh Brewer and Tim van Damme, creators of the tool .

Reviews and comparisons of prototyping tools

• Charlie Deets compares the device of adaptive symbols / components in Sketch, Figma and Subform .

Kathryn McElroy - Prototyping for Physical and Digital Products

O'Reilly released the free book Kathryn McElroy "Prototyping for Physical and Digital Products". It is dedicated to different aspects of prototyping.


Prototypes for Mobile Design

In the box of perverted methods - stop-motion animation for interface sketches. The effort to create and iterate it is such that it is faster to do it in digital form immediately.

User research and testing, analytics

FullStory - The Leading Session Playback Tool

The FullStory service helps to work with video recordings of user sessions with the site. This is the recording of the sessions, the search for them and analysis.



Reflecting on the one-way mirror

Jeff Sauro describes the pros and cons of using a one-way mirror in a usability lab. Although now more and more laboratories are moving from mirrors to cameras and broadcasting to another room, in practice he did not encounter negative user reactions when using a mirror.

Visual programming and browser design

Framer

• Framer added Flows, a simplified bundle of multiple screens to a holistic prototype .
• Framer launched the cloud part in the base view - you can publish a prototype on the web and share with managers and developers.

CSS animation

• Sergey Chikuyonok gives advice on optimizing animation in the browser and using hardware acceleration .

New scripts

• The script that draws neon lines .
• A collection of musical instruments in the browser JavaScript .
• Interesting effects of the appearance of the text on JavaScript .

Progressive enhancement

Interesting controversy on the topic of progressive enhancement between Josh Korr from Viget and Aaron Gustafson . They argue about excessive dogmatism and universality of the idea.

UX strategy and management

Making an Enterprise UX Friendly

E-book Justinmind, dedicated to the design of interfaces for enterprise software. UXmatters published an excerpt from it on the UX-strategy for such products .


Gretchen Anderson and Chris Noessel - Pair Design

O'Reilly released the free book by Gretchen Anderson and Chris Noessel "Pair Design". Cooper were among the pioneers of this approach, so first-hand information.

Cases

Redesign Cases

• Pavel Chelyuskin talks about the design of the interface that allows you to follow the broadcasts of competitions in helicopter sports .

Uninvited Redesigns

• Extremely intelligent uninvited Zeplin redesign from Raphael Loder .
• A simple, but reasonably clever case for an unsolicited rework of the Virgin Atlantic application .

Story

3 Obsolete 1990s UX Design Classics That We Love

An interesting review of classic handhelds (Psion Series 3 and PalmPilot) and phones (Nokia 5110) for their compliance with the UX honeycomb model from Peter Morville.

Trends

Tech Trends 2017

The latest release of the forecast for the next year from frog design.



Other trend reviews:

• KickStarter Predictions .
• The uxdesign.cc blog has analyzed hundreds of publications this year and highlighted the main directions for the development of the profession .
• UX forecasts from Econsultancy .

Algorithmic design

• An experiment with automatic composition creation from Adobe and the University of Toronto . Based on the current set of elements, he suggests either to tweak it in trifles, or a completely different option. A very cool example of how this will help the tools of the future.
• Logojoy service replaces low-cost freelancer to create logos. Based on his style preferences, he offers a variety of options that can then be tweaked and seen in the context of a conditional corporate identity. An ideal example of an algorithmic design tool. Its author, Dawson Whitfield, talks about working on a product .
• MIT is experimenting with video predictions of the future . They generate a couple of seconds of the expected development of events based on the photo.
• In the third round of the Russian Design Cup, one of the tasks is devoted to the algorithmic design tool .
• The fabulous article by Fabien Girardin on how designers can interact with big data analysts in order to take advantage of machine learning opportunities.

Facebook VR Resources

Facebook design team launched a section on virtual reality on its website. There are related articles and useful templates. One of the articles is devoted to the features of working with virtual hands .



Car Interfaces

• BMW special project dedicated to the centenary of the company, which describes well the main trends of the automotive industry .

Botframe - A playground to design bots

Botframe online designer allows you to create a simple bot for Facebook Messenger in your browser.



Other materials on the subject of messengers and bots:

• New bots in Skype will be able to communicate in voice - an interesting twist.

Why are all sites the same

• Drew Powers believes that there is no despondency - simply the landing pages fulfill the predictable role of a brochure and standardization makes it easier to learn the information on them.

For general and professional development

O'Reilly Free Design Books

O'Reilly distributes many design books for free.



The Ultimate Guide to Portfolio Builders

An extensive review of services for portfolio maintenance.



Decision Frames - How Cognitive Biases Affect UX Practitioners

Slightly captain, but nevertheless useful note Kathryn Whitenton from Nielsen / Norman Group that psychological tricks work not only for users, but also on the designers themselves. She writes about the ethics of presenting research results that may influence team decisions.

Resilient Web Design

Jeremy Keith has published a free book, Resilient Web Design. It describes the modern philosophy of creating web services and sites.

People and companies in the industry

Future of design

Chic report on the results of a survey of startups of different sizes. The investment fund NEA surveyed 400 young companies on the topic of design maturity. It is difficult to say how relevant the sample was, but everything is presented very tasty.



Dropbox design

Dropbox design team blog on Medium. Copywriter Josh Saito from there has long been actively writing, now have a separate stream. True, something went wrong with the SMM . Other design team blogs:

• Uber design team blog .

Design Census 2016

AIGA and Google launched a regular survey of designers. Announced as the main professional census, although more similar to the collection of HR-base.

Why is it difficult to find an interface designer in St. Petersburg?

Nimax art director writes about the problems of finding designers in St. Petersburg and how to search and find them.

Fresh links can also be tracked in the Facebook group of the same name or received once a month by mail . Thanks to everyone who also publishes links in it, especially Gennady Dragun, Pavel Skripkin, Dmitry Podluzhny, Anton Artyomov, Denis Efremov, Alexey Kopylov, Taras Brizitsky, Evgeny Sokolov and Anton Oleinik. More and more materials in reviews appear thanks to them.

Subscribe to the newsletter ! A letter arrives once a month.