June 12, 2009
Six Tools to Ease the Pains of Designing
As designers, if we are truthful, there are some aspects of the job we dread doing, either because they are repetitive, not challenging, or just because we don’t like doing them. Those things can range from making yet another CSS design with rolled corner element or to such things as tweaking font attributes to get “that look” that we wanted. Here are some sites and tools that will help you be more productive, and take out some of the boring aspects of design.
Clearing CSS Rules
We all forget how to do things at times. This site contains a table which displays how to properly clear the CSS values float values in most of the major browsers. This is very helpful if you are forgetful, or if you can’t find out why that one div element isn’t clearing like it is suppose to be.
Rounded corners, once called the Holy Grail of design, can be a headache for a lot of people. Most of the time you can get rounded corners in one browser, but if you checked it in a second browser the corners weren’t rounded. Which means you had to go back and “redesign” or create a “hack” for the browser which wasn’t working properly. This tool allows you to generate rounded corners with a lot of ease.
A great designers treats text as part of the UI according to Cameron Moll in his presentation entitled “Essential Web Skills”. Typester is here to make you that great designer. With Typster, you input text into a text box, then you can use drop down menus to tweet the text to look different. You can even compare up to three different designs side by side. This takes the “headache” and time consuming process of having to make changes to the style sheet, then refreshing your page just to see the changes.
Optimizing code is something that every designer should try to achieve, with CSS Tidy and CSS Optimiser you can do just that. Some of the great benefits of optimizing your CSS code, is easier to read code and less bandwidth usage. The less bandwidth your site uses, the better. It increases the speed in which the page loads for the user, and if your site ever becomes a hit on a social media site, you wan’t feel slowed down the effects of what is called the “Digg effect”.
Hypenator isn’t a CSS tool, it is a JavaScript API. The reason it is in our list is because it makes your website look more uniform, cleaner, and very professional. There are times when your text will leave large white gaps at the end of a line because the word is too long to fit into that area. You could use justification alignment, but that may end up putting large gaps between the letters in a word. Hypenator is here to save the day by automatically hyphenating the last word on the line of text if it is to large to fit on that line. By doing this, it makes the text easier to read.
Browser Editors: FireBug / Developer Tools / Dragonfly
Firebug for Firefox, Developer Tools for Internet Explorer 8, and Dragonfly for Opera, if you haven’t used one of these tools, then there is only one question to ask. Why not? These tools are like an ice cream cone on a hot summer day. They allow you to “see” how the browser is processing your code. They even allow you to make live edits without changing the code for everyone else. The tools are great if you have one issue that you can’t find out why it is happening, or if you want to see what your design would look like if the background was a different color. These are tools which no designer should go without.
