"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 …
TV, 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.
