When it comes to designing websites for clients at an agency, there is more to work with than simply Photoshop. With all that the digital world has to offer today, our talented designers have compiled some of their favorite tools to use when they are seeking inspiration, drafting up ideas, or designing beautiful websites.

53: Paper & Pencil

For designers who are always coming up with ideas and edits for your designs on-the-go, 53 has a mobile app called "Paper" that can really change the game for you. This tool allows you to take notes and make sketches right on your phone or tablet, saving you a ton of time and hassle from having to open up a file for an image. Rather than having to rush to your desktop when you have an idea, you can just jot down some notes and thoughts on an image like you would in a sketchbook. Additionally, they offer a stylus tool called "Pencil" that is double sided with one end for sketching, and one end for erasing, just like a real pencil. This combination of tools is simple way to get your work done in a fast-paced digital environment. Irina Likhashkina, Art Director at Blue Fountain Media


Colorzilla is an extension for Google Chrome that puts an eyedropper tool right in the top of your browser, allowing you to then find out the hex codes for any color on any webpage that you may come across. A hex code is the 6 digit code used in HTML to represent a specific color (you learn something new every day). If you are looking to directly duplicate a specific color that you like, this advanced tool gives you the information you need in order to match it perfectly. It's a quick little shortcut that comes in handy pretty often. Hannah Carroll, Senior Web Designer at Blue Fountain Media

Adobe Preview

best website design tools

This is a mobile app that you can download to your phone or tablet that connects directly with Photoshop. Adobe Preview allows you to see what your designs will look like on those devices, and is incredibly useful when working on responsive designs or mobile apps. You can see how fonts an images will size differently on these devices, and balance your design to be optimized for both desktop and mobile devices. Jeremy Howell, Art Director at Blue Fountain Media

Font Face Ninja

Font Face Ninja is a chrome extension (which also has Firefox and Safari options) lets you hover over text on a website, and it will give you details on the font, weight, dimensions, and where to buy or access the fonts you discover. It also allows you to play around with it a little and preview what the font would look like with a sentence or phrase that you specify and input when using the tool. While the tool is free, it lets font designers get some recognition for their hard work. Jeremy Howell, Art Director at Blue Fountain Media

Color Picker

best website design tools

When you find inspiration somewhere outside and away from your computer, taking a picture may not do the colors of the scene justice. Color Picker is a mobile app that analyzes your camera preview in real time, and extracts the colors that you are facing at any given moment. You don't even need to take a picture to pinpoint the color you want to save. You can create a whole palette based on your surrounding scenery or a specific view with multiple color options. Irina Likhashkina, Art Director at Blue Fountain Media


Invision is unique in the way that it is both a website and mobile app that allows you to show clients mockups and prototypes with advanced details and effects without needing any actual backend coding to do so. It provides a seamless form of communication between designers and both their clients and the developers who have to build out their designs. With Invision you can show what scrolling and hover effects, drop down menus, and specific interactions will look like on a live site. This tool helps to illustrate design intentions to developers, and communicate a vision to your clients in the most detailed way possible. Hannah Carroll, Senior Web Designer at Blue Fountain Media


best website design tools

This is another Chrome extension that lets you find out detailed information about a website's font when you hover over it while using the tool. Any website that you are on, WhatFont will tell you the whole font family, and the services used to serve the fonts. It gives you a quick and simple shortcut to access detailed information about any font you find. Hannah Carroll, Senior Web Designer at Blue Fountain Media

Adobe Color

Naturally, Adobe Color is a part of the Adobe Creative Cloud. The tool (both a website and mobile app) lets you input a specific hex code, and it will provide you with complimentary color options and palettes. Since its synched with your other accounts, it can take the information you select, and put it right into Photoshop for you to continue working with. The mobile app even lets you take a photo and detect the "mood" of the colors in the image which you can then input right into Photoshop as well. Its another great tool to use even when you're not necessarily at a computer, but struck with inspiration. Fabio Redivo, Brand Director at Blue Fountain Media

Pantone Color Guide

While this technically isn't an online tool, the Pantone color guide is incredibly helpful for any designer. We find the most use for it when dealing with clients who have offline aspects to their branding initiatives. From apparel, to stationary, to logos, you want your branding to be consistent. The Pantone color guide lets you match your CMYK colors as closely as possible to make sure your design efforts are optimized both on and offline. Fabio Redivo, Brand Director at Blue Fountain Media What are some of your favorite design tools to use? Have you had success with any of the ones we've mentioned here? Let us know in the comments below, or tweet us @BFMweb.