rhetenor/awesome-awesomeness
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Jonas Zeunert
2025-07-18 23:13:11 +02:00
parent c9485bf576
commit 652812eed0
2354 changed files with 1266414 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

285
html/webdesign.md2.html Normal file
View File

@@ -0,0 +1,285 @@
<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>
&amp; <a href="http://blog.nicolesaidy.com">blog</a>. ✨</strong></p>
<h2 id="contents">Contents</h2>
<ul>
<li><a href="#blog--news">Blog &amp; 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 &amp; 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 &amp; 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 &amp;
design inspiration.</li>
<li><a href="http://smashingmagazine.com">Smashing Magazine</a>: For
professional web designers &amp; developers.</li>
<li><a href="https://www.sitepoint.com/design-ux/">Sitepoint</a>: A hub
for web developers &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp; 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 &amp;
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&amp;ie=UTF8&amp;qid=1419267906&amp;sr=1-1&amp;keywords=100+Things+Every+Designer+Needs+to+Know?utm_source=CMblog&amp;utm_medium=post&amp;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&amp;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>