CategoryUI (User Interfaces)

July 24, 2023 — In this article, Adrian deconstructs YouTube’s “Ambient Mode” feature and how HTML <canvas> and the requestAnimationFrame function are used to create the glowing effect. Read more…

July 6, 2023 — As of today, the world’s 50 top airlines have all agreed on the same flight search pattern. Yet the path to booking the right flight remains frustrating and confusing. Is there really only one solution? Explore the thought experiment which turned the seemingly untouchable pattern on its head and offered new food for thought. Read more…

June 26, 2023 — The Wikipedia team shipped a redesign of the ubiquitous and one of the most visited websites on the web. Alex Hollender and Jon Robson led the work and generously discussed the effort with us in a thorough, wide-ranging interview that covers the design, development, and processes that went into the project. Read more…

June 1, 2023 — Thanks to the Open UI working community group, there’s a new element on the horizon, <selectmenu>, that will make styling this type of form control a whole lot better. You’re going to walk through an early implementation of this new experimental element by creating a pattern that you would never have thought possible with CSS alone — a radial selection menu. Read more…

April 19, 2023 — In this article, Adel Khamatov shares a model of color mechanics that he came up with during research on developing UI kits and illustrates an approach to solving related problems with best practices. Read more…

February 28, 2023 — In the ever-evolving design tools landscape, it can be difficult to keep up with the latest and greatest. In this article, we’ll take a closer look at Penpot, the first design and prototyping tool that’s fully open-source and based on open web standards, making it an ideal choice for both designers and developers. Read more…

February 9, 2023 — With so many image editing services available nowadays, it’s good to have one good solution that is applicable for all websites and web apps that need to provide image editing as a feature. Hristo Chakarov explains how Pixo Editor’s easy integration (just a few JavaScript lines) and rich API can save your time and improve your end users’ workflow. Read more…

February 2, 2023 — In handling forms in React, you can either set up a custom solution or reach out to one of the many form libraries available. In this article, we compare some React Libraries: SurveyJS, Formik, React Hook Form, React Final Form, and Unform. Read more…

January 20, 2023 — In this article, Daniel Yuschick demonstrates that building selfish components is the key approach to avoiding different pitfalls on the way to good component design. Read more…

December 6, 2022 — There is no universal solution for making every kind of table responsive and usable on smaller screens, so we have to rely on various patterns, which Adrian explains in this two-part series. Read more…