2 minutes Read.
Last week I shared some of my favourite mobile apps to help you increase your productivity. Here is a list of some awesome free web resources to help you in your web design project. I use them almost everyday!
Being a Photoshop lover, I have used it extensively for my web projects. But now that I have shifted to the Macbook, I really don’t want to pay their monthly fee for another license. Also, running Photoshop using virtual machine slows down the entire speed of your work. Pixlr online Editor Is a great alternative. It even opens .PSD files without losing any of the original layers. Routine stuff such as resizing, cropping etc. is pretty easy too.
Found some error on the webpage? Wish to suggest something? Want a screenshot of a webpage? Use Awesome Screenshot Extension for Chrome and Firefox! Its captures entire or a part of webpage. You can then annotate it using text, arrows and shapes. It gives you a png file of the capture to share via email. Also, you need not worry about the naming the final output, it captures the title tag of the webpage and the time of capture. Smart!
Being a Typography lover I am always attracted to the new fonts used around. I immediately check their rendering on all browsers, readability, font size proportions etc. But to get that you need to identify What Font it is. Isn’t it? Use this superb Chrome Extension.
Flat UI Colors
Like flat colors? This is a must use app. Flatuicolors provides some cool flat colors. Click on a color and it copies whatever format you want to use (RGB and Hex), to the clipboard so that you can paste directly into your code editor. Awesome! I use it most for my CTA (Call-to-Action) buttons.
The number of icons we see around us, is amazing! We love to use them. They no doubt enhance the aesthetics of our websites and provide a better user experience. Fonticon is a quick and handy tool to use icons from. Select the icons you desire to use and straightly embed using a single line of code. Did you notice the Clock icon above used with estimated reading time?
Using dummy or fake image placeholders in your web design project is really painful and time consuming job. You know what I mean – creating an image using photoshop with desired dimension, exporting it to the desired destination folder and then calling it into the code – really painful! Why not use placehold.it.? It is a very simple and quick image placeholder tool. You can also format your image’s text, background, color and size in just one simple line of code.
Looking for some great royalty free high quality images for your web project? Visit pexels. They have around 4500 awesome images to download and use for personal as well as commercial use licensed under CC0.
I am sure you will enjoy these awesome free web resources! Do you know any more? Please let me know at @vinayteli. I promise not to be selfish, and will share it with the community.