6 Time-saving tools and references every web designer should bookmark

time savers graphic design blender

Remember when you took tests in school and they required you to memorize everything?

It was frustrating, wasn’t it? You knew that in the “real world,” you’d simply look up that formula you only needed to know once every 3 months or so.

That’s why I’ve compiled a handy go-to set of web design tools and references – so I don’t have to remember every single obscure detail (or the awesome website that I found it on).

Hopefully the list can be of help to you too. If I’ve left something completely awesome off of this list, please add it by leaving a comment.


Need a lightweight wireframing application to kick off a web project?

I’ve found Mockingbird to be a great tool. I have the Personal plan, which gives me 2 active projects and unlimited archived projects for $9 per month. You can archive/activate projects at any time, and your account won’t get charged for months that you don’t have active projects. Very cool.

Color Schemer Online

Once you’ve nailed down the layout, color is next.

This tool provides both RGB and HEX values for a specific color a well as a range of colors (and their values) that might work well with your inputted color.

CSS Box Shadow Reference

Adding final touches, such as shading, give the website depth make all the difference.

No doubt, purely CSS drop shadows are one of the coolest things since sliced bread…but the 3 lines of code required for cross-browser support are not. That’s why I keep this page bookmarked – for easy copy/paste and quick reference to the order of the attributes.

Lorem Ipsum Generator

Now you’ve got the website basically built, but you’re waiting for content for your client, aren’t you?

Having dummy text at your fingertips helps your client visualize the final look of the page AND remind them to provide content before you go live. (An empty page, on the other hand, makes it look like you’re not done with your design work yet.)

How to move a WordPress site to a new server or host

Alas, you’re ready to go live, but there’s no “easy button.”

This is an excellent step-by-step reference that really works for transferring a client’s brand new WordPress site from your server to the live server. Why WordPress hasn’t made this less complicated, I have no idea…but until they do, use this.

Click to Tweet

This handy tool is one you’ll love to teach your clients about – it’s easy and a great way to incorporate social media.

This is one of the most useful tools I’ve seen to encourage readers to share a great one-liner on Twitter. Simply put your message in the box, generate a custom link, and attach the link to the text on your site that you want to share.

Share your favorite tools and references!

What tools and references can’t you live without? Share in the comments on this post!

Like what you've read?

If so, join 12,000+ designers and stay updated on all our best business-building tips delivered for free to your inbox a few times each week. PLUS, we'll throw in a free ebook to get you started. Click the button below!


  1. says

    Great list! I’ve been looking for a WordPress transfer tutorial that makes it easy. One of these days, I hope WordPress makes it so easy that you can just type in the URL, fill in the FTP passwords and click a transfer button.

    For the CSS box part I noticed you take snippets from the best site out there. Not 100% sure which html editing program you use, but I use Sublime Text 2 and created a tutorial on how to make built in snippets. http://goo.gl/YuQHk I have a good portion of CSS-Tricks snippets at my disposal since they are quite useful! Best part is I just type in the word of the snippet, press tab and boom. Inserted!

    It would work great and save you a step of opening the browser to copy and paste the CSS code. Even Lorem Ipsum copying could become a thing of the past! If you don’t use Sublime Text 2, I’m sure other HTML Editors have it.

    Just thought I’d share that since you are a wealth of information to me! Keep it up!

  2. says

    This is a great list and starting place. I think its also apt to mention not only design resources but also things that will help web designers in their freelancing efforts.

    Basecamp, Wave Accounting, Adobe Kuler for iOS, Froont and Highrise to name a few.

    You can read a more in depth breakdown here: http://wp.me/p3G1v2-uU

    Subtle patterns is also something I use pretty frequently, especially since they package a retinal version of each pattern in the downloads.

  3. says

    I’ll add Last Pass: https://lastpass.com/ Create separate groups for clients and share it with your team. Saves me so much time and is awesome for development.

    I also love WorkFlowy https://workflowy.com/ for notes, and it holds all my notes and todo’s in a clean linear fashion. It’s a stupid simple way to collaborate and it helps my team be more productive.

  4. Morgan says

    I actually had luck using the WordPress Move plugin to move and backup WordPress sites. Definitely worth checking out.


Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>