Professonæld Web Design?
by by Damon Collins
"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.
----------------------------------------------
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.