Best of UI Design — August 2024
- 1
- 2
Community Picks·2y
Isocons
This post provides a comprehensive list of various user interface (UI) actions and icons commonly used in app development, including functions like adding shapes, navigating through different interface elements, performing actions such as downloading, uploading, and more. It covers essential icons like arrows, checkboxes, and settings, serving as a reference for designers and developers.
- 3
- 4
freeCodeCamp·2y
What is CSS Subgrid? A Practical Tutorial
CSS Subgrid addresses the challenge of maintaining perfect alignment in web layouts with varying user-generated content. This tutorial guides you through building a flexible products section using Subgrid, ensuring nested elements align consistently with their parent grid. The tutorial includes HTML and CSS code examples, demonstrating how Subgrid simplifies nested grid structures and enhances design consistency.
- 5
- 6
- 7
Hacker News·2y
onlook-dev/onlook: The open source, local-first Webflow alternative. Design directly in your live React site and publish your changes to code.
Onlook is an open-source, browser-powered visual editor that integrates seamlessly with React and TailwindCSS projects. It allows live edits directly in the browser DOM and control over the codebase without compromising the design. The post includes step-by-step instructions for setting up and running Onlook, as well as demo projects and optional manual setup methods. The project is actively developed with regular updates and contributions from the community are encouraged.
- 8
LambdaTest·2y
CSS Grid Best Practices: Guide With Examples
CSS Grid is a powerful layout system for creating complex, responsive grid-based layouts. Adhering to best practices such as using flexible units like *fr* or *minmax*, choosing between explicit and implicit grids, and testing for responsiveness can significantly enhance your web designs. Additionally, combining Grid with other layout methods like Flexbox, nesting grids, and using multiple grids on a page can provide additional flexibility and modularity in your layouts.
- 9
UX Planet·2y
Corner Radius of Nested Elements in UI design
Using the same corner radius for both parent and child elements in UI design can lead to inconsistent visual gaps. To achieve better visual balance, consider using a slightly smaller corner radius for child elements and apply the formula: Outer radius = Inner radius + Padding. It is also important to use visual judgment to spot any imbalances.
- 10
AI Tools Every UX/UI Designer Needs to Try!
Explore a variety of powerful AI tools designed specifically for UX/UI designers, from creating animations and illustrations with LottieFiles, to practicing design interviews with Google's Interview Warmup. Learn how tools like Miro AI and Maze AI can assist in organizing ideas and research work, and discover platforms like Skill AI for enhancing your skills. Lastly, find out how AI tools like Relume and Wegic can simplify website building for designers who aren't familiar with coding.
- 11
Substack·2y👵 Use boring sign-up screens
Functional sign-up screens, which emphasize practicality and usability, outperform delightful designs that aim for emotional engagement. Experiments with companies like Ring, Alltrails, Nextdoor, and Spotify show that simplistic designs lead to higher user sign-ups. Distracting elements like videos and illustrations can reduce effectiveness by diverting attention from CTAs and increasing app download sizes in regions with slower internet speeds.
- 12
Dev Squad·2y
Meraki UI is a collection of responsive Tailwind CSS components that enhance the user experience of your website. with support for RTL languages, and a sleek Dark Mode.
Meraki UI offers a collection of responsive Tailwind CSS components designed to enhance user experience, with support for RTL languages and Dark Mode.
- 13
Dark Theme: 5 UI Design Tips
When designing dark themes, it's important to avoid pure black backgrounds, use legible fonts, adjust shadows to avoid harsh contrasts, avoid saturated colors to meet accessibility standards, and maintain consistency with the light theme. These principles help create a comfortable and visually appealing user experience.
- 14
- 15
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.
- 16
Shadows in UI design: Tips & Tricks
Effective use of shadows can enhance both the visual appeal and functionality of a UI. Different types of shadows, such as soft, strong, and inner shadows, serve varied purposes. Choosing the right color, maintaining consistency in elevation, using interaction-based shadows, deciding on a light source, layering shadows, and considering performance are key design tips. Tutorials for creating shadows in Figma are also included.
- 17
LogRocket·2y
Optimizing CSS time-based animations with new CSS functions
Discover how new CSS functions like mod(), round(), and trigonometric functions simplify the creation of time-based animations, offering increased flexibility over traditional keyframes. Understand the advantages, examples, and implementation strategies for utilizing these functions in web development to enhance user experience. Explore comparisons between CSS functions, CSS keyframes, and JavaScript for dynamic animations.
- 18
Tabler: Premium dashboard template with responsive and high quality UI
Tabler is a free and open-source web application UI kit based on Bootstrap 5, featuring hundreds of responsive components and multiple layouts. It offers a modern, user-friendly design that is fully customizable and compatible with all modern browsers. It also includes a dark mode option, providing high contrast and reduced eye fatigue, and is trusted by hundreds of developers and designers for its efficiency and beautiful icons.
- 19
YouTube·2y
Learn CSS Flexbox in 20 Minutes (Course)
Learn the essentials of CSS flexbox to create responsive and efficient web layouts. The post covers core concepts such as aligning items using justify content and align items properties, the significance of the main and cross axes, and properties like flex direction, flex wrap, flex grow, and flex shrink. Practical examples demonstrate how to manage spacing and positioning, making your webpages adaptable to various screen sizes.
- 20
State of CSS 2024
CSS is evolving rapidly, with new capabilities such as calculating square roots and building scroll-triggered animations. The State of CSS 2024 survey aims to track these advancements and gather community feedback to inform browser vendors. The survey is open to anyone who writes CSS and takes around 15-20 minutes to complete. Results will be released shortly after the survey period, which runs from August 17 to September 7, 2024.
- 21
The 10 best React Native component libraries you should know
When building a React Native app, it's efficient to use component libraries to speed up development. These libraries offer pre-developed, customizable UI components that support both iOS and Android platforms. Notable libraries include React Native Paper, React Native Elements, UI Kitten, RNUIlib, Shoutem UI, Lottie React Native, React Native Maps, React Native Gifted Chat, Tamagui, and gluestack UI. Each offers unique features, theming support, and various levels of customization and platform compatibility.
- 22
Collections·2yLesser-Known HTML Attributes: Examples and Use Cases
HTML provides numerous lesser-known attributes that enhance web development by improving user experience, security, and performance. Attributes like `autocomplete` for `<input>` fields, `srcset` for responsive `<img>` tags, `download` for `<a>` links, and many more offer practical use cases for streamlining form interactions, ensuring appropriate media loading, and managing input ranges. Utilizing these attributes can lead to more dynamic and efficient web applications.
- 23
- 24
9 Free AI Tools for Freelance Designers to Try
Freelance designers can enhance their workflow with these 9 free AI tools. Tools like Perplexity for summarizing websites, Fontjoy for creating font pairs, Bigjpg for enlarging images, and SinCode.ai for generating high-quality content, can significantly boost productivity. Other tools such as tl;dv for meeting summaries, Relume for design elements, MyMind for organizing creative ideas, and YouTube Summary for summarizing videos can streamline various tasks. Midjourney and Leonardo AI further aid in generating innovative design concepts and automating design tasks.
- 25
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.
