#StopWarInUkraine Save the children

The awards of design, creativity and innovation on the internet

Magazine for designers and web developers
03 Collect

Some Handy Tools for Designers & Web Developers

Article by Saijo George in Resources & Tools -

Menial and repetitive tasks kill time and productivity. If there are tools that help us overcome these why not go ahead and use them? Any tools that help web designers or web developers to simplify their workflow and save time are always welcome here at AWWWARDS.  

  • Google Chrome DevTools

    With Google Chrome DevTools you can now inspect, debug and analyze pages on your mobile device using your development machine. Screencast your mobile device screen to desktop.

  • Google web designer

    Google web designer

    Love it or hate it there will always be WYSIWYG tools out there, and this one comes from the big G. The idea behind this design / development tool is to get your content out there to all screens desktop, tablet or mobile without compatibility issues.

    While this is a great tool for building animated ads, what with the demise of Flash, I suspect Google has bigger plans for this which aren't limited to creating flashy ads. After all, it’s not called Google Ad Builder.

  • Tiff


    Perhaps you a master typographer and can easily tell the difference between Arial and Helvetica, or even between Futura and Comic Sans (let's not go there). With high-quality premium fonts available from various marketplaces including GraphicRiver, and a never-ending supply of free fonts available for download, it's nice to have a tool that can easily identify the subtle differences between two typefaces. At the moment it only supports fonts from the Google Web Fonts library and regular system fonts, but I do hope it expands into something that will allow users to upload and compare custom fonts.

  • Annyang


    Annyang is a tiny javascript code that weighs just 2kb which will allow your visitors to control your website with simple voice commands. It supports multiple languages, has no dependencies, and is free to use.

  • Apiary.io


    An easy way to design, mock up and document your APIs. Collaborative design, instant API mock, generated documentation, integrated code samples, debugging and automated testing all packed in to one nifty little tool.

  • Userium


    Userium offers a handy checklist of common usability problems. If you want to carry out a quick check on usability, navigation, search, content, etc., then this is certainly worth bookmarking.

  • Coment.me


    Want feedback on the mobile or tablet version of your website? With Coment.me you can share the url, automatically generate a screenshot of the website at the width of your choice, add your comments, mark issues, and share the results with anyone. I spelled it correctly, the tool resides at coment.me, I had to do a double take the first time I read the domain.

  • Froont


    Froont is an easy drag & drop tool to help you prototype and design responsive web sites. It is only available for Google Chrome at the moment but they do have plans to bring it out for Safari and Firefox.  

  • 0to255


    Colors play a vital role in web design and this handy online tool will help you choose the right one, especially when you are looking to pick a hover, border or gradient color. When you select a color the tool will give you 31 other colors from the lightest to the darkest. This will most likely be a great time-saver for front end designers.  

  • Progress Button Styles

    Progress Button Styles

    If you need an original and unique way to create loading bars, here you have a set of 14 ready-made styles. In this Codrops article you'll find details of each of the effects.

    So there you have it folks! Some handy tools to make your life a tad easier. I do hope you all like this list of resources. Why not share some of your favourite tools with us in the comments below?