Redesigning Chrome desktop

1-lnwjbpaofmearexl1ixkea

In the beginning of this month of September, the new Chrome Core UI redesign, or so called “Chrome MD” (for Material design), rolled out on Windows as part of our 53rd update. It is the last step of a three phase deployment of the new design,which started in 51 with Chrome OS and Linux, followed by macOS in 52. Windows is the culmination of that process and while Chrome is never finished, it felt to me like the right time to take a look back and reflect on this process that almost took 2 years, hopefully delivering some details and experiences that might be useful to you.

Extensive and detailed write-up. Be sure to read the “Lessons learned” closing note too.

Redesigning Chrome desktop →

Stress test your design with forceFeed.js

Fun script by Heydon Pickering, whom you might know from the lobotmized owl selector, and quantity queries with CSS.

Static mockups are liars. They only show the designer’s content.

The forceFeed.js script is designed to help you test your design’s tolerance for variable, dynamic content. A tiny script that “force feeds” HTML elements with random text content within specified parameters. Set up, keep refreshing your browser until something breaks, then fix the design.

Define the kind of text you want to appear using data-forcefeed attributes, and keep on hitting refresh until your design breaks.

<div class="person">
  <h3 class="name" data-forcefeed="words|2"></h3>
  <p class="description" data-forcefeed="sentences|3|6">This will be overridden</p>
</div>

forceFeed.js →

GE’s Predix Design System

1-eZ_8EUUutvJYadAzo5WYhg

Jeff Crossman, Product Designer at GEDesign:

A design system should not simply be a collection of user interface components along with some design theory. It should demonstrate how design patterns have been applied in real products and document how other teams have extended patterns for specific use cases. Our goal with this design system is to enable product teams to focus their efforts on the solving for new customer needs, and enable them to share those solutions with the rest of the company.

1-nomBq13bCus2wEn1uZ6xtQ

Their system is a tad different from, yet relates to, Brad Frost’s Atomic Design:

1-qt5h6g4tLny5mIKR2hBTcQ

The hierarchy used, when compared to Atomic Design, in GE’s system is inverted:

Presenting Atomic Design in this way works well when trying to educate someone on how the levels of the hierarchy build upon themselves, however we have found that it may not be the best way to actually engage with the design system.

GE’s Predix Design System →

 Designing Ryanair’s Boarding Pass

ryanair-boarding-pass

In the following article we’ll outline the beginnings of the project, some of the challenges we encountered and ultimately what we learned from the process of redesigning Ryanair’s boarding pass.

Difference between this redesign and many of the Dribble shots that can be found online is that this one was actually tested early on, and is satisfying both client and business requirements. You’ll – for example – see that the barcode on the final design was altered from the proposed QR Code (as shown above) to a 2D barcode because that’s just how airports want them to be.

Designing Ryanair’s Boarding Pass →

The Worst-Designed Thing You’ve Never Noticed

Roman Mars is obsessed with flags — and after you watch this talk, you might be, too. In this surprising and hilarious talk about vexillology — the study of flags — Mars reveals the five basic principles of flag design and shows why he believes they can be applied to just about anything.

Worth your time.

Design for the bigger problem

Great stuff by my friend Thomas Byttebier:

When designing user interfaces, the same rule of thumb applies: never start designing anything until you deeply understand the problem at hand. Go back to research, talk to real users. Be that 3-year old kid again that answers every answer with another ‘why?’ until all conversations ultimately end at the beginning of the universe.

Design for the bigger problem →