UX Planet·2yHover Effect in UI Design: Tips & Tricks
Hover effects in UI design enhance interactivity and provide feedback to users. Use them to highlight interactive elements, offer contextual information, and reinforce brand identity. Opt for subtle animations, maintain uniform effects for similar elements, and ensure the timing is just right for smooth transitions.
David Heinemeier Hansson·2yPasswords have problems, but passkeys have more
Implementing passkeys can be extremely complex and their user experience is often subpar. Even in ideal conditions with synced devices, they can pose challenges, especially if access is needed from a non-primary device. While passwords have their issues, such as potential breaches if reused across services, passkeys aren't necessarily a better solution. Using email as a second factor on the first login from a new device is a viable alternative. The author concludes that the complexity and challenges of passkeys don't justify their use over traditional passwords and email-based 2FA solutions.
LogRocket·2yTypes of fonts and when to use them
Understanding typography is crucial for creating clean, high-quality websites. Typography affects visual hierarchy, readability, and user experience. Different font types like serif, sans-serif, script, and display serve various purposes and convey different moods. Key considerations include accessibility, font contrast, and pairing techniques. Tools like Fontshare, Fontjoy, and WhatFont can help in selecting and combining fonts effectively.
Community Picks·2yWhy do all websites look the same?
toddle aims to revolutionize software development with a focus on creating an engaging, interactive environment where developers can build without extensive sign-up processes. It emphasizes experiences over explanations, speed, and high performance, and encourages a collaborative and creative community. Users can clone and customize toddle's public packages, showcasing the platform's commitment to transparency and innovation.
UX Planet·2yPractical Guide To Icon Design
Icon design balances clarity, simplicity, and visual appeal. Key UX recommendations include using icons functionally, ensuring simplicity, maintaining a uniform style, avoiding ambiguity, and testing readability at small sizes. UI recommendations emphasize aligning objects to a pixel grid, designing in multiple sizes (16x16, 24x24, 32x32 px), maintaining consistent stroke widths, respecting border radius guidelines for different platforms, simplifying smaller icons, and matching icon style to typeface. Designlab offers courses to advance your UI/UX design skills.
Kevin Powell·2yImprove your forms with this underused HTML element
Learn how to enhance user experience in forms by using the HTML datalist element. The datalist attribute allows you to create dropdown lists for input fields, which can be used for text, color, and time inputs. This lets users choose from predefined options while still allowing manual input.
Nordic APIs·2yA New Approach to Writing API Documentation
Great API documentation is essential for successful API integration. Laura Rubin, a Staff Technical Writer at Nylas, highlights the importance of aligning documentation with user expectations and points out key indicators of poor documentation, like long implementation times and high support tickets. She suggests involving new hires and support teams to identify improvement areas and emphasizes the need for clear, organized, and user-focused content. Rubin also advocates for maintaining documentation usability for future maintainers, using opinionated tooling, and adopting best practices from professional writing to ensure clarity and confidence in API docs.
Bootcamp·2yCase study: WhatsApp scheduled message feature
This post delves into the design process and user research behind creating a scheduled message feature for WhatsApp. Inspired by a personal experience, the feature aims to help users send timely messages by allowing them to compose and schedule messages for later delivery. Key insights were gathered from informal interviews, and prototypes were created and tested for intuitive use. Future enhancements like recurring messages and templates are also discussed.
Medium·2yDesigning an AI-Enhanced Storytelling App
The designed app, Wuri, leverages AI to transform traditional storytelling into an immersive, visual experience. The enhanced app replaces static texts with images, videos, and audio, allowing users to personalize and interact with stories more dynamically. Key insights from the research, including user personas and competitive benchmarking, informed the design process, focusing on seamless navigation, user engagement, and a simplified onboarding process. Future improvements could include features such as a dark theme and enhanced community interactions.
LogRocket·2yChoosing the best color combinations for UX design
Colors play a crucial role in UX design by enhancing usability, brand identity, and emotional connections. Understanding color psychology, the color wheel, and principles like the 60-30-10 rule can help designers create effective color combinations. Tools such as PaletteMaker, Adobe’s Contrast Checker, and Adobe Color aid in selecting and testing palettes. Designers must ensure their choices meet accessibility standards and consider user behavior through A/B testing. Real-world examples like Headspace and Mondly illustrate the impact of thoughtful color selection in UX.
Codrops·2yA Selection of Creative Menu Patterns & Animations
Choosing the right menu pattern for a project can be challenging due to the plethora of options available. This curated list offers a variety of creative and stylish menu patterns and animations to provide inspiration. From minimalistic to playful designs, these examples aim to spark new ideas for your projects.
Web Design·2yTop 3 Best Websites for Web Design Inspiration and Ideas
Finding inspiration is crucial for web designers and developers. This post highlights three top websites for web design inspiration: Webspirre, which offers a free and focused platform; Mobbin, which specializes in mobile app design with premium features; and Dribbble, known for its community-oriented, diverse design categories. Each platform has unique strengths, with Webspirre being the top choice for dedicated web design inspiration.
Netguru·2yMobile Web Development: Creating Mobile-Friendly Sites
Over 55% of online traffic comes from mobile devices, making mobile-friendly websites essential. With Google switching to mobile-first indexing, evaluating mobile solutions like responsive design, dynamic serving, or separate mobile sites is crucial. Each approach has unique advantages and drawbacks. Key technical considerations include proper width properties, lazy loading, and SEO optimization. Depending on the complexity, website owners can choose between DIY tools or professional development to optimize for mobile.
Community Picks·2yA-Z of Product Psychology
This comprehensive A-Z list explores various psychological effects that influence user behavior and decision-making. It covers concepts such as the Anchor Effect, where the first piece of information influences decisions, the Bizarreness Effect, which shows unusual information is remembered more easily, and the Zeigarnik Effect, where people recall uncompleted tasks more than completed ones. Understanding these effects can be crucial for enhancing user engagement and satisfaction.
asayer·2yThe Power of Visual Hierarchy in Web Development
Visual hierarchy is an arrangement of design elements that guides users through a website by emphasizing what's most important first. Key principles include size, color, contrast, alignment, and whitespace to improve user experience, navigation, readability, and brand consistency. Examples from Tesla and Nike demonstrate effective visual hierarchy, encouraging user interaction and engagement. Practical steps for implementing visual hierarchy in web design include planning, assigning roles, and designing while avoiding common mistakes like overcomplication and poor responsiveness.
Netguru·2yInspiring Web Development Case Studies
Discover eight unique web development case studies that showcase innovative design and user experience enhancements from Netguru and major brands like Dropbox, Apple, Shopify, and Rodo. Learn how these projects improved UX, leveraged AI, and incorporated modern web technologies to create impactful online experiences. This compilation aims to inspire and guide your own web development projects to enhance usability, performance, and overall user satisfaction.
Community Picks·2yNormal UI: A Usability Technique For Non-Designers
Normal UI is a usability technique developed for non-designers that aims to improve web app usability through a concrete framework. This method involves deciding between normalized and denormalized workflows based on user tasks to reduce cognitive load and improve user experience. It also offers technical benefits such as easier routing, accessibility enhancements, and performance optimization. The author emphasizes the importance of usability in successful web apps and provides a foundation for making impactful usability design decisions without needing extensive design expertise.
Medium·2yStop blaming the UX job market and fix your portfolio!
Many designers are struggling in the UX job market due to low-quality portfolios, not a lack of demand. Avoid cramming all your work into your portfolio, establish clear context in case studies, and be honest about your skills. Improve your attitude towards portfolio creation and iterate on it regularly to enhance your job prospects.
Community Picks·2yHow to Rewrite a Web Application
Rewriting a web application should not start with choosing the technology stack but rather with understanding the existing application through detailed research. Avoid simply recreating features; instead, identify and address real user needs and problems. Utilizing user feedback, existing data, and modern solutions can save time and money. Iterative releases and practical design choices based on user workflows can lead to a successful and more efficient software rewrite.
UX Planet·2yDesign System Contribution Models
Contribution models allow product teams to enhance design systems without compromising quality. This post reviews three popular models: Nordhealth's hybrid model, which balances centralized control with team input; Pluralsight's waste reduction model, which focuses on minimizing redundant efforts; and Canonical's code quality model, which includes a decision tree and emphasizes QA in pattern creation. Each model has a distinct process for introducing and reviewing changes to maintain or improve the system's integrity.
Netguru·2yThe Difference Between Web Design And UX Design
Web design focuses on the visual aspects of a website, including layout, colors, fonts, and graphics to create an appealing appearance and strong brand identity. In contrast, UX design aims to ensure the website is functional, usable, and provides a satisfying user experience. Both are essential for creating a successful digital product, with web designers focusing on aesthetics and brand consistency, while UX designers concentrate on usability, accessibility, and user satisfaction. Effective collaboration between these disciplines can significantly improve website conversions and overall user engagement.
DesignCourse·2yAwwward Winning Websites Gone Wrong
The post critiques several award-winning websites that, despite their recognition, exhibit significant UX flaws. Common issues include excessive and fast-moving video backgrounds, laborious scrolling requirements, overuse of video-based animations without smooth scrolling, and visually cluttered or overly complex designs. The author emphasizes the importance of avoiding these pitfalls even in creative or award-winning web projects.
LogRocket·2yHow to create a hamburger menu
The hamburger menu, characterized by its three horizontal bars, is a widely used UI element for hiding additional navigation options in mobile and web interfaces. Its use began with the advent of mobile interfaces to save space and simplify designs. While it offers advantages like reducing clutter and cognitive load, it has drawbacks including reduced discoverability and increased interaction costs. Effective use requires careful consideration of the user's needs and context, with alternative navigation icons like the bento and kebab offering different visual and functional benefits. Usability testing and best practices, such as clear labeling and appropriate placement, are essential for maximizing the menu's effectiveness.
