DEV·2y50 Best Websites for Web Design Inspiration and Ideas
Discover a curated list of 50 best websites offering web design inspiration and ideas. These resources cater to various needs, from business and ecommerce to portfolios and landing pages. Sources are categorized into multipurpose, focused, and niched inspirations, including both free and paid options. Special mentions include award galleries and website builder showcases.
LogRocket·2yNeumorphism: The new trend in UI design
Neumorphism is a UI design trend blending minimalism and realism to create modern, user-friendly interfaces with depth using shadows and highlights. It merges the simplicity of flat design with the realism of skeuomorphism, offering a balanced approach. While it provides aesthetic appeal and consistency, it poses accessibility challenges that need addressing to meet Web Content Accessibility Guidelines (WCAG). Designers can use strategic visual cues and minimal color schemes to enhance usability and compliance.
asayer·2yHTML5 Input Types You May Not Be Using
HTML5 introduces new input types that enhance user experience and provide built-in validation for various data formats, reducing the need for external scripting. These include types like color, date, datetime-local, month, week, time, range, search, tel, and url, each with specific implementations and use cases. Ensuring browser compatibility and providing fallback options are crucial for consistent user experience across different platforms.
Hacker News·2yCollection of Dark Patterns and Unethical Design
Explore various dark patterns commonly found in web and app design, categorized to help understand deceptive practices. Examples include bait and switch, confirmshaming, disguised ads, hidden costs, misdirection, nagging, privacy zuckering, roach motel, sneak into basket, and trick questions. Each category includes typical cases and specific examples.
Community Picks·2yHow Airbnb Became a Leader in UX Design
Airbnb's success is heavily attributed to its focus on user-centered design, guided by co-founder Joe Gebbia's background in Design Thinking. Notable milestones include the development of their first mobile app, the pivotal 'Bélo' logo redesign, and the establishment of their own innovation studio, Samara. In 2020, Airbnb further cemented its design-forward approach by hiring Jony Ive's design studio, Lovefrom. The company continually integrates innovative design elements such as 3D illustrations and AI-powered features to enhance user experience.
Bootcamp·2yUnderstanding the ‘Why’ behind some basic UI design practices
Understanding fundamental UI design practices helps in creating visually appealing and user-friendly interfaces. Key practices like maintaining consistent padding, using multiples of 8 or 4 for spacing, avoiding decimals, keeping line height to auto, and using a 24px frame for icons enhance design consistency and functionality. Ghost buttons serve as secondary call-to-action elements enhancing visual hierarchy.
Substack·2yOrganization Architecture
Reliability in service design hinges not on budget or staff numbers, but on the shape of the organization, and how well its structure supports communication and interaction among teams. Emphasizing consumer journeys can unlock insights to create healthier organizational designs that foster reliable systems. The article explores how collaboration within a company parallels system dependencies and highlights the detrimental impact of frequent reorganization. Upcoming discussions will cover organizational patterns such as Smorgasbord, Kebab, and Cake, and methods to optimize system reliability via effective architecture.
Community Picks·2yWeb Design Inspiration
Cleanness in web design is essential and often confused with minimalism. While minimalism emphasizes using the bare essentials, a clean design focuses on the precise positioning of important elements. A website can have many elements but still remain clean, conveying elegance. External resources for further reading include Dieter Rams' Principles of Good Design and guides on visual design.
LogRocket·2yTypes of buttons in UI design: Best practices and examples
Buttons are crucial components in UI design, serving as key interactive elements. This guide covers types of buttons (principal and additional), explains their design and usage, and explores best practices for creating effective buttons. Key points include choosing appropriate shapes, colors, and labels, ensuring button accessibility, and utilizing design tools or ready-made systems to streamline the creation process.
The Miners·2yColors on websites: Beyond Aesthetics (Part II) Finding out why website color palettes are probably way more important than you think.
Exploring the deep connection between color theory and website design, this post discusses how UI and UX principles play a crucial role in creating effective color palettes. It highlights different types of palettes like monochromatic, analogous, complementary, and triadic, offering practical tips and tools like Coolors and Canva's Color Wheel for designing harmonious and efficient websites.
asayer·2yAdd Locomotive Scrolling to Your Site
Locomotive Scroll is a JavaScript library that enhances user scrolling experiences with features like smooth scrolling, page overlay scroll, parallax effects, and more. This guide covers how to set up the library using Vite, configure various scrolling features, and implement them in a demo project. Key highlights include smooth scrolling, speed scrolling, sticky scroll, parallax scroll, and scroll-into-view animations. Integrating Locomotive Scroll can significantly improve the user experience with captivating and dynamic scrolling effects.
The Miners·2yColors on websites: Beyond Aesthetics (Part I) Finding out why colors are probably way more important than you think.
Colors play a crucial role in web design beyond mere aesthetics. Understanding color theory is essential for developers to create harmonious and meaningful color palettes that enhance user experience, increase readability and accessibility, and positively affect SEO. Different colors can evoke various emotions and perceptions, influencing how users interact with a website. Practical applications and examples from well-known brands illustrate the impactful use of color in web design.
LogRocket·2yBetter form design: A new approach
Form design is a crucial but often neglected area of UX design that can significantly impact business metrics. Effective form design can reduce dropoff rates and increase conversion. By treating forms like mini landing pages and applying principles such as limiting form fields, indicating optional fields clearly, ordering questions from easiest to hardest, and minimizing formatting errors, businesses can enhance their form performance. Each improvement, even seemingly minor, can add up to substantial gains in user engagement and conversions.
Growth.Design·2yHow small UI delighters have a huge impact on UX
Small UI delighters, such as subtle animations and thoughtful micro-interactions, can significantly enhance the overall user experience. These minute details add to the pleasure of using a product, creating a more engaging and satisfying experience for users.
Community Picks·2yPX to REM converter (instantly and bidirectional)
Get instant and bidirectional conversion between PX and REM units using conversion tables and a calculator. The conversion is based on the default font-size of 16 pixels but can be adjusted. Understand the differences between REM and EM units and how REM provides a consistent size relative to the HTML root tag.
Bootcamp·2yImproving Search Experience inside the Glassdoor App —UX/UI Case Study
This case study delves into the process of redesigning the search filter feature in the Glassdoor app, focusing on enhancing the job search experience for users. By addressing core issues such as inaccurate job location filters, irrelevant job listings, and poor navigation, the redesign aimed to improve user retention and engagement. The process involved researching competitor apps, user interviews, wireframing, usability testing, and iterating based on feedback. Key improvements included better filter discoverability, the ability to select multiple filters, and enhanced job alert management. These changes led to increased user interaction, higher job application rates, and a more streamlined, user-friendly experience.
Lobsters·2yDark mode isn't as good for your eyes as you believe
Dark mode has gained popularity for its aesthetic appeal and supposed health benefits, such as reducing eye strain and conserving battery life. However, evidence suggests it may not significantly reduce eye strain or improve readability for most people and could even make text harder to read due to lower contrast in certain conditions. For OLED screens, dark mode does save battery life by deactivating black pixels. Although dark mode might be more comfortable in low-light environments, it is not proven to aid concentration or minimize distractions effectively. Limiting screen time remains the best solution for eye health and better sleep.
Bootcamp·2yUX design process: The Double Diamond
The Double Diamond UX design process helps designers structure their iterative workflow through four phases: Discover, Define, Develop, and Deliver. Each phase has distinct activities, from user research and persona creation to prototyping and user testing. The methodology aims to produce user-centered designs by systematically identifying and solving user problems. The process emphasizes collaboration, detailed specifications, and continuous iteration based on user feedback.
Bootcamp·2yRe-designing landing page for a startup that helps musicians build their online brand: A Case Study
HITMKR is a SaaS platform that simplifies the process of creating professional websites for musicians, using no-code solutions and user-friendly templates. A detailed case study outlines the redesign of HITMKR's landing page, focusing on enhancing visual appeal, connecting with the target personas, and clearly communicating the brand's mission. The design process involved research, wireframing, visual design, and iterative feedback, applying the AIDA framework to maximize engagement and conversion rates.
DesignCourse·2yInteractive UI/UX Crash Course
Gary Simon offers a comprehensive 6-hour UI/UX crash course that includes videos from his 29-day UI/UX series. This course is practical, featuring challenges like building a navigation bar and a hero section. He emphasizes important UI/UX principles such as visual hierarchy, contrast, alignment, and white space. Simon highlights using tools like Figma, Penpot, and Protopie for design and prototyping, and stresses the importance of foundational design skills over relying on any single piece of software.
Codemotion·2yGamification is Dead, Long Live Gamification!
Gamification incorporates game design elements into non-game contexts such as work, education, and marketing to enhance engagement, motivation, and behavior. The principles include points, badges, leaderboards, levels, and challenges. Though initially successful, the hype around gamification faced challenges due to poorly executed projects and problematic incentives. Despite its flaws and dark patterns, successful applications like Duolingo and Fitbit show that gamification remains a vital part of user experience, with its influence likely to grow across various sectors.
asayer·2yCSS for Print: Designing Web Content for Physical Output
Designing web content for print involves addressing unique challenges like fixed page sizes, limited color palettes, media compatibility, and the lack of interactivity. CSS can be used to optimize print output through media queries, adding headers and footers, controlling page breaks, and adjusting content and typography. Key practices include improving readability, managing color and layout, and ensuring high image resolution.
