Best of UI/UX — August 2024

1. 1
   Article

   Community Picks·2y

   Atomic Design Pattern: Structuring Your React Application

   The Atomic Design Pattern is a methodology for structuring React applications by breaking down interfaces into fundamental building blocks called atoms, molecules, organisms, templates, and pages. This approach enhances modularity, readability, maintainability, and flexibility. By organizing components into distinct levels, managing state appropriately, and thoroughly documenting components, developers can create scalable and consistent user interfaces. The methodology has been successfully adopted by companies like Shopify and IBM for their design systems.

   323

   7
2. 2
   Article

   Medium·2y

   Figma fiasco.

   Figma's latest updates, featuring new AI capabilities and a revamped user interface, have generated significant dissatisfaction among users. Critics argue that the changes prioritize profit over user experience, complicate simple tasks, and cater to non-designers. The restructured UI and AI functionalities are considered not only unnecessary but also detrimental to the workflow of professional designers. Many are considering alternatives like Penpot and Sketch due to these frustrations.

   266

   24
3. 3
   Article

   freeCodeCamp·2y

   Design-first VS Logic-first Approach – How Should You Start Your Front-end Projects?

   Front-end development involves building user-friendly interfaces, and developers often face the dilemma of choosing between a design-first or a logic-first approach. The design-first approach prioritizes visual elements and user experience, while the logic-first approach focuses on core functionalities and data architecture. A hybrid approach combines the strengths of both methods, promoting parallel development and enhancing communication between design and logic teams. The best approach depends on the project type, target market, and team preference.

   152

   6
4. 4
   Article

   CodePen·2y

   Exploring 21 Unique Custom Cursors for Your Site – CodePen

   Microinteractions, such as custom cursors, can enhance user experiences by adding uniqueness and interactivity to a site. The post explores various types of custom cursors, including trailing, revealing, and interactive game cursors, along with their implementation techniques using CSS and JavaScript. Performance and accessibility considerations are also discussed. Real-life application examples and relevant CodePen demos provide practical insights for web design and development.

   140

   3
5. 5
   Article

   Community Picks·2y

   Why toggle switches suck (and what to do instead)

   Toggle switches, although popular for their perceived simplicity and immediate action, often lead to user confusion and accessibility issues. Reasons include difficulty in understanding toggle states, potential inconsistencies, reliance on JavaScript, and concerns about saving settings. Alternative approaches like radio buttons and checkboxes offer more clarity and better user experience in many cases.

   105

   37
6. 6
   Article

   Community Picks·2y

   Bloo Low Fidelity Wireframe Kit

   An open-source wireframe kit designed for quick design and prototyping, featuring over 250 components, support for dark mode, and 150 ready-to-use mobile screens. It's free for commercial and personal use under the CC0 License.

   86

   4
7. 7
   Article

   Community Picks·2y

   Contra Wireframe Kit

   Contra Wireframe Kit is an open-source resource for rapid design and prototyping. It offers over 150 components and 50 ready-to-use mobile screens. Users can also easily create new components and screens with the help of an included style guide. The kit is free for both commercial and personal use under a CC0 License.

   81

   3
8. 8
   Article

   LogRocket·2y

   Understanding optimistic UI and React’s useOptimistic Hook

   Optimistic UI updates enhance user experience by immediately reflecting UI changes based on user's actions, assuming background operations will succeed. React’s `useOptimistic` Hook facilitates these updates by showing a different state while an asynchronous operation is underway. This approach ensures faster and more responsive interactions, reducing perceived wait times. The Hook assumes the API response will be successful and reverts changes if an error occurs, maintaining a balance between perceived speed and data integrity.

   81

   1
9. 9
   Article

   UX Planet·2y

   Alternatives to Using Pure Black (#000000) for Text and Backgrounds

   Using pure black (#000000) for text and backgrounds in design may cause eye strain and discomfort due to significant brightness contrast. Alternative darker shades like charcoal gray and outer space can improve user experience by reducing eye fatigue. Including high contrast modes in products can benefit visually impaired users. Emphasizing balanced color choices in user-centered design can create more comfortable and accessible interfaces.

   65
10. 10
    Article

    Bootcamp·2y

    Design and deliver icons to +8m users

    Designing icons for millions of users involves a complex process that ensures visual consistency, user-friendliness, and scalability. Learn how the blu Bank team unified its visual language, overcame design challenges, and maintained brand identity. Key aspects include readability, incorporation of brand elements, and a well-defined, collaborative design process that ensures seamless handoff from design to development. Continuous improvement and stringent design guidelines further aid in creating a cohesive and scalable icon pack.

    48