My father used to say “Any job is easy if you have the right tool.”
This couldn’t be more true when you are designing for the web.
Here are 5 free tools I’ve stumbled upon which really make my web design life easier.
Need a tool to create rounded corners using CSS3?
One of the great new features of CSS3 is rounded corners. Here’s an example of rounded corners used on the excellent MailChimp site.
As with most things related to CSS3, you have to support extensions for the various browsers to ensure everything works as expected. With Border radius there is some discrepancy with the syntax used across the different browsers. If you were customizing the top left border for a webkit browser such as Chrome or Safari you would have to use:
which is similar to the default CSS3 syntax of:
For Firefox you would need to use:
Due to this syntax difference, it is easy to get the syntax for wrong. Enter border-radius.com.
Border-radius.com allows you to preview your changes as you type them in. It also allows you to change the radius of all 4 corners independently and generates code for Webkit, Mozilla and other browsers. This is one of my favorite tools to use when designing with rounded borders as it takes the guess work and error out of your CSS3 syntax.
Need a tool to generate stripes to spice up your web design?
Stripes can be used to make the content of a website really stand out. Take a look at the Visual Republic website as an example.
Stripe generation can be a challenging task. You need to create a sample that can be repeated both horizontally and vertically. This can be be quite error-prone. Stripe Generator 2.0 makes creation of stripes a breeze.
With Stripe Generator 2.0, you can change stripe size, spacing, stripe color, background style, shadow style, background colors as well as various stripe orientations. It also gives you the option of viewing your creation in full screen.
Once you are satisfied with your creation, you can download a small swatch which you can tile both vertically and horizontally. The swatch generated is very small – around 500 bytes. The site also provides you with the CSS3 code should you need it. It also provides a gallery of stripes created by other users which you can choose to use if you wish to.
Need a tool to create fancy background patterns?
Similar to stripes, a background pattern can also make your website content pop.
The Paisley Farmhouse website is a great example.
BgPatterns takes all the guess work out of pattern generation.
BgPatterns currently gives you 68 patterns to choose from. You can change the color used, rotate the pattern, change the canvas behind the pattern and generate page-wide previews to help you with your pattern creation. You can also change image opacity, location and the scale.
BgPatterns also provides you with a simple download image which you can tile horizontally and vertically.
Need a tool to help choose a color scheme for your website?
My favorite is Color Scheme Designer.
The site provides you with multiple combinations such as mono, triad, tetrad to name but a few, along with their hex codes. The site also gives you the option of choosing colors that can be viewed by users with various visual impairments.
The main benefit this site has over others is being able to see the colors applied on both a light and dark sample webpage.
Need a tool to create CSS3 Buttons?
Need beautiful buttons? Want to only use CSS? Look no further. With CSS3 Button Generator, it couldn’t be easier. Customize your background, border, padding, drop shadow, inner shadow, text font and text shadow and the site generates the cross-browser code for you!
The site also gives you access to a showcase of hundreds of buttons created by previous users. This makes finding the right button so much easier!
The site also lets you choose from a list of random buttons as well as from a list of preset buttons.
I hope some of the tools mentioned above will help make your job easier. All of these tools are free. Most of them have “donate now” buttons. If you do find these tools useful might I suggest a small donation to the author to ensure these tools remain free.
I’d be very keen to hear of any free tools that you may use that makes your design life easier.