286 lines
13 KiB
HTML
286 lines
13 KiB
HTML
<h1 id="awesome-web-design-awesome">Awesome Web Design <a
|
||
href="https://github.com/sindresorhus/awesome"><img
|
||
src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg"
|
||
alt="Awesome" /></a></h1>
|
||
<blockquote>
|
||
<p>A curated list of awesome resources for digital designers.</p>
|
||
</blockquote>
|
||
<p><strong>Check out my <a href="http://nicolesaidy.com">website</a>
|
||
& <a href="http://blog.nicolesaidy.com">blog</a>. ✨</strong></p>
|
||
<h2 id="contents">Contents</h2>
|
||
<ul>
|
||
<li><a href="#blog--news">Blog & News</a></li>
|
||
<li><a href="#inspiration">Inspiration</a></li>
|
||
<li><a href="#colors">Colors</a></li>
|
||
<li><a href="#typography">Typography</a></li>
|
||
<li><a href="#icons">Icons</a></li>
|
||
<li><a href="#images">Images</a></li>
|
||
<li><a href="#guidelines">Guidelines</a></li>
|
||
<li><a href="#design-tools">Design Tools</a></li>
|
||
<li><a href="#prototype-tools">Prototype Tools</a></li>
|
||
<li><a href="#tutorials">Tutorials</a></li>
|
||
<li><a href="#books">Books</a></li>
|
||
<li><a href="#productivity">Productivity</a></li>
|
||
<li><a href="#slack-teams">Slack Teams</a></li>
|
||
</ul>
|
||
<h2 id="blog-news">Blog & News</h2>
|
||
<ul>
|
||
<li><a href="http://webdesignernews.com">Web Designer News</a>: The best
|
||
curated stories for designers.</li>
|
||
<li><a href="http://blog.marvelapp.com">Marvel Blog</a>: The latest
|
||
news, resources and thoughts from the Marvel team.</li>
|
||
<li><a href="http://thenextweb.com/section/creative/">The Next Web</a>:
|
||
International technology news, business & culture.</li>
|
||
<li><a href="https://medium.com/tag/web-design">Medium</a>: A community
|
||
of readers and writers offering unique perspectives on ideas large and
|
||
small.</li>
|
||
<li><a href="http://www.creativebloq.com/">Creative Bloq</a>: Art &
|
||
design inspiration.</li>
|
||
<li><a href="http://smashingmagazine.com">Smashing Magazine</a>: For
|
||
professional web designers & developers.</li>
|
||
<li><a href="https://www.sitepoint.com/design-ux/">Sitepoint</a>: A hub
|
||
for web developers & designers to share their passion for building
|
||
incredible internet things.</li>
|
||
<li><a href="https://www.designernews.co/">Designer News</a>: Where the
|
||
design community meets.</li>
|
||
<li><a href="https://www.reddit.com/r/web_design/">Reddit Web
|
||
Design</a>: A place for designers to contribute useful posts, ask
|
||
questions or engage in discussion.</li>
|
||
<li><a href="https://morningreader.com">Morning Reader</a>: Breaking
|
||
tech news.</li>
|
||
<li><a
|
||
href="https://www.youtube.com/channel/UClKO7be7O9cUGL94PHnAeOA">Google
|
||
design</a>: Youtube channel featuring videos for designers about Google
|
||
design.</li>
|
||
</ul>
|
||
<h2 id="inspiration">Inspiration</h2>
|
||
<ul>
|
||
<li><a href="http://awwwards.com">Awwwards</a>: Best web design
|
||
trends.</li>
|
||
<li><a href="http://onepagelove.com">One Page Love</a>: Design gallery
|
||
showcasing the best Single Page websites.</li>
|
||
<li><a href="http://inspired-ui.com/">Inspired UI</a>: Mobile apps
|
||
design patterns.</li>
|
||
<li><a href="http://behance.net">Behance</a>: Showcase & discover
|
||
creative work.</li>
|
||
<li><a href="http://dribbble.com">Dribbble</a>: Show and tell for
|
||
designers.</li>
|
||
<li><a href="http://producthunt.com">Product Hunt</a>: The place to
|
||
discover your next favorite thing.</li>
|
||
<li><a href="https://uimovement.com">UI Movement</a>: The best UI design
|
||
inspiration, every day.</li>
|
||
<li><a href="http://pttrns.com/">Pttrns</a>: The finest collection of
|
||
design patterns, resources and inspiration.</li>
|
||
</ul>
|
||
<h2 id="colors">Colors</h2>
|
||
<ul>
|
||
<li><a href="https://brandcolors.net/">Brandcolors</a>: Official colors
|
||
for the world’s biggest brands.</li>
|
||
<li><a href="https://color.adobe.com/">Adobe Color CC</a>: Create color
|
||
schemes with the color wheel or browse thousands of color combinations
|
||
from the Kuler community.</li>
|
||
<li><a href="http://paletton.com">Paletton</a>: A designer tool for
|
||
creating color combinations that work together well.</li>
|
||
<li><a href="https://coolors.co/">Coolors</a>: Generate infinite color
|
||
palettes for your designs.</li>
|
||
<li><a href="http://www.lolcolors.com/">Lol Colors</a>: Curated color
|
||
palette inspiration.</li>
|
||
<li><a href="https://color.hailpixel.com/">Colordot</a>: A color picker
|
||
for humans.</li>
|
||
<li><a href="http://www.gradients.io/">Gradients.io</a>: Curated
|
||
gradients for designers & developers.</li>
|
||
<li><a href="http://uigradients.com/">UI Gradients</a>: Beautiful color
|
||
gradients.</li>
|
||
<li><a href="http://colorzilla.com">Colorzilla</a>: Eyedropper, color
|
||
picker, gradient generator.</li>
|
||
</ul>
|
||
<h2 id="typography">Typography</h2>
|
||
<ul>
|
||
<li><a href="http://fonts.google.com">Google Web Fonts</a>: Offering an
|
||
intuitive and robust directory of open source designer web fonts.</li>
|
||
<li><a href="http://fontface.ninja/">Font Face Ninja Browser
|
||
Extension</a>: You’re browsing a website and you want to find the name
|
||
of a font? Here comes the ninja!</li>
|
||
<li><a href="http://fontpair.co">Fontpair</a>: Beautiful Google Font
|
||
combinations and pairs.</li>
|
||
<li><a href="https://typeanything.io/">Type Anything</a>: Create great
|
||
font combinations.</li>
|
||
<li><a href="http://type-scale.com/">Type Scale</a>: Preview and choose
|
||
the right type scale for your project.</li>
|
||
<li><a href="https://www.myfonts.com/WhatTheFont/">WhatTheFont</a>: Seen
|
||
a font in an image and want to know what it is? WhatTheFont will find
|
||
the closest match.</li>
|
||
<li><a href="https://www.typewolf.com/">Typewolf</a>: Comprehensive web
|
||
typography info, suggestions for font alternatives, and links to usage
|
||
in the wild.</li>
|
||
<li><a href="http://typ.io/">Typ.io</a>: Typography inspiration from
|
||
real websites.</li>
|
||
</ul>
|
||
<h2 id="icons">Icons</h2>
|
||
<ul>
|
||
<li><a href="http://flaticon.com">Flat Icon</a>: Thousands of free flat
|
||
icons.</li>
|
||
<li><a href="http://fontawesome.io">Font Awesome</a>: The iconic font
|
||
and CSS toolkit.</li>
|
||
<li><a href="http://iconfinder.com">Icon Finder</a>: 1 million free and
|
||
premium icons.</li>
|
||
<li><a href="https://thenounproject.com/">The Noun Project</a>: Icons
|
||
for Everything.</li>
|
||
<li><a href="http://www.favicon-generator.org/">Favicon Generator</a>:
|
||
Favicon & app icon generator.</li>
|
||
<li><a href="http://freepik.com">Freepik</a>: Free vectors in different
|
||
formats.</li>
|
||
<li><a href="http://vecteezy.com">Vecteezy</a>: A collection of free
|
||
vector art, vector graphics, illustrator backgrounds, etc.</li>
|
||
<li><a href="https://material.io/icons/">Material Icons</a>: Free to use
|
||
material design icons from Google.</li>
|
||
<li><a href="http://ionicons.com/">Ionicons</a>: The premium icon font
|
||
for Ionic Framework.</li>
|
||
</ul>
|
||
<h2 id="images">Images</h2>
|
||
<ul>
|
||
<li><a href="https://pexels.com">Pexels</a>: Best free stock photos in
|
||
one place.</li>
|
||
<li><a href="http://unsplash.it">Unsplash.it</a>: Placeholders using a
|
||
beautiful image gallery.</li>
|
||
<li><a href="https://pixabay.com/">Pixabay</a>: High quality photos and
|
||
illustrations free for commercial use.</li>
|
||
<li><a href="http://placehold.it">Placehold.it</a>: A quick and simple
|
||
image placeholder service.</li>
|
||
<li><a href="http://imgur.com">Imgur</a>: The most awesome images on the
|
||
internet.</li>
|
||
<li><a href="https://www.flickr.com">Flickr</a>: The home for all your
|
||
photos.</li>
|
||
</ul>
|
||
<h2 id="guidelines">Guidelines</h2>
|
||
<ul>
|
||
<li><a
|
||
href="https://developer.apple.com/ios/human-interface-guidelines/">iOS
|
||
Human Interface Guidelines</a>: Offers everything you need to design
|
||
beautiful, engaging iOS apps.</li>
|
||
<li><a href="https://material.google.com/">Google Material Design</a>: A
|
||
close look at the design, components & resources for Google’s
|
||
brand.</li>
|
||
<li><a href="https://lawsofux.com/">Laws of UX</a>: A collection of the
|
||
maxims and principles that designers can consider when building user
|
||
interfaces.</li>
|
||
<li><a
|
||
href="https://www.moveoapps.com/ultimate-guide-to-mobile-app-design-principles">Ultimate
|
||
Guide</a>: The ultimate guide to mobile app design principles that make
|
||
your app shine.</li>
|
||
<li><a href="http://www.goodui.org/">GoodUI</a>: 5 Ways You Can Get A
|
||
Better UI.</li>
|
||
</ul>
|
||
<h2 id="design-tools">Design Tools</h2>
|
||
<ul>
|
||
<li><a href="http://sketchapp.com">Sketch</a>: A lightweight program for
|
||
digital design for Mac.</li>
|
||
<li><a href="http://figma.com">Figma</a>: The collaborative interface
|
||
design tool.</li>
|
||
<li><a
|
||
href="https://www.adobe.com/products/experience-design.html">Adobe
|
||
XD</a>: Prototyping & wireframing Tool.</li>
|
||
<li><a href="https://www.invisionapp.com/studio">inVision Studio</a>:
|
||
Rapid prototyping, animation, built-in design systems, and
|
||
collaboration.</li>
|
||
<li><a href="http://canva.com">Canva</a>: Amazingly simple graphic
|
||
design software.</li>
|
||
<li><a href="https://framer.com/">Framer X</a>: Interaction Design and
|
||
UX design software.</li>
|
||
</ul>
|
||
<h2 id="prototype-tools">Prototype Tools</h2>
|
||
<ul>
|
||
<li><a href="https://zeplin.io/">Zeplin</a>: A great collaboration tool
|
||
between designers and developers.</li>
|
||
<li><a href="https://avocode.com/">Avocode</a>: A workspace open to all
|
||
designers and developers.</li>
|
||
<li><a href="https://www.invisionapp.com/">inVision</a>: The world’s
|
||
leading prototyping, collaboration & workflow platform.</li>
|
||
<li><a href="http://justinmind.com">Justinmind</a>: Prototype faster,
|
||
communicate better, for web and mobile apps.</li>
|
||
<li><a href="https://marvelapp.com/">Marvel App</a>: Free mobile &
|
||
web prototyping for designers.</li>
|
||
<li><a href="https://atomic.io/">Atomic.io</a>: Free in Browser
|
||
interactive design Tool.</li>
|
||
<li><a href="https://www.flinto.com/">Flinto</a>: App to create
|
||
interactive and animated prototypes of designs.</li>
|
||
</ul>
|
||
<h2 id="tutorials">Tutorials</h2>
|
||
<ul>
|
||
<li><a href="https://teamtreehouse.com/tracks/web-design">Treehouse</a>:
|
||
Brings affordable, technology education to people everywhere.</li>
|
||
<li><a href="http://webdesign.tutsplus.com/">Tuts Plus Web Design
|
||
Tutorials</a>: Free web design and development tutorials.</li>
|
||
<li><a href="https://www.springboard.com">Springboard</a>: Personalized
|
||
approach, designed to help you achieve your goals and advance your
|
||
career.</li>
|
||
<li><a href="https://www.sketchapp.com/learn/">Learn Sketch</a>: Short
|
||
videos and compiled invaluable resources to help you get started!</li>
|
||
<li><a href="https://www.xdguru.com/adobe-xd-guide/">Adobe XD Guide</a>:
|
||
A 12,000-words-long comprehensive guide for XD beginners and current
|
||
users.</li>
|
||
</ul>
|
||
<h2 id="books">Books</h2>
|
||
<ul>
|
||
<li><a href="https://www.manning.com/books/web-design-playground/">Web
|
||
design playground</a>: A step by step guide from writing your first line
|
||
of HTML to creating interesting, attractive web pages.</li>
|
||
<li><a
|
||
href="https://www.amazon.com/Dont-Make-Me-Think-Usability/dp/0321344758">Don’t
|
||
make me think</a></li>
|
||
<li><a
|
||
href="https://www.amazon.com/Design-Everyday-Things-Donald-Norman/dp/1452654123">The
|
||
design of everyday things</a></li>
|
||
<li><a
|
||
href="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_">100
|
||
things every designer needs to know about people</a></li>
|
||
</ul>
|
||
<h2 id="productivity">Productivity</h2>
|
||
<ul>
|
||
<li><a href="http://tomato-timer.com">Pomodoro</a>: A cool time
|
||
management technique for a more productive way to work and study.</li>
|
||
<li><a href="http://toggl.com">Toggl</a>: Time tracker to improve
|
||
workplace productivity.</li>
|
||
<li><a href="http://trello.com">Trello</a>: Organize and prioritize your
|
||
projects in a fun, flexible and rewarding way.</li>
|
||
<li><a href="https://www.rescuetime.com">RescueTime</a>: Helps you
|
||
understand your daily habits so you can focus and be more
|
||
productive.</li>
|
||
<li><a href="https://qotoqot.com/qbserve/">Qbserve</a>: Automatic time
|
||
tracking, invoicing, and real-time productivity feedback.</li>
|
||
<li><a href="http://pasteapp.me/">Paste</a>: A smart clipboard history
|
||
manager for Mac.</li>
|
||
<li><a href="http://sipapp.io/">Sip</a>: A color picker for Mac.</li>
|
||
<li><a href="https://timingapp.com/">Timing</a>: Automatic time and
|
||
productivity tracking for Mac.</li>
|
||
<li><a href="https://taskade.com/">Taskade</a>: Collaborative task lists
|
||
and outlines for teams.</li>
|
||
</ul>
|
||
<h2 id="slack-teams">Slack Teams</h2>
|
||
<ul>
|
||
<li><a href="http://teamsketch.io">Team Sketch</a>: A community for
|
||
Sketch designers powered by Slack</li>
|
||
<li><a href="https://www.designerhangout.co">Designer Hangout</a>: A
|
||
place where UXers from around the world discuss user experience.</li>
|
||
<li><a
|
||
href="https://docs.google.com/forms/d/e/1FAIpQLSeKT_LC8kKTzJ4JjmgVQVpfl24i1qBkjJ7TYyQcNHL7fBQkYQ/viewform?c=0&w=1">Design
|
||
Talks</a>: A community for UI/UX design, web design, freelancing, design
|
||
critiques, etc.</li>
|
||
<li><a href="http://thedesignership.com/">TheDesignerShip</a>: A
|
||
community of over 1,500+ designers and founders.</li>
|
||
</ul>
|
||
<h2 id="share">Share</h2>
|
||
<ul>
|
||
<li><a href="https://twitter.com/intent/tweet?text=https://github.com/nicolesaidy/awesome-web-design%20An%20Awesome%20Web%20Design%20Collection%20@nicolesaidy" target="_blank">Share
|
||
on Twitter</a></li>
|
||
<li><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%20Web%20Design%20Collection&p[summary]=" target="_blank">Share
|
||
on Facebook</a></li>
|
||
</ul>
|
||
<h2 id="license">License</h2>
|
||
<p><a href="https://creativecommons.org/publicdomain/zero/1.0/"><img
|
||
src="http://mirrors.creativecommons.org/presskit/buttons/88x31/svg/cc-zero.svg"
|
||
alt="CC0" /></a></p>
|
||
<p><a
|
||
href="https://github.com/nicolesaidy/awesome-web-design">webdesign.md
|
||
Github</a></p>
|