I am available for freelance work - HIRE ME

10 More Awesome Online Tools for Design and Development

posted by Matt Ward on Dec 11, 2010.

In this article, I want to share 10 more awesome online resources that I use to make my work as a designer and developer faster and easier. These range CSS generators, to typographical tools, to code validators. All are useful in their own ways, so be sure to check them out.

A few months ago, as I was working to put together the redesign of the Echo Enduring Blog and Echo Enduring Media, I published an articled entitled “10 Of My Favorite Online Tools for Design and Development“, in which I outlined some of the online tools that I use the most in my work. It turned out to be a pretty popular article, and I think that some people really benefited from it.

Well, after only a few short months, I’m back with another article in the same vein. In the weeks and months since that original post, I’ve come across a bunch more awesome online tools that can make a designer’s life so much easier and I wanted to share them with you.

Text Generators

Despite some very valid arguments again using Lorem Ipsum text, I still frequently find myself in situations where I need some kind of textual placeholder. Perhaps its for creating a theme, or for a client that doesn’t have any copy written. Sometimes I just need a few paragraph of text to run through some JavaScript or jQuery processing. Whatever the need, I am very rarely in the mood to just start cranking out several paragraphs of placeholder text on my own.

That’s where text generators can come in incredibly useful, and I’d like to introduce you to two of these:

BlindTextGenerator

This web app is a great little tool for designers who need to grab some quick placeholder text. It may look simplistic, but don’t let the interface fool you—this little app can pack a big punch, and deliver placeholder text in all kinds of different and interesting ways.

Blind Text Generator allows you to create a wide range of different blocks of placeholder text

Blind Text Generator allows you to create a wide range of different blocks of placeholder text

It makes use of a number of different base texts, starting with the classic Lorem Ipsum, and including text in both English and Latin. Beyond that, you can control the number of character or words, and the number of paragraphs, offering a surprising degree of flexibility in terms of the length of your text. Being able to turn on <p> tags is a nice touch too.

Fillerati

Fillerati is another placeholder text generator, which spits out text from a number of classic literary works of authors such as Lewis Carrol (Alice in Wonderland), H.G. Wells (War of the Worlds) and Jules Verne (Around the World in 80 Days). Designed in an attractive and contemporary style, this little app is a pleasure to work with.

Fillerati generates placeholder text in a number of different formats, based on a selection of different literary classics

Fillerati generates placeholder text in a number of different formats, based on a selection of different literary classics

It also provides some added flexibility in the way the placeholder text is generated, allowing you to create paragraphs, headings (ranging from levels 1-6), list elements and even just plain text. The type of content you’re generating also changes the slider control, which you can use to control how many paragraphs, words or list elements you want.

CSS Generators

Now, I’m a huge fan of CSS3 and all the various bits of awesomeness that it provides us with, but as many of these new properties are introduced, I am finding that they are becoming a bit more complex than the most of the properties that we saw in CSS2. That’s cool, but sometimes it makes coding and experimenting a bit more challenging. Well, there are a variety of different generators out there that can help you create your CSS on the fly.

Border Radius

Web services seriously don’t get any simpler than Border Radius. You basically visit the site, provide values for the radius (roundness) of the four corners of a box and grab the CSS.

Border Radius generates simple CSS for creating elements with rounded corners

Border Radius generates simple CSS for creating elements with rounded corners

The only other option is being able to tell the app if you want the WebKit, Gecko (Mozilla) or regular CSS3 properties.

Yes, it may seem ridiculously simple, but it’s also super quick and easy to use and can actually be a real time saver—especially for people who are just getting started with CSS3 (or even CSS in general).

CSS3 Gradient Generator

Of all the new CSS3 properties that we can use (to some degree) here and now, the CSS gradient is probably (in my view) the most complex and daunting of the entire group. As such, a number of different generators have cropped up and the aptly named CSS3 Gradient Generator seems to be a pretty good one.

This app allows you to generate the code for creating CSS3 gradients

This app allows you to generate the code for creating CSS3 gradients

I like how big the gradient is preview is, allowing you to really see how one colour blends into the next. A really nice colour selection tool allows you to choose from the colour picker or define them manually in RGB, HSB or hex code. Also, the one-click “Copy the code” option is a really nice feature.

The only thing that I don’t like quite as much is the user interface (UI) for creating, deleting and controling the positioning of the swatches. It’s definitely usable, but it took me a couple of minutes to figure out what all the controls did.

Ultimate CSS Gradient Generator

Obviously, this one is another CSS gradient generator. Despite it’s grandiose name, it does have both some advantages and disadvantages over the CSS3 Gradient Generator that we just looked at (making its ultimate-ness questionable).

Another CSS gradient generator, based on the familiar UI of Photoshop

Another CSS gradient generator, based on the familiar UI of Photoshop

Self-styled as a Photoshop-like generator, this little tool does take UI cues from Adobe’s flagship application. Most specifically, this comes in the form of the gradient slider, where you can select the individual points within the gradient and adjust the colour, slide them back and forth to change their position and even just click to create new points within the gradient. If you are at all familiar with Photoshop, these controls will seem very natural to you, as will the colour picker window.

Interestingly, though, the colour picker does flip the controls for saturation and hue, with the saturation being controlled by the vertical slider to the right of the colour window, and hue being controlled by the x-axis of the colour window itself. In Photoshop, it is the other way around. Also, as much as I like this tool, it could definitely benefit from a one-click copy function.

CSS Tricks Button Maker

When it comes to the world of CSS, Chris Coyier is the man. He produces all kinds of insanely awesome stuff over at CSS Tricks, and this CSS Button Maker is no exception. Of all the CSS generators that we have already looked at, this one is probably the single biggest time saver if you are looking to style your buttons entirely with CSS.

CSS Trickster Chris Coyier's button generator makes creating slick CSS buttons a breeze

CSS Trickster Chris Coyier's button generator makes creating slick CSS buttons a breeze

With a wide range of controls that allow you to define the size, padding, border radius, gradient, background, border and :hover and :active states, this generator is a powerful little tool to help you create awesome looking button styles to integrate into your website quickly and easily.

I actually used it just this past week and was more than happy with the results. I did do a couple of minor tweaks to the generated code, but using the generator definitely saved me a ton of time, and I was very happy to see that it degrades pretty nicely in older browsers too!

Typography

I love typography. You might even say that I obsess over it. As I was doing the redesign of this blog back in the summer, I spent hours and hours and hours pouring over different typefaces. So, it should come as no surprise that I have a couple of typography-related tools to share!

Baseline CSS

You’ve probably heard it said before, but it bears repeating—typography is not about picking a cool font. Yes, typeface selection is an important first step, but there are all kinds of other choices that need to be made, like leading (line spacing) and tracking (letter spacing). One important consideration that doesn’t get a lot of attention on the web is baseline alignment. Baseline CSS is a framework that works to solve this particular problem.

An awesome CSS framework for bringing a typographic baseline grid to your web designs

An awesome CSS framework for bringing a typographic baseline grid to your web designs

It many ways, it works almost like a reset stylesheet, except that instead of just resetting all the borders and padding and so forth, it actually sets the basic rendering of all the HTML elements to align with each other according to the “defined” baseline. Of course, the baseline itself is theoretical, and actually uses font-sizes, line heights and relative positioning to actually control the alignment, since there is no native baseline CSS property (though wouldn’t that be cool?)

It probably isn’t needed for every site out there, but for a site that uses a lot of text this framework could be a huge asset.

TypeTester

Ever wanted to be able to compare several different typefaces on a web site at the same time? To do this manually would require a lot of work, repeating elements, setting styles, reviewing, resetting styles and so forth. Well, TypeTester is an awesome tool that can do most of the heavy lifting for you.

Type tester is an awesome tool for testing and comparing different typographic stylings and seeing how they render on the web

Type tester is an awesome tool for testing and comparing different typographic stylings and seeing how they render on the web

Basically, you define your sample text, and then have three columns, each containing the same block of text, but each controlled with different options. This means you can look at the text in the same typeface, but at three different sizes, or with three different leadings or colours. You can compare the same text at the same size, but with different typefaces. With powerful controls, the combinations for testing are virtually limitless!

Each column also renders the text in regular, bold, italic and bold-italic weights/styles, as well as in mixed case, upper case and small caps, giving you plenty of options to compare.

In terms of fonts that are available, well there is a list of safe fonts, of default Windows fonts, of default Mac fonts, default Vista fonts and Google fonts. It also says that you can choose your own (providing a list of all your installed fonts), but this doesn’t seem to work quite perfectly (I expect this has something to do with different formats). Still, there are a ton of different options for you to play with.

Oh, and as if all that’s not enough, when you find the perfect type settings, you can also grab the appropriate CSS. Nice!

Other Tools

To end this list off, I have two miscellaneous tools. They don’t really fit together in any distinct category, but I still think that they are all pretty awesome and hope that you can get some use out of them.

Favicon.cc

Sticking with the generator theme for now, we have Favicon.cc. Favicons (those little icons that appear in the status bar and in browser tabs to identify a site) are a small but important consideration when it comes to usability. This tool is a quick and easy way to generate your own favicon from an existing image.

A super simpe online tool for the quick (or not so quick) creation of a favicon for your site

A super simpe online tool for the quick (or not so quick) creation of a favicon for your site

All you have to do is upload an existing image (square works best) and this little app will scale it down to a standard 16 x 16 format. That’s not very big, so I would recommend against using anything overly detailed. Remember this is an icon, not a photo. For those who may be feeling extra adventurous, the app will also allow you to create your own icon from scratch, by defining the colours of each point on the 256 pixel grid. Or, you can use this to make slight tweaks the an icon generated from an uploaded picture.

When you’re done, you just download the .ico file and drop it into the root of your webserver. It’s a fast and easy way to create favicon files.

JSONLint

Last on the list today, we have an awesome and useful JSON validator. I’ve been working with JSON a lot over the past several weeks, and this little tool has been an invaluable resource for me.

Working with JSON? This awesome little validator is a super useful tool for validating and debugging your code

Working with JSON? This awesome little validator is a super useful tool for validating and debugging your code

Basically, like most validators, you can just copy your JSON code and paste it into the applications texteara. Then, press the Validate button and in a flash, you’ll be told if your code is valid or not. If it’s not, you’ll get some reasonably descriptive error messages to help you track down the problem and resolve it. I don’t even know how much debugging time this tool has saved me, especially when first learning the ins and outs of JSON.

Also, one hidden feature of this one is that you can just paste a URL instead of actual code. In this case, the app will go out and scrape the JSON from the page and try validating that instead.

Conclusion

Again, like my earlier post, this list is not an exhaustive roundup of all the different resources that are out there on the web. There are all kinds of other awesome apps and tools for us to find and get excited about. So who knows, maybe in another four months I’ll have yet another list of awesome tools to help make our design and development work easier and more streamlined.

What about you? What are some of your favorite resources and web apps that make your work as a designer or developer go more easily? Please feel free to share them!

Post A Comment

Also from Echo Enduring Media:

An Unfolding Tale

About the Author

Matt Ward is a digital artist who lances freely under the moniker of Echo Enduring Media, and specializes in graphics design, illustration and writing. He is also the Creative Director for Highland Marketing, a creative direct marketing company based out of Waterloo, Ontario. You can follow Matt on Twitter

Like this post? Help Promote it!

Comments

Dec 11, 2010

Abhijeet says:

Thanks for sharing useful sites

Dec 11, 2010

Lourens says:

Wow, that gradient tool is really helpful – will use in the future :)
Thanks for sharing!

Dec 11, 2010

Cipy says:

another useful tool is http://www.generatedata.com/

Dec 11, 2010

Oz says:

Will definatley use the button gradient generator

Dec 12, 2010

Jeroen says:

A big thumbs down for Fillerati. They won’t let me use the site w. IE8 :-((

Dec 12, 2010

Matt Ward says:

That’s odd. Must be using some features that IE8 doesn’t support.

Dec 13, 2010

Andrew Houle says:

Super useful, thanks Matt!

Dec 19, 2010

malydok says:

When it comes to colour schemes: http://kuler.adobe.com/ is irreplaceable but I guess everyone knows it already ;>
Fine apps, thanks for sharing!

Jan 30, 2011

Daniel says:

I’ll be bookmarking all these tools. Thanks

Leave a Comment

Links

  1. wpmag.com - WordPress News, Themes, Tutorials, Plugins, Questions, ...
  2. faqpal.com

Top Commenters

Thanks so much to these awesome people for joining in on the discussion!

Copyright © Echo Enduring Media 2009-2014