Medium·2yDesign better pagination
This post covers pagination UI best practices, including navigation, numbered representation, truncating page navigation, first and last buttons, subtle styling, showing the count, amount per page, go to page input field, pagination page placement, data table bulk selection considerations, pagination vs infinite scroll, and when to use numbered navigation.
freeCodeCamp·2yWhat are Progressive Web Apps? PWA Guide for Beginners
Progressive Web Apps (PWAs) are installable web applications that combine the best parts of websites and mobile apps. They provide a high-quality user experience, work offline, have minimal storage requirements, and offer automatic updates and push notifications. PWAs are cost-effective to develop, compatible with multiple devices, and have a reliable offline performance. The core concepts of PWAs include service workers, the app manifest, and caching.
Codemotion·2y10 Documentation Tools You Must Try in 2024
Innovative and evolving documentation tools are streamlining the process of creating accurate and useful documentation. These tools prioritize user experience, collaboration, and integration with other development tools. The recommended tools of 2024 offer user-friendly interfaces, real-time collaboration features, and intelligent automation.
Community Picks·2yMental Models and User Experience Design
Mental models play a crucial role in user-interface design and influence how users interact with an interface. Users create mental models based on their background knowledge and past experiences. Examples of mental models in web design include online shopping carts, the behavior of the back button, and search bars. It is important for designers to understand and leverage users' mental models to create interfaces that align with their expectations.
Community Picks·2yHow I'm Writing CSS in 2024
CSS in 2024 is becoming easier and more powerful with support for container queries, nesting, and other exciting features. Recommendations include optimizing styles for fast loading, styling solutions like CSS modules, Tailwind CSS, and StyleX, and considering streaming in the development process.
UX Planet·2y7 Apps & Websites I use every day as a UX/UI designer
Discover seven apps and websites that UX/UI designers can use to enhance their work beyond Figma. Explore Mobbin for design inspiration, Lyssna and Maze for user research, Typeform for gathering data, and Fonts In Use, DesignStripe, and PaletteMaker for visuals and UI.
Medium·2yThe Dos and Don’ts of Mobile UX/UI Design
Designing exceptional mobile user experience and intuitive user interface is crucial for success. Prioritize user-centric design, responsive design, intuitive navigation, consistency, optimize load times, thumb-friendly design, clear CTAs, visual hierarchy, feedback and confirmation, usability testing and iteration. Avoid overwhelming users with information, ignoring platform guidelines, complex forms and inputs, tiny or overcrowded touch targets, intrusive pop-ups and ads, ignoring accessibility, auto-play multimedia, unclear error handling, excessive user permissions, skipping user testing, and ignoring feedback.
Medium·2yIntroducing ‘Quick Bite’: My UX Project from Google’s Course
Introducing 'Quick Bite', a food ordering app concept focused on providing healthy meal choices quickly and easily. The app aims to address pain points such as slow service, overwhelming menu choices, lack of customization, and insufficient nutritional information. The post outlines the project phases, user research findings, personas, competitor analysis, user flow, storyboards, wireframes, prototype, and usability study.
asayer·2yEnhancing Performance with React Query's Caching
Learn how React Query's caching feature can enhance performance by reducing unnecessary server requests. Understand the concepts of cacheTime and staleTime, and how to adjust them to meet the needs of your application. Improve user experience by customizing data query needs and decreasing load times.
UX Planet·2yFree Notion Templates For Product Designers
A curated collection of Notion templates for product designers including research question bank, service blueprint, design specification template, prototyping questions, usability testing report, usability testing script, and usability testing hub.
LogRocket·2yA UX designer’s guide to 40 essential UI elements
This post explores 40 essential UI elements that UX designers should be familiar with in order to provide the best user experiences. It covers a wide range of elements, including accordions, badges, menus, cards, carousels, charts, checkboxes, comments, and more.
Medium·2yFit.Nest: Elevating fitness experiences — a UI/UX case study
Fit.Nest is a unique, inclusive, and community-centric fitness and wellness app that addresses the problem of solitary home-based exercise routines. The app offers a one-stop wellness hub that saves time, provides expert guidance, and offers a variety of activities. The design process involved user research, competitive analysis, and the creation of wireframes and prototypes. The focus was on user-centric design and continuous improvement through iterations.
LambdaTest·2yHow to Use CSS Position Sticky [With Examples]
Learn how to use CSS position sticky to create sticky elements on a webpage. Enhance user experience and engagement by keeping important information on the screen at all times. Explore the potential of sticky positioning in modern web design with real-world examples.
Community Picks·2yIs it time for :focus-visible?
:focus-visible is a CSS pseudo-class that helps improve user experience and accessibility by showing focus on interactive elements. It allows browsers to apply the focus indicator based on user characteristics and interactions. The use of :focus-visible is recommended for better accessibility and personalized experiences.
UX Planet·2yGrid Systems in Design
A grid system is a foundational structure of columns and lines essential for achieving consistent layouts. There are four distinct types of grids: manuscript grid, column grid, modular grid, and hierarchical grid. Responsive layouts dynamically adjust based on device breakpoints, allowing for customised designs across various screen sizes.
asayer·2yUnlocking CSS Scroll Snaps for Intuitive Web Navigation
Learn how to unlock CSS Scroll Snaps to produce better UX and create easily navigable websites. Understand the properties associated with controlling the scrolling behavior of a website and discover real-world applications of CSS scroll snap.
Community Picks·2yHow to deliver the first MVP of your startup the right way
Learn how to develop and launch a successful Minimum Viable Product (MVP) for your startup. This article explores the importance of MVPs, key components of an effective MVP, steps for development, considerations for design, market research strategies, marketing strategies, best practices, common mistakes to avoid, and successful case studies.