61 UI / UX Resources for Web Designers

Understsanding User Interface (UI) design will take your web design to another level. Designs that consider UI principles are more successful as they help ensure the goal of the website is reached. To make sure you’re the best web designer you can be, we’re going to share 61 UI and UX resources so you have everything you need.

UI and UX in Web Design

UI refers to User Interface and UX refers to user experience. Both are important in web design.

For example, fonts and colors are a piece of UI where UX isn’t about visuals, it’s more about the user’s feel of the overall experience on the website.

While different, UI and UX work closely together. If a website looks really good but is hard to use, it’s not successful. Likewise, if it’s easy to use but looks really bad it’s not successful either.

61 UI & UX Resources for Web Designers

We’ve broken down the resources into 15 categories so you can jump to the section you need. Don’t forget to bookmark for later!

TABLE OF CONTENTS

 

UI Kits & Kit Marketplaces

  1. Find many UI Kit Marketplaces at Design Modo
  2. iOS 11 iPhone on Facebook featuring Origami, Sketch, Framer and Photoshop templates of GUI elements
  3. Discover UI Kit Marketplaces to download and use for various devices at UpLabs
  4. Creative Tim has some of the best Bootstrap UI Kits
  5. 55+ Elements Free UI Kit
  6. Oh no, not another UI Kit
  7. PSD Booster’s UI Kit, themes & other freebies

UI & UX Websites and Resources

  1. UX Magazine is a one-stop resource for everything related to user experience
  2. UX Matters is a web magazine about user experience matters
  3. UX Planet is a great resource for user experience relevant topics
  4. Nielsen Norman Group are leaders in research based usesr experience
  5. Usability.gov is good for user experience best practices and strategies. Learn how to create more usable, useful, and accessible websites.
  6. Find good UI ideas and A/B tested patterns for higher conversion at Good UI
  7. Usability Geek is a blog that provides useful tips into usability, user experience and a lot more.

UI Inspiration

  1. Design Snips is a great resource to browse through for inspiration you can incorporate into your UI design work
  2. Get inspired by the best web and interactive design at Site Inspire
  3. Niice is a moodboard generator that pulls in design and UX projects from various sites to help inspire you

Read Now: ? 10 Rules of Good UI Design to Follow on Every Web Design Project

Design Patterns

  1. UI Patterns is a User Interface Design Pattern Library. These patterns serve as standard reference points.
  2. Find a lot of best practices in Interaction Design at Welie
  3. Astrum is a lightweight pattern library for your web projects

Checklists & Guidelines

  1. Use the online UX Project Checklist to use for all your web projects. Login with Google to save your checklist.
  2. Checklist Design is a collection of the best UX and UI practices
  3. The official guide to Google’s Material Design standards
  4. Test your websites for best practices, accessibility, testing, performance and a lot more with The Front-End Checklist

Fonts & Icons

  1. Use the popular icon set and toolkit with icons and social logos for your websites with Font Awesome
  2. Icon8 serves up free, pixel perfect icons for various design styles in png and vector
  3. Flat Icon has the largest database of free vector icons with over 145,000+ icons in various formats
  4. Find free avatar placeholder sources for your design mocksup at UI Faces. Includes options for Sketch, Adobe XD and Figma.

Tools for Vector & Bitmap Images

  1. Sketch is a design toolkit built to help you create your best work — from your earliest ideas, through to final artwork (for Mac)
  2. Adobe XD is your UI/UX design solution for website creation (for Windows)
  3. Figma allows multiple designers to creative responsive designs while simultaneously working on the same file

Mind Mapping

Mind mapping helps web designers present internal processes and organize information effectively.

  1. XMind is a popular mind mapping software (for Mac and Windows)
  2. Create colorful mind maps to print or share with others with Bubbl
  3. Develop mind maps easily with Coggle
  4. MindMapple is pre-loaded with themes and templates for your mind maps
  5. MindMeister is an easy way to share your ideas with a team using a mind map

Wireframing & Prototyping

  1. UX Pin is a UI design and prototyping tool with a real feel that uses code componenets, logic, states and design systems
  2. OmniGraffle is used to create visuals with many features including design tools, a drag-n-drop WYSIWYG interface and a notes function
  3. Balsamiq is a fast and effective wireframing software
  4. InVision is the digital product design platform used to make the world’s best customer experiences
  5. Framer is a browser based prototyping tool that’s great for teams
  6. Wireframe, prototype, user test, design and inspect designs in one place with Marvel
  7. Collaborate in real-time on wireframes, mockups, diagrams and prototypes with Moqups

Testing

  1. User Testing is a usability testing and research tool to improve customer experience online
  2. Eyequant uses AI and neuroscience to help you design seamless, conversion-boosting UX
  3. See how visitors are really using your website, collect user feedback and turn more visitors into customers with HotJar
  4. See where site visitor’s attention goes and where they get stuck using Inspectlet and their session recording, website heatmaps, A/B testing and other tools
  5. Get real user feedback for any website in any language with Userfeel
  6. The Five Second Test is a simple usability test to optimize the clarity of your designs and improve conversion rates by measuring people’s first impressions.
  7. GTmetrix is a free tool that analyzes your page’s speed performance and offers recommendations for improvement

Web Accessibility

  1. The Wave web accessibility evaluation tool is a Chrome and Firefox browser extension that allows you to check for accessibility issues.
  2. Max Access was built for WCAG and Section 508. It works with all websites and will get your website accessible in minutes automatically using AI.
  3. The Web Accessibility Evaluation Tools List shares a list of evaluation tools you can filter to find one that matches your specific needs

Surveys

  1. Create your own surveys or use a pre-made theme with Google Forms
  2. With Free Survey Creator, make a survey, embed it on your website with a line of JavaScript and receive responses in your inbox
  3. Survey Monkey is a popular, free survey tool to see results in real time
  4. SurveyGizmo offers a more advanced survey tool
  5. With Typeform you can create surveys, quizzes, forms and more

Other Resources

  1. 10 Rules of Good UI Design to Follow On Every Web Design Project
  2. The Importance of Functional Animation in UX
  3. 32 User Interface Elements For UI Designers: Your Ultimate Glossary
  4. UI elements and interaction: Google Documentation

You may also like

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
>