As the web has evolved over the last few years into a powerful, dependable platform, web apps have grown in popularity as well as complexity. There are web apps out there for pretty much anything you want to get done — even something as unthinkable a few years ago as replacing Photoshop for image editing. This development has come at a cost though — web apps are more powerful than ever with their own learning curves and subscription costs.
As has been the case with any popular platform though, the web has also been a breeding ground for utilitarian applications that do small things well, and at the unbeatable cost of free. In this post, I’ll be listing some of the best small design utilities that I’ve come to use on the web to get very specific tasks done. They’re tiny, focused and get the job done with little fuss.
Like the article? You should subscribe and follow us on twitter.
CopyPasteCharacter
Most fonts these days come with a whole bunch of characters beyond the regular alphabet — from different types of bullets to arrows, stars and more complex shapes. The problem in using these characters in your designs is that they can be pretty hard to find. Who wants to open the Character Map every time you need a shape? And how do you know if that shape is available in the first place?
Enter CopyPasteCharacter, a website dedicated to making it super-easy to find all those hidden characters and getting the right codes to you use them in your designs. Simply browse through the visual listing, select the character you want and copy the code to paste into your editor or in HTML. You can also sign up and create your own sets of characters you use most for easy access later.
placebox.es
You know how irritating it can be to find images of just the right size when you are creating prototypes, or mocking up a UI design with dummy text. Personally I dislike using dummy images because they can easily distract from the overall design, so I use grey boxes instead. If you need those when creating the HTMLs, you can avoid creating images from those grey boxes and use placebox.es instead.
Simply type in the URL of the site with the appropriate variables — say http://placebox.es/150/150/#900 for a red box of 150 x 150 pixels — and the appropriate images will be rendered when you open the HTML, directly from the web, complete with the dimensions or any other text you may want to add to them.
0to255
So you have the color scheme for your design all set with the basic colors, accents, et al. Now you need to add a CSS gradient with a slightly lighter and a slightly darker version of the base color. What do you do? No need to fire up Photoshop and mess around with the color palette for something as simple as this. Simply go to 0to255, enter the hex value of your color and the app will list all tints and shades of the color — all the way up to white at the top and black at the bottom. Clicking a shade automatically copies its hex code to the clipboard, ready for you to paste it into your CSS.
Color Scheme Designer
If you need something more powerful than just different shades of a color, how about a full-fledged color scheme generator? Color Scheme Designer will help you define the entire color palette for your design based on one color as a starting point. Choose from different approaches — monochromatic, complementary, triad, tetrad and more — then tweak the color scheme to your liking till you get the exact shades you need. You can vary the saturation and lightness of the scheme, or edit each shade individually. You can even review the implications on color blind people if accessibility is an important factor in your design.
TinyPNG
No matter how much broadband speeds have increased over the last few years, optimizing your graphics on the web is always a good idea. Designers love PNGs for their ability to have multiple levels of alpha transparency, but the lossless compression comes at the cost of higher file sizes. TinyPNG can help you out in this situation by squeezing out the smallest possible file sizes from PNG files, almost always doing a much better job than Photoshop or Fireworks can. Simply upload your PNG and download the compressed version from the site.
Favicon Generator
Favicons are those tiny icons that appear in the title bar or the tab when your website is open in a browser. They’re pretty much a necessity in any web design project these days, but not natively supported by most of the popular design apps. So how do you go about creating your own custom favicon without spending on dedicated — and mostly overkill — icon design apps? Simply create a PNG of your image, upload it on the Favicon Generator web page and download your custom favicon.ico file. There is even an editor to handcraft your icon from scratch, and a gallery of converted favicons if you are looking for some inspiration. Another similar tool is iConvert Icons, though it takes an extra step since their site pushes their desktop app first.
IcoMoon App
Icon fonts are all the craze these days. The ability to have icons as scalable, always sharp and infinitely stylable text characters can be quite empowering until you figure out that the icon fonts available to you don’t have all the icons you need for your design. Rather than use multiple fonts for different icons, you can simply create your own icon font, custom made for a design by mixing and matching from a huge collection of free icons at IcoMoon. Simply choose the icons you need, change the character codes if you want and download the font to embed into your stylesheet. You can even import your own icons to be included in the font.
Layer Styles
So you’re a hotshot designer with killer Photoshop skills, all excited about the prospect of converting your super detailed design into HTML with cools CSS3 effects. The problem is, even the thought of trying to create CSS3 gradients and shadows using lines and lines of code makes your stomach churn. Then there are all those vendor prefixes you don’t want to deal with!
Enter Layer Styles, a neat web app that gives you a Photoshop-like interface to visually design your CSS effects and then spits out the exact code to copy and paste into your CSS files. That’s it — a cross browser compatible CSS implementation of your design in minutes!
Noise Texture Generator
Texture is a big part of any design these days, and one of the easiest ways to show texture is to add subtle noise to a plain background. You don’t always need to open Photoshop or Fireworks to create a simple background with some noise, though. Simply fire up the Noise Texture Generator, choose your background color, edit the opacity and density of the texture and download your file. As an added bonus, the app will even remember your noise settings if you close the tab and open the site again later.
wireframe.cc
Finally, let’s talk about wireframing. As more and more designers adopt the concept of wireframing for quickly visualizing user interfaces and prototypes, a growing number of full-fledged wireframing apps have crowded the web. If all the power and complexity of those apps is not your cup of tea, you might want to give this app a try.
wireframe.cc provides a super minimalistic wireframing experience with a resizable browser (or mobile UI) frame and the ability to quickly draw the most common UI elements without the hassle of toolbars, grids and the likes. Draw the wireframe like you would on paper and share it with your colleagues right from the browser. Anybody with the URL can then view and edit it, so everyone is always looking at the latest version.
Wrap-Up
Believe me when I say that this is just the tip of the iceberg. In the ever-expanding sea of complex, feature laden and exceedingly pricey web apps, there are tons and tons of these little gems that focus on doing just one thing and doing it right. They may not boast all the features you might ever need, but will probably be good enough for that one quick thing you need most.Hopefully there were a few in this list that will work for you. If you have your own favorites that I somehow missed out, let’s hear about them in the comments.
