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

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.

Mockingbird

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!

tweet share share pin email

Like what you've read? Enter your email and we'll send you great content like this a few times each week.

 
About April Greer

April is the content manager here at Millo.co. She’s also a go-to freelance designer with a rare combination of creative expertise and technical savvy. April is available for subcontracting and speaking engagements – visit Greer Genius for more information.

 

  • http://brentgalloway.me/gdb Brent Galloway

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

    • http://www.greergenius.com April Greer

      Brent,

      You had me at subtle patterns! This will change my web design for the better. Thanks for sharing!

  • http://ifbdesign.com Ben Smith
  • Samantha

    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/

    • http://www.greergenius.com April Greer

      Samantha,

      Thanks for sharing – I’m a fan of the color combos already.

      April

  • http://www.pinsondigital.com Michael Pingree

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

    • http://www.greergenius.com April Greer

      Mike,

      This is too fun. I’ll have to remember it for when I’m working with my brand new cupcake baking client!

      Thanks for sharing!

  • http://greyink.biz Erick

    This is extremely helpful!

  • http://www.cliffnowicki.com Cliff N

    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!

  • Dan Coggins

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

    • http://www.greergenius.com April Greer

      Dan,

      Glad to have brought a great end to Friday!

      April

  • Dan Coggins

    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:

    http://css-tricks.com/css3-button-maker/

    Thanks again.

  • Mastamas

    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.

    • http://www.greergenius.com April Greer

      Mastamas,

      These are great! Thanks!

      April

  • akamaxbuz

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

  • Pingback: 6 Time-saving tools and references every web designer should bookmark | Blake Hawksworth()

  • http://www,viveredesign.com Gayle

    For a more filling filler text, try baconipsum.com

  • http://www.jacobheflin.com Jacob

    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.

  • http://www.abductedrecords.com Dorian

    Im about to change your lives forever.

    css3generator.com

  • http://mandiellefson.com Mandi

    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.

  • Morgan

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

  • Pingback: 6 Time-saving tools and references every web designer should bookmark. | Littledog Creative | Smart, Effective & Visually Stunning Design()

  • Jose Lazo Vargas

    Instant Blueprint (Boilerplate)
    Placehold.it

  • http://aghoshb.com Aghosh Babu

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