Best of UI/UX — July 2024

1. 1
   Video

   Community Picks·2y

   how dark mode killed good design

   The post explores the debate between dark mode and light mode, examining claims that dark mode is easier on the eyes, better for sleep, and more power-efficient. Through research and experiments, it finds that while dark mode can save battery on OLED screens and might be ergonomic in dark settings, light mode often results in better readability. The post also dives into the history of display modes, concluding that the effectiveness of dark or light mode depends on the user's specific needs and circumstances, and that the design's intent should focus on individual user experiences rather than average outcomes.

   63

   9
2. 2
   Article

   asayer·2y

   Clipping and Masking Properties in CSS

   Clipping and masking are powerful CSS techniques that control how elements appear on web pages. Clipping defines the shape through which an element is displayed using properties like `clip-path`, while masking reveals parts of an element based on transparency or color using properties like `mask-image` and `mask-mode`. These methods allow web designers to create unique, eye-catching visuals and layouts. Various clipping shapes (rectangle, circle, polygon) and masking techniques (alpha, luminance, color) are explored in detail, along with practical examples and code snippets to illustrate their application.

   55

   2
3. 3
   Article

   Codrops·2y

   Inspirational Websites Roundup #62

   A round-up of inspiring website designs from the past few weeks, offering fresh ideas and inspiration for designers. Meco is highlighted as a tool for distraction-free newsletter reading.

   47

   2
4. 4
   Article

   freeCodeCamp·2y

   How to Improve User Experience with Optimistic UI and SWR

   Optimistic UI keeps web apps fast and responsive by instantly updating the UI upon user actions without waiting for server confirmation. This technique enhances user experience by reducing perceived latency and providing instant feedback. SWR (Stale-While-Revalidate) is introduced as a React hook library that balances performance and freshness while fetching data, supporting features like caching and pagination. The post details setting up a task app with and without Optimistic UI, covering CRUD operations, implementing delays to simulate real-world scenarios, and handling tasks with SWR for better user engagement.

   36
5. 5
   Article

   CSS-Tricks·2y

   CSS Stuff I’m Excited After the Last CSSWG Meeting

   The CSS Working Group (CSSWG) has discussed exciting new features for CSS that are expected to be implemented in 2024. Highlights include the addition of the `if()` function for conditional styling without using JavaScript, advancements in cross-document view transitions which allow seamless navigation between pages, and improvements in anchor positioning to make element placement more intuitive and less error-prone. These developments are the result of years of collaborative efforts among developers and are likely to significantly enhance web development practices.

   35
6. 6
   Article

   UX Planet·2y

   Listen, a world-class reading companion

   Listen is a web app designed to read out written material in various languages, offering features like language auto-detection and intelligent voice selection. The app has evolved through several versions, refining usability and compatibility. Recent enhancements include grouped UI stages, reduced cognitive load, dark theme for a calm experience, and responsive design principles. Listen also incorporates motion design, background music, and user-friendly elements like keyboard shortcuts and tool-tips. Now available as a Progressive Web App, Listen aims to provide a seamless listening experience across all devices.

   26
7. 7
   Article

   Codrops·2y

   Inspirational Websites Roundup #63

   A fresh roundup showcasing some of the most impressive and innovative website designs from recent weeks.

   16
8. 8
   Article

   Product Hunt·2y

   Design Sight - The missing link between design and development

   Design Sight is a newly launched tool aimed at improving collaboration between design and development teams. It was featured on July 19th, 2024, in the Developer Tools category. The tool is designed to streamline the workflow and improve the efficiency of design and development processes.

   16

   1