Skip to main content Jump to list of all articles Jump to all topics
Clear Search

CategoryDesign

Also related to

663 articles

Temani Afif wrote

CSS Responsive Multi-Line Ribbon Shapes (Part 1)

Ribbons have been used to accent designs for many years now. But, the way we approach them in CSS has evolved with the introduction of newer features. In this article, Temani Afif combines background and gradient tricks to create ribbon shapes in CSS that are not only responsive but support multi-line text and are easily adjustable with a few CSS variables. Read more…

Preethi Sam wrote

In Search Of The Ideal Privacy Icon

Icons are capable of enhancing the content that surrounds them, but they have to be self-explanatory for that to happen. We have icons for things we like (a thumbs up), things we can share (a box topped with an up arrow), and even for protection against malicious online attacks (a shield), but what are the options we have for representing “privacy”? Read more…

Maximilian Speicher & Johanna Jagow wrote

An Actionable And Reliable Usability Questionnaire With Only 7 Items: Inuit

Inuit (short for “Interface Usability Instrument”) is a new questionnaire you can use to assess the usability of your user interface. It has been designed to be more diagnostic than existing usability instruments like, e.g., SUS and for use with machine learning, all the while asking fewer questions than other questionnaires. This article explores how and why Inuit has been developed and why we can be sure that it actually measures usability, and reliably so. Read more…

Preethi Sam wrote

How To Animate Along A Path In CSS

CSS loaders and progress indicators are some of the most widely used examples in tutorials and documentation. In this article, Preethi demonstrates an approach using animated custom properties, a conic gradient, CSS offset, and emoji to create the illusion of a scooter racing along a donut track. Read more…

Temani Afif wrote

Revealing Images With CSS Mask Animations

Let’s play with images and experiment with CSS masks. The idea is fairly simple: take a single <img> tag and harness the power of CSS to accomplish complex hover transitions. Through different demos, you will see how CSS masks combined with gradients allow us to create fancy effects — with efficient, reusable code. Read more…

Pratik Joglekar wrote

Rediscovering The Joy Of Design

Pratik Joglekar takes a philosophical approach to remind designers about the lost joy within themselves by effectively placing massive importance on mindfulness, introspection, and forward-looking. Without joy, the work we do would feel meaningless. To prevent it from happening, check out a few ideas that would help rediscover that spark of joy. Read more…