Best of UI Design — October 2023

1. 1
   Article

   asayer·3y

   Responsive mobile layouts made easy with Pure.CSS

   Learn how to create responsive mobile layouts using Pure.css, a lightweight CSS framework that prioritizes simplicity and responsiveness. Discover the benefits of integrating Pure.css for mobile layouts, such as responsive design, lightweight files, customizability, and minimalistic design. Follow the installation and integration instructions using NPM or CDN. Dive into designing mobile-first layouts using the grid system and explore other components like responsive images and navigation menus. Finally, learn how to create a responsive blog post section using Pure.css grid modules.

   48

   1
2. 2
   Article

   Bootcamp·3y

   4 Free Courses For UI/UX Designers To Learn From

   Discover four free courses for UI/UX designers to learn from, including an introductory course on icons, a practical guide to design systems, an interactive learning community, and a curated platform with foundational and advanced insights for UX design.

   44
3. 3
   Article

   LambdaTest·3y

   Creating a 12 Column CSS Grid: A Complete Tutorial

   Learn how to create a 12 column CSS grid layout that adapts to different screen sizes and devices. Understand the concept of a 12 column CSS grid, its significance, and its implementation steps. Discover real-world examples of websites that use a 12 column CSS grid.

   36
4. 4
   Article

   Hacker News·3y

   Scrollbars are becoming a problem

   Scrollbars are becoming smaller and less usable, causing difficulties for individuals with fine motor control problems or inaccurate pointing devices. The trend of shrinking scrollbars persists, with limited user-configurable options to fix them. Different software, such as GTK, Qt, Firefox, Chrome, and Electron, have their own challenges when it comes to scrollbar customization. One potential solution that is well-received is the use of minimaps.

   34

   5
5. 5
   Article

   UX Planet·3y

   10 Color Combinations for a Stunning UI: Part 1

   Discover 10 stunning color combinations for UI design that can establish brand identity, evoke emotions, and guide user actions.

   28
6. 6
   Article

   Community Picks·3y

   My Godot game engine experiences

   The author shares their positive experience with the Godot game engine, highlighting its benefits and ease of use. They discuss their plan of attack for learning the engine and the features they like, such as the organization of assets and the concept of nodes. The author also offers advice for transitioning to Godot and mentions some quirks and limitations of the engine. They conclude by promoting a new release of their game and inviting readers to reach out for further discussion.

   26
7. 7
   Article

   Community Picks·3y

   Don't Use Fixed CSS height or width on Buttons, Links, or Any Other Text Containers

   Using fixed CSS height or width on buttons, links, or any other text containers can put you at risk of failing WCAG 2.2 Success Criterion 1.4.4 Resize Text. Fixed values can cause the text to get cut off when the text size is increased. Using alternative units like `rem` for font-size and `padding` instead of `width` or `max-width` can ensure that text remains resizable without loss of content or functionality.

   26
8. 8
   Article

   UX Planet·3y

   37 Innovative Ways to Use Accent Colors with Visual Guide

   Accent colors in UI design emphasize, guide, and create visual interest. They can be used in various elements of a UI, and this article provides examples of websites using accent colors.

   23
9. 9
   Article

   LambdaTest·3y

   How to Use CSS Blend Modes: A Detailed Tutorial

   Learn how to use CSS blend modes to create visually appealing and stunning websites. CSS blend modes allow you to blend different element layers together to form a single layer, creating stunning visual effects and improving the user interface.

   19
10. 10
    Article

    Community Picks·3y

    The Negative Impact of Mobile-First Web Design on Desktop

    Many modern websites are designed with a mobile-first approach, which can cause the content to appear overly large and stretched out on desktop devices. This design trend, known as content dispersion, can lead to usability issues such as increased cognitive load and interaction costs, difficulty understanding content, and user frustration. Designers should evaluate how designs render on desktop, prioritize valuable images, group related content together, avoid mobile-specific interactions, and use dispersion strategically when necessary.

    19
11. 11
    Article

    asayer·3y

    Website Heat Maps—A Detailed Guide

    Heat maps are graphical representations of data that show user behavior on web pages. There are different types of heat maps, including click heatmaps, scroll maps, and mouse movement heatmaps. Heat maps provide insights on user interactions, help in conversion rate optimization, and offer a visual approach to understanding numeric values. Popular heat map tools include HotJar, Crazy Egg, Mouseflow, and VWO.

    19

    1
12. 12
    Article

    Community Picks·3y

    How Netlify rebranded their app in just 6 weeks

    Netlify rebranded their app in just 6 weeks using Storybook and Chromatic. They updated the color scheme, logo, and designs at scale. They also used Storybook and Chromatic for visual testing and gathering feedback from stakeholders.

    18
13. 13
    Article

    freeCodeCamp·3y

    Forms in HTML – How to Build Basic Forms with HTML

    Learn how to build basic forms in HTML using the <form>, <input>, and <button> elements. Explore various input types such as text, password, radio buttons, checkboxes, and submit buttons. Understand the importance of accessibility in HTML forms and the use of semantic HTML, labeling, descriptive text, keyboard accessibility, error handling, ARIA roles and attributes, and fieldset and legend elements. Also, consider mobile responsiveness and how to create a complete form.

    16