50 Awesome Resources For Web Designers

There are many lists out there which tell you the best design resources of the month. They’re great for keeping you up to date on the latest tips and tricks.

This list is gives you the best 50 resources out there. Period. Stay inspired, increase productivity and workflow, and use the coolest tools to create awesome designs.

Read up.

  1. Toptal Hiring Guides: Toptal just did everyone a solid, explaining the difference between UX, UI, Interaction and Visual Design. Employers, take note. Designers, breathe a sigh of relief, then check out the guides to make sure you’re up on all the skills you should be.
  2. 7 Unbreakable Laws of User Interface Design: The title says it all. Read these and abide by them.
  3. itize.us: The goal of this site is to be a “a painstakingly curated presenation of the most well designed apps.” They’re achieving it.
  4. Smashing Magazine: This list wouldn’t be complete with mention of this incredibly influential resource. Founded in 2006, it continues to churn out some of the best articles on general design principles, typography, UI, and the business side of design.
  5. Web Design Tuts+: Web Design Tuts+ covers HTML&CSS, Photoshop, Design Theory, and Site Elements in extremely helpful video tutorials.
  6. Freelance Blog: Their hiring guides are just the start. Follow to tap into the thinking of the world’s top freelance designers.
  7. Bad User Design is Death by a Thousand Cuts: If you learn best by knowing what not to do, this article is for you. It walks you through the large consequences of small usability issues. After reading, you’ll be sure not to let the little things slip by anymore.


More Daily Inspiration.

  1. Little Big Details: Floris Dekker’s blog cranks out new tidbits of design inspiration each day. Read with morning coffee.
  2. Pttrns: Pttrns claims to be the “finest collection of design patterns, resources, and inspiration.” That’s a big statement, but it’s pretty hard to counter. The site provides a massive and well-organized collection of UI patterns to get the creative juices flowing.
  3. Google Design: Read up on what new tools Google’s using.
  4. Site Inspire: The blog with no articles, Site Inspire provides well curated eye-candy.
  5. DesignTaxi: DesignTaxi was named as one of Forbes “Top Five Sites for Keeping up With Creativity and Design” back in 2012. It remains a great one-stop shop for inspiration, attracting 6 million views each month.


Prototypes, Wireframes, and Mockups.

  1. Pixate: Acquired by Google in July, this visual prototyping platform does a phenomenal job helping designers create 100% native prototypes for IOS and Android.
  2. Affinity: Serif’s Affinity has been called “the photoshop killer” because it makes handling images so much easier. Here’s one sneak peak: while Photoshop lets you zoom 32,000 percent, Affinity gives you 1,000,000 zooming capabilities.
  3. Marvel: Marvel is a prototyping tool that lets you create mobile and web prototypes without having to code. It integrates with your Dropbox and Google Drive so any changes you make to design files are automatically updated in the prototype.
  4. Origami: Used to build Facebook Messenger and improve Instagram, Facebook’s Origami is all about helping you quickly put together a prototype, run it on your mobile device, and export bits of code for your engineers to use.
  5. Moqups: An HTML5 App that makes stenciling easier than ever before, Moqups helps you create high resolution mockups and wireframes on Chrome.
  6. Balsamiq: Perhaps the direct competitor to Moqups, Balsamiq is another web based wireframing tool that focuses on usability.
  7. Protosketch: Made just for iPad, if you priviledge finger-design over the mouse, this is the prototyping tool for you.
  8. Form: Form uses Google’s Material Design principles to help you design native prototypes on your computer that will instantly pop up on your phone.
  9. Themify Flow: Themify Flow is a free framework that allows you to design responsive themes within WordPress from a drag-and-drop interface.


Kits, Templates, and Libraries.

  1. Motion UI: Motion UI is a Sass library that helps designers create flexible transitions and animations (CSS3 Transform, Transitions, and Animation). Public access just became available this November. Snatch it up.
  2. A1 UI Kit: Brought to you by Behance, A1’s landing page says it all.
  3. S. Web Design Standard: Built by the U.S. Digital Service and 18F Designers, this is an open source UI and visual style guide which provides free access to the prototyping tools used for federal government platforms.
  4. Workspace Illustrations Kit: Designed by Belarusian Anastasia Kolisnichenko and released free by Smashing Magazine, this vector kit provides designers with 60 illustrations of workspace items ranging from Apple Watches to Moleskins. You can use an illustration as they are or customize its stroke, color, thickness, or pretty much any other element.
  5. Flat UI Pro: Made on the basis of Twitter Bootstap, The Flat UI Pro kit provides many basic components, icons, and glyphs which will help you create stunning flat-style designs.
  6. Vonn Mobile Material Design UI Kit: Android app designers, this one’s for you. The Kit features 100 drag and drop UI templates that will make your life a whole lot easier.
  7. Relay: Relay is a collaboration tool that makes it easier for Slack users to share work across various programs such as Adobe CC, Sketch, Chrome and OSX.
  8. Skala Preview sends lossless and color accurate image previews from photoshop or adobe to your iOS or Android device.
  9. Stark UI Kit: Another great and free UI PSD kit for you, featuring 200+ components and 90+ elements for 10 different categories.
  10. Font Library: This open-source project lets you tag, organize, and browse Google Fonts.
  11. Dribbble Infographics Freebie These 10 infographic vector templates for Adobe Illustrator are editable and premium quality.
  12. Chapter Three: Check out this robust wireframe template for Sketch. It features a 12-column grid based on Twitter Bootstrap, an array of typography styles, icons, and UI elements and 3 levels of mobile navigation.
  13. UIKit Fundamentals: Same goes here – if you’ve designed a couple apps, but don’t feel like you have the skills to take on more sophisticated projects, enroll in this free course to learn everything you need to know about the iOS User Interface Library.
  14. JustifiedJS: JustifiedJS is a jQuery plugin for organizing your image gallery. The JavaScript library lets you arrange your image gallery to fit into one square frame without modifying the aspect ratio of each individual image. The outcome is a beautiful justified image grid.
  15. CSSGram: Edit your images with Instragram-like filters directly in CSS with this awesome new JavaScript library.


Color, Type, Icons, and More.

  1. A Guide to Typography and UX: If you’ve had a hard time figuring out what type of typography is best for your design, this guide is for you.
  2. Material Palette: This web app helps you generate your own material design color palette, download it, and use it as you build an app or design its buttons.
  3. 4 Tips on Typography in UI Design: Here’s another tool for optimizing typography.
  4. Design UI Elements: If you’re new to UI design or in need of a refresher, you can develop your photoshop skills with this short course on creating user interface elements.
  5. Device Metrics: As its name suggests, Device Metrics lets you check the screen size, resolution, and aspect ratio for all devices you’re working with in one place.
  6. co: Another tool for making powerful color decisions, Material designers map out their material design colors and icons as well as flat design colors. The palettes start with primary colors and fill in a spectrum to give over 500 options to work with.
  7. js: This JavaScript utility is an incredible tool for finding the focal point of an image to make cropping smarter.
  8. Bootswatch: Bootswatch lets you browse and download themes that are all up to date for the latest version of Bootstrap. The themes are maintained by the GitHub community, and updates are made a breeze.
  9. to[icon]: This amsterdam-based team creates icons oriented for action with pixel perfection, easy searches, and awesome colors.
  10. The Noun Project: Its motto: Drag, Drop, Done. Search and download over 100,000 icons for Mac.



  1. The Design of Everyday Things: Don Normann takes you through the psychological aspects of user experience in this book about how and why some designs attract customers while others frustrate them.
  2. Don’t Make Me Think, Revisited: This is the follow up to Steve Krug’s wildly successful Don’t Make Me Think which was published back in 2000 and became one of the most influential web design books in existence. Like the original, this focuses on designing for usability. It is such a witty read you’ll forget that you’re reading a technical book.
  3. HTML and CSS: Design and Build Websites: Now here is a well-designed book on design. Jon Duckett created a book that is equal parts visual inspiration and technical guide for beginners and experienced designers alike.
  4. Open Design Now: If you want to about the future of design –and you should– read this. You’ll understand “why design cannot remain exclusive” and how open design changes the industry completely.


There you have it. 50 resources to help designers at any stage stay inspired and up to date when tackling any project.


Disclosure: In full disclosure, it is safe to assume that the site owner is benefiting financially or otherwise from everything you click on, read, or look at while on my website. This is not to say that is the case with all content, as all publications on the site are original and written to provide value and references to our audience.


  1. jaidayal Saraswat February 12, 2016
  2. Bhasker Raj February 12, 2016