Layout and Design
Although the design of any website is subjective,
it is very important to have a layout. If information is
just posted without any aesthetic display in mind, not only
will the overall look of the interface suffer, its functionality
may collapse entirely. Users take cues from the design elements
used in page layout to extrapolate meaning. Consider grouping
similar information and contrasting important concepts with
the use of size, weight, and color.
General Guidelines:
- Separate information into logical
sections.
- Be sure your starting page is attractive
and well laid out.
- Keep a consistent theme throughout
the entire site.
- Choose a limited color palette to
work from so that each page feels like part of the whole
theme.
- Use colors, styles and fonts that
complement each other
Accessibility
When you develop your website, keep in mind that it is accessible
to the widest possible audience. Not everyone will have the
same browser or operating system as you. What may look fine
on your screen may not look great on another computer system.
One factor that influences the way interface design is displayed
is the user's monitor. Manufacturers use different materials
for their monitors. Users may calibrate their monitors darker
or lighter and with more red, green, or blue. Pixel depth
varies from monitor to monitor, enhancing or destroying the
display of complex imagery. Monitors may only have the ability
to only display grayscale imagery, or they may display millions
of colors.
Test Your Pages:
- Different size screen
- Text-only browser (or images turned
off).
- Different color resolution.
- Different browser.
Graphics Quality
The quality of your graphics can improve the appearance of
your web site. The benefit of using a suitable graphics package
is subtle. Many people may not recognize the exact differences,
but they will still know that one site looks better than another.
Some available software programs:
Adobe Photoshop
Corel Photo-Paint
Microsoft Image Composer
Requirement:
Any software that you choose should allow "anti-aliasing".
This will prevent the art work from having jaggier lines.
Your images look smoother and more professional.
Overdoing it:
A common mistake of some new developers is to go overboard
with the use of elements. Some that are easy to overuse are
graphics, frames, background images, bevels and other graphic
tricks. An animated GIF was novel when it first made its debut.
However, many have overused this type of element to the point
that it has become irritating and ignored. If you must use
animations, limit your use to no more than one per page, and
stop animation after 3-5 loops.
Color Palette
Test Your Pages:
- 1 - Dark
- 1 - Highlight
- 1 - Medium
Select one font to use as your primary
font. Create variety by using bold and italic versions of
that font only. NEVER use more than 3 different fonts on one
page.
Arranging Type on the Page
Some of the basic ways of placing text on a page are as follows:
One wide column in the center of the page is useful when it
is important to get a lot of text on one page. Another option
is to place a narrower column to the left or right. Although
this reduces the type area, it allow easier readability of
the text. The smaller column will also give a more open feel
to the page. If the combination of readability and maximum
text is the goal, consider using more than one column, but
avoid making these columns too narrow. Variations of these
layouts can be created by dividing the page into sections.
Leave some areas blank or use for images.
Redesigning frequently:
- Allows you to take advantage of newer
technology as it becomes available.
- Helps to improve your interface over
time.
- Helps you learn new techniques.
