{"id":78286,"url":"https://github.com/SecretDev804/Awesome_web_design","name":"Awesome_web_design","description":"🎨 A curated list of awesome resources for digital designers.","projects_count":92,"last_synced_at":"2026-06-10T20:00:24.366Z","repository":{"id":228956438,"uuid":"775376604","full_name":"SecretDev804/Awesome_web_design","owner":"SecretDev804","description":"🎨 A curated list of awesome resources for digital designers.","archived":false,"fork":false,"pushed_at":"2024-03-21T09:24:53.000Z","size":57,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-05-25T05:02:59.135Z","etag":null,"topics":["bootstra","css","design","material-ui","react","ui-design","ux-design","webdesign"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SecretDev804.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2024-03-21T09:23:09.000Z","updated_at":"2024-03-21T09:26:19.000Z","dependencies_parsed_at":"2024-03-21T10:52:42.626Z","dependency_job_id":null,"html_url":"https://github.com/SecretDev804/Awesome_web_design","commit_stats":null,"previous_names":["devcrazer/awesome_web_design","kristoffalaric/awesome_web_design","megadev007/awesome_web_design","secretdev804/awesome_web_design"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/SecretDev804/Awesome_web_design","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SecretDev804%2FAwesome_web_design","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SecretDev804%2FAwesome_web_design/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SecretDev804%2FAwesome_web_design/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SecretDev804%2FAwesome_web_design/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SecretDev804","download_url":"https://codeload.github.com/SecretDev804/Awesome_web_design/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SecretDev804%2FAwesome_web_design/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34168086,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-10T02:00:07.152Z","response_time":89,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"created_at":"2024-11-14T00:23:16.026Z","updated_at":"2026-06-10T20:00:24.366Z","primary_language":null,"list_of_lists":false,"displayable":true,"categories":["Prototype Tools","Productivity","Colors","Blog \u0026 News","Typography","Icons","Images","Guidelines","Design Tools","Tutorials","Books","Slack Teams","Inspiration","License"],"sub_categories":[],"readme":"# Awesome Web Design [![Awesome](https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg)](https://github.com/sindresorhus/awesome)\n\u003e A curated list of awesome resources for digital designers.\n\n**Check out my [website](http://nicolesaidy.com) \u0026 [blog](http://blog.nicolesaidy.com). ✨**\n\n## Contents\n\n- [Blog \u0026 News](#blog--news)\n- [Inspiration](#inspiration)\n- [Colors](#colors)\n- [Typography](#typography)\n- [Icons](#icons)\n- [Images](#images)\n- [Guidelines](#guidelines)\n- [Design Tools](#design-tools)\n- [Prototype Tools](#prototype-tools)\n- [Tutorials](#tutorials)\n- [Books](#books)\n- [Productivity](#productivity)\n- [Slack Teams](#slack-teams)\n\n## Blog \u0026 News\n* [Web Designer News](http://webdesignernews.com): The best curated stories for designers.\n* [Marvel Blog](http://blog.marvelapp.com): The latest news, resources and thoughts from the Marvel team.\n* [The Next Web](http://thenextweb.com/section/creative/): International technology news, business \u0026 culture.\n* [Medium](https://medium.com/tag/web-design): A community of readers and writers offering unique perspectives on ideas large and small.\n* [Creative Bloq](http://www.creativebloq.com/): Art \u0026 design inspiration.\n* [Smashing Magazine](http://smashingmagazine.com): For professional web designers \u0026 developers.\n* [Sitepoint](https://www.sitepoint.com/design-ux/): A hub for web developers \u0026 designers to share their passion for building incredible internet things.\n* [Designer News](https://www.designernews.co/): Where the design community meets.\n* [Reddit Web Design](https://www.reddit.com/r/web_design/): A place for designers to contribute useful posts, ask questions or engage in discussion.\n* [Morning Reader](https://morningreader.com): Breaking tech news.\n* [Google design](https://www.youtube.com/channel/UClKO7be7O9cUGL94PHnAeOA): Youtube channel featuring videos for designers about Google design.\n\n## Inspiration\n* [Awwwards](http://awwwards.com): Best web design trends.\n* [One Page Love](http://onepagelove.com):  Design gallery showcasing the best Single Page websites.\n* [Inspired UI](http://inspired-ui.com/): Mobile apps design patterns.\n* [Behance](http://behance.net): Showcase \u0026 discover creative work.\n* [Dribbble](http://dribbble.com): Show and tell for designers.\n* [Product Hunt](http://producthunt.com): The place to discover your next favorite thing.\n* [UI Movement](https://uimovement.com): The best UI design inspiration, every day.\n* [Pttrns](http://pttrns.com/): The finest collection of design patterns, resources and inspiration.\n\n## Colors\n* [Brandcolors](https://brandcolors.net/): Official colors for the world's biggest brands.\n* [Adobe Color CC](https://color.adobe.com/): Create color schemes with the color wheel or browse thousands of color combinations from the Kuler community.\n* [Paletton](http://paletton.com): A designer tool for creating color combinations that work together well.\n* [Coolors](https://coolors.co/): Generate infinite color palettes for your designs.\n* [Lol Colors](http://www.lolcolors.com/): Curated color palette inspiration.\n* [Colordot](https://color.hailpixel.com/): A color picker for humans.\n* [Gradients.io](http://www.gradients.io/): Curated gradients for designers \u0026 developers.\n* [UI Gradients](http://uigradients.com/): Beautiful color gradients.\n* [Colorzilla](http://colorzilla.com): Eyedropper, color picker, gradient generator.\n\n## Typography\n* [Google Web Fonts](http://fonts.google.com): Offering an intuitive and robust directory of open source designer web fonts.\n* [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!\n* [Fontpair](http://fontpair.co): Beautiful Google Font combinations and pairs.\n* [Type Anything](https://typeanything.io/): Create great font combinations.\n* [Type Scale](http://type-scale.com/): Preview and choose the right type scale for your project.\n* [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.\n* [Typewolf](https://www.typewolf.com/): Comprehensive web typography info, suggestions for font alternatives, and links to usage in the wild.\n* [Typ.io](http://typ.io/): Typography inspiration from real websites.\n\n## Icons\n* [Flat Icon](http://flaticon.com): Thousands of free flat icons.\n* [Font Awesome](http://fontawesome.io): The iconic font and CSS toolkit.\n* [Icon Finder](http://iconfinder.com): 1 million free and premium icons.\n* [The Noun Project](https://thenounproject.com/): Icons for Everything.\n* [Favicon Generator](http://www.favicon-generator.org/): Favicon \u0026 app icon generator.\n* [Freepik](http://freepik.com): Free vectors in different formats.\n* [Vecteezy](http://vecteezy.com): A collection of free vector art, vector graphics, illustrator backgrounds, etc.\n* [Material Icons](https://material.io/icons/): Free to use material design icons from Google.\n* [Ionicons](http://ionicons.com/): The premium icon font for Ionic Framework.\n\n## Images\n* [Pexels](https://pexels.com): Best free stock photos in one place.\n* [Unsplash.it](http://unsplash.it): Placeholders using a beautiful image gallery.\n* [Pixabay](https://pixabay.com/): High quality photos and illustrations free for commercial use.\n* [Placehold.it](http://placehold.it): A quick and simple image placeholder service.\n* [Imgur](http://imgur.com): The most awesome images on the internet.\n* [Flickr](https://www.flickr.com): The home for all your photos.\n\n## Guidelines\n* [iOS Human Interface Guidelines](https://developer.apple.com/ios/human-interface-guidelines/): Offers everything you need to design beautiful, engaging iOS apps.\n* [Google Material Design](https://material.google.com/): A close look at the design, components \u0026 resources for Google's brand.\n* [Laws of UX](https://lawsofux.com/): A collection of the maxims and principles that designers can consider when building user interfaces.\n* [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.\n* [GoodUI](http://www.goodui.org/): 5 Ways You Can Get A Better UI.\n\n## Design Tools\n* [Sketch](http://sketchapp.com): A lightweight program for digital design for Mac.\n* [Figma](http://figma.com): The collaborative interface design tool.\n* [Adobe XD](https://www.adobe.com/products/experience-design.html): Prototyping \u0026 wireframing Tool.\n* [inVision Studio](https://www.invisionapp.com/studio): Rapid prototyping, animation, built-in design systems, and collaboration.\n* [Canva](http://canva.com): Amazingly simple graphic design software.\n* [Framer X](https://framer.com/): Interaction Design and UX design software.\n\n## Prototype Tools\n* [Zeplin](https://zeplin.io/): A great collaboration tool between designers and developers.\n* [Avocode](https://avocode.com/): A workspace open to all designers and developers.\n* [inVision](https://www.invisionapp.com/): The world's leading prototyping, collaboration \u0026 workflow platform.\n* [Justinmind](http://justinmind.com): Prototype faster, communicate better, for web and mobile apps.\n* [Marvel App](https://marvelapp.com/): Free mobile \u0026 web prototyping for designers.\n* [Atomic.io](https://atomic.io/): Free in Browser interactive design Tool.\n* [Flinto](https://www.flinto.com/):  App to create interactive and animated prototypes of designs.\n\n## Tutorials\n* [Treehouse](https://teamtreehouse.com/tracks/web-design): Brings affordable, technology education to people everywhere.\n* [Tuts Plus Web Design Tutorials](http://webdesign.tutsplus.com/): Free web design and development tutorials.\n* [Springboard](https://www.springboard.com): Personalized approach, designed to help you achieve your goals and advance your career.\n* [Learn Sketch](https://www.sketchapp.com/learn/): Short videos and compiled invaluable resources to help you get started!\n* [Adobe XD Guide](https://www.xdguru.com/adobe-xd-guide/): A 12,000-words-long comprehensive guide for XD beginners and current users. \n\n## Books\n* [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.\n* [Don't make me think](https://www.amazon.com/Dont-Make-Me-Think-Usability/dp/0321344758)\n* [The design of everyday things](https://www.amazon.com/Design-Everyday-Things-Donald-Norman/dp/1452654123)\n* [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\u0026ie=UTF8\u0026qid=1419267906\u0026sr=1-1\u0026keywords=100+Things+Every+Designer+Needs+to+Know?utm_source=CMblog\u0026utm_medium=post\u0026utm_campaign=blog_)\n\n## Productivity\n* [Pomodoro](http://tomato-timer.com): A cool time management technique for a more productive way to work and study.\n* [Toggl](http://toggl.com): Time tracker to improve workplace productivity.\n* [Trello](http://trello.com): Organize and prioritize your projects in a fun, flexible and rewarding way.\n* [RescueTime](https://www.rescuetime.com): Helps you understand your daily habits so you can focus and be more productive.\n* [Qbserve](https://qotoqot.com/qbserve/): Automatic time tracking, invoicing, and real-time productivity feedback.\n* [Paste](http://pasteapp.me/): A smart clipboard history manager for Mac.\n* [Sip](http://sipapp.io/): A color picker for Mac.\n* [Timing](https://timingapp.com/): Automatic time and productivity tracking for Mac.\n* [Taskade](https://taskade.com/): Collaborative task lists and outlines for teams.\n\n## Slack Teams\n* [Team Sketch](http://teamsketch.io): A community for Sketch designers powered by Slack\n* [Designer Hangout](https://www.designerhangout.co): A place where UXers from around the world discuss user experience.\n* [Design Talks](https://docs.google.com/forms/d/e/1FAIpQLSeKT_LC8kKTzJ4JjmgVQVpfl24i1qBkjJ7TYyQcNHL7fBQkYQ/viewform?c=0\u0026w=1): A community for UI/UX design, web design, freelancing, design critiques, etc.\n* [TheDesignerShip](http://thedesignership.com/): A community of over 1,500+ designers and founders.\n\n## Share\n* \u003ca href=\"https://twitter.com/intent/tweet?text=https://github.com/nicolesaidy/awesome-web-design%20An%20Awesome%20Web%20Design%20Collection%20@nicolesaidy\" target=\"_blank\"\u003eShare on Twitter\u003c/a\u003e\n* \u003ca href=\"https://www.facebook.com/sharer/sharer.php?s=100\u0026p[url]=https://github.com/nicolesaidy/awesome-web-design\u0026p[images][0]=\u0026p[title]=Awesome%20Web%20Design%20Collection\u0026p[summary]=\" target=\"_blank\"\u003eShare on Facebook\u003c/a\u003e\n\n## License\n[![CC0](http://mirrors.creativecommons.org/presskit/buttons/88x31/svg/cc-zero.svg)](https://creativecommons.org/publicdomain/zero/1.0/)\n","projects_url":"https://awesome.ecosyste.ms/api/v1/lists/secretdev804%2Fawesome_web_design/projects"}