When it comes to designing websites there are probably as many ways to build them as there are web designers. Are you one of the many who prefer using WYSIWYG editors like Adobe's Dreamweaver or Realmac's RapidWeaver? Maybe you're a code ninja and can hack out a fully functioning website using nothing but a text editor? Perhaps you're a WordPress wizard able to manipulate themes to do your bidding? Regardless of your weapon of choice, when it comes to building websites we all agree that putting a site together involves much more than just manipulating images or widgets in an editor or typing out thousands of lines of code.

Every web designer has in his or her arsenal a list of favourite tools they turn to before, during and after the build process. Resources they rely on to facilitate their job and save time, simplifying complicated tasks and making them more productive. I've gathered a small sampling of such tools and resources I think every web designer should be aware of. Most of these I use personally and some I discovered while researching this article and have added them to my toolbox. All of them can serve to make you a better website designer.

If I've overlooked your “go-to” tool or resource please share it in the comments below.

Web Designer Resources and Tools in no particular order.

Evernote

Evernote is like an electronic personal assistant that syncs between all your devices. It's designed for note-taking and archiving but don't let that simple description fool you. You can use it to store text, full webpages, photographs, voice memos as well as handwritten notes. Wherever inspiration may strike, you'll be glad you have Evernote to capture it. To learn how to use Evernote to its full potential I suggest the training guide Evernote Essentials.

DomainBrain

DomainBrian offers a very simple database to store every bit of access information for each of your clients' websites. Never lose track of URLs, usernames, passwords, directories ever again. DomainBrain allows you to store all this information in one easy to access location. DomainBrain has paid for itself many times over in the time it has saved me in locating client information. A must for web designers.

ScreenFlow 

At first, you may wonder how screen capture software can help in a website project. It's all about time management. For example, whenever I launch a new WordPress website for a client I include a short 3-5 minute video walking them through how to edit a page, how to create a post, and whatever other tasks they need to perform in the CMS. Since introducing this strategy I've all but eliminated follow up phone calls asking me how to perform these tasks. My clients also gain a training tool should the management of their website change hands. Download a Free Trial of ScreenFlow today

Adobe Color CC (formerly Adobe Kuler)

This is a very useful tool offered by Adobe for choosing a colour scheme for your website project. It allows you to play around with various colours to see how they work together. A set of incorporated colour rules allows you to select among predefined rules including complementary colours and monochromatic colours. Individual colours can be tweaked to your liking and both RGB and HEX numbers are provided. Signing in with your Adobe ID allows you to save your colour themes. Don't have an Adobe ID? Simply take a screenshot of your theme and sample the colours in your favourite photo editor.

Learn more about color psychology here.

Stylify Me

Stylify Me is a handy tool for discovering the style elements of any website. Quickly gain an overview of the style guide of a site, including colours, fonts, sizing and spacing. Stylify Me saves you the trouble of examining the source code and CSS of a site or inspecting each element individually.

Dada Mail

Dada Mail allows you to run a verified mailing list right on your own website. Designed for small business, Dada Mail provides an economical and flexible solution to reach your subscribers and no tiered pricing linked to the size of your email list. Perfect for those not interested in using an email service such as MailChimp or AWeber. I've never used Dada Mail personally but know many designers who do.

Responsinator

Responsinator is a one-trick pony, but it performs that trick very well. A web designer is not expected to have access to every device a site will be viewed on. With Responsinator you just enter the URL to any website to see how it looks on a wide variety of tablets and mobile phones.

Support Details

Support Details is great when dealing with clients who are not as computer literate as you would like them to be. Just have your client enter the URL in their browser window and it provides all the information you need about their computer, such as operating system, IP address, screen resolution and more. Support Details saves you the time of walking your client through various screens to retrieve the required information manually.

LeadPages

LeadPages is the internet’s easiest Next Generation lead generation platform. LeadPages is my favourite tool for creating landing pages, squeeze pages and sales funnels on my and my client’s sites. LeadPages works with both WordPress and non-WordPress sites and helps you convert viewers into buyers or subscribers. Their simple A/B split testing helps you determine what works best for your audience and their built-in analytics lets you stay on top of your conversion stats.

File Juicer

File Juicer offers a quick and easy way to extract images (and other forms of media) from source files. Whenever you receive a PowerPoint file or PDF just drop the file onto File Juicer and it will search the entire file byte by byte and extract all the media content into one convenient location.

Paparazzi!

Paparazzi! is another one-trick pony good at what it does. It allows you to take screenshots of webpages, including what is not currently visible in the browser window. No need to merge screenshots together in Photoshop. Simple, but effective.

SiteSucker 

SiteSucker is an essential tool in my arsenal whenever I'm hired to redesign an existing website for a client. SiteSucker allows you to download an entire website to your computer including all associated files while duplicating the site's directory structure. Just enter a URL, press return and let SiteSucker download the entire website for you. Keep a local copy of your client's old website should you ever have a need to revisit it.

A Better Finder Rename 

A simple but very useful tool to batch rename files on your computer. Especially useful when a client provides you with hundreds of photos using a camera's default naming structure such as IMG_1000.jpg.

Crazy Egg

Have you ever wondered what happens when someone visits a website you've designed? Crazy Egg creates heat maps showing you exactly what part of the webpage visitors are concentrating on. This is especially useful when A/B split testing a design to figure out what parts are drawing attention.

The Art of Mixing Typefaces

This is a fun resource for web designers using Google Fonts. A simple chart shows you twenty Google Fonts and tells you which display fonts work best with which body fonts. The chart is divided to show you which fonts work best together, which are an unlikely combination and the pairings you should avoid at all costs.

Snazzy Maps

This is, in my opinion, the best new resource I discovered while researching this article. Tired of having Google Maps ruin the design of your website? Snazzy Maps offers hundreds of colour schemes that allow you to pick a style to match the theme of your site. Just choose the style you like, adjust the map to cover the area you desire, and copy the provided code to your web project. Your clients will marvel at your ability.

Real Favicon Generator

As the name suggests, Real Favicon Generator generates favicons from your uploaded files. But unlike other favicon generators that provide you with an image that only shows up in desktop browsers, this one also provides you with the code and images for tablets and mobile devices. Perfect for websites that may be saved to a mobile device's home screen. For an alternative, check out this Favicon generator by Website Planet.

Diff Checker

Diff Checker has saved me a ton of time and frustration. This is extremely useful when a client provides text revisions by editing the original document but not indicating what has been revised. Paste both the original and new text into Diff Checker, click the blue button and it will highlight the differences between the two. You can then simply make those changes to the copy on your website.

Moqups

I don't personally use Moqups but a lot of web designers swear by it. It's great for collaborations between developers. Moqups allows you to create wireframes, mockups or UI concepts to visualize a project before fully diving into it. Easily spot design flaws before they become costly mistakes.

Basecamp

Basecamp is great for project management. It allows people in different roles to communicate and work together on joint projects. Basecamp stores everything related to your project and is accessible anytime from anywhere. Store shared files, discussions, schedules, tasks and collaborate on documents. Trusted by some of the biggest companies around, Basecamp is arguably the world's #1 project management tool.

The Noun Project

The Noun Project is one of the largest depositories of visual icons on the web. If you require an icon or symbol for your project, The Noun Project should be the first place you look. With millions of users and contributors, you're sure to find the perfect icon or symbol.

I would love to hear what you think of the list. Please leave a comment below.