Originally, when I first started working with clients, I did web design. I have to be honest here ; I’m not a designer by trade but because of my many years of working online with websites, I knew that I knew enough to create stuff. The web work was a way to get my foot in the door with folks though and work on stuff that I really enjoy.
Here are 3 free web design tools I use weekly (the first one I use almost daily)….
I remember my first musician client. He wanted a website. He gave me a color palette to work with. He gave me a few examples, stylistically. And I got to work. After a few days of working, I had 2 mock ups for him to check out. He took a look.
He liked it but….the colors were all wrong. He originally wanted purple. Now he was changing to teal and green. If you do web work, you know that there are hundreds of color variations. I kept my frustration in. I logged into the website and asked him to log in as well. And then, calmly, I asked him…
“Like Kermit the Frog Green?”
Yes, he said. So, I fired up my Color Pic and googled Kermit, grabbed the HTML colors from the web and then proceeded to nail down EXACTLY the color scheme he wanted.
Color Pic is absolutely wonderful. It is light weight software that allows you to get the html codes for any color that it hovers over. Obviously, this can be real beneficial in the case of finicky design clients. But it can also be great for lifting color schemes off of websites that you like as well.
Color Scheme Designer
Once you have a color set, you need to find complementary colors. Color Scheme Designer takes the guess work out of the equation by giving you a host of subtle color variations to work with. So, let’s say you want to work with a hue of green. Color Scheme designer will take the color HTML code and give you all the complementary colors to work with. From Mono to Tetrac to Accented Analogic, this generator will give you more than enough choices, all complementary to your main color, to choose from (and it gives you a “light” and “dark” version.)
A client wants to mimic another design. You can go two different routes-
- You can build CSS from scratch.
- You can use the coding of the website in question and “lift” the CSS.
Personally, I will always go the way of easy and with Firebug, you can easily tap into the code and find exactly what the website is doing. I won’t get into how to Firebug works…if you have never used it, this video may interest you (although it is in conjunction with the WordPress Catalyst Theme, it is a great tutorial.
Chrome has a version of Firebug but you will want to use the firefox browser to get the most mileage out of it.