During April only, save 30% on our new course, Cold Emails that Convert. Click here to learn more.
Offer expires in

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

tweet share share pin email

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

You'll also enjoy this episode of our new podcast...

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.

💵 Turn complete strangers into paying clients using our new easy-to-follow workbook course, Cold Emails that Convert. Disover the framework we use to book thousands in new clients each month. Save 30% in April only with promo code MILLO30. Click here to learn more.

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!

tweet share share pin email

Say Goodbye to Roller Coaster Income

Your income doesn't have to be a guessing game every month. Let 4 thriving solopreneurs show you how in our free guide.

About April Greer

April is the Director of Projects at Reliable PSD, a design-to-code company for designers, by designers. She’s the glue keeping everything together, organized, and right on time, and giving everyone a fantastic experience while she does it.


Leave a Comment



  1. Great list of tools and resources, April!

    I have a huge list of web tools and resources bookmarked, but two that I use often are WeTransfer (https://www.wetransfer.com – for sending large files to clients and collaborators) and Subtle Patterns (http://subtlepatterns.com – for my design work).

    I really look forward to seeing what other tools and resources people are using. 🙂

  2. Awesome! Here are some of my favorites…

    For quick testing of code: http://jsfiddle.net/
    Colour combinations: https://kuler.adobe.com/create/color-wheel/
    Font selection: http://wordmark.it/

  3. To make lorem ipsum a little sweeter, I like http://cupcakeipsum.com/

  4. This is extremely helpful!

  5. 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!

  6. Dan Coggins says:

    Thanks for these links! The perfect way to close a work week!

  7. Dan Coggins says:

    I don’t know about you, but I’ve got a Word file where I keep these kind of tips. Here’s one for creating Rounded Buttons with CSS:


    Thanks again.

  8. Mastamas says:

    These are the Tools i use the most:
    create grids: http://cedvel.com/
    typography: http://www.typecast.com
    iconfonts: http://www.icomoon.io
    css3 generator: http://css3.pascal-seven.de/
    colours: http://www.colourco.de/
    color picker: http://www.colorzilla.com/
    test responsive websites: http://screenqueri.es/
    and of course Firebug to analyse Webelements.

  9. akamaxbuz says:

    Great idea/resource. Thanks.
    I use Notational Velocity for keeping notes across devices

  10. For a more filling filler text, try baconipsum.com

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

  12. Im about to change your lives forever.


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

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

  15. Jose Lazo Vargas says:

    Instant Blueprint (Boilerplate)

  16. I use http://www.colorzilla.com/gradient-editor/ for all my CSS3 gradients, surprised no mentioned it here!


Need more clients?

Download our free guide:
25 Top Freelance Job Sites for Real Clients with Big Budgets