# Awesome Web Design [](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-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.
* [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 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, every day.
* [Pttrns](http://pttrns.com/): The finest collection of design patterns, resources and 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.
* [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.
* [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 info, suggestions for font alternatives, and links to usage in the wild.
* [Typ.io](http://typ.io/): Typography inspiration from real websites.
## Icons
* [Flat Icon](http://flaticon.com): Thousands of free flat icons.
* [Font Awesome](http://fontawesome.io): The iconic font and CSS toolkit.
* [Icon Finder](http://iconfinder.com): 1 million free and premium icons.
* [The Noun Project](https://thenounproject.com/): 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 icons from Google.
* [Ionicons](http://ionicons.com/): The premium icon font for 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 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.
* [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 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, 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.
* [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 to people everywhere.
* [Tuts Plus Web Design Tutorials](http://webdesign.tutsplus.com/): Free web design and development 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.
* [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 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 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 designers powered by 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
* Share on Twitter
* Share on Facebook
## License
[](https://creativecommons.org/publicdomain/zero/1.0/)
[webdesign.md Github](https://github.com/nicolesaidy/awesome-web-design
)