Use These 5 Free Web Design Tools To Make Your Life Easier

by 7 03/02/2012

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.

Email Marketing and Email List Manager | MailChimp

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:

-webkit-border-top-left-radius

which is similar to the default CSS3 syntax of:

border-top-left-radius

For Firefox you would need to use:

-moz-border-radius-topleft

Due to this syntax difference, it is easy to get the syntax for wrong. Enter border-radius.com.

CSS Border Radius Generator

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.

Visual Republic ~ Handcrafted Web Delights

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.

Stripe Generator - ajax diagonal stripes background designer

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.

October Events! | The Paisley Farmhouse

BgPatterns takes all the guess work out of pattern generation.

BgPatterns - images

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 - rotations

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?

Choosing a color scheme can be a time-consuming task. There are plenty of sites like Abode’s Kuler and COLORlovers that make this task easier.

My favorite is Color Scheme Designer.

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.

Color Scheme Designer - Combinations

The main benefit this site has over others is being able to see the colors applied on both a light and dark sample webpage.

Color Scheme Designer - Light Example

 

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!

CSS3 Button Generator

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!

Show Case | CSS3 Button Generator

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.

Print Friendly

About 

I am a co-founder of Unique Imprints, a web design company that focusses on getting small businesses on the web. When I'm not designing web pages you can find me learning programming languages or debating on usability.

Get our Daily Newsletter

Get conversion optimization, design and copywriting articles delivered to your inbox FREE

7 COMMENTS

Nate

Thanks for sharing these free tools. Great suggestions!

March 2, 2012 Reply

Lamine Kacimi

Great set of tools, Bookmarking it right now :)

March 2, 2012 Reply

Andrea

Thanks for sharing these tools and shortcuts compiled into a list for us.

March 2, 2012 Reply

Darrell Place

Here is a free tool I use to round the corners on pictures.

http://www.online-image-editor.com/

March 2, 2012 Reply

Kavin

I have used most of these tools and they are really good. For dealing with pictures, I always prefer picasa and Adobe photoshop. They cover almost every aspect of image editing.

March 14, 2012 Reply

Matt

I created a nice page a while back listing all of my favourite online tools – maybe it will help someone else out too :)

https://azuz.co.uk/web-design/10-online-web-design-tools-and-resources-you-need/

April 25, 2012 Reply

Stéphanie

Nice round up here!
Personnaly there are two tools I can’t live without now : http://www.layerstyles.org/builder.html for creating drop shadows photoshop like, and http://www.colorzilla.com/gradient-editor/ for creating cross-browser gradient.

April 26, 2012 Reply


Leave comment

Some HTML allowed

Get conversion optimization & A/B testing articles FREE >>>