|
|
|
How To Build A Better Website Without Building A Website
he most important thing to Navigation that is clear and
think about, when first consistent.
thinking about any website,
is the user. Like so much Probably the worst issue is ‘lost
marketing websites are, visitors’ – those who are in a
unfortunately, too often maze and don’t know where they
developed ‘inside out’ (company are in the site.
focused) rather than ‘outside in’
(customer focused). The site should always allow
users to easily return to the
All website users have their own home page and preferably get to
reasons and objectives for any page with one click.
visiting a site. No matter how
targeted any website has to Studies have shown that users
communicate with a wide range of want to find things fast and this
individual users. means that they prefer menus with
intuitive ranking and organizing
To be successful therefore, every and multiple choices to many
site has to give each and every layers of simplified menus. The
user a thorough but simple menu links should be placed in a
presentation of the site’s consistent position on every
content so that the site achieves page.
your objectives e.g.
registrations, leads, sales. Clarity
To do this successfully users Users do not appreciate an
want: over-designed site.
Simple navigation A website should be consistent
and predictable. For maximum
clarity, your site design should
be built on a consistent pattern Website architecture
of modular units that all share
the same basic layout, graphics Defining a website using web
etc. architecture requires:
Designing websites that meet - Site maps
their objectives - Flow charts
- Wireframes
Everything above is pretty - Storyboards
simple, but how do you ensure - Templates
that you can achieve it? - Style guide
- Prototypes
The answer is website
architecture – an approach to the This planning saves you (the
design and content that brings client) money. The better the
together not just design and site map, flow chart, wireframe,
hosting but all aspects of storyboard, templates, style
function, design, technical guide and prototype the more time
solutions and, most importantly, and money you save because it
usability. gives the designer who has to do
the graphics and the developer
The distinction may seem academic who has to do the programming a
but imagine trying to publish a blueprint.
magazine using just graphic
design and printing whilst We are constantly amazed that
ignoring content and editing. It people who wouldn’t think about
just would not work yet that’s building a house, car, ship or
what too many people still try to whatever will still build a
do. website without an architectural
plan. flaws in the process from say
merchandize selection to final
The benefits include: payment.
- Meeting business goals It’s a pictorial summary that
- Improved usability shows with symbols and words the
- Reducing unnecessary features steps, sequence, and relationship
- Faster delivery of the various operations
involved and how they are linked
Site maps so that the flow of visitors and
information through the site is
Many people are familiar with optimized.
site maps on web sites which are
generally a cluster of links. Wireframes
An architectural site map is more Wireframes take their name from
of a visual model (blueprint) of the skeletal wire structures that
the pages of a web site. underlie a sculpture. Without
this foundation, there is no
The representation helps everyone support for the fleshing-out that
to understand what the site is creates the finished piece.
about and the links required as
well as the different page Wireframes are a basic visual
templates that will be needed. guide to suggest the layout and
placement of fundamental design
Flow charts elements on any page. A wireframe
shows every click through
A flowchart is another pictorial possibility on your site. It’s a
or visual representation to help “text only” model to allow for
visualize the content and find the development of variations
before any expensive graphic - What does a visitor do at this
design and programming but one point?
that also helps to maintain - Where can a visitor go from
design consistency throughout the here?
site.
and ignore questions about what
Creating wireframes allows your visitor sees at this point.
everyone at the client and Sounds easy, but!
developer to see the site and
whether it’s ‘right’ or needs Storyboards
changes without expensive
programming. The goal of a Storyboards were first used by
wireframe is to ensure your Walt Disney to produce cartoons.
visitors’ needs will be met in A storyboard is a “comic”
the website. If you meet their produced to help everyone
needs you will meet your visualize the scenes and find
objectives. potential problems before they
occur. When creating a film a
To create a wireframe requires storyboard provides a visual
dialogue. You and your developers layout of events as they are to
talk to translate your business be seen through the camera. In
successfully into a website. the case of a website, it is the
Nobody knows your business better layout and sequence in which the
than you and your developers user or viewer sees the content
should listen to ensure the or information.
resulting wireframe accurately
represents business. You, However, the wireframe provides
however, must answer the the outline for your storyboard.
questions; questions such as: Developers and designers don’t
need to work in a vacuum - the
wireframe guides every design, that are used in the various page
information architecture, types in a web site.
navigation, usability and content
consideration. Wireframes define Prototypes
“what is there” while the
storyboards define “how it A prototype is working model that
looks”. is not yet finished. It
demonstrates the major technical,
Templates and style guide design, and content features of
the site.
Templates are standard layouts
containing basic details of a A prototype does not have the
page type that separates the same testing and documentation as
business (follow the $) logic the final product, but allows
from the presentation (graphics client and developers to make
etc) logic so that there can be sure, once again, that the final
maximum flexibility in product works in the way that is
presentation while disrupting the wanted and meets the business
underlying business objectives.
infrastructure as little as
possible. Now you have built your virtual
site it’s a lot quicker, easier
Style guides document the design and cheaper to build the real
requirements for a site. They one.
define font classes and other
design conventions (line spacing,
font sizes, underlining, bullet types etc.) to be followed in the type="text/javascript">
"728x15_0ads_al";
google_ad_channel =
"3545651507"; type="text/javascript"
google_color_border =
"FFFFFF";
src="http://pagead2.googlesyndica
google_color_bg = "FFFFFF"; tion.com/pagead/show_ads.js">
google_color_link =
"0000FF";
About the Author:
Richard Hill is a director of E-CRM Solutions and has spent many years in senior direct and interactive marketing roles. E-CRM provides EBusiness, ECommerce and Emarketing and ECRM.
|
|
