Creating a web can be fun and challenging.

It can also be The first and most important aspect of web design is to know your client and
their web user.
frustrating if you do not know all the tricks of the trade. The
following is an overview of all the basics that need to be Research what the business or department does, who they interact with, and
made when creating a web site. pay attention to the image or look that they currently portray. Even if you think
that the current image isn’t attractive or fun, get an idea of WHY they have
chosen this look before you suggest or make changes.

The web can be a powerful and easily accessible medium but above all it is a
communication tool between the business or department and their web user.
Your client understands this otherwise they wouldn’t want a website.
Organize your site in a way that is easy for the user. Avoid mimicking patterns
of your internal office scheme if it can be helped. Eliminating internal jargon will
be easier to read through and navigate for the user. This can be done simply by
labeling hyperlinks with broad terms. Use common names not technical or
scientific ones. Technology, plug-in, and flashy scripting available to “enhance
your website” are one of the most tempting things to add to your page. This
definitely can hinder communication. Always ask yourself when you are
tempted by the bells and whistles of technology: will this enhance my site or do
I want to add this because it is fun for me to create? If it enhances or helps your
site by all means use the technology, but keep in mind you might leave some
users behind. Do not turn your page into a technology junkyard.

Using a metaphor as a basis for navigating and designing a Make a small diagram to show how you want your web to be laid out.
Start with the main page at the top or side then draw arrows or lines
web site was a popular idea at one time. For example, connecting pages showing the hyperlink or navigation patterns of your
basing your site on a visual concept like a train station and web. This chart is the hardest part of the web design process but it is
the greatest tool to help you see what all is involved in putting together
then using this visual idea as a navigational feature. The a web site. The chart serves as a great reference to you and helps to
user might go to the ticket window to seek information or communicate to others involved with the project the architecture of the
site. It also serves as a reminder to keep the purpose of the web in
board the train to go to different page. Studies have shown check.
that is a bad way to navigate a website. It found that people If you are stuck with reorganizing an existing web make chart of the
existing layout (hierarchy) to see what the navigation patterns are and
do not always get the metaphor. Make things as clearly what content you have. Then assess what changes need to be made.
stated as possible unless your site is being used purely as
entertainment. Keep in mind that users do not always come into your site from the
homepage. With search engines they might find a page deep into your
site. Have a navigation system on every page that allows the users to
get back to the major pages in your web site.

Once you have made your chart will discover what kinds graphics and
images might be needed, how many buttons you might use, and who is
responsible for generating the content for the different sections of the
web.
 Constraints of the delivery medium Grid of the html table
• Browser Window • Sketch a thumbnail of
• HTML table the webpage
• Bandwidth
• Remember table cells
need to break up into
even increments

• Break up (slice)
images to fit the grid

Working with tables Inside vs. outside pages

• If you do not have • The opening page is more
for Introduction and links
Photoshop, Fireworks
or a way to slice • Avoid SPLASH pages,
images, design with have site navigation on the
the grid Working around the grid with the opening page
appearance of curvy shapes
• Inter pages are more for
specific content

• These pages should be

similar but different

With the grid

The browser is part of your web environment. You cannot view a Sketch out a rough drawing of what you want your page to look like. Add your
webpage without one. So first of all you have to realize the size and hyperlinks, and all other necessary info in the sketch to see how your page will
layout have to fit within those constraints. Decide what screen be filled.
resolution you are designing for and then design your layout with the
proportionate dimensions of the screen resolution. Some tips to When coming up with an idea keep in mind the following points. First, table
consider when deciding on a screen resolution: always avoid making
cells in HTML always have to break up in even segments. This can give you
the user scroll sideways (from right to left and left to right), and the
problems with placement of graphics and text. Knowing the HTML language
homepage should fit within the opening browser window and should not
will help you to know what is possible and what is not. You might even have to
involve scrolling. Scrolling up and down on the inside pages is
acceptable within reason. For example do not have your user scroll reevaluate your ideas according to your skill level.
more than two or three screen lengths otherwise there is too much
content for one page. Second, you have to decide if you want to follow the boxy shape of the table
and browser or contrast the box with curves and organic shapes. Going with
The second consideration of web design is how to layout your page the curvy shapes is a nice break from the angled web but also takes more skill
within the grid system of a table, most widely used for layout. to design. Fitting irregular shapes into a grid system can be done by slicing the
Sometimes a fantastic design on paper is very cumbersome to make shapes. This breaks up graphics and decreases download time because the
happen on the web. browser only has to render small graphics instead of one large one. Adobe
Image Ready (comes with Photoshop) or Macromedia Fireworks are great
software programs for slicing up graphics.
The last consideration is bandwidth. When choosing components of
the web page be lean and friendly with objects such as pictures,
multimedia, and sound. The more pictures, video, and sound equals Finally, try and see if you can fit your design into a grid.
more download time and an unhappy web user.

I usually have a design for the opening page and a complementary design for
Examples of how to accomplish designs within HTML the inside pages that allows more space for content. The opening page is for
tables. Introduction and links. Inter pages are for specific content. For example, if you
were introducing yourself to someone you would not tell them your whole life
story all up front. You would give them an overview then as they got to know
you would give them more information based on questions. Similar to a web
page. The opening page is an overview with doors (hyperlinks) to more
information.

Keep you layout and navigation in the same place from page to page to insure
that the user understands how to navigate your site. Consistency is a key point
to web design. You also want the user to understand when they come into your
site and when they leave. You do not want every page within you site a
different color and theme.

Think of a software program you use very day. The application always
contains menu bar on across the top of the screen. You know that in the file
menu you can choose functions such as print and save, etc. Web navigation
changes on every site you visit. It does not have the built in consistency of a
software program. Make navigation friendly and obvious to your user. Avoid
using hyperlinks in the body text of the page for navigation. The user will not
intuitively find those links. An appropriate use of links in the content of a page
would be for contextual use such as glossary definitions, references, etc.
 Five tricks of the trade Building a visual navigation Structure

1. Provide visual navigation and accessibility aids

2. Design for easy scanning
3. Be concise
4. Be consistent
5. Convey credibility

• Who are you? Anchor your logo

Building a visual navigation Structure Building a visual navigation Structure

• Section your site with a navigation bar • Left navigation is secondary to top navigation
 Building a visual navigation Structure Building a visual navigation Structure

• Add tertiary navigation menus as necessary • A good slogan answers “Why am I here?”

Building a visual navigation Structure Building a visual navigation Structure

• Add a focal point: graphic, pull-quote, or headline • Works on even the toughest sites