"Professional" Web Designers. Everywhere you look. Trying to edge their way into the niche of providing web design services to small, medium, and sometimes-large businesses. How often have you seen a website that just looks terrible? Riddled with gaudy animations and cheap looking graphics, these sites are popping up all over the web. Why is there a difference between the sites aforementioned and the big corporation or "dot com" company's websites? Are all the real professionals at those big companies? Is there any hope for small businesses to have a real professional site, without having a full design team?
Of course there is hope. But the answer lies in the techniques these designers use. Whether they taught themselves somehow, or went to some sort of class, basic industry standards and concepts never come into play. Lets start by listing some of the biggest mistakes made all over the web by these designers, and how to combat them from an industry professional viewpoint.
1. Microsoft Frontpage and Frontpage Express - This program has been the downfall of many a website. The terrible code it produces, the cheesy templates … Many novice designers use this program to produce every web page. Equipped with absolutely no knowledge of HTML, these designers churn out page after page of customized Frontpage templates, that quite frankly, a child could do. The result is bad code, that, at oft times, is not cross browser compatible.
Professional route - Learn HTML. Become a true hand coder. Most corporations that are looking for web developers (and know what they are talking about) require that you are a hand coder without the assistance of a WYSIWYG editor. Once you have a grasp on the language, you will be a more flexible designer, outside the confines of an HTML generator. Learning HTML opens the door to learning and incorporating other web languages easily.
2. Bad Graphic layout - Many novice designers seem to have a lack of graphic layout knowledge. Text is placed generally in the middle, while little animations dance along the sides of the page, or break up the text momentarily. It seems these designers go into the task of creating a website without figuring out what its going to look like initially. Graphics are gathered from the Internet and CD collections, without any modification.
Professional route - Photoshop is your friend. The first step to a great website is creating the layout. Start off in Photoshop with a new project at 800x600, or your desired resolution target. From there, your imagination takes over. Draw out the whole front page of the website … menus, buttons, header graphics, text spaces, everything. It should look exactly like you want the web page to look on the Internet. Make sure you create a new layer for all the important elements of the page, for easy changing & moving. A big advantage here is while you're drawing all the elements, you can see how it's going to be placed on a real HTML page, and plot the coding out in your mind. You can then start the coding process by "cutting up" the design, and saving the individual pieces as your web graphics. By starting out at 800x600, you have the option of designing the site to stretch and fit other resolutions, or hang in the middle (or to the left or right, your choice).
3. No Graphic optimization - We've all seen it. Sites that take all day to load, while you have a graphic that's between 70k-100k as the header of the site. More images follow at similar sizes.
Professional route - Photoshop is still your friend … well, actually ImageReady is your friend now. Following this routine should help …
a. Select the part of the design you want to cut for coding with the selection tool.
b. Since you're using layers (you are using layers, right?), you're going to then use the "Copy Merged" function, just to make sure.
c. Start a new project, paste in the copied graphic element. Trim white spaces and clean up as necessary.
d. Choose "Save for web". Use the optimization settings to shrink the images download size while retaining graphic quality. You can see a preview image, and the estimated download time of that graphic for different connection speeds.
e. Save the graphic as a .gif or .jpg.
Ok, those are few help aides on the road to professional development and design. I'll finish off with few tips to think about when creating websites …
1. Study websites you like. Try to figure out how to create similar graphic elements.
2. Take some images and play around in Photoshop. See what kind of effects you can come up with, and what looks good.
3. If you see something on a site and you're wondering how it works, view the source, copy the code and play around with it.
4. Get layout ideas from everywhere … T.V., other websites, software, your operating system, hardware designs (CD players, speakers, computers, handheld devices, etc.). All these things in everyday life have lots of design elements that can be used everywhere.
Damon Collins has gone back and forth between software engineering and web development professionally for several years. Working for large corporations on design teams, and as an independent contractor has given him exposure to some of the greatest graphic designers and web developers ever. He now operates DamonCollins.com, his own venture to provide professional web development services to small, medium, and large organizations. DamonCollins.com believes in custom, professional websites for everyone without the use of boring templates, and utilizing the latest technologies to enhance user friendliness.
