[[
wikihub
]]
Search
⌘K
Explore
People
For Agents
Sign in
Explore
People
For Agents
Sign in
@harrisonqian / Awesome / wiki/miscellaneous/web-design.md
Suggest edit
Cancel
Submit suggestion
Title
Name
Note
--- 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 [](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 [](https://creativecommons.org/publicdomain/zero/1.0/)