10 Tools that will Revolutionize your Workflow as a Web Designer

  • 6 Read Time(minutes)

Web Designers need to face a lot of challenges when designing and developing websites. There are a myriad of pitfalls and a lot of hard work to be done during website development. Fortunately, there are tons of great resources that will help us overcome these troubles, from which I hand-picked the 10 best to make your life as a web designer a lot easier. Enjoy these handy web designer tools and utilize them for your profit!

Modernizr

Modernizr

Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser. Unlike the traditional UA Sniffing, Modernizr does real feature detection to discern what browsers can or cannot do. Just download the development version from their website (currently weighs only 42kB), and enjoy your designs work as they should on older browsers, too!

I’m using Modernizr in all of my projects, including Szaboka’s Blog. I found it a great tool to make HTML5 websites work in older browsers. Here’s an example of my Blog in Internet Explorer 8 before (on the left) and after adding Modernizr.js (on the right).

ModernizrBA

Place It

PlaceIt

PlaceIt is an online tool for creating stock photos or product screenshots in just seconds. You have a ton of setups to choose from, all you need to do is choose the one you like, upload a screenshot of your design, and download your brand new stock photo. There is a free download option available in 800×600 resolution for free distribution. Paid version includes higher resolutions and commercial licenses.

Here’s a screenshot of what PlaceIt can do.

PlaceItTest

Primer

Primer

Primer undercoats your CSS by pulling out all of your classes and id’s and placing them into a starter stylesheet. All you need to do is paste in your HTML code and Primer will output a bare bones stylesheet including all the styles you defined in your HTML. Pretty cool!

What’s My Browser Size

WhatsMyBrowserSize

WhatsMyBrowserSize is a very simple application that tells you the current size of your browser’s viewport on the fly. It comes very handy when you’re testing your responsive designs. There are also various browser extensions that do the same, if you prefer that.

Responsive Site View

ResponsiveSiteView

Another very handy tool for your responsive design workflow is a browser extension called Responsive Site View. It creates a button in the top right corner of Chrome, where you can enter a website URL and choose from a dozen of devices to view your project in. Above is a working screenshot of my Blog viewed on a HTC Desire S.

Adobe Kuler

Kuler

Kuler is a color scheme generator and browser developed by the Adobe guys. It’s been out there for many years, and it got redesigned not long ago making it even easier to use. You can create your own custom color schemes using the color wheel, or you can browse what others have created using the Explore menu. Above is a screenshot of the search results page for ‘flat’.

If you have an Adobe ID, you can save your own color schemes and share it with the world. Definitely my No.1 source for playing with colors!

Niice

Niice

Niice is an inspiration search engine. Allow me to quite their own introduction to better understand what it does: “The internet is full of inspiration, but since Google doesn’t have a ‘Good Taste’ filter, finding it means jumping back and forth between blogs and gallery sites.” Niice is able to search across multiple sources, like Dribbble, Behance or Designspiration, and displays the results in a neat, infinite-scrolling way. See the brilliance?

Cupcake Ipsum

CupcakeIpsum

Tired of your old, boring lorem ipsum generator? Try CupcakeIpsum to generate sweeter placeholder text, if you get it.

“Cupcake ipsum dolor sit amet apple pie halvah toffee tootsie roll.”

– Just so tasty!

eCSStender

Eccstender

Don’t like browser-specific CSS3 vendor prefixes? Who Does? Say hello to eCSStender, which will take care of the dirty work for you!

CSS3 Generator

CSS3Generator

Another must-have tool for developing with CSS3. With CSS3 generator, you can select which CSS effect you want to use, set up its options, enter the required values and you’ll get a ready-made, prefixed code. CSS3 Generator also helps you with browser-compatibility on each of the effects.

What The Font

WhatTheFont

Ever come across a beautiful font that you didn’t know its name? WhatTheFont is a free service developed by MyFonts.com to recognize typefaces in an image. All you need to do is capture a screenshot of the font you’d like to ‘decode’, upload it and check the results.

Tip: When uploading a screenshot, make sure the text is clearly visible. Try to capture screenshots where the text is large enough to be easily recognized.

Conclusion

There are a myriad of helpful online tools to make our lives a lot easier as web designers. If you have your own favorite that isn’t listed here, we’d love to hear it in the comments!

Thanks for tuning in.

Share it?

There should be an ad here...

Aaaw, too bad you're using AdBlock. Care to add my Blog to your whitelist, please? Much appreciated!

Written by

Web designer, web developer, UI/UX designer 9-5. Energy drink consumer, video game addict, avid blogger 5-9. Owner of Szaboka.com.

Related Articles

7 Responses

Comments

  • stephan said on 2013.10.30. at 13:49 Reply

    Thank you for this list. I'll certainly use them! ;)

  • Jordan Fried said on 2013.11.05. at 16:52 Reply

    Awesome post Roland! You write well and your blog looks great. Love the design man!

  • Chris said on 2013.11.05. at 18:29 Reply

    Nice list. Thanks for sharing Roland!

Join the Conversation

Captcha: 2 × one =