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.

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!

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.

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.

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.

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.

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.

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.

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….)

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.

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.

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!

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.

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.

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 library

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.

(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.

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.

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.

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!

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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!

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!

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.

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.

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.

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.

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!

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!

The Outstanding HungryJPEG Bundles

Advertise on CollectiveRay.com

CollectiveRay (formerly known as DART Creations) is interested in developing partnerships with mutual benefit. If you like the stuff we publish and would like to develop a relationship, we'd be happy to hear from you. Go on - drop us a line - we'd love to hear from you :-)

Disclosure: CollectiveRay is funded personally out of pure passion for helping people working with websites. We do however generate some income through recommendations of products. This means if you click on a link and purchase an item we link to, we will receive a small sum out of that sale. We usually partner with vendors to make your purchase cheaper than buying direct.

who are we?

CollectiveRay is run by David Attard - working in and around the web design niche for more than 12 years, we provide actionable tips for people who work with and on websites. We also run DronesBuy.net - a website for drone hobbyists.