Best of UX — August 2024
- 1
- 2
Community Picks·2y
Nue 1.0 (Beta)
Nue 1.0 (Beta) introduces an intuitive web framework designed for UX developers. It simplifies web development, reducing reliance on extensive JavaScript and complex frameworks like React. Key features include a global design system, improved CSS theming, seamless view transitions, and easier setup. The latest release also includes extensive documentation and various enhancements to streamline building professional websites quickly and efficiently.
- 3
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.
- 4
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.
- 5
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.
- 6
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.
- 7
Prismic·2y
Top 13 Landing Page Optimization Best Practices in 2024
Website landing pages are crucial as they serve as the first point of contact between a business and potential customers. Optimizing these pages can significantly boost user conversions. Key practices include enhancing user experience, simplifying navigation, crafting clear CTAs, utilizing social proof, optimizing forms, focusing on SEO, ensuring fast load times, using high-quality visuals, maintaining accessibility, adopting a mobile-first design, and conducting A/B testing. Tools like Prismic can aid in efficiently managing and optimizing landing page content.
- 8
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.
- 9
Web Developer·2y
HTTPS 🔒, UDP 📡, UX Design Inspiration 🎨, Modern Audio/Video Players 🎧
This issue features a comic-style guide on HTTPS, an introduction to code coverage, and an explanation of UDP's advantages for real-time applications. It also includes resources for UX design inspiration, an in-depth guide on `tsconfig.json` fields, and several tools for web developers, such as a collection of UI/UX patterns, a crowdsourced toolkit for startup founders, and an open-source framework for creating HTML emails. Additionally, a versatile UI component library for building audio/video players on the web is highlighted.
- 10
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.
- 11
Hacker News·2y
The UX of HTML
A lecturer discusses shifting focus from semantic HTML to the user experience (UX) of HTML to engage students better. By demonstrating practical UX benefits of well-structured HTML, such as form labels and proper link elements, students show increased interest and understanding. The piece suggests emphasizing the interactive aspects of HTML before teaching the theoretical elements like heading levels and sectioning elements.
- 12
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.
- 13
Medium·2y
The 80/20 rule in design job interviews
Design job interview success heavily relies on the case study presentation, which should capture 80% of your preparation time. The 80/20 rule (Pareto Principle) emphasizes investing more effort into this critical aspect as it demonstrates your design process and communication skills. Preparing visually appealing slides with minimal text and telling a compelling story are key strategies. Practicing extensively and handling follow-up questions confidently further enhances your presentation, making you a standout candidate.
- 14
Line Chart UI Design Tips & Tricks
Line charts are ideal for illustrating changes over time, comparisons, and trends. To create effective line charts, limit the number of data lines to avoid clutter. Use a neutral background and a minimal, distinct color palette to enhance readability. Employ shapes and textures alongside colors for better data communication and ensure the design meets WCAG AA contrast requirements. Provide enough space for labels and incorporate interactive elements like hover states and tooltips to enrich user experience.
- 15
swizec.com·2y
Tips from 8 months of TanStack/Router in production
The post shares battle-tested patterns and lessons from using TanStack Router in production, emphasizing type-safe routing, router-coordinated data loading, and a design that minimizes UI loading states. The app follows file-based routing to mirror URL structure and focuses on supporting multi-tasking, easy context sharing, and unguided navigation for power users. The author highlights the importance of treating horizontal concerns as libraries, leveraging data loaders for whole pages, and using suspense queries for individual components to optimize performance.
- 16
AlternativeTo·2y
Search engine Kagi launches preview of enhanced AI Assistant with advanced features
Kagi has launched a preview of its enhanced AI Assistant for Ultimate subscribers, introducing advanced features such as leveraging top LLM models, saving assistant threads, and customizable assistants. The assistant allows control over internet access and system instructions. Both the old and new versions of Kagi Assistant are available, with future updates aiming to improve the UI/UX, particularly for mobile users.
- 17
j3s.sh
The post expresses frustration with the complex and cluttered output of command-line utilities like `df` and `mount` in the Linux ecosystem. It critiques the disjointed design arising from independently developed programs being merged together, a phenomenon termed 'trainwreck design.' The author discusses the drawbacks of bazaar-style (open community) development where a coherent vision is often lost. They suggest a hybrid model, 'the hive,' with leaders who inspire and guide the project without acting as dictators, aiming to balance community collaboration and coherent design.
- 18
LogRocket·2y
Color psychology chart: Understanding color meanings and effects
Color psychology, a study of how colors affect mood and behavior, is a powerful tool in marketing, branding, and web design. Different colors evoke different emotions and reactions. For instance, red can invoke action and urgency while blue can induce calmness and security. Brands like Coca-Cola and Facebook use specific colors to align with their brand stories and evoke desired customer reactions. A step-by-step plan for leveraging color psychology in UX design includes learning the basics, picking emotions to evoke, matching colors with branding, ensuring cultural consistency, and creating a cohesive color palette.
- 19
- 20
Bootcamp·2y
I took the long way home but I am almost home.
A UX designer shares their journey from struggling with a lack of direction and guidance to finding a clear path and achieving their career goals. Highlights include the challenges faced, the importance of acknowledging one's limitations, access to mentorship programs, and the role of continuous learning and community support in professional growth. The story concludes with the author landing their first design job and starting a podcast to share their experiences.
- 21
LangChain·2y
UX for Agents, Part 2: Ambient
The post explores the idea of ambient agents in AI, which work in the background to handle tasks more effectively than chat-based interfaces. It emphasizes building trust in these agents by displaying their actions and allowing user corrections. The transition from 'human-in-the-loop' to 'human-on-the-loop' is highlighted, with agents being able to pause for human feedback before continuing tasks. Examples include an email assistant that seeks human input when needed. The approach aims to enhance human capabilities by efficiently managing multiple tasks simultaneously.
- 22
No More Boring Apps
Modern product design has become repetitive and uninspired, often prioritizing scalability and broad appeal over creativity. The post draws parallels between the craft beer industry and app development, arguing for a more specialized approach in app design that embraces unique, creative perspectives. It calls for designers to break from the formulaic approach and aim to create applications that are more meaningful, inspiring, and reflective of personal passion.
- 23
Chrome Developers·2y
Scroll Snap Events
From Chrome 129, new JavaScript events `scrollSnapChange` and `scrollSnapChanging` enable more precise control over snap targets within scrolling contexts. `scrollSnapChange` fires after the scroll gesture ends and a new snap target is established, while `scrollSnapChanging` fires during the scrolling process when a potential new snap target is determined. These events unlock new possibilities for scroll snap interactions, including animations, linked scrollers, and various UI enhancements.
- 24
asayer·2y
Creating Custom Cursors for Better User Experience
Custom cursors can enhance user experience by boosting engagement, reinforcing brand identity, and enhancing storytelling. Key considerations include ensuring clarity and simplicity, cohesiveness with website design, and cultural appropriateness. Tools like Figma or GIMP can help create cursor images, and CSS can be used for integration. Optimize cursor files for performance and accessibility, and apply custom cursors strategically to improve user interaction.
- 25
Draw your own maps
The post discusses the importance of creating clarity and structure in the workplace, especially for designers. It highlights the necessity for individuals to independently identify and solve problems for career growth. The author outlines three tools to aid in this process: asking questions, creating design briefs, and facilitating workshops. By leveraging these methods, employees can define success and align their teams towards common goals.
