Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/eric-erki/awesome-web-design

A curated list of awesome resources for digital designers.
https://github.com/eric-erki/awesome-web-design

List: awesome-web-design

Last synced: 16 days ago
JSON representation

A curated list of awesome resources for digital designers.

Awesome Lists containing this project

README 

        
# 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-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

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