---
visibility: public
---

# Web Design

**repo:** [nicolesaidy/awesome-web-design](https://github.com/nicolesaidy/awesome-web-design)  
**category:** [[miscellaneous|Miscellaneous]]
**related:** [[front-end-development|Front End Development]]

---

# Awesome Web Design [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)
> A curated list of awesome resources for digital designers.

**Check out my [website](http://nicolesaidy.com) & [blog](http://blog.nicolesaidy.com). ✨**

## Contents

- [Blog & News](#blog--news)
- [Inspiration](#inspiration)
- [Colors](#colors)
- [Typography](#typography)
- [Icons](#icons)
- [Images](#images)
- [Guidelines](#guidelines)
- [Design Tools](#design-tools)
- [Prototype Tools](#prototype-tools)
- [Tutorials](#tutorials)
- [Books](#books)
- [Productivity](#productivity)
- [Slack Teams](#[slack](/@harrisonqian/awesome/wiki/work/slack)-teams)

## Blog & News
* [Web Designer News](http://webdesignernews.com): The best curated stories for designers.
* [Marvel Blog](http://blog.marvelapp.com): The latest news, resources and thoughts from the Marvel team.
* [The Next Web](http://thenextweb.com/section/creative/): International technology news, business & culture.
* [Medium](https://medium.com/tag/web-design): A community of readers and writers offering unique perspectives on ideas large and small.
* [Creative Bloq](http://www.creativebloq.com/): Art & design [inspiration](/@harrisonqian/awesome/wiki/front-end-development/inspiration).
* [Smashing Magazine](http://smashingmagazine.com): For professional web designers & developers.
* [Sitepoint](https://www.sitepoint.com/design-ux/): A hub for web developers & designers to share their passion for building incredible internet things.
* [Designer News](https://www.designernews.co/): Where the design community meets.
* [Reddit Web Design](https://www.reddit.com/r/web_design/): A place for designers to contribute useful posts, ask questions or engage in discussion.
* [Morning Reader](https://morningreader.com): Breaking tech news.
* [Google design](https://www.youtube.com/channel/UClKO7be7O9cUGL94PHnAeOA): Youtube channel featuring videos for designers about Google design.

## Inspiration
* [Awwwards](http://awwwards.com): Best web design trends.
* [One Page Love](http://onepagelove.com):  Design gallery showcasing the best Single Page websites.
* [Inspired UI](http://inspired-ui.com/): Mobile [apps](/@harrisonqian/awesome/wiki/platforms/apps) design patterns.
* [Behance](http://behance.net): Showcase & discover creative work.
* [Dribbble](http://dribbble.com): Show and tell for designers.
* [Product Hunt](http://producthunt.com): The place to discover your next favorite thing.
* [UI Movement](https://uimovement.com): The best UI design [inspiration](/@harrisonqian/awesome/wiki/front-end-development/inspiration), every day.
* [Pttrns](http://pttrns.com/): The finest collection of design patterns, resources and [inspiration](/@harrisonqian/awesome/wiki/front-end-development/inspiration).

## Colors
* [Brandcolors](https://brandcolors.net/): Official colors for the world's biggest brands.
* [Adobe Color CC](https://color.adobe.com/): Create color schemes with the color wheel or browse thousands of color combinations from the Kuler community.
* [Paletton](http://paletton.com): A designer tool for creating color combinations that work together well.
* [Coolors](https://coolors.co/): Generate infinite color palettes for your designs.
* [Lol Colors](http://www.lolcolors.com/): Curated color palette [inspiration](/@harrisonqian/awesome/wiki/front-end-development/inspiration).
* [Colordot](https://color.hailpixel.com/): A color picker for humans.
* [Gradients.io](http://www.gradients.io/): Curated gradients for designers & developers.
* [UI Gradients](http://uigradients.com/): Beautiful color gradients.
* [Colorzilla](http://colorzilla.com): Eyedropper, color picker, gradient generator.

## Typography
* [Google Web Fonts](http://fonts.google.com): Offering an intuitive and robust directory of open source designer web [fonts](/@harrisonqian/awesome/wiki/media/fonts).
* [Font Face Ninja Browser Extension](http://fontface.ninja/): You’re browsing a website and you want to find the name of a font? Here comes the ninja!
* [Fontpair](http://fontpair.co): Beautiful Google Font combinations and pairs.
* [Type Anything](https://typeanything.io/): Create great font combinations.
* [Type Scale](http://type-scale.com/): Preview and choose the right type scale for your project.
* [WhatTheFont](https://www.myfonts.com/WhatTheFont/): Seen a font in an image and want to know what it is? WhatTheFont will find the closest match.
* [Typewolf](https://www.typewolf.com/): Comprehensive [web typography](/@harrisonqian/awesome/wiki/front-end-development/web-typography) info, suggestions for font alternatives, and links to usage in the wild.
* [Typ.io](http://typ.io/): Typography [inspiration](/@harrisonqian/awesome/wiki/front-end-development/inspiration) from real websites.

## Icons
* [Flat Icon](http://flaticon.com): Thousands of free flat [icons](/@harrisonqian/awesome/wiki/media/icons).
* [Font Awesome](http://fontawesome.io): The iconic font and CSS toolkit.
* [Icon Finder](http://iconfinder.com): 1 million free and premium [icons](/@harrisonqian/awesome/wiki/media/icons).
* [The Noun Project](https://thenounproject.com/): [Icons](/@harrisonqian/awesome/wiki/media/icons) for Everything.
* [Favicon Generator](http://www.favicon-generator.org/): Favicon & app icon generator.
* [Freepik](http://freepik.com): Free vectors in different formats.
* [Vecteezy](http://vecteezy.com): A collection of free vector art, vector graphics, illustrator backgrounds, etc.
* [Material Icons](https://material.io/icons/): Free to use [material design](/@harrisonqian/awesome/wiki/front-end-development/material-design) [icons](/@harrisonqian/awesome/wiki/media/icons) from Google.
* [Ionicons](http://ionicons.com/): The premium icon font for [Ionic Framework](/@harrisonqian/awesome/wiki/front-end-development/ionic-framework).

## Images
* [Pexels](https://pexels.com): Best free stock photos in one place.
* [Unsplash.it](http://unsplash.it): Placeholders using a beautiful image gallery.
* [Pixabay](https://pixabay.com/): High quality photos and illustrations free for commercial use.
* [Placehold.it](http://placehold.it): A quick and simple image placeholder service.
* [Imgur](http://imgur.com): The most [awesome](/@harrisonqian/awesome/wiki/miscellaneous/awesome) images on the internet.
* [Flickr](https://www.flickr.com): The home for all your photos.

## Guidelines
* [iOS Human Interface Guidelines](https://developer.apple.com/ios/human-interface-guidelines/): Offers everything you need to design beautiful, engaging iOS [apps](/@harrisonqian/awesome/wiki/platforms/apps).
* [Google Material Design](https://material.google.com/): A close look at the design, components & resources for Google's brand.
* [Laws of UX](https://lawsofux.com/): A collection of the maxims and principles that designers can consider when building user interfaces.
* [Ultimate Guide](https://www.moveoapps.com/ultimate-guide-to-mobile-app-design-principles): The ultimate guide to mobile app [design principles](/@harrisonqian/awesome/wiki/miscellaneous/design-principles) that make your app shine.
* [GoodUI](http://www.goodui.org/): 5 Ways You Can Get A Better UI.

## Design Tools
* [Sketch](http://sketchapp.com): A lightweight program for digital design for Mac.
* [Figma](http://figma.com): The collaborative interface design tool.
* [Adobe XD](https://www.adobe.com/products/experience-design.html): Prototyping & wireframing Tool.
* [inVision Studio](https://www.invisionapp.com/studio): Rapid prototyping, animation, built-in [design systems](/@harrisonqian/awesome/wiki/front-end-development/design-systems), and collaboration.
* [Canva](http://canva.com): Amazingly simple graphic design software.
* [Framer X](https://framer.com/): Interaction Design and UX design software.

## Prototype Tools
* [Zeplin](https://zeplin.io/): A great collaboration tool between designers and developers.
* [Avocode](https://avocode.com/): A workspace open to all designers and developers.
* [inVision](https://www.invisionapp.com/): The world's leading prototyping, collaboration & workflow platform.
* [Justinmind](http://justinmind.com): Prototype faster, communicate better, for web and mobile [apps](/@harrisonqian/awesome/wiki/platforms/apps).
* [Marvel App](https://marvelapp.com/): Free mobile & web prototyping for designers.
* [Atomic.io](https://atomic.io/): Free in Browser interactive design Tool.
* [Flinto](https://www.flinto.com/):  App to create interactive and animated prototypes of designs.

## Tutorials
* [Treehouse](https://teamtreehouse.com/tracks/web-design): Brings affordable, technology [education](/@harrisonqian/awesome/wiki/back-end-development/education) to people everywhere.
* [Tuts Plus Web Design Tutorials](http://webdesign.tutsplus.com/): Free web design and development [tutorials](/@harrisonqian/awesome/wiki/computer-science/tutorials).
* [Springboard](https://www.springboard.com): Personalized approach, designed to help you achieve your goals and advance your career.
* [Learn Sketch](https://www.sketchapp.com/learn/): Short videos and compiled invaluable resources to help you get started!
* [Adobe XD Guide](https://www.xdguru.com/adobe-xd-guide/): A 12,000-words-long comprehensive guide for XD beginners and current users. 

## Books
* [Web design playground](https://www.manning.com/books/web-design-playground/): A step by step guide from writing your first line of HTML to creating interesting, attractive web pages.
* [Don't make me think](https://www.amazon.com/Dont-Make-Me-Think-Usability/dp/0321344758)
* [The design of everyday things](https://www.amazon.com/Design-Everyday-Things-Donald-Norman/dp/1452654123)
* [100 things every designer needs to know about people](https://www.amazon.com/Things-Designer-People-Voices-Matter/dp/0321767535/ref=sr_1_1?s=books&ie=UTF8&qid=1419267906&sr=1-1&keywords=100+Things+Every+Designer+Needs+to+Know?utm_source=CMblog&utm_medium=post&utm_campaign=blog_)

## Productivity
* [Pomodoro](http://tomato-timer.com): A cool time management technique for a more productive way to work and study.
* [Toggl](http://toggl.com): Time tracker to improve workplace [productivity](/@harrisonqian/awesome/wiki/work/productivity).
* [Trello](http://trello.com): Organize and prioritize your projects in a fun, flexible and rewarding way.
* [RescueTime](https://www.rescuetime.com): Helps you understand your daily habits so you can focus and be more productive.
* [Qbserve](https://qotoqot.com/qbserve/): Automatic time tracking, invoicing, and real-time [productivity](/@harrisonqian/awesome/wiki/work/productivity) feedback.
* [Paste](http://pasteapp.me/): A smart clipboard history manager for Mac.
* [Sip](http://sipapp.io/): A color picker for Mac.
* [Timing](https://timingapp.com/): Automatic time and [productivity](/@harrisonqian/awesome/wiki/work/productivity) tracking for Mac.
* [Taskade](https://taskade.com/): Collaborative task lists and outlines for teams.

## Slack Teams
* [Team Sketch](http://teamsketch.io): A community for [Sketch](/@harrisonqian/awesome/wiki/miscellaneous/sketch) designers powered by [Slack](/@harrisonqian/awesome/wiki/work/slack)
* [Designer Hangout](https://www.designerhangout.co): A place where UXers from around the world discuss user experience.
* [Design Talks](https://docs.google.com/forms/d/e/1FAIpQLSeKT_LC8kKTzJ4JjmgVQVpfl24i1qBkjJ7TYyQcNHL7fBQkYQ/viewform?c=0&w=1): A community for UI/UX design, web design, freelancing, design critiques, etc.
* [TheDesignerShip](http://thedesignership.com/): A community of over 1,500+ designers and founders.

## Share
* <a href="https://twitter.com/intent/tweet?text=https://[github](/@harrisonqian/awesome/wiki/development-environment/github).com/nicolesaidy/[awesome](/@harrisonqian/awesome/wiki/miscellaneous/awesome)-web-design%20An%20Awesome%20Web%20Design%20Collection%20@nicolesaidy" target="_blank">Share on Twitter</a>
* <a href="https://www.facebook.com/sharer/sharer.php?s=100&p[url]=https://github.com/nicolesaidy/awesome-web-design&p[images][0]=&p[title]=[Awesome](/@harrisonqian/awesome/wiki/miscellaneous/awesome)%20Web%20Design%20Collection&p[summary]=" target="_blank">Share on Facebook</a>

## License
[![CC0](http://mirrors.creativecommons.org/presskit/buttons/88x31/svg/cc-zero.svg)](https://creativecommons.org/publicdomain/zero/1.0/)
