I learned web design the old fashioned way by diving in with my eyes closed and never really knowing where I, or the site, would wind up. My first site in 1998 was built with NetObjects Fusion, a wysiwyg editor. Over the years I went from version 3 to version 11, avoiding learning to write code, since most of the sites I was designing were for my own businesses. Eventually I ditched NOF and began to focus on using WordPress and templates, learning as much code as I needed to tweak things.
I still do not like writing CSS from scratch and choosing color schemes gives me a headache. But two tools that I’ve discovered have made things much simpler, and if you are someone who likes to DIY then you should love them as well. Here they are:
1. LeanDesigns claims to be the first visual web design tool built specifically for web developer. Not sure about that but I would describe them as a web creation tool that allows you to create a site using drag and drop functionality and then instantly export the html and css that makes up your design. Its fast and simple to create a layout, making it also a perfect tool to create wire frames. Here’s a graphic of a design I created in about 15 minutes.
One of the features I like is that you can apply a 960 grid guide behind your design making it easy to create a visually appealing design. Then once you’ve completed your design you can export the html and css code.
The design to the left is actually a layout for a page in a WordPress Template site that I’m working on. The header and footer are supplied by the template and I use my design and the code to customize the body section.
LeanDesigns has a How It Works page that walks you through the creation process with a set of screenshots.
They offer a free trial version that allows you to create and save one design. The Pro version allows you to create and save unlimited designs for only $9 a month.
My Verdict: A low cost tool that can be an advantage in your tool set.
2. Color Scheme Designer allows you to create custom palettes for websites and more. The interface is simple and allows you to quickly create a color scheme that works together.
I met with a client earlier today to discuss redesigning their website and color scheme (the current scheme was red and royal blue). The first step was to redesign their logo with the new colors, the only caveat being that one of the colors had to be red. I took the red color and put it into the tool and it generated the following color palette.
There are six different choice for choosing color combinations:
1. Mono
2. Complement
3. Triad
4. Tetrad
5. Analogic
6. Accented Analogic
You can adjust the saturation/brightness, contrast, and see a full color list with color swatches and hexagon codes. They even have a tool to see a light or dark page example allowing you to see how the colors might interact on an actual page.
Using the palette generated I was able to quickly put together a logo in the new colors to show my client. Here is the logo design (company name changed because the client is not ready to make the actual logo public):
Without the color scheme designer I’m not sure I would have chosen to mix red, blue, and green together.
My Verdict: An absolute must have if you do anything that requires color selection.
There are thousands of tools out there and they may be some that are better, but so far these two do exactly what I want them to do. They are perfect tools to add to your DIY tool kit.
Social Media Sonar provides the following four resources for FREE… 1. The Blog, 2. The Online Marketing/Social Media Blueprint, 3. Conversion Rate Optimization Guide, 4. Resource Center. If these help you implement your own online marketing program, great. We love helping people. If you decide you need some help, great. We love new clients. Contact Us if we can help you.
