67 ux ui web tools

This is a collection of -known and not so well known- tools useful for every designer, developer, or tech enthusiast. It includes tools about colors, images, editing photos, typography, UI/UX inspiration, time-management, analytics, etc.

In each section, I have included a video to explain and present every tool a little bit better than words can.

 

Colors

Gradient Colors

 

  • ⇒ CoolHue: Is the coolest handpicked Gradient Hues and Swatches for your next super ⚡ amazing stuff. coolHue has 60 coolest Gradients. You can also personalize the coolHue Palette as per as your taste. CoolHue gradients palette is rendered by JSON which makes it very easy to make a subtle update anytime.
  • ⇒  Gradient Hunt: is a free and open platform for color inspiration with thousands of trendy hand-made color gradients. Gradient Hunt was made with the motivation of internet becoming a nicer and better place. Gradient Hunt is now a popular resource used daily by thousands of people all over the world.
  • ⇒  Grabient: Is a collection of gradient colors for background. Colors can be downloaded for sketch or CSS3.
  • ⇒  Cool backgrounds: is a collection of tools to create compelling, colorful images for blogs, social media, and websites. Beyond backgrounds, the images generated can be used as desktop wallpapers or cropped for mobile wallpapers.
  • ⇒  Colorspark: Is a simple color and gradient color generator. Grab the code in css format.

 

Color Generator

  • ⇒   Colorable: Take a set color palette and get contrast values for every possible combination – useful for finding safe color combinations with predefined colors and includes pass/fail scores for the WCAG accessibility guidelines.

  • ⇒   Hello Color: A functional color palette generator which includes accessibility guidelines.

  • ⇒   Data Color Picker: Use the palette chooser to create a series of colors that are visually equidistant. This is useful for many data visualizations, like pie charts, grouped bar charts, and maps.

 

Color Palettes

 

  • ⇒   Huesnap: Color inspirations for creatives around the world. Create and save your collections, explore, edit and download them.

  • ⇒   Flat UI Colors 2: features 13 more color palettes. Collaborating with 13 designers around the world, a total set of 280 colors are on your command for COPY/PASTE for your next project, design, presentation.

  • ⇒   Material Palette: Explore, combine, edit, tweet and download colors.

  • ⇒   ColorClaim is simple. It is a collection of color combinations on one big page. Usually these combinations are very subtle, one main and one  accent color.

  • ⇒   Google Arts and Culture: Try out experiments at the crossroads of art and technology, created by artists and creative coders with Google Arts & Culture.

 

Color tools

 

  • ⇒   ColorGrab: Steal beautiful colors from Dribbble shots easily. (Google chrome extension)

  • ⇒   Site palette: A browser extension to generate comprehensive palettes. A must-have tool for designers and frontend developers. Free colour scheme extraction.

  • ⇒   Khroma: The AI color tool for designers. Discover, search, and save color combinations you'll love. By choosing a set of 50 colors, you'll train a neural network powered algorithm to generate colors you like and block ones you don’t, right in your browser. [Great tool]

  • ⇒   ShapeFactory: Simple design tools for everyone. it is divided in 4 sections: logo, pigment, gradient and duotone.

  • ⇒   BrandColors: The biggest collection of official brand color codes around. You can search brands, download or send colors.

 

Photos/Icons/Avatars/Editing tools

Stock photos

 

  • ⇒   Moose: Stock Photos Designed to Work Together — For Free. They give a clean, minimalist look to your designs.

  • ⇒   Visual Hunt: High quality free photos in one place. The site hunts for best free images from many online sources and pull them all together in one spot. Most of the photos are CC0 license (do whatever you want). Additionally site offers all Creative Commons and Public Domain photos from sources like Flickr and make it possible to embed them directly from our website.

  • ⇒   African stockphoto: All images on AfricanStockPhoto are sold with a royalty-free, commercial license. This means that once you buy an image, you are allowed to use it without the need to cite the source of the image, and you can use it for both personal and commercial projects including online adverts, corporate reports, websites and billboards.

 

Icons/Avatars

  • ⇒   Streamline: Maybe the the world’s largest icon library. Over 10,500 icons in three different weights. 53 categories, 720 sub categories, and over 30,000 something in total.

  • ⇒   Diversity Avatars: is an exploration of the beauty and diversity of people and cultures around the world. The collection depicts the beauty of all people regardless of race, gender, religion, ethnicity, or sexual identity. This is a work in progress and a pretty big project that is made in many stages.

  • ⇒   Free avatar icons: Download our free 210 avatar icons pack. This the type of the file that you will get: EPS. SVG. PNG.

  • ⇒   Digital Nomad: The Snoop Dogg of nomadism, the baddest motherhugger on the block. He was a digital nomad 5 years before the term was invented in Chiang Mai. Mostly busy hacking the next cool thing and tweeting about it.

 

Editing tools (not yet launched)

  • ⇒   Artboard: Because Product Presentation Matters. The first online graphic design app mainly focused on product mockups.

 

Typography/Typography tools

Typography

 

  • ⇒  Emotypes: freshly-picked typefaces that are grouped by emotions.

  • ⇒   Archetype: is a tool that lets designers very quickly and easily create consistent typography styling and spacing for creative digital projects live, in the browser. These styles are all underpinned by tried and tested typographic best practices such as modular scale and baseline grids.

  • ⇒   Typekit: partners with the world’s leading type foundries to bring thousands of beautiful fonts to designers every day. No need to worry about licensing, and you can use fonts from Typekit on the web or in desktop applications.

  • ⇒   Method of action: This is actually a game about typography that I was really hooked!

 

Typography tools

 

  • ⇒  Calligraphr: Transform your handwriting or calligraphy into a font! Creating your own font has never been easier. With your own font you can create genuine personal designs and calligraphic artwork.

  • ⇒  Fontface Ninja: is a free browser extension that let you inspect, try, buy and bookmark any fonts on any website.

  • ⇒  Font Joy: Font pairing made simple. Generate font combinations with deep learning. The goal of font pairing is to select fonts that share an overarching theme yet have a pleasing contrast. Which fonts work together is largely a matter of intuition, but we approach this problem with a neural net. See Github for more technical details.

  • ⇒  Typewolf: wants to be the absolute best resource available for everything related to typography on the web. Typewolf will always remain an independent site that features typefaces from all type foundries regardless of where the fonts can be purchased.

  • ⇒  Material: is an adaptable system of guidelines, components, and tools that support the best practices of user interface design. Backed by open-source code, Material streamlines collaboration between designers and developers, and helps teams quickly build beautiful products.

  • ⇒  Type-scale: The Modular Scale site has been a great reference over the years, but sometimes it’s difficult to choose the proper scale without a visual reference. The creator of the site hopes to bridge that gap with Type Scale.

  • ⇒  Typographic posters: is a platform for inspiration and promotion of good design through the poster culture. It is a curated gallery with a graphic design point of view. each poster is reviewed to meet a standard in visual qualities and functional efforts.

 

Literally: Collection Of Tools

  • ⇒   Sans Francisco: A collection of tools to help designers craft delightful experiences.

  • ⇒   Prototypr: Search over 15,000 hand-picked articles and designs.

  • ⇒   Illustration tools: Directory of tools and resources for illustrators.

  • ⇒   Shortcuts design: Every shortcut for designers in one place.

  • ⇒   Ui Goodies: A directory of UI resources. This site is dedicated to compiling and sharing useful resources for Designers and UI Developers.

  • ⇒   Design a better business: All the tools you need to design your business.

  • ⇒   Guidetour UX: A curated collection of 250+ resources & tools dedicated to user research, that will help you incorporate it into your design practice.

 

UI Inspiration

 

  • ⇒   This is colossal: All about art, design, and visual culture.

  • ⇒   Inspiration Hut: Creative Inspiration & Professional Design Assets.

  • ⇒   How design: A site about Graphic Design Inspiration, Blogs, Business & Career Advice.

  • ⇒   Design inspiration: A tool for discovering great art, design, architecture, photography and web inspiration.

  • ⇒   Land-book: The finest hand-picked website inspirations.

  • ⇒   Mobbin: is a hand-picked collection of the latest mobile design patterns from apps that reflect the best in design. Get inspiration from over 150 iOS apps and 8,000 patterns (screenshots from iPhone X) available on the platform. Sign up to save your favorite patterns.

  • ⇒   Design systems repo: A frequently updated collection of Design System examples, articles, tools and talks.

 

Design Systems

  • ⇒   Design Systems: A resource for learning, creating and evangelizing design systems.

  • ⇒   Styleguides: Real life pattern libraries, code standards documents and content style guides.

 

Design Patterns

 

  • ⇒   Pttrns: The finest collection of design patterns, resources and inspiration.

  • ⇒   UI Garage: the latest UI Design Inspiration and UI Patterns collected in one place. Web, Mobile and Tablet.

  • ⇒   Ui-patterns: User Interface Design patterns are recurring solutions that solve common design problems. Design patterns are standard reference points for the experienced user interface designer.

  • ⇒   Welie: All known patterns are listed in this site. It's quite a bunch of them, but grouped meaningfully.

  • ⇒   Pattern tap:  a resource for designers everywhere to justify their decisions, research trends.

  • ⇒   Tab patterns: A collection of patterns.

 

Time-management

 

  • ⇒   Trello: Is the easy, free, flexible, and visual way to manage your projects and organize anything, trusted by millions of people from all over the world.

  • ⇒   Marinara timer: Reduce distractions, limit interruptions and complete tasks more efficiently – with Marinara online productivity timer.

  • ⇒   Timeneye: Was born to help companies to think less about keeping track of time for clients, and more about building amazing new products.

  • ⇒   Timelyapp: Records everything you work on using its magical Memory Tracker. All your tracked data is kept in a secure, private timeline only you can see.

  • ⇒  ​RescueTime: Runs securely in the background on your computer and mobile devices. Tracks time spent on applications and websites, giving you an accurate picture of your day. Gives you detailed reports and data based on your activity.

 

Analytics

 

  • ⇒  Google Analytics: A free analytics platform for smarter and better results.

  • ⇒  ​Hotjar: Is a new and easy way to truly understand your web and mobile site visitors. Find your hottest opportunities for growth today.

  • ⇒  ​FullStory: Records and reproduces real user experiences on your site helping you support customers, boost conversions, and debug faster.

  • ⇒  ​Optimizely: Is the world’s leading experimentation platform. Empowering marketing and product teams to test, learn and deploy winning digital experiences, every time.

  • ⇒  ​Appsee: Get insightful analytics on user behavior without pre-defining any events. Obtain single-user and aggregate insights in real-time, and define alerts for monitoring crashes and KPI changes.

  • ⇒  ​Splitter: Create an A/B testing in seconds, monitor visits and conversion in real time.

 

--

Thanks for reading :)