Freelance Designer’s Toolbox: 200+ Resources for Freelance Web Designers

Most freelance designers use an impressive number of tools and resources in their daily and weekly lives. After all, they have to deal with the design and development as well as all of the aspects of running a business. I’ve decided to create a large list to clump as many resources as possible all in one place. The post is broken down into two major sections, business resources and design/development resources, and tons of smaller sections. I hope it can be helpful for you. Of course, this is not by any means an all-inclusive list, so feel free to ad some of your favorite resources in the comments.

For more resources on DesignM.ag see:

Business Resources

Become more efficient and more take better care of your business with these resources.

Invoicing:

Whether we like it or not, being a freelancer involves dealing with sending invoices and collecting payments. As you can see, there are plenty of choices to help you get organized with this task. Some are free, some aren’t, but most have free options or trial periods so you can see how you like it before paying anything.

FreshBooks – Very popular choice. They have a free option as well as a paid option.

Billing Manager – From the makers of QuickBooks, Quicken, and TurboTax.

Zoho – Handles invoices and quotes, manage payments, work with multiple currencies, create reports and more.

Simply Invoices – Several different pricing plans based on the number or templates you need, plus the ability to use a customized logo. Free option is included.

Invoice Place – Easy Invoicing And Quotes

Blinksale – Offers free and paid options according to how many invoices you need to send each month.

Invotrak – Easy invoice and time tracking.

Invoices Made Easy – Send invoices and accept online payments. 30 day free trial.

Bill My Clients – Send invoices via email or regular mail.

Billing Orchard – Maintains hourly time billing, along with flat fee and recurring billing. Starts at $14.95 per month.

SimplyBill – Aims to make invoicing simple. Free trial offered.

Time:59 – Time and expense tracking, online invoicing, and more.

Bill4Time – Web-based time billing and project management. Free trial offered.

Pay Simple – ACH processing and merchant account services.

Cashboard – Free estimate, invoicing and time tracking software.

Invoice2Go – Over 300 ready-made form designs.

Invoice Creator for Excel – Another option is to create your own invoices in Excel.

Free Invoice Templates for Excel – Some basic templates.

Finances and Accounting:

Invoicing isn’t the only dreaded financial task for freelancers. These resources will go a step further than creating invoices, they’ll help you to manage your finances more effectively.

Less Accounting – Invoices and a simple accounting system created for freelancers.

QuickBooks Online – Online version of popular software.

Xero – An online accounting system that gives you and your advisors easy access to your most up-to-date financial figures – bank transactions, invoices, GST – anytime you need it, from anywhere in the world.

WORKetc – Are you using one application to record time? Another application to manage projects, another application to share documents and more applications all in the name of efficiency?  Consolidate all your apps into WORKetc.

Accepting Payment:

Many of your clients may prefer to pay via credit card. You don’t need an expensive merchant account to accept these payments.

PayPal – The leading choice for online payments.

Google Checkout – A PayPal alternative.

Contact Management:

As a freelancer you will come in contact with a lot of potential clients as well as other service providers. Keeping everything straight can be a challenge.

Big Contacts – A web-based tool to help you to organize all of the information and activity about the people you work with and live with.

Highrise – Track contacts, leads, customers, vendors, and others with Highrise.

Zoho CRM – Complete relationship lifecycle management solution for managing sales, marketing, customer support & service.

Finding Freelance Work:

These are some of the best places online to find and bid on freelance work (not all of them are bidding-style sites).

Elance – The largest site for bidding on work.

Guru – Currently more than 5,00o projects to bid on.

oDesk – Find and apply for work.

Get a Freelancer – Not as many listings as some of the others, but still a good resource.

PeoplePerHour – Search listings by category.

Smashing Jobs – Job board from Smashing Magazine

Freelance Switch Job Board – Leading freelance blog has a great job board.

Time Management Tools:

Freelancers often struggle with managing their time effectively. Better time management will mean more productive days and more income or less hours worked. These tools can help.

Google Calendar – Keep track of your appointments and deadlines.

Backpack – Calendar, small business organizer, to-do lists, and more.

Ta-da Lists – Simple tool for creating and managing to-do lists.

RescueTime – Web-based time management and analytics tool for knowledge workers who want to be more productive.

Tick – A simple and friendly time tracking application focused on helping you hit your budgets.

Slim Timer – Create tasks, track your time, and run reports.

Harvest – Track time, log expenses, invoice clients, keep track of account receivables and revenue. Harvest lets you do it all, so you can run your business with style and ease.

Dejal Time Out – A break-reminder tool.

Jott – Converts your voice into emails, text messages, reminders, lists and appointments.

Project Management Tools:

Sometimes freelancers will be working with others and may benefit from some assistance with project management.

Basecamp – A tool for collaborating on internal or client projects.

Project2Manage – A free hosted project management solution that virtually anyone can use.

Document Storage:

You may need to store some of your documents online. Here are some great options.

Google Docs – Create and store docs.

Zoho Writer – Online word processor with sharing capabilities.

Box.net – Online file storage.

Xdrive – 5 GB of free storage.

DivShare – Also 5 GB of free storage.

Hard Drive Backup:

Security is important to every freelancer for obvious reasons. Avoid losing your work by using any of these automated backup tools.

Mozy – A few different types of accounts offered. Mozy is my personal choice.

First Backup – Prices start at $5 per month and go up from there.

Intronis – Home and Business options. Prices start uner $10 per month.

Carbonite – Similar services to the others for $50 per year.

Communication:

Freelancers will need to communicate with clients and other freelancers. These tools can help for phone calls and video conferencing.

Skype – Leading choice for making calls from your computer.

Vonage – a leading provider of broadband telephone services

Gizmo5 – Save up to 98% on international calls from your computer or mobile phone.

Yugma – Free online video conferencing.

VoipStunt – Based in Germany.

Design and Development Resources

Use some of these tools to help you create more attractive, more effective websites.

Typography and Fonts:

Of course, one of the most important elements in design is typography. These resources can help you find the perfect choice for your next design (or maybe they’ll keep you up all night looking at all of your options).

80 Beautiful Typefaces for Professional Design from Smashing Magazine.

40+ Free Fonts for Professional Design from Smashing Magazine.

101 Typography Resources for Web Designers from Vandelay Design.

Dafont – One of the leading sites for free fonts.

Urban Fonts – Another leading source for free fonts.

Better Fonts – Over 10,000 fonts for download.

TypeTester – Compare fonts on screen.

Font Tester – View and compare fonts easily.

What the Font? – Upload a file and it will identify the font.

CSS Menus:

Navigation is not only a critical element of design, but it is also an area that is often used to create a more visually-appealing design. While you can always create your own menus from scratch, there are plenty of free scripts that can save you some time or at least give you a starting point that you can customize.

Listamatic – A nice, big collection of scripts to choose from.

Dynamic Drive – Another solid collection.

Alvit.de – Several choices from Vitaly Friedman.

Exploding Boy – A nice collection of horizontal tabbed menus.

CSS Play – Another collection of menus.

List-O-Matic – Tool for creating your own menus.

CSS Menu Generator – From Webmaster Toolkit.

Tabs Generator – Create tabbed navigation.

Color Tools:

Finding the right color scheme can be one of the biggest challenges when designing a site. The tools listed here can help you in a variety of different ways to find the right color combination quickly.

ColorSchemer Gallery – Color palettes.

COLOURlovers – Color palettes and more.

Kuler – Adobe’s resource for helping you with color palettes,

ColorJack Sphere – A pretty cool resource for exploring color combinations.

DeGraeve Color Palette Generator – Get Colors from a picture.

WhatItsColor – Find the colors of a picture.

I Like Your Colors – Get the colors of a web page.

Colour Tools, Palettes, Schemes and Theory – A more complete list from David Airey.

Layouts:

The resources listed here may be able to help you save some time in development by giving you a starting point that you can work from.

Blueprint CSS – CSS framework from Google.

CSS Creator – Quickly creates a layout for you.

Layout Gala – Collection of 40 CSS layouts.

DynamicDrive – 12 CSS layouts.

Intensivstation – 16 CSS-based layouts.

Layout Reservoir – 3 basic layouts.

Code Sucks – Over 90 layouts.

Generators:

Here we have a collection of various generators that will give you some cool things that you can use at your sites for different purposes.

Stripe Generator – Create background images with stripes.

Web 2.0 Badges – Easily and quickly create a web 2.0 style badge.

RoundedCornr – Rounded corner and gradient generator.

ThrashBox – A semantically correct CSS Box.

Spiffy Box – Simple rounded corner CSS boxes made easy.

Web 2.0 Logo Creator – Easily create your own logo.

Gradient Image Maker – From Dynamic Drive.

Favicon Generator – From Dynamic Drive.

Button Maker – From Dynamic Drive.

Button Maker – From Adam Kalsey.

CSS Sprite Generator – From Website Performance.

Lorum Ipsum – The best tool for creating dummy text.

Stock Photography:

The choice and quality of images will have a huge impact on your end result. Here are some places to find free or low cost photos and graphics. Even those that are not free are very reasonably-priced, and they’ll usually save you some time as compared to browsing through the free sites looking for something of quality.

iStockphoto – The leading choice for low-cost photos.

Stock Xpert – Low cost stock images.

Big Stock Photo – Low cost stock images.

Stock Xchng – Huge site of free photos.

Flickr – Creative Commons section is a great source for designers and bloggers.

Vector Stock – Purchase stock vector images.

Vecteezy – Vectors for download (not really stock photos).

Icons:

There are tons of free icons available. Here are some of the best, and some places to help you find others.

96 of the Best Ever Free Icon Sets – This roundup from Specky Boy is about all you need.

Icon Finder – Icon search engine.

FamFamFam – Some of the best free icons.

Feed Icons – The standard RSS icons.

Web 2.0 Icons – UtomBox provides icons for common web 2.0 purposes.

Validators:

Validators can be great for creating more accessible sites and for finding some coding mistakes.

HTML – From W3C.

CSS – From W3C.

RSS and Atom – From W3C.

CSS Tools/Resources:

Stylesheets can easily become overgrown or messy. These tools will help to get your CSS cleaned up and optimally-sized.

CSS Tidy – A parser and optimizer.

Clean CSS – Optimizer and formatter.

CSS Analyzer – A validator plus.

CSS Mate – Online CSS editor.

CSS Compressor – From CSS Drive.

Browser Add-Ons:

Free browser add-ons can often save loads of time and sometimes perform the actions of a standalone program. Here are some of the best.

Web Developer Toolbar for Firefox – Adds a menu and a toolbar with various web developer tools.

Firebug for Friefox – Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page

Internet Explorer Developer Toolbar – Provides a variety of tools for quickly creating, understanding, and troubleshooting Web pages.

FireFTP – An FTP client within Firefox.

Dust-Me Selectors – Finds unused selectors.

Load Time Analyzer – Firefox add-on for testing page loads.

Firebug – Popular Firefox add-on for editing, debugging, and monitoring CSS, HTML, and JavaScript live in any web page.

EditCSS – Allows you to edit the stylesheet right in your sidebar.

YSlow – Another popular Firefox add-on that can help you to build faster pages.

Internet Explorer Developer Toolbar – Variety of tools for working in IE.

DebugBar – A variery of tools for debugging.

Tools for Building Grids:

These tools can help you to build a grid-based layout quickly and efficiently.

CSS Grid Builder – From Yahoo!

Blueprint – A CSS framework from Google.

960 Grid System – The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels.

Grid Designer 2 – A simple, helpful tool for building grids.

Grid Calculator – Another easy way to quickly create grids.

Coding Resources:

This section is kind of random, but it includes a number of tools and resources that can help you with some aspect of coding a website.

Snipplr – Snipplr is a public source code repository that gives you a place to store and organize all the little pieces of code that you use each day. Best of all, it lets you share your code snippets with other coders and designers.

AJAX, DHTML, and JavaScript Libraries – Smashing Magazine’s extensive list of over 60 Ajax, Javascript and DHTML libraries.

80+ AJAX Solutions for Professional Coding – Another huge and helpful list from Smashing Magazine.

jQuery – A fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages.

Subversion – Version control system.

Screenshots:

Here are a few tools that can make life easier if you’re looking to get a lot of screenshots.

Super Screenshot! – Enter a URL and get a screenshot.

Screengrab! Firefox Add-on – Easy tool for Firefox users to get screenshots.

Better Screenshots – For Windows. Several features, costs $15.

Statistics and Analysis:

Every website needs some type of statistical analysis. There are countless options, but some of the best are listed here.

Google Analytics – Leading analytics tool.

Clicky – Paid option that provides some different features than Google Analytics.

Mint – Helps you identify where the most interest is being generated and over what.

ClickHeat – ClickHeat is a visual heatmap of clicks on a HTML page, showing hot and cold click zones.

Crazy Egg – Create tests to figure out what people are doing on your website.

clickdensity – Real-time user behavior analysis.

SEO Tools:

Building search engine-friendly sites should be a goal of every designer. There are tons of tools out there to help with SEO.

Google Webmaster Tools – A variety of tools that help you to understand how Google sees your site.

Dead-Links.com – Enter your URL and it will check for dead links.

Spider Simulator – Tests your page’s ability to be crawled.

Search Engine Rankings Checker – See your rankings for a particular phrase in a few major search engines.

Rank Checker Firefox Add-on – Aaron Wall’s helpful add-on for watching your rankings efficiently.

WordTracker – Leading keyword tool.

Online SEO Tools – The Ultimate Collection – Nice, comprehensive list from Search Engine Journal.

Content Management:

More and more websites are being built on some of the most popular CMS’s. You’ve got lots of options and plenty of ways you can improve your clients’ sites with these.

WordPress – The most popular open source platform, particularly popular for blogs.

Joomla! – Joomla! is one of the most powerful Open Source Content Management Systems

Drupal – Also open source, Drupal supports a variety of websites ranging from personal weblogs to large community-driven websites.

Expression Engine – Flexible, feature-rich content management system.

Pligg – An open source CMS that’s popular for social media sites.

Textpattern – Another open-source option.

CushyCMS – Very simple way to let clients update their pages.

Source Code Editors:

There are a variety of different types of source code editors and each has it’s own set of features. This is a short list of what’s available.

Coda – Popular choice from Panic.

Aptana – Develop and deploy Web applications with ease – for AJAX, Ruby on Rails, PHP and more.

TextMate – TextMate brings Apple’s approach to operating systems into the world of text editors.

UltraEdit – Text, HTML and HEX editor, and an advanced PHP, Perl, Java and JavaScript editor for programmers.

Komodo Edit – A free, open source editor from dynamic language experts.

BBEdit – Professional HTML and text editor for Mac users.

EditPlus – A text editor, HTML editor and programmers editor for Windows.

TopStyle – Edit XHTML, HTML and CSS (Windows).

CSS Editors:

You may find that your stylesheets are kept cleaner or more efficient with an editor. If so, try one of these.

CSS Vista – A free Windows application for web developers which lets you edit your CSS code live in both Internet Explorer and Firefox simultaneously.

CSSEdit – Real-time styling of absolutely any web page (Mac).

Style Master – From beginner to expert, Style Master will make working with CSS more efficient, more productive, and more enjoyable.

Rapid CSS 2008 – Quickly and easily create and edit cascading style sheets of any size and complexity.

Eric Meyer’s CSS Sculptor – A Dreamweaver extension.

WYSIWYG Editors:

Some designers love WYSIWYG editors while others hate them . If you’re going to use one, try to stick to the more professional options and get used to working with the code as well so that you can be sure you know what code is being created. They can save you a good bit of time in many cases.

Dreamweaver – The most popular choice.

Expression – Microsoft’s competitor to Dreamweaver.

RapidWeaver – For creating websites on the Mac.

Backgrounds and Textures:

Background images and repeating patterns/images can help you to create the look you want. FOrtunately, there are some tools and resources that can spare you the need to create them from scratch.

BgPatterns – A handy and simple tool for quickly creating patterened backgrounds.

TextureKing – Free stock textures.

Stripe Generator – Easy striped backgrounds.

Grunge Textures – More free stock textutres.

400+ High-Quality Patterns – Useful list put together by Design Reviver.

300+ Vintage Style Textures and Photoshop Brushes – Another list from Design Reviver.

Free High Res Grungy Paper Textures – Excellent giveaway from Bittbox.

Ornate, Floral, Swirly and Curly Vector Roundup – A list with some nice options for backgrounds.

COLOURlovers – The pattern section at COLOURlovers.

36 Cool Free Textures – Nice collection from Abduzeedo.

CSS Galleries:

If I listed all of the galleries here this post would be even longer than it already is. Instead, I’ll point you to a few resources that will help you find what you’re looking for.

Ranking 80 of the Top CSS Galleries – A list that gives some detail like Alexa rank and frequency of posts (a few months old).

The Ultimate Web Design Gallery Resource – Lots of info on the galleries.

Inspiration Overload: 100 Galleries You Need to Check Out – Lists galleries by category.

The Great Web Design Gallery Roundup – Great for comparing the galleries.

Forums:

If you’re looking for an answer to a question or just looking to interect with some other designers, here are some of the more active forums to visit.

Webmaster-Talk – Coding, design, SEO, hosting, etc.

SitePoint – Popular forum with lots of topics.

WordPress – Get support from the WP forum.

Digital Point – Internet marketing and SEO.

DesignersTalk – Primarily focused on design with a few additional topics like advertising and SEO.

Web Design Forum – Variety of different topics from design to affiliate maketing.

TalkFreelance – Topics relevant to freelancers.

Photo Editing/Graphic Design:

Photo editing and graphics are obviosly a big part of design. Here is a short list of the leading programs.

Photoshop – Adobe’s market leader.

Illustrator -Leading Adobe product for illustrations.

Photoshop Express – Free online version of Photoshop.

Picnik – Free online tool with a good number of features.

GIMP – A popular and free option.

Aviary – A suit of tools including photo editing.

Fireworks – Another Adobe program, formerly from Macromedia.

Other:

Here are a few resources that didn’t fit perfectly into another category.

YouSendIt – Securely deliver large files.

Brusheezy – Photoshop brushes for download.

Will Mayo – Add speach bubbles to blockquotes or blog comments.

Bubblesnaps – Add speach bubbles to your photos.

Steven Snell

Stephen Snell is the owner and editor of Vandelay Design. Connect with Stephen on google+