Best of UX — December 2023

  1. 1
    Article
    Avatar of bootcampuxdesignBootcamp·2y

    LinkedIn, But Better

    The article discusses the need for a redesign of LinkedIn due to UX frustrations, such as a lack of a 'Saved' option and limited article discoverability. The redesign aims to make the platform more accessible, less cluttered, and personalized. It introduces features like a 'Saved' option, improved networking functions, a home screen for 'Stories,' and a separate tab for articles. The design also focuses on dark mode, consistent icons and components, and a standardized notification format.

  2. 2
    Article
    Avatar of medium_jsMedium·2y

    UX/UI Design Trends Going Into 2024

    The article discusses various design trends that are expected to continue into 2024, including Bento boxes in UI design, spatial design and leaps in technology, the accessibility and personalization trends in UX design, and the rise of AI-powered design tools.

  3. 3
    Article
    Avatar of medium_jsMedium·2y

    Top UI/UX Design Tips: How to Design a Great Bottom Mobile Navigation Bar, part 6

    The article provides tips for designing a great bottom mobile navigation bar. It covers topics such as choosing the right sizes, limiting the number of tabs, designing thumb-friendly tap areas, differentiating active and inactive states, choosing simple and familiar icons, keeping navigation labels short, and more.

  4. 4
    Article
    Avatar of uxplanetUX Planet·2y

    Dark Mode UI Design Best Practices

    Dark mode is a night-friendly UI design style that reduces eye strain and improves battery life. It focuses on delivering good user experiences by reducing glare and directing attention to content. However, it can pose accessibility and branding issues. Following best practices such as using darker shades of black, avoiding saturation, and testing in various lighting settings can help designers seamlessly integrate dark mode into their designs.

  5. 5
    Article
    Avatar of medium_jsMedium·2y

    Bento Style & Compartmentalisation in UI Design

    Compartmentalization in UI design is about organizing elements to optimize user interaction. The Bento design style, inspired by Japanese Bento boxes, uses card-based or grid layouts for clarity and ease of use. It offers visual clarity, organizational elegance, and enhances user experience with intuitive layouts. Pros of the Bento design style include enhanced user experience, aesthetic appeal, and flexibility, while cons include space limitations, complexity in design, and potential over-segmentation.

  6. 6
    Article
    Avatar of logrocketLogRocket·2y

    Implementing scroll-aware UI state with CSS

    Scroll-aware UI state can improve website user experience by dynamically responding to the user's scrolling action on a webpage. This article explores how scroll-aware UI can be implemented using CSS-only solutions and discusses the limitations of such approaches.

  7. 7
    Article
    Avatar of bootcampuxdesignBootcamp·2y

    7 New Apps/Websites to explore as UX/UI designer

    Discover 7 new apps/websites for UX/UI designers, including Visily for brainstorming and prototyping, MingCute icons for micro animations, Rebrand and FreeFaces for inspiration, ls.graphics and Mr.mockups for mockups, and Wave for accessibility. Plus, Science Direct for research on user experience design.

  8. 8
    Article
    Avatar of dwbDavid Walsh·2y

    AutoGrow Textareas with CSS

    CSS now supports native language improvements for automatically expanding textarea elements. By adding the field-sizing property with a value of content, textarea elements can grow vertically and horizontally. The default value for field-sizing is fixed, but the new behavior of content allows for maximum expansion. To constrain the size a textarea can grow, the width/max-width and height/max-height properties can be used.

  9. 9
    Article
    Avatar of logrocketLogRocket·2y

    Advanced page transitions with Next.js and Framer Motion

    Learn how to use Next.js and Framer Motion to create subtle and elegant page transitions on your website. Page transitions help engage users and improve the overall user experience, but they should be used appropriately and with consideration for the context and content of the website.

  10. 10
    Article
    Avatar of hnHacker News·2y

    Back to Basics: 5 HTML attributes for improved accessibility and user experience

    This article explores five HTML attributes that improve accessibility and user experience. These attributes include hreflang, translate, reversed, controls, and autocomplete.

  11. 11
    Article
    Avatar of communityCommunity Picks·2y

    The UX of UUIDs

    Unique identifiers can be enhanced for better user experience by making them easier to copy, adding prefixes for differentiation, using more efficient encoding like base58, and changing the entropy to generate shorter IDs while maintaining uniqueness.

  12. 12
    Article
    Avatar of uxplanetUX Planet·2y

    Glaring UX Mistakes on Real Apps — Part 1

    Learn from existing design mistakes to improve your own design journey. This article highlights five common UX mistakes found in real apps and provides tips for avoiding them.

  13. 13
    Article
    Avatar of uxplanetUX Planet·2y

    8 Figma Plugins I Use Every Week

    Discover eight Figma plugins that improve performance and add functionality, including Vector Logos for finding and adding company logos in SVG format, Image Tracer for converting raster graphics to vector graphics, and Noise & Texture for applying noise effects and textures to objects.

  14. 14
    Article
    Avatar of asayerasayer·2y

    Error handling in React: a Guide to Error Boundaries

    Error Boundaries in React are components that catch errors within their child components, preventing the entire application from crashing. They improve user experience by displaying a fallback UI and help developers isolate and debug errors. To create an Error Boundary component, you need to implement the static getDerivedStateFromError and componentDidCatch lifecycle methods. Wrapping components with Error Boundaries provides a more resilient and user-friendly web experience in React applications.

  15. 15
    Article
    Avatar of logrocketLogRocket·2y

    What is a website’s hero section? Best practices, tips, examples

    Learn about hero sections on websites, including their purpose, key elements, and best practices for designing an effective hero section. Discover how to use high-quality images, concise text, prominent CTAs, and balanced design to capture and retain user attention. Consider incorporating videos and utilizing A/B testing to optimize your hero section.

  16. 16
    Article
    Avatar of asayerasayer·2y

    CSS Scroll Progress Animations: Mastering the Technique

    CSS scroll progress animations are a technique used in web design to enhance the user experience through visually engaging and informative scrolling indicators and animations. They improve user engagement, navigation, user experience, usability, visibility of scrolling, and aesthetic enhancement.

  17. 17
    Article
    Avatar of uxplanetUX Planet·2y

    Icon Design Trends For 2024

    Icon design trends for 2024 include minimalism, three-dimensional forms and realism, abstractionism and geometry, microinteractions and animations, Art Deco, organic and sustainable elements, and grainy aesthetics.

  18. 18
    Article
    Avatar of medium_jsMedium·2y

    Navigation patterns in mobile applications. How to make the right choice?

    Navigation is a crucial component in any mobile application, and the choice of navigation patterns significantly impacts the user experience. This article explores the main types of navigation, such as the tab bar, sidebar, search-based navigation, and top bar. It discusses the pros and cons of each pattern and provides examples of their implementation. Additionally, the article highlights platform-specific considerations and discrepancies between iOS and Android. The importance of selecting the right navigation mechanics based on the goals and needs of the application is emphasized.

  19. 19
    Article
    Avatar of uxplanetUX Planet·2y

    7 UX/UI Design Trends in 2023: Innovations in User Experience

    This article explores seven important UI/UX design trends for 2023 and beyond, including the buttonless UI, the resurgence of light mode, the importance of personalization, data storytelling, minimalism, the use of AR/VR in UI design, and the impact of bold typography.

  20. 20
    Article
    Avatar of communityCommunity Picks·2y

    Elevate Your Site's UX: Pro Tips on Minimizing Cumulative Layout Shift

    Learn about Cumulative Layout Shift (CLS), its importance for user experience and site ranking, and how to improve it.

  21. 21
    Article
    Avatar of systemweaknessSystem Weakness·2y

    Securing the Frontend: A Practical Guide for Developers

    Balancing frontend development and cybersecurity is crucial for creating a secure digital ecosystem. Understanding and mitigating threats like XSS and CSRF is essential. Best practices include secure coding, input validation, Content Security Policy (CSP), monitoring, and updates. Integrating security into the user experience involves clear communication, streamlined authentication, progressive information disclosure, user education, and customization. Real-world case studies from Google, GitHub, Facebook, Stripe, and Slack show successful security implementations. Developers are encouraged to prioritize security from the beginning and continue learning and evolving in the ever-changing threat landscape.

  22. 22
    Article
    Avatar of uxplanetUX Planet·2y

    The Most Influential Psychological Studies on UX Design.

    Learn how psychological studies have influenced UX design by understanding concepts such as selective attention, the capacity of human working memory, and the impact of Fitt's Law and Hick's Law on user experience design. Avoid the Hawthorne Effect in user testing and research.

  23. 23
    Article
    Avatar of uxplanetUX Planet·2y

    6 Free Illustration Packs all Designers should Explore

    Explore six outstanding free illustration packs for designers that can enhance the aesthetic and emotional appeal of designs.

  24. 24
    Article
    Avatar of uxplanetUX Planet·2y

    The curious case of footers in UX design

    Explore the evolutionary journey of footers in UX design, from simple and utilitarian to interactive and integrated with the overall design. Discover their purpose and appreciate the role they play in website development.

  25. 25
    Article
    Avatar of logrocketLogRocket·2y

    Data table design: Best practices for better UX

    Learn best practices for designing data tables and creating a better user experience. Understand the importance of storytelling through table design, consider responsiveness and editing options, and implement search, sort, and filter functionalities. Follow design system principles and optimize readability through alignment, font size, and color choices.

See all UX archives