If you are a web designer, you know that some of the work we do starts to get tedious and repetive, A lot of tools are however available to make our life easier and feel complete. If you are not using these tools, then you probably should. They're all fantastically useful for anybody working as a web designer, webmaster or otherwise working in the webdesign sphere. 


Let's start with the FREEBIES for web designers! (Free web design tools)

  1. AdobeColor CC - create a color scheme you need

    Whether you’re an Adobe user or not, this tool is going to become an essential part of your design toolkit. Color schemes can be created, saved and imported across all Adobe Products. And if you’re not an Adobe user, RGB and HEX color codes are available for each color. There’s also a genius ‘explore’ feature, which allows users to upload an image extract their favored color schemes directly. Your brand colors will never be out of sync again!Adobe Colour
  2.  WhatTheFont - find what font is being used

    Firstly, I want to hire their copywriter – Best.Name.Ever. But more importantly, this is a really useful tool to have in your kit. Have you ever come across a font you LOVE, but don’t know what its called? Problem solved - just log on to WhatTheFont, upload a picture of the font, and find out exactly what type it is.What The Font
  3. Am I Responsive Design - what does a website look like in various sites

     A must-have for client meetings. This visual design tool enables you to see what a website will look like across a wide range of viewports. Whilst it can’t be used for actual testing, this is a great way to show clients the end product before you have – well, the end product.Is It Responsive
  4. Wirefy - wireframe a website

    Using Wirefy, you can turn any web page into a wireframe with one click! This innovative free web design tool speeds up the design and developer communication process by creating fast, efficient wireframes.wirefy
  5. Web Flow - design a website without coding

     Some designers just want to design and coding doesn’t fit into that process. Web Flow is a website building app that takes all the hassle out of coding and basically ‘codes as you go’. You don’t have to build the code yourself or hire a developer to do it for you, so you can simply do what you do best.Workflow
  6. Canva - a graphic design tool for non-designers

     Whether you’re a designer with a deadline or a marketer looking for a simple, efficient design tool – Canva will get the job done. This has to be one of the easiest to use (AND free) design tools on the planet. Its handy drop-and-drag feature makes it effortless for users to create email designs, blog post images, social media images and more. It’s true the Content is King, but Canva has a throne of its own.Canva Logo
  7. Awesome Screenshot - share screenshots through a URL

    Ever try taking a screenshot and scrolling down the page at the same time? Oh and wait, you want to crop and edit the screenshot? Takes forever, right? Well, that’s why Awesome Screenshot was invented.Awesome Screenshot
  8. Unsplash - amazing and free stock photos

    Looking for high-resolution photos with a bit of an edge? Not to mention for FREE? Unsplash is going to be your best friend forever more. The site offers some pretty amazing stock photos minus the stock photo prices, or the hassle it takes to remove a stamp .Which of course nobody does, ever*. (*well….)UnSplash
  9. Typegenius - find perfect font combinations

    Having trouble with a messy looking font combo? Typegenius is the place to go. Just select a font from the dropdown menu on the site and you will be offered a range of fonts that work well with your selection. You can even view the fonts used side by side in a design format before making your decision.Type Genius
  10. Skillshare - a learning community for various skills

    This creative learning community offers classes in a wide range of subjects, including many areas of design. The service is free for a limited number of classes and for $8 you receive unlimited access.Skillshare
  11. TheDesignInspiration - get inspired for great designs

    Welcome to your online muse. Created by an innovative group of designers, The Design Inspiration features 1000s of logos, illustrations, websites and photos for your perusal.The Design Inspiration
  12. Icon Finder - find the perfect icon everytime

    With almost 300,000 icons and 1300 icon sets available., this icon search engine makes life easier for both designers and developers.Icon Finder
  13. ColorZilla - identify the exact color being used on a webpage

    This popular extension and awesome free web design tool is jam-packed with advanced color tools for designers, including Color Picker, a CSS gradient editor and Advanced Eyedropper.Colorzilla
  14. Handbrake - transcode any video

    Handbrake is a video encoding program that can bring almost any video back to the future, by converting it to selection of modern codecs.Handbrake
  15. Red Pen - collaboration tool for designers

    This efficient collaboration tool allows designers to upload their work, share a unique URL and receive live, annotated feedback.RedPen
  16. Firebug - debug your HTML, CSS and Javscript in real-time

    Firebug allows users to debug and make changes to CSS, HTML and JavaScript in real time.firebug
  17. Bootstrap - THE framework for developing responsive websites

    Originally the brainchild of Twitter, this HTML, CSS and Javascript framework is a one of the most popular web tools for developing responsive sites.Bootstrap from Twitter
  18. HTML Entity Look up - find the HTML code for any character

    Developers can instantly look up the code for any entity character with this handy tool. Which is a lot easier than scanning through 250 rows of characters!html entity lookup
  19. Yeoman - a web scaffolding tool

    This web scaffolding tool takes the process out of process and makes it as easy as possible for users to create rich web applications.yeoman
  20. Videezy - free HD quality videos

    Check out this online video community for variety of free HD quality stock footage.videezy
  21. Pingdom - get your website running fast

    Website running a bit slow? Just log on to Pingdom to run a speed performance test! This handy tool also offers suggestions to improve your loading times.Pingdom tools
  22. Smushit - optimize your images for faster website loading

    Are your images killing your website speed? This spring cleaning plugin will scan your site to reduce the size of your images without losing quality.Smushit
  23. Google Mobile-Friendly Test - is your website mobile-friendly?

    Unless you’ve been living under a rock, you know how important mobile responsiveness is for your website. It’s a good idea to submit your site here to see whether Google thinks its mobile friendly or not, because if it doesn’t – you’d better fix it fast!Google Mobile Friendly Test
  24. Freepik - find quality graphics

    In search of a quality graphic? Freepik partners with designers across the world to provide great exposure in return for free high quality works. It’s a win-win.Freepik
  25. Userium - the ultimiate User Experience and Usability checklist

    Check out this userability checklist (talk about a tongue-twister!) to catch out the most common userability problems before you even begin testing.userium
  26. Five Second Test - run quick usability tests with real users

    We all know that first impressions count and you can test-drive yours right here. Five Second Test, part of a bigger suite of UX focused products from UsabilityHub gives you the opportunity to pimp up your landing pages by crowd sourcing the testing of each page. You can also score points by switching sides and taking part in other tests.Five Second Test
  27. Rinse - hosting your portfolio here

    Whether it's for storytelling or hosting portfolios, Rinse is a superb tool. It's an inspiration style site where designers can show how images can be used to tell compelling and powerful stories online.rinse
  28. Lining.js - down-to-the-line CSS control 

  29. Lining.js is the fresh tool for web designers that helps make websites more attractive and beautiful with the minimum amount of coding and HTML clutter. Essentially it gives you total control on the text you are using. If you are familiar with CSS tricks, you'll love this libraryliningjs
  30. Surge - a free CDN for developers

    Surge is a free content delivery network aimed at web designers and developers. It's designed to work with tools like Grunt, Gulp, Browserify and NPN.surge
  31. ai2html - convert AI files into HTML and CSS

    As the name suggests, this site turns your AI Illustrator files into HTML and CSS. It’s super handy for turning detailed mockups into workable webpages with minimum fuss.ai2html
  32. MarvelApp - convert images and mockups into prototypes

    Marvel is the perfect site for turning design files into code. Marvel is one of the easiest ways there is to turn your sketches, images and mockups into realistic mobile and web prototypes.marvel
  33. What does my site cost? - what is your site's cost on mobile data?

    Ever wanted to know how much it costs people to view your site on their data plans? Here’s the site for you. Enter any URL here to find out how much it would cost a person on one of the cheaper mobile data plans to download your site on their device.What Does My Site Cost
  34. Amazium - another responsive framework

    Amazium is a really intuitive responsive framework that helps to build basic but colorful websites. Really useful for putting together samples and basic responsive sites.amazium
  35. Behave.js - add IDE style behaviours to text areas

    Behave.js is a lightweight library for adding IDE style behaviors to plain text areas, making it much more enjoyable to interact with text areasbehavejs
  36. UILANG - a programming UI focused language for web designers

    Creating custom user interface components, adding some interactivity to your site, building prototypes—the possibilities provided by Uilang’s simple class manipulation logic are endless. It’s perfect for developers of any skill level.uilang
  37. HAML - making HTML look pretty

    (HTML abstraction markup language) is based on one basic principle: markup should look pretty. It’s not just pretty for the sake of it either; HAML accelerates and simplifies template creation down to HTML so concise it’s almost like poetry. Almost.Haml
  38. PicMarkr - watermark any image

    PicMarkr allows you to easily add watermarks to any image. For people without Photoshop, this is invaluable to ensure that your design ideas don’t end up anywhere without your permission.picmarkr
  39. Lorem Ipsum Generator - well, genenrate lorem ipsum texts :)

    This nifty placeholder generator gives you unlimited amounts of nonsense text for populating websites before content can be added.Lorem Ipsum Generator
  40. Texturemate - find the perfect texture free

    Texturemate is a great resource for students, graphic design artists, and photographers who need textures but don’t want to shell out too much, or anything at all, for the privilege!texturemate
  41. Seamless Textures - more free textures

    Seamless Textures is a site with tons of free textures and the only charge for full access is a “like” on Facebook. seamless textures
  42. Inkscape - powerful and free vector program

     Want to make vectors but don’t want to spend a fortune on Adobe Illustrator? Inkscape is your best buddy by being both a powerful vector program and free as a bird.inkscape
  43. Patternizer - create your own CSS patterns and textures

    Need CSS patterned backgrounds but find you’re a bit short on cash? Patternizer lets you create fully custom patterns free of charge.Patternizer
  44. Dribble - a portfolio site for designers and creatives

    Dribble offers a platform for designers to share their work, discuss their projects and get feedback from each other. Dribbble
  45. HTML5 Boilerplate - start your HTML projects from here

    HTML5 Boilerplate is just what it says on the tin: a boilerplate template for HTML5 projects. You’ll get everything you need for a front-end development project in one (completely free) download.HTML5 Boilerplate
  46. FitText - make text responsive

    FitText is a cool little Javascript app that lets you make your text responsive on your website. Invaluable, and free too!FitText
  47. Scribus - open sourcesource and Free desktop publishing software

    Do you need to make that company newsletter, create an eye-catching brochure or flyer, but don’t have a spare $1000+ to spend on InDesign? Then check out Scribus. It’s open-source and will work on OSX, PC and Linux.Scribus
  48. PSDtoWeb - convert PSDs to HTML and CSS

    Another tool that does what it says on the tin. Upload your PSD to this site and watch it get chopped into HTML/CSS images before your eyes. It doesn’t handle text well, so it’s not ideal for making full sites, but as a mock-up tool - you can’t go wrong.PSDtoWeb
  49. Invision - the world's leading prototyping, collaboration and workflow platform

    If you need a better way to present your ideas and design work to clients than Powerpoint, then Invision might be right up your street. This tool allows you to turn your design into interactive displays. Great for collaborating on ideas, presentations and prototypes. All in real-time!invisionApp
  50. Jumpcut - increase your clipboard space

    This handy Mac-only tool lets you increase the size of your clipboard, giving you easy access to ALL the items you've copied, instead of just the last one you pressed Apple+C on.Jumpcut
  51. iDisplay - extend your displays to smartphones and other devices

    iDisplay allows you to use your smartphone, tablet or both as additional displays for your desktop or laptop, complete with support for touch as an input device. This allows you to use your tablet as a display screen for presentations or as a backup screen for detailed work in your design software of choice.iDisplay
  52. SkyFonts - install webfonts to your desktop

    SkyFonts is a cool app that lets you to install web fonts directly onto your computer, just like the new Adobe Cloud feature but with the added bonus of being free. SkyFonts has the entire collection of Google Webfonts available, making it much easier to produce realistic webpage mockups that use webfonts.   Skyfonts
  53. Fount - discover what webfont is being used

    Ever visit a site and wonder “what the heck is that webfont?”. Fount is a free browser add on that will tell you which web font you’re actually seeing – not just what is supposed to be seen. It’ll also tell you the font size, weight, and style.Fount
  54. Designers Toolbox - nifty set of tools for designers

    Designers Toolbox offers a range of handy reference guides to let you quickly establish print and internet pixel sizes, compare binding options, interpret proof-reading marks and preview fold cut offs. It’s also got a nifty Lorem Ipsum generator built in.Designers Tool
  55. TinEye - reverse image searching and so much more

    It’s not just for reverse image searching anymore - TinEye uses a database of 10 million Creative Commons images harvested from Flickr to let you explore infinite color combinations. It's probably the fastest way to get free images in the perfect color combination, and it's also just a fascinating and intuitively designed tool that's a pleasure to use.Tineye
  56. ColorExplorer - free tools for working with digital colors

    CE has tools that can help you determine the WCAG validity of your color choices, conversion tools to help you move between different systems, as well as a whole suite of picker and palette generation tools. For a free program, you won’t get much better.ColourExplorer
  57. Fatpaint - free graphic design software

    If you find yourself without Photoshop you could do a lot worse than to try Fatpaint. It’s got photo editing and vector editing capability, as well as a free graphic editor for working with page layout and creating 3D text and logos.Fatpaint
  58. MyPaint - open source and free graphic desing application

    This open-source graphic design application is aimed towards digital painting, rather than straight up graphic design, but it's incredibly powerful for a free program. For those who want to digitally illustrate but don't want to fork out for Photoshop, this is the perfect solution.MyPaint
  59. GIMP - free image editing software

    It might sound a bit odd, but GIMP is as good as it gets when it comes to Photoshop quality at zero cost. It also opens and saves files as TIFFs and PSDs, so it can be used professionally.Gimp - Free Image Manipulation Program
  60. Codelobster- free PHP, HTML, CSS, JavaScript editor (IDE)

     CodeLobster is a free handy editor primarily intended for editing PHP, HTML, CSS, JavaScript files with special support for Drupal CMS, Joomla CMS, Magento CMS, Smarty template engine, Twig, JQuery library, AngularJS, BackBoneJS, CodeIgniter framework, CakePHP, Laravel, Symfony, Yii and WordPress. It includes debugger, dynamic help, advanced autocomplete and HTML inspector (like FireBug has).


Got a Little More Spend in Your Pocket?

If you've got some cash to spare on great tools, you might want to check out these awesome tools! They're all worth the money you'd be spending! 

  1. Infogram - create charts and infographics online

Got a presentation coming up? This data visualization product basically pimps out your data and turns it into charts, infographics and interactive visuals to keep your audience engaged. The free product offers a wide range of options and the paid upgrade is ever better!


  1. Webydo - create web designs without coding

    Webydo is a great tool for creating web designs without having to go through the hassle of coding it yourself. You can create “pixel-perfect responsive web designs” that work great on a variety of devices.Webydo
  2. Pixlr - online photo editing software

    While Adobe Photoshop is an industry standard tool that many designers swear by, some of those very same designers may not want to pay the monthly fee to license that software, or the $1000+ fee to buy older versions. Pixlr opens .PSD files and retains all the original layers, making it a great alternative to Photoshop.Pixlr
  3. WeTransfer Plus - send large files

    WeTransfer enables you to send up to 10GB of files and, with files, video and media getting bigger every day this quick and easy web transfer client makes life much easier!WeTransfer
  4. Bonsai Invoicing - get paid faster

    Bonsai is the complex, yet user-friendly solution for all your freelance invoice needs. Build and personalize professional invoices in just seconds, or automatically generate them from the integrated contract, proposal or time-tracking components. Trusted by over 100,000 web designers, photographers, developers, and many others. Explore its tons of other features with a free trial.
    Bonsai Freelance Invoicing
  1. Harvest - keep track of your projects

    Getting paid is every web designer’s favorite time of the month, but making sure you track your time is vital. There are a huge number of online time tracking and invoicing apps, but Harvest is particularly easy to use and allows you to manage your time across multiple projects simultaneously.Harvest

  2. Quark DesignPad

    For layout designers, Quark's DesignPad app is really useful. It lets you layout concepts for posters, postcards, invitations, brochures, business cards and much more by using a grid-based design control. Quark DesignPad is free to download, but if you'd like to use features such as PDF export, Dropbox support, AirPrint and wave shapes for boxes then you'll need to pay for the Pro Feature Pack.Quark
  3. Paper by FiftyThree - a virtual paper to get your ideas "on paper"

    Paper is a nicely designed sketchbook app that could come in really handy for doodling ideas or sketching up designs while on the move with your tablet. It's free to start with, but you'll only get the pen tool and the eraser. If you're willing to pay a little extra, you can get additional tools through in-app purchases.Paper
  4. Squarespace - website builder without coding

    Squarespace is a popular web-based HTML5 website builder that will help you create beautiful sites in a matter of minutes. Sure, it's theme based and works within preset parameters - but it works and guarantees responsiveness across all devices.squarespace
  5. Wix - another no coding website builder

    Wix has moved from Flash to (thankfully) become an HTML5-based website builder. Wix is primarily a paid service but does offer a limited number of features in its free version as well.Wix
  6. Redbooth - task collaboration

    Although Google Apps are great for organizing communication with your team or clients, sometimes you need something a bit more specific to the project at hand. Redbooth provides a great space for you to share, edit, and discuss your work with any number of collaborators.Redbooth
  7. Toggl - a task time tracking app

    Toggl is a really easy to use time tracking app. It’s insanely simple, and super useful for times when you need to be sure that you, or your contractors, are keeping on the job.Toggl
  8. Insightly - a small business CRM

    Insightly fully integrates with your social media profiles, your Google Apps account, and even MailChimp to make sure your CRM needs are met. This makes for quick and easy porting of activities and contact lists.insightly
  9. Mention - track Social Media mentions

    Mention is a social media-monitoring tool that let’s you track any mention of your name, your competitors, or anything to do with your business over several media platforms.mention
  10. MadMimi - simple email marketing

    MadMimi is an email-marketing tool that’s getting on par with Mailchimp for usability and analytic services. It guides you step by step through the process of making HTML newsletters.madmimi
  11. Mint - online accounting software

    Mint integrates with every major bank in America (and more than a few smaller ones) to provide you with free credit checks and let you  track upcoming bill payments. Most importantly, it’s locked up tighter than Fort Knox, with triple layered SSL encryption.mint
  12. UXpin - a UX Design Platform

    UXPin’s a cool tool made with UX Designers and developers in mind. It lets you manage version control, your team and your clients in one place - to make sure you get a top class design product at the end.uxpin
  13. Macaw - draw HTML rather than code it

    Macaw gives you the same flexibility as your favorite image editor but also lets you craft semantic HTML and remarkably tailored CSS.macaw
  14. Homestead - another online website builder

    If you’re willing to get web hosting with Homestead, this software is an excellent choice for designing your website. It offers more templates and graphics than nearly any website development software out there, with the added bonus of excellent customer support.homestead
  15. Adobe Edge Inspect - check how designs look on various devices

    Edge Inspect will sync all your devices to view the same page at once. Refresh the page on one device, and you refresh them all.Adobe Edge Inspect
  16. Hatchful - a free online logo creator

    Create stunning, professional logos from hundreds of templates in a matter of seconds. Build a unique brand to effectively connect with your audience.
  17. FontForge - online font editor

    Fontforge is an outline font editor that helps you make or edit any kind of font package you have. It has a free download and a paid option that offers more features.FontForge
  18. FontCreator - create your own custom fonts

    FontCreator works with OpenType, TrueType and Web fonts, and lets you create any font you want. Your handwriting, old typesets, and more, can be turned into web ready fonts for less than $60.FontCreator
  19. Venngage - a drag-and-drop graphic design software

    If you’re looking for an easy way to make your website more visual, Venngage is a must-have in your Web design toolkit. This tool boasts an extensive library of templates for a number of different types of graphics like email graphics, blog banners and social media graphics. Venngage also has a library of over 10,000 icons to spruce up your designs and everything is easily-customizable. Make graphics that people love with Venngage.
  20. Sketch - professional vector application

    Sketch is a professional vector app with an intuitive interface and powerful tools. It’s not Adobe Illustrator, but its as good as there is out there as a paid alternative.sketch
  21. Frameless - an easy way to preview prototypes of iOS devices

    If you need an easy way to preview mock-ups on Apple mobile devices, then Frameless is the tool for you.Frameless
  22. VectorFinder - search multiple stock sites from one location

    This great site lets you search the most popular stock sites from one central location meaning you aren’t surfing from Shutterstock to Deposit Photos on your quest for that perfect vector.Vectorfinder
  23. Parse - focus on the UX, Parse handles do the backend

    This tool lets you add a powerful and scalable backend in minutes to any site you own. Perfect for developers of all skills.Parse
  24. Proto - fast prototyping tool

    This site lets you create fully-interactive mobile apps that are great for showing to clients at the build stage. No coding required.proto
  25. Framerjs - build interactive, animated prototypes

    Framer is a new tool to build interaction and animation prototypes for apps and sites. framer
  26. PSDtoHTML - convert PSD files to responsive HTML

    Starting at $99 for PSD to responsive HTML conversion, you won’t get much more bang for your buck than you will at PSDtoHTML. Excellent customer service and easy layout means you’re always in control of your conversion.PSDtoHTML
  27. Tailor Brands Logo Maker - Logo Design Made Simple

    The Logo Maker by Tailor Brands is a sweet tool which we have used ourselves a number of times. Essentially, the tool asks you a number of questions to "profile" your brand and understand what would work best for the brand you have in mind.
    Once you've defined what you need and a bit about the look and feel, you will be presented with a number of options for the brand's logo.
    The tool then creates a number of variations of the logo, for social media, in different formats, colors, transparency - essentially all the different formats of the logo you'll eventually need. And the price is absolutely affordable!Tailor brands
  28. Yammer - social network for your business

     Yammer could be summed up as a social media platform for business. It gives you a platform to communicate and collaborate privately with your colleaguesYammer.
  29. Mural.ly - online brainstorming and collaboration

    is a creative tool for you to drag-n-drop rich media files, links, and documents onto a big HTML5 drawing board. It’s brought the office brainstorm board to the Internet in the most literal way possible - and it’s superb!Mural.ly
  30. Cloud 9 IDE - your cloud-based Development Environment

    When it comes to development, most of us are still used to a desktop application. Cloud 9 can change that - with a fully fledged IDE in the cloud combined with an Ubunto workspace - all in the cloud, you no longer need to have a desktop IDE. cloud9 ide
  31. Expression Studio

    Microsoft Expression is a family of tools for designers with particular focus on web development. This particular package (priced at around $600) is comprised of 4 products: Expression Web 4, Microsoft Expression Blend 4 + SketchFlow, Expression Encoder 4 Pro and Expression Design 4. All are excellent alternatives to Adobe's Web Package, whilst also specifically tailored for Windows users.ExpressionStudio
  32. Time Doctor - accurate time tracking software

    Time Doctor gives you an analytics of your workday. This helps you know when and where you exactly spend your time while working on your tasks, making it the perfect tool for evaluating and improving productivity. On top of that, you will love how it keeps you focused by gently nudging you when you get distracted from work.

Time Doctor individual Dashboard

    1. Quark - excellent design software

      Not only is Quark an excellent document editor and design alternative to InDesign, but it has also added some coding and app creating software - to make app creation an easy, WYSIWYG endeavor. It's pricey, but more than worth the investment.quarkxpress2015
    2. Corel Draw

      Priced around $600, Corel Draw is a great mid-priced alternative to Illustrator, with all the benefits. If the Illustrator layout isn't for you, this might well be an option.coreldraw
      1. Sublime Text - excellent text/code editor

        It is essentially a slick code editor, with functions that very specific and friendly to developers. This is no nonsense, pure code-editing.Sublime text
      2. Coffee Cup HTML

        For just $70 you can pick up this nifty little Dreamweaver alternative. It's not as feature-rich as some of its competitors, but it provides solid HTML5, SVG, XHTML and CSS3 compatibility.3-coffee-cup1
      3. Paymo - track the time spent of projects

        Itt’s easy to get lost in work and forget to track time spent on projects. One very good featur of Paymo is a timer which ensures that you allocate time spent against a project.Paymo

We've tried to list all of the tools we love, and work with and have found to make our life as designers easier. We'd love to hear your thoughts, but please don't spam because we would hate to block your message. Let us know what we've missed! Also, why don't you keep yourself updated to our latest content by joining our newsletter below?

Join our list of 21,000+ subscribers and get awesome content!

About the Author
David Attard
Author: David AttardWebsite: https://www.linkedin.com/in/dattard/
David has been working in or around the online / digital industry for the last 18 years. He has vast experience in the software and web design industries using WordPress, Joomla and niches surrounding them. As a digital consultant, his focus is on helping businesses get a competitive advantage using a combination of their website and digital platforms available today.

One more thing... Did you know that people who share useful stuff like this post look AWESOME too? ;-)
Please leave a useful comment with your thoughts, then share this on your Facebook group(s) who would find this useful and let's reap the benefits together. Thank you for sharing and being nice!