Awesome Web Design

       

A curated list of awesome resources, tools, books, and inspiration for web designers.

Web design is the practice of crafting visually engaging, usable, and accessible websites. This list includes guides, tools, frameworks, communities, and design inspiration to help web designers build beautiful and effective digital experiences.

Contents

• Design Principles
• Typography
• Color
• Layout & Grids
• Accessibility
• UI Design
• UX Design
• Inspiration
• Design Systems
• Prototyping & Tools
• Web Design Frameworks
• Learning & Courses
• Communities
• Books
• Related Awesome Lists

Design Principles

• Design Principles FTW – Collection of design principles from top companies.
• Laws of UX – Psychological principles to improve web experiences.
• Nielsen’s 10 Usability Heuristics – Core guidelines for usability.

Typography

• Google Fonts – Free and open-source font library.
• Fontjoy – Font pairing generator using AI.
• Type Scale – Visual type scale calculator.

Color

• Coolors – Fast color palette generator.
• Color Hunt – Curated color palette inspiration.
• Accessible Color Generator – Build WCAG-compliant color palettes.

Layout & Grids

• Grid by Example – CSS Grid layout patterns and tutorials.
• CSS Tricks Flexbox Guide – Comprehensive Flexbox cheat sheet.
• Layoutit! – Drag-and-drop CSS Grid layout builder.

Accessibility

• WebAIM – Web accessibility resources and tools.
• Deque University – Accessibility courses and guides.
• A11Y Style Guide – Checklist and examples for accessible UI components.

UI Design

• UI Patterns – Common design patterns for web UIs.
• Figma Community – UI kits, templates, and components.
• Streamline – Icon sets, illustrations, and UI elements.

UX Design

• UX Collective – Medium publication on UX design.
• Interaction Design Foundation – UX design courses and learning.
• Usability.gov – Government UX guidelines and best practices.

Inspiration

• Dribbble – Showcase for creative professionals.
• Behance – Portfolio site with design inspiration.
• Awwwards – Award-winning website designs and trends.
• Land-book – Curated landing page inspiration.

Design Systems

• Material Design – Google’s official design system.
• Carbon Design System – IBM’s open-source system.
• Lightning Design System – Salesforce’s design guidelines.

Prototyping & Tools

• Figma – Collaborative interface design tool.
• Sketch – Vector-based design tool for macOS.
• Adobe XD – UI/UX design and prototyping.
• Penpot – Open-source design and prototyping platform.

Web Design Frameworks

• Tailwind CSS – Utility-first CSS framework.
• Bootstrap – Front-end toolkit for responsive websites.
• Bulma – Modern CSS framework based on Flexbox.
• Foundation – Responsive front-end framework by Zurb.

Learning & Courses

• freeCodeCamp Responsive Web Design – Full curriculum on HTML, CSS, and design.
• Coursera Web Design Courses – University-led design learning.
• Frontend Masters – Web Design for Developers – Design fundamentals for devs.

Communities

• r/web_design – Reddit community for web design discussions.
• Designer Hangout – Invite-only Slack community for UX/UI pros.
• Spectrum – Design – Discussions about design tools and trends.

Books

• Don’t Make Me Think by Steve Krug – Usability and intuitive navigation.
• Refactoring UI by Adam Wathan and Steve Schoger – Design advice for developers.
• The Elements of User Experience by Jesse James Garrett – Design strategy and structure.

Related Awesome Lists

• Awesome UX – Tools and resources for improving user experience.
• Awesome CSS – CSS tools, techniques, and frameworks.
• Awesome HTML5 – Modern HTML5 guides and resources.
• Awesome Figma – Plugins and resources for Figma users.

Contribute

Contributions are welcome!

License