Best of UI Design — December 2023
- 1
- 2
Bootcamp·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.
- 3
- 4
Medium·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.
- 5
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.
- 6
Community Picks·2y
Light & Dark Mode in Next.js App Router + Tailwind with No Flicker
Learn how to apply light and dark mode themes with TailwindCSS in a Next.js app using the next-themes package. Discover the challenge of toggling between themes in Next.js and how next-themes can help avoid page flickering when changing themes.
- 7
UX 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.
- 8
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.
- 9
- 10
- 11
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.
- 12
Towards Dev·2y
Mastering the Flip: A Step-by-Step Guide to Crafting an Eye-Catching HTML CSS Flipping Card UI Design
Learn how to create a mesmerizing flipping card UI design using HTML and CSS. This step-by-step guide provides all the necessary steps to craft an eye-catching card with a flip effect. Enhance your web development skills and implement this creative technique in your projects to create stunning user interfaces.
- 13
Creating and coding a Design System from scratch (co-authored by Zuzanna Sobiecka)
Guidelines and considerations for creating and coding a Design System from scratch. A Design System provides consistency for a brand, speed for designers, and a modular and reliable Component Library for developers. Starting a Design System can be done by deriving it from existing design or code. The DS doesn't need to be complete to be useful. Tokens play a key role in the Design System, simplifying communication between Dev and Design. The DS can evolve and should be coded as a system. Translation of the Design System into code involves creating utility classes based on tokens. Following rules and exceptions ensures fast and consistent UI development.
- 14
The anatomy of shadcn/ui
shadcn/ui is a UI library that allows users to declare a design system as code. It distributes components through a CLI instead of an npm package, giving users ownership and control over the code. The library follows a two-layered architecture, separating structure and behavior from style. It utilizes headless UI libraries like Radix UI and React Hook Form for complex behaviors. The components are styled using TailwindCSS and Class Variance Authority, promoting consistent and reusable styles. Some key components include Badge, Switch, Calendar, Table, and Form.
- 15
- 16
Building Responsive Layouts With CSS Grid: A Step-By-Step Guide
CSS Grid is a powerful tool for building responsive layouts that adapt gracefully to different screen sizes and devices. It simplifies the process of creating responsive layouts, offers flexibility through special units and functions, and can be combined with other techniques like media queries, grid-template-areas, and reordering. Best practices for creating responsive layouts with CSS Grid include starting with semantic HTML, using clear and descriptive names for grid areas, debugging with grid inspection tools, adopting a mobile-first approach, ensuring accessibility, optimizing performance, and maintaining clear documentation.
- 17
- 18
asayer·2y
The Art of Styling Text with CSS Orientation
CSS text orientation is a powerful tool that enhances readability, design flexibility, and cross-platform consistency. It is crucial for multilingual websites, vertical text, right-to-left languages, responsive design, typography, and user interfaces. Best practices include maintaining readability, cultural awareness, establishing visual hierarchy, and balancing with other design elements.
- 19
LogRocket·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.
- 20
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.
