Product Design Digest, January 2017

For seven years now I have been publishing regular reviews of recent 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-December 2016 .

Patterns and best practices

Baymard Institute Studies

• Christian Holst writes about how to check and display a credit card number .

Interface Animation Collections

')

• A collection of animations from the team Awwwards .

Mailing letters

• Lee Munroe collected a smart memo on the layout of mailing letters, taking into account all sorts of restrictions of the real world .
• Karthik Suroju from Newton tells how great the service raised the conversion with the help of simple mailing text messages .

Guidelines for platforms and companies

Component QA in Design Systems

Nathan Curtis describes the construction of a quality control process for components in design systems.







Continuing the theme:

• Another catalog of design systems . So far, however, completely empty.
• Bjango writes about how to apply auxiliary colors in design systems through transparency . This helps a lot in minimizing parameters, especially if the platform supports styling components.
• VMWare have published their design system Clarity . Very sensible, since the emphasis is on complete complex components, and not just buttons. The blog of the design team that makes it. And a story about how they implemented SVG .
• Intelligent design system of the American patent office . It is possible to download a template for Bootstrap.
• Sketch template using 8-pixel pitch to standardize sizes and indents in the interface .
• An example of an alternative classification of components of the design system from the Dutch studio Lewis + Humphreys .
• Interesting thoughts about the fact that the design system is not just to list the parameters, but also to describe some stylistic concepts . For example, why combinations of colors are just like that.

Designing for Brand Interaction

Great thoughts Rebecca Ussai Henderson on the topic of a single language of animation that supports the brand.







Material design

• Studio The Rivalry has posted another case work on Google products . It turned out they were working on Project Kennedy - the first global redesign initiative for the entire product line, from which the recognizable style began.

iOS 10

• Apple posted the official UI Kit for Photoshop and Sketch . Previously, patterns were available for watches.
• Facebook iOS10 templates are now available as Craft libraries .

iPhone 7

• IPhone 7 templates for Photoshop in perspective from Pixeden .

Apple Watch

• Animated Apple Watch template for Photoshop by Ruslan Latypov .

Understanding the user

Using science to make truly tappable user interfaces



Scott Hurff collected the requirements of the guidelines for various mobile platforms on the topic of minimally comfortable areas of pressure and analyzed them in conjunction with the Fitts law. The result has been excellent weighted recommendations, whose numbers are closer to the truth.

Information architecture, conceptual design, content strategy

Dan Brown - Practical Design Discovery



February 14, A Book Apart publishes Dan Brown's Practical Design Discovery. He examines its main topics in his article.



James Kalbach's Mapping Experiences

• James has released a free e-book on the same topic .

Characters

• An interesting approach to creating characters from Salesforce . They highlight key job roles and each character performs a specific set. True, the method itself is described very casually.

Design and design of interface screens

CanvasFlip - Free Prototyping and User Experience Testing Tool for iOS & Android Apps



The CanvasFlip tool attempts to connect the process of creating interactive prototypes and testing them. You can search for respondents yourself, or you can use the base of the service (it is in English). Among other things, analytics tools for the prototype are offered.





Designer Tools



The most chic Designer Tools app for Android. Allows you to impose on any application a grid or layout, take from it the color with a pipette.



Heek - Make Your Own Website



Service Heek allows you to create an uncomplicated site in the process of communicating with the bot. The solution is rather template, but the approach itself is in the spirit of the times.



Gravit - Your new best design tool



A preliminary version of the tool for designers Gravit. Initially, it developed as a set of desktop applications, but then moved to the browser.



Tailor - iPhone Stitching Screenshot



The Taylor iPhone app allows you to take screenshots of sites and applications to their full height, without having to glue them manually.



Sketch 42



Enhanced export capabilities and touch bar support in new MacBooks. Fresh plugins and templates:

• Plug-in Auto Layout , allowing you to make responsive layouts. Video review from Pablo Stanley . The creators of the plugin, Anima , are preparing another Sketch to Code plugin - a tool for exporting code from Sketch to Swift or Obj-C.
• Explanatory template for interaction diagrams . Improved arrows for him.
• Jon Moore went hardcore and created complex symbols for Sketch , which allow you to switch heap state elements and use standard content. True, the direction itself is not in that direction - it is better to focus on the implementation of the product, rather than project artifacts.

Optimize your work with Sketch and the cloud



Andrei Sundiyev described how the work with the Sketch layouts and templates, as well as their synchronization in the Mail.Ru Group design team, is arranged.



Handoffs Guide for Pixel Perfect Design

Not a bad series of articles about the transfer of layouts to development from Alex Barashkov and Vlad Kamelsky. Part 2 and 3 .



Invision

• Report on the work of the product in 2016 .

Proto.io

• Tool report on what was done in 2016 .

User research and testing, analytics

Steve Portigal - Doorbells, Danger, and Dead Batteries

In December 2016, Rosenfeld Media released Steve Portigal's book, Doorbells, Danger, and Dead Batteries - User Research War Stories. UXmatters publishes chapter 11 of it.







IBM Design Research (in Russian)



AIC translated IBM user research manual into Russian. As well as in other design reference books from the company, there is a lot of useful information on the approach, principles, cases.







Get the Most Out of User Research



Sensible tips Cătălin Bridinel from Booking on how to properly raise questions for user research and get the most out of them.



Custom game research



The abstract of Natalia Sprogis's lecture on user research in games for the program "Management of game projects" in VSBI.



Does Thinking Aloud Where People Look?



Jeff Sauro is trying to figure out whether thinking out loud during a user study is affecting where the user is looking at the screen. According to his experiment and other studies - yes.







How Accurate Are Estimates From Online Panels?



Jeff Sauro examines the features of panel research. Pros, cons, pitfalls of different types of panels.



Avoiding Hard-to-Answer Questions in User Interviews



Another memo Jim Ross on how to correctly ask users questions during an interview and fish information using implicit methods.

Visual programming and browser design

Prototyping for Hosts - tooling for engineers



Airbnb's Kevin Grennan tells how a couple of designers learned how to prototype interfaces in Xcode. They set up the whole environment and give the latest versions through the Hockey App.







WebSlides - Making HTML Presentations Easy



A set of templates WebSlides allows you to make good presentations on web technologies. It is done manually without any constructors, but complete with complete presentation modules. A couple of words from the author .



New scripts

• Interesting photo separation effect for creating CSS and JavaScript posters .
• Interesting mirroring effect .
• Chic effect of using perspective in the display of text .
• The effect of transforming objects in the spirit of the Google I / O 2016 logo .
• Paper.js library for working with vector graphics .

Work with color on the web

• Powerful online utility ColorMe fits the selection of colors for the web and allows you to convert them, as well as play with the parameters of color models and instantly see the result.

Work with SVG

• Val Head shows how Illustrator settings work for exporting SVG
• Dmitry Golovkov wrote a script for AI export vector graphics to SVG or PDF ( use video ).
• How to align SVG-icons by text .

CSS animation

• Anna Tudor shows you how to implement random completion of animation in CSS .

Webflow

• Recently, Webflow updated their site, and made it at Webflow itself. The design team talks about the goals and the process of redesign . Part 2 and 3 .

Noodl

• Emin Inanc Unlu shows how to use Noodl to prototype Internet of Things devices .

UX strategy and management

Good things happen when a Product Manager pairs with a UX researcher



Awesomely cool article from Shopify by Alena Lugina about how user researchers can interact with product managers to get the most out of the product.







Continuing the theme:

• Frog Design compare approaches to solving problems on the part of designers and managers and show where they can find common points .
• Frog Design show their model to assess the positive effect that design has on the business .
• An excellent article by Scott Sehlhorst, in which he shows an approach to finding risks and minimizing them in grocery work .
• David Siegel's strong thoughts on how user researchers can influence product strategy . He offers to help the company to consider problems in a wider way, which will allow finding new opportunities for business growth.
• A good example of using a bunch of analytics and user research from Arianna McClain from IDEO .

8 competencies of user experience

David Travis offers his grocery designer product card. He successfully managed to apply a petal diagram for this. One of the most successful examples of system work with skills.





Continuing the theme:

• Jamie Myrold ​​from Adobe for motivational design leaders .
• How the Squarespace design team works .
• Alaine Mackenzie's great story about how the structure and goals of the content strategists team at Shopify changed . A very good example of a long-term team development vision.

Design Criticism

• How design criticism works in Optimizely .

Becoming A Better Facilitator



An explanatory guide for facilitators from Brian Frank. Many useful details on the process, best practices and how to make project meetings useful. Continuing the theme:

• And one more memo on holding useful working meetings from Kate Kaplan .

Story

Make it all happen

Enchantingly steep study of the roots of design thinking from Jo Szczepanska. She has been digging from the mid-20th century on the work of Buckminister Fuller and Scandinavian cooperative design practices. Each decade is marked by changes in both the method and the scope of its application. Key figures, books, quotes - just gold!







Continuing the theme:

• Jared Spool writes that methodologically in design thinking there is nothing new - this is a new name for those approaches that have been used for a long time in interface design . But the term shot, because it helped to highlight those tasks of designers that concern the understanding of the problem, and not just the production.

The iPhone Story behind P1 & P2

Sonny Dickinson shows the prototypes of the first iPhone. At that moment, the team considered two options - the now familiar touch-based interface and based on the iPod.

Trends

Trends 2017

• The traditional trend forecast for 2017 from Fjord .
• A good overview of the trends from Envato .
• Not that it would be very interesting, but in some places a sensible overview of trends from Tom May .

Algorithm-Driven Design - How Artificial Intelligence Is Changing Design



Smashing Magazine has an updated and structured version of an article on algorithmic design. It contains examples of tools that will help simplify the construction of the interface, the preparation of graphics and content, as well as the personalization of the product. In 2016, the technological basis for such tools became more accessible - the design community also began to look closely at algorithms, neural networks, and artificial intelligence. So it's time to rethink the modern role of the designer. Also updated the Russian version .







Continuing the theme:

• Tailor Brands , another Logojoy logo generator.
• Similar thoughts on the topic from Don Norman . He also writes that algorithms should strengthen the designer, and not replace him.
• McKinsey analyzed 800 occupations for automation . Although the overall message is predictable - the more predictability in the work performed, the easier it is to replace it with robots or algorithms - the study has a lot of interesting nuances.
• A very sensible series of articles on design automation is published on the O'Reilly Rob Girling website from Artefact. General trend . What skills are threatened by automation . The future of designers .
• Janessa Lantz also writes about who will replace the car and whether it has positive sides . In general, there is - often the market, subjected to automation, begins to grow strongly and create new needs and new jobs.
• Lukasz Lysakowski is digging into the history of automating design tasks from the beginning of typography to the present day .
• A set of keyboards in the spirit of "vzhuh and done . "

10 Best Intranets of 2017 Nielsen Norman Group Intranet Design Annual



Nielsen / Norman Group announced the winners of their annual awards for the best interface on the intranet. The authors of the article describe the main changes in the industry - for example, the fact that the speed of development has increased.



The virtual reality

• Facebook released React for virtual reality .
• A template for trying on the Kickpush Sketch virtual reality environment layouts, which can be viewed in the GoPro viewer .
• Paper template for sketches of virtual reality interfaces from Vladimir Kurbatov .
• Virtual Reality Pop, a selection of articles on the design for virtual reality on Medium .

Messengers and bots

• Elaine Lee talks about the experience of creating two eBay bots - with the support of regular employee-operators and fully automated. The article presents the pros and cons of both approaches.
• ChatBottle, another bots directory .

Smart watches and bracelets

• Engadget sums up the year 2016 in the market of smart watches - one of the saddest in the history of wearable devices. Companies were bought and closed, sales fell, key products were postponed.
• The cruise company Carnival Cruises has introduced bracelets similar to Disney MagicBand on their ships .

Car Interfaces

• Microsoft is trying to enter the cars on the other hand - instead of trying to capture the onboard computer in the spirit of CarPlay and Android Auto (which automakers never allow inside), they are trying to become an infrastructure platform. The Microsoft Connected Vehicle Platform provides the foundation for cloud services and virtual assistants.

For general and professional development

Abstract - The Art of Design



Netflix is ​​preparing a documentary series Abstract, dedicated to design. True, it does not apply to digital products, but rather widely looks at the profession. Trailer







Comics OK / Cancel in Russian



Alexey Kopylov found a complete archive of OK / Cancel interface comics translated by the UIDG team into Russian 2003-2006.



The Differences Between Enterprise and Consumer UX Design



Explanatory column UXmatters about the difference between the design of consumer and corporate intefreysov. The topic is hackneyed, but this article contains the main problems and features, one of the best on the topic.



How to Avoid UX Burnout



Benjamin Earl Evans gives advice to designers who have participated in long-term projects on how to avoid professional burnout.



Screenshots



Lauren Holliday's sensible advice on how to build a portfolio with an emphasis on problem solving, not just pictures.







A designer's four lessons on design



Simple and sensible advice on how to work for designers from Jasper McChesney. Focus, design artifacts, problem solving approach.



Advice to Candidates on Successful UX Interview Loops



Jerrod Larson and Daan Lindhout give advice to grocery designers on successfully passing all stages of an interview.

People and companies in the industry

Tiny bought Dribbble



A conglomerate of design companies Tiny bought Dribbble. They now have a rather interesting portfolio - the Designer News community, the SMM service Buffer, the design studios MetaLab and Pixel Union, Task Manager Flow and another bundle of related services. Owners are planning to continue to buy near-design projects .







UX-Environment AMA: Clay (ex-SFCD)



Session AMA from UX-Wednesday and vc.ru with the Clay design team, founded by the SFCD / SoftFacade studio team: Anton Zykin, Oleg Turbaba, Dmitry Tsozik and Alexander Khmelevsky answered questions. Originally launched in St. Petersburg, SoftFacade later opened offices in New York and San Francisco. And recently, the backbone of the team launched a new brand Clay. This is one of the brightest design studios with domestic roots, which was noted for work for large brands and has long gone beyond the icons - the portfolio has many interesting interface works, and the list of awards includes the majority of large international awards.







Capital ONE Design Community



Capital One design team's blog, which bought Adaptive Path a few years ago.







Fresh articles:

• Jesse James Garrett asked Capital One designers about what attracts them to work in the banking environment .

Microsoft Design



Microsoft launched the blog of their design team at Medium.



Design at Creative Market



Creative Market design team launched a blog on Medium. One of the first articles is devoted to how the design processes developed and what goals they set for themselves now .



Envato



Blog Envato design team on Medium. There are also publications about the front end.

Conference proceedings

Upcoming Web Design Conferences (January — June 2017)



Smashing Magazine has compiled a list of design and development conferences for the first half of 2017.



Enterprise UX Virtual Summit 2017



The free online conference Enterprise UX Virtual Summit 2017 will be held February 14-17. Enough powerful lineup of speakers: Irene Au, Jeffrey Veen, Lou Rosenfeld, Rian van der Merwe and 15 more intelligent specialists.



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.