Click any tag below to further narrow down your results
Links
This article explains the CSS subgrid feature, which allows for more flexible layouts by extending grid properties to nested elements. It covers practical examples to show how subgrid can improve semantic markup and enhance design without losing layout integrity. The tutorial also highlights common pitfalls and alternative methods.
The article discusses how coding agents like Claude Code can effectively test user interfaces, particularly for command-line tools and websites. They reveal areas of confusion for new users, helping developers refine their designs before real user testing. This approach offers a fast and cost-effective way to identify usability issues.
This article breaks down the basics of color theory in web design, covering how to choose color schemes that enhance user experience and brand identity. It explores various color combinations and provides practical tips for implementing a cohesive color palette.
This article highlights Framer, a tool designed for startups to create and manage websites quickly without needing developers. It offers a free year of the Pro Plan and features like instant publishing and built-in analytics. Founders and designers share positive experiences about its ease of use and efficiency.
This article showcases various rich styled UI components built with React, shadcn, and Framer Motion for animations. It includes examples like interactive cards and animated text, making it easier to create visually appealing websites. Each component comes with code snippets to help developers implement them.
Wix introduces Harmony, an AI-driven website builder that combines human creativity with technology. Users can create and manage websites using natural language prompts, while the AI agent "Aria" handles design adjustments and prevents coding issues. This tool aims to simplify web design for users without sacrificing control or quality.
This article offers practical tips for selecting icons that enhance your website's message and maintain a professional appearance. It emphasizes the importance of meaningful icon choices, consistency in style and color, and the need for accessibility.
CSS Pro is a browser extension that allows users to edit website designs visually without any setup. It generates clean CSS code in real-time, making it ideal for quick prototyping and collaboration. The tool integrates AI assistance to streamline design changes and offers various subscription options.
This article explores how different fonts affect visitor perception on websites. It highlights the psychological impact of font choices on trust, readability, and engagement. The piece also categorizes typefaces and their common associations to help designers make informed decisions.
This article outlines 11 frequent mistakes ecommerce businesses make, from ignoring audience insights to neglecting customer service. It emphasizes the importance of learning from errors and adapting strategies to improve sales and customer experience.
This tool simplifies web design by allowing users to click on any element to make changes without needing screenshots or complicated explanations. It integrates a terminal for code access and supports multi-editing, responsive testing, and CSS inspection. No account is required, making it easy to get started quickly.
The article explores how web design tools have evolved over time, influencing the products designers create. It discusses key tools from HTML to Figma, highlighting their impact on design practices and the limitations they introduce.
This article critiques the use of JavaScript date pickers, suggesting that native date and time inputs are often more user-friendly. It offers alternatives to complex UI components, emphasizing simplicity and accessibility in date selection.
This article showcases various optical illusions created using CSS, detailing how each effect tricks the eye. It includes demonstrations of illusions like the Poggendorff and the Cornsweet, along with explanations of the coding techniques used to achieve them. Interactivity is emphasized, allowing users to hover over elements to reveal the true nature of the illusions.
This article promotes a free year of Framer's Pro Plan for startups. It highlights how Framer allows users to design and publish websites quickly without needing developers, emphasizing the benefits of instant updates and scalability.
The Cursor Browser now features a visual editor that integrates web app design and coding in one window. Users can drag and drop elements, adjust component properties, and apply changes with simple prompts. This tool streamlines the design process, making it more intuitive and efficient.
Lorentz Kinde, a 31-year-old Cloud Engineer, shares insights about himself and his ongoing projects. He provides links to his GitHub and LinkedIn profiles while reflecting on web design trends and his plans for future updates.
This article explains why meeting WCAG AA standards doesn't guarantee a truly accessible website. It outlines five key areas where compliance can still lead to poor user experiences for everyone, regardless of disabilities.
This article critiques the outdated concept of "pixel perfection" in web design, arguing that it hinders adaptability and accessibility. It emphasizes the need to focus on design intent rather than exact pixel matching, advocating for flexible systems that work across various devices and content types.
This article outlines key graphic design trends for 2026, highlighting a shift toward intentionality and restraint in visual work. Trends include imperfect typography, raw mixed-media visuals, and a blend of AI tools with human direction. The focus is on clarity, structure, and thoughtful design choices.
This Reddit thread discusses various web design trends that users find unnecessary or frustrating. Common complaints include scroll hijacking, excessive animations, and intrusive cookie notifications that complicate the browsing experience. Contributors share their pet peeves and suggest that many trends detract from usability.
The article discusses the creation of Inspo, a curated library of website components and sections designed to streamline web development. The author, with nearly a decade of experience, emphasizes the importance of design details and animations. Inspo started as a personal collection of favorite sites and aims to help others build websites more efficiently.
The article explores a new visual and design movement called paperclip-punk, which contrasts with the dominant trend of "fication." It emphasizes responsive, minimalist web design that prioritizes human-machine interaction while warning against the risk of mainstreaming this unique aesthetic.
Instant Designing offers tailored branding, web design, and digital marketing services to enhance your business's online presence. Their expert team focuses on maximizing impact and ROI through strategic planning, high-quality designs, and continuous performance optimization. From SEO to user-friendly interfaces, they provide a comprehensive approach to empower your brand.
Hero images are becoming obsolete as they often fail to enhance user experience and conversions. Alternatives such as half-page heroes, anti-hero designs, and search-first layouts provide more engaging and effective solutions that prioritize clarity and user action over overwhelming visuals. The article advocates for a shift away from traditional hero images to more innovative designs that better serve user intent.
The article discusses techniques for creating color-shifting animations in web design, emphasizing the importance of blending colors smoothly and enhancing user experience. It provides examples and code snippets that demonstrate how to implement these effects using CSS and JavaScript.
The article presents a comprehensive toolkit for accessibility design, aimed at helping web developers and designers create more inclusive digital experiences. It emphasizes the importance of accessibility in web design and provides various resources and tools to assist in this process.
The article discusses the resurgence of footer optimization in web design, likening it to trends from 2003. It emphasizes the importance of using footers strategically to improve user experience and SEO, encouraging marketers to experiment with various footer elements to enhance engagement.
The article provides a comprehensive tutorial on how to create a visually appealing personal website using AI technologies. It covers various tools and techniques to enhance the website's design and functionality, making it suitable for personal branding or professional use. Readers are guided through each step to ensure a successful build.
InstaWebAI allows users to create professional websites in seconds without needing coding or design skills. By simply describing their business, users can leverage AI to generate tailored websites, customize layouts, and publish them instantly with features like SEO optimization and hosting support included.
Inclusive Design Principles focus on creating user experiences that cater to individuals with various disabilities, ensuring accessibility and usability for everyone. The principles emphasize providing comparable experiences, considering situational contexts, maintaining consistency, giving users control, offering choices, prioritizing content, and adding value through thoughtful design features.
Preloading fonts can significantly enhance web performance by reducing the time it takes for text to be displayed on a webpage. However, it is important to balance the benefits with potential drawbacks, such as increased initial load time and complexity in implementation. Proper strategies and considerations should be employed to maximize the advantages of font preloading.
Apple's new web page design has left users confused due to its unconventional layout and navigation. Many find the changes disorienting, raising questions about the usability and effectiveness of the new design approach. Feedback from users highlights a disconnect between expected functionality and the actual experience.
The article explores various creative cursor effects that can enhance user interaction on websites. It showcases different techniques and code snippets for developers to implement unique and engaging cursor designs, enriching the overall user experience. The emphasis is on how these effects can be both fun and functional, improving the aesthetic appeal of web interfaces.
The article provides a comprehensive guide on how to self-host fonts from Google Fonts, emphasizing the benefits of improved website performance and control over font loading. It outlines the necessary steps to download, serve, and implement the fonts on your own server, ensuring better user experience and compliance with web standards.
Designers must prioritize Cumulative Layout Shift (CLS) as it directly impacts user experience and trust. A high CLS score reflects poorly on design and can lead to user frustration and increased bounce rates. By understanding and addressing CLS, designers can create more stable and engaging web experiences.
The article provides a collection of free icons available for designers and developers, showcasing various styles and categories to enhance visual projects. It emphasizes the importance of using high-quality icons in web and app design to improve user experience. Users can easily access and download these resources for their design needs.
Apple is introducing a new design aesthetic called Liquid Glass in its upcoming operating system update, which web developers are eager to replicate despite challenges such as text accessibility. Various techniques, including SVG filters and React components, are being explored to achieve this complex visual effect that simulates glass-like properties on the web. Critiques regarding readability and accessibility remain a significant concern as developers experiment with these design elements.
The article discusses modern CSS techniques for creating effective section layouts on web pages. It highlights various approaches, including the use of CSS Grid and Flexbox, to enhance visual structure and improve user experience. Additionally, it provides practical examples and best practices for implementing these layouts in web design.
The article discusses the performance optimizations that made a website the fastest in the Tour de France, focusing on technical improvements and strategies used to enhance speed and user experience. It highlights the importance of efficiency in web design for maximizing engagement during high-traffic events like the Tour de France.
Wix has introduced a new personalized AI feature that aims to enhance user experience by tailoring website-building suggestions based on individual preferences. While this innovation is recognized as impressive for its advanced capabilities, it also raises concerns about privacy and the implications of such personalized technology.
The article discusses the web's most overlooked yet widely accepted feature, highlighting its impact on user experience and web design. It emphasizes the need for designers to be aware of how such features can shape perceptions and interactions on the web. By examining various aspects of this feature, the piece encourages a thoughtful approach to web development and user engagement.
Control is a web design platform that enables users to create stunning websites with ease, offering features like animations, visual effects, and a freehand design environment. It caters to both individual creatives and teams, allowing for collaboration and the integration of custom elements without requiring coding skills. With various pricing plans, it aims to facilitate a playful and intuitive web design experience.
The article discusses the perception of CSS trigonometric functions, specifically sin() and cos(), which have been labeled as the "most hated feature" in CSS according to the State of CSS 2025 survey. It aims to explain their practical applications in web design, focusing on how these functions can be utilized for creating circular and wavy layouts in CSS.
The guide on Design Beyond Barriers provides comprehensive insights into creating accessible interfaces that cater to all users. It covers essential topics such as common accessibility failures, color selection, typeface choices, and the importance of inclusive design practices to enhance user experience across diverse needs.
The article explores techniques for optimizing web pages for print, focusing on how to ensure that digital content translates effectively onto paper. It discusses the importance of design considerations, such as layout, typography, and color management, to enhance the readability and aesthetic of printed web content. Additionally, it highlights the tools and methods available for achieving quality print outputs from web pages.
Address formats differ significantly worldwide, affecting the design of forms and systems that handle addresses on the Web. Understanding these variations, including the order and components of addresses, is essential for creating inclusive and user-friendly solutions for international users. The article provides insights and guidelines for accommodating diverse addressing systems.
The article discusses the importance of budgeting for accessibility in web design and development, emphasizing that spending on accessibility should be seen as an investment rather than an expense. It suggests that organizations should allocate resources effectively to ensure their digital content is accessible to all users, including those with disabilities.
The article contains a substantial amount of garbled text and appears to lack coherent content or a clear message. It may be a result of encoding issues, rendering it unreadable and providing no valuable information or insights for readers.
The article discusses the accessibility challenges associated with CSS carousels and offers best practices for making them more usable for all users, including those with disabilities. It emphasizes the importance of proper markup, keyboard navigation, and screen reader support to enhance the user experience.
The article critiques the traditional loading spinner for its lack of user feedback and potential to frustrate users. It argues for the evolution of loading indicators into more informative elements, such as progress bars and skeleton screens, that enhance the user experience rather than induce anxiety.
The article explores the complexities and nuances of CSS height properties, particularly how different methodologies and browser behaviors can lead to unexpected results. It emphasizes the importance of understanding content flow and layout mechanics when working with height in CSS to avoid common pitfalls.
Figma Sites, currently in beta, are criticized for generating overly complex and semantically flawed code, leading to multiple accessibility issues. The article highlights specific problems, such as non-standard navigation structures, redundant elements, and a lack of proper interactive components, questioning the effectiveness of the tool in producing usable web content.
Effective text formatting is crucial for enhancing user experience and increasing website conversions. Utilizing bold text, short sentences, and scannable layouts, along with strategic visuals and whitespace, can significantly improve engagement and guide users toward desired actions.
TrueKind aimed to create a unique skincare website that emphasizes honest skincare over commercial tactics, leading to a thoughtful design process focused on moodboards, typography, and balanced animations. The project involved collaboration with a supportive client and a skilled developer, resulting in a visually fresh site that garnered multiple awards, though it later adapted to simpler designs for broader appeal.
Figma Sites, a new tool allowing designers to create websites directly from Figma, is criticized for producing poor-quality, poorly structured code that lacks semantic meaning and accessibility. The author argues that while the tool promises ease of use, it ultimately falls short of delivering production-ready websites, suggesting that designers should demand better and be critical of such tools.
The article explores the use of SVG (Scalable Vector Graphics) as an alternative to GIFs for animations on the web. It discusses the benefits of SVG, including scalability and superior rendering quality, while also addressing some of the challenges and limitations associated with using SVG for animations. The author provides insights into how SVG can enhance web design and user experience.
Safari Technology Preview introduces support for the CSS property text-wrap: pretty, which enhances web typography by evaluating entire paragraphs for better text flow, reducing short last lines, improving rag, and minimizing hyphenation. This new feature aims to elevate the visual quality of text on the web, drawing from traditional typesetting practices while addressing long-standing issues faced by web designers.
The article explores the influence of classic cartoons on modern web animations, particularly through CSS techniques. It discusses how these animations can enhance user experience and provide a nostalgic touch to web design. Practical examples and inspirations from well-known animated characters are also highlighted to showcase the potential of animation in web development.
The article discusses techniques for targeting specific characters in CSS rules, providing insights into how to effectively style content based on character-specific attributes. It emphasizes the importance of understanding character encoding and the impact it has on styling elements within web design.
The article provides a friendly introduction to SVG (Scalable Vector Graphics), highlighting its advantages for web design, such as scalability and flexibility. It covers the basics of SVG syntax, shapes, and how to incorporate SVG into web projects, making it accessible for both beginners and experienced developers.
The article discusses the CSS property font-size-adjust, arguing that its importance is often misunderstood, especially its potential to create consistent font sizing across different typefaces. It emphasizes that this property can effectively manage font sizes on a webpage, particularly when using multiple fonts, and highlights the need for careful consideration of line height to avoid layout issues.
Tufte CSS is a styling tool designed for web articles, inspired by Edward Tufte’s principles of simplicity, effective typography, and the integration of graphics with text. It aims to adapt Tufte's print techniques to the web, allowing users to implement features like sidenotes, margin notes, and refined text presentation. The project encourages contributions and emphasizes that its techniques are a starting point for web design rather than strict guidelines.
BYQ Supply offers a collection of modular design components, including sections, skeletons, and icons, aimed at simplifying the web design process for users of platforms like Webflow, Framer, and Figma. Their products allow for quick copy-pasting with no setup required, making it easier for designers to create clean and efficient layouts. The service offers various pricing tiers, including free and pro options, with lifetime access available for certain plans.
The article discusses methods for converting SVG graphics into CSS styles, highlighting the benefits of using SVG for web design. It provides a step-by-step guide on how to achieve this conversion effectively, making it easier for developers to incorporate scalable vector graphics into their projects.
The article discusses the concept of partial keyframes in animations, highlighting their advantages in creating more fluid and flexible motion effects. It explains how utilizing partial keyframes can enhance the control and adaptability of animations in web design. Practical examples and code snippets are provided to illustrate the implementation of this technique.
The article discusses the drawbacks of animating height in web design, highlighting how it can lead to layout shifts and performance issues. It emphasizes the importance of using alternatives such as opacity and transform animations to create smoother user experiences. By avoiding height animations, developers can ensure better stability and responsiveness in their web applications.
The article discusses the use of decorative text within HTML, exploring various techniques and styles to enhance the visual appeal of web content. It highlights best practices for integrating such text while maintaining accessibility and usability for users. Additionally, it addresses potential pitfalls and considerations when implementing decorative elements.
Apple has introduced a private CSS property that allows developers to create liquid glass effects for web content. This feature enhances the visual aesthetics of web pages, providing a unique design element that mimics the appearance of glass. The article discusses how this property can be utilized in web development to improve user interfaces.
The article explores the concept of "liquid glass" as a CSS property, discussing how it can be implemented in web design to create visually appealing effects. It highlights the potential benefits and aesthetic enhancements that this technique can bring to user interfaces.
Figma has announced the availability of its new feature that enables users to create websites directly within its platform, enhancing its design capabilities. This feature aims to simplify the web design process for users, allowing them to leverage Figma's collaborative tools in a new context. The initiative reflects Figma's commitment to expanding its product offerings and catering to diverse design needs.
ChatGPT has launched a new web browser called Atlas that enhances user experience by summarizing sites, pulling out stats, and answering questions. Marketers need to optimize their websites for this AI-driven tool to stay competitive, as Atlas is expected to become widely adopted and change web design and SEO practices significantly.
The article explores the concept of partial keyframes in CSS animations, highlighting how they can enhance the smoothness and control of animated transitions. It provides examples and practical tips for implementing these techniques effectively in web design.
The article provides an accessible introduction to Scalable Vector Graphics (SVG), explaining its significance in web design and development. It covers the basic concepts, advantages of using SVG over traditional image formats, and practical applications for creating graphics that are both responsive and high-quality.
The website showcases stunning web design projects from Nordic countries, including Denmark, Finland, Iceland, Norway, and Sweden. It features a curated list of various design categories such as architecture, e-commerce, and personal portfolios, highlighting notable works and studios from the region.
The article provides a comprehensive overview of modern CSS colors, discussing various color formats and their applications in web design. It emphasizes the importance of understanding color theory and how to effectively implement colors to enhance user experience. This is part one of a series aimed at demystifying CSS colors for developers.
Dribbble has shifted the focus of web design from user experience to aesthetic appeal, leading to a decline in real creativity and functionality. Designers now prioritize visually appealing artifacts over usable designs, creating an echo chamber that values style over substance. This trend risks alienating actual user needs and the messy realities of web development.
The article explores the evolution and challenges of CSS implementation, emphasizing the importance of maintaining a balance between flexibility, modularity, and simplicity in web design. It discusses various CSS methodologies, their historical context, and critiques the current focus on complex systems, arguing for a return to the fundamental principle of separating structure (HTML) from presentation (CSS).
The introduction of the CSS `random()` function allows developers to generate random values directly within styles, enabling dynamic animations, layouts, and colors without JavaScript. The article provides various examples, including creating a star field, random rectangles in a grid, and interactive elements like a spinning wheel, demonstrating the versatility of this new feature in modern web design.
Improve your CSS navigation menus by recognizing and fixing five common mistakes that hinder user experience. This guide covers target area issues, the use of Flexbox `gap`, dropdown delays, and the importance of smooth scrolling for in-page links.
The article discusses the differences between modals and dialogs in web design, highlighting their distinct purposes and user experiences. It emphasizes the importance of accessibility considerations when implementing these elements to ensure all users can effectively interact with them. The piece provides guidance on best practices for using modals and dialogs in a user-friendly manner.
The Guardian has introduced a new global homepage and app, focusing on mobile-first design to enhance user engagement and content accessibility. The redesign, which includes personalized features and a fresh visual approach, aims to cater to the diverse needs of its readership while reflecting the brand's journalistic breadth.
Micro failures are subtle yet detrimental issues in user experience that make websites feel broken, even if they technically function. These small frustrations can erode user trust and lead to abandonment, often without users realizing why they leave. Designers must recognize and address these issues to create a respectful and effective user experience.
Websites will soon leverage AI to design themselves in real-time, adapting layouts and content according to user behavior and performance data. As a result, traditional web designers may face obsolescence unless they evolve into roles focused on strategy, systems-thinking, and ethical oversight.
GeoCities Website Maker allows users to transform any modern webpage into a nostalgic 90s-style website. Users simply need to paste a webpage URL and click the GeoCitify button to create and share their retro masterpiece. Recent GeoCitified pages showcase the fun and creativity of this tool.
The article discusses the new CSS function contrast-color(), which allows browsers to automatically select either black or white text color based on the background color to ensure better contrast. While this feature simplifies color management in web design, it does not guarantee accessibility, as the choice may not always meet contrast standards. Designers and developers must still carefully consider color combinations and use additional tools, such as the prefers-contrast media query, to enhance accessibility.
Effective web design hinges on the strategic pairing of colors and typography, as these elements influence user perceptions and emotional responses. By understanding industry norms and psychological impacts, designers can create cohesive experiences that enhance readability and brand messaging, either aligning with or deviating from established expectations to stand out.
The article discusses how ARIA (Accessible Rich Internet Applications) attributes enhance the semantics of web content, making it more accessible for users with disabilities. It emphasizes the importance of using these attributes correctly to support inclusive design practices and improve user experience for all.
Accessibility overlays are often marketed as quick fixes for websites to comply with accessibility standards, but they can create more issues than they solve. These overlays might hinder the user experience for those with disabilities, as they may not address the root problems of accessibility. A deeper, more comprehensive approach to web accessibility is necessary for genuine inclusivity.
The article discusses strategies for creating websites that demand significant time and energy from both developers and users. It emphasizes the importance of thoughtful design and user engagement to ensure that the effort invested yields meaningful results. Practical tips and considerations are provided to enhance the development process and user experience.
The future of web design is shifting from aesthetics and usability to a focus on deep user profiling, where websites anticipate individual behaviors and preferences in real-time. This evolution raises concerns about privacy and autonomy as designers become akin to behavioral economists, leveraging psychological insights to influence user decisions.
The article showcases four exemplary user-centric form designs that effectively enhance user experience and engagement. It emphasizes the importance of clear communication, intuitive layout, and responsive elements in form design to meet users' needs and expectations. Practical insights and examples are provided to inspire better form creation practices across various platforms.
Displaay has revamped its website and licensing model after three years of development, focusing on user-friendly access to its typefaces. The new platform introduces variable fonts, a simplified licensing structure based on company size, and customizable font options, enhancing the design experience for users. Additionally, the newly designed Serrif typeface offers a balance between practicality and aesthetics, complementing Displaay's existing Saans typeface.
The article discusses five essential CSS functions that can enhance web design, focusing on their practical applications and benefits. It emphasizes the importance of leveraging these functions to create more dynamic and responsive styles in modern web development.
The article discusses the concept of user effort in web design, emphasizing the importance of minimizing cognitive load to enhance user experience. It advocates for creating intuitive interfaces that allow users to complete tasks efficiently, ultimately leading to higher satisfaction and engagement. Strategies for reducing user effort are also explored.
The webpage indicates that the restroom_archive_v1 feature requires JavaScript to function properly and suggests enabling it for continued access. Users are unable to interact with the content until the necessary settings are adjusted.