My favorite web-based tools for web design

Hey guys,

Today I want to share the tools that I use for different purposes in my web design. Some of them seem abandoned and a little outdated now, but they still serve the purpose. The thing is that it’s web 3.0 and interactive web pages has turned into full blown applications and now you don’t even need most of the software you couldn’t live without in past (remember Dreamweaver or Flash? =))))

Oh yeah.. I forgot to mention… they are free to use also

Draw IO

Screenshot from 2014-07-24 12:51:03

It’s not necessarily web-related, but when you need some diagramming work, let’s say you are building some custom web app that needs to automate any specific process – this app will help you build pretty diagrams really easy (And unlike the Linux-wide-famous Dia, this app does not suck)


Screenshot from 2014-07-24 12:58:20

When you need to design you color scheme – this is definitely the droids you are looking for! I like it because of it’s flexibility. You will chose the colors and you can view it on different page examples in the app. And one more cool feature is that you can view your scheme as people with different color-blind deceases would see them.


Screenshot from 2014-07-24 14:11:52

The very convenient way to make up some css styling. This is probably the web tool that I use for the longest period of time. I mean I can code it manually, but this tool is great for someone who is as lazy as I am. You just tune up your style line you did in Photoshop back in days and copy the CSS in the bottom of that page. It’s a bit buggy though, but it never failed me.

Pixlr Express


Sometimes  you need to edit an image a little bit. Make it brighter, or blur, or whatever. This is where Pixlr Express is a very helpful tool. You can edit the image using large amount of tools, or you can overlay something and apply the effect.

Space Ipsum

Screenshot from 2014-07-24 14:25:21

You’re a web developer. You need a paceholders. A lot of them. Rigth? I like using Space Ipsum because it’s fun(and I love space stuff and sci-fi) and minimalistic. Just press Engage, and your placeholder text is generated from a lot of random space themed quotes. Why this is better than traditional Lorem Ipsum? Because it’s a real text written in English and doesn’t look like gibberish to the eyes of your client.

Lorem Pixel

Screenshot from 2014-07-24 14:31:32

Not just text… You need your prototype to look like a real website or app. So go ahead and add some randomly generated placeholder images. This tool can ease your pain searching and cropping them – you may set your desired size and it will deliver the image.

Js Fiddle

Screenshot from 2014-07-24 14:41:07

This is a very smart way to test your JS snippets. Not much to say. It just WORKS! ))

To conclude…

In my web development I actually use more of the web tools, than the offline ones. I hope that there will be more good ones that the web will deliver.