|
"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.
(article continued below ...)
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 ...
-
Select the part of the design you want to cut
for coding with the selection tool.
-
Since you're using layers (you are using
layers, right?), you're going to then use the "Copy Merged" function,
just to make sure.
-
Start a new project, paste in the copied graphic element.
Trim white spaces and clean up as necessary.
-
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.
-
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 ...
- Study websites you like. Try to figure out how to create similar graphic
elements.
- Take some images and play around in Photoshop. See what kind of
effects you can come up with, and what looks good.
- 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.
- 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.
About the Author:
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 (http://www.damoncollins.com), his own venture to provide professional web
development services to small, medium, and large organizations.
Like
this Article? Recommend This to a Friend
|
