|
Computer Help
|
The most important thing to consider, when first thinking
about any website, is the user. Like so much marketing, websites are,
unfortunately, too often developed 'inside out' (company focused) rather than
'outside in' (customer focused).
All website users have their own reasons and objectives for visiting a site. No
matter how targeted, any website has to communicate with a wide range of
individual users.
Website Architecture
Defining a website using web architecture requires:
Site maps Flow charts Wireframes Storyboards Templates Style guide
Prototypes
This planning saves you (the client) money. The better the site map, flow chart,
wireframe, storyboard, templates, style guide and prototype the more time and
money you save because it gives the designer who has to do the graphics and the
developer who has to do the programming a blueprint.
We are constantly amazed that people who wouldn't think about building a house,
car, ship or whatever will still build a website without an architectural plan.
The benefits include:
Meeting business goals
Improved usability
Reducing unnecessary features
Faster delivery
Flow Charts
A flowchart is another pictorial or visual representation to help visualize the
content and find flaws in the process from say merchandise selection to final
payment.
It's a pictorial summary that shows with symbols and words the steps, sequence,
and relationship of the various operations involved and how they are linked so
that the flow of visitors and information through the site is optimized.
Wireframes
Wireframes take their name from the skeletal wire structures that underlie a
sculpture. Without this foundation, there is no support for the fleshing-out
that creates the finished piece.
Wireframes are a basic visual guide to suggest the layout and placement of
fundamental design elements on any page. A wireframe shows every click through
possibility on your site. It's a "text only" model to allow for the development
of variations before any expensive graphic design and programming, but one that
also helps to maintain design consistency throughout the site.
Creating wireframes allows everyone on the client and developer side to see the
site and whether it's 'right' or needs changes without expensive programming.
The goal of a wireframe is to ensure your visitors' needs will be met in the
website. If you meet their needs, you will meet your objectives.
To create a wireframe requires dialogue. You and your developers talk, to
translate your business successfully into a website. Nobody knows your business
better than you and your developers should listen to ensure the resulting
wireframe accurately represents your business. You, however, must answer the
questions; questions such as:
What does a visitor do at this point?
Where can a visitor go from here?
and ignore questions about what your visitor sees at this point. Sounds easy,
but!
Storyboards
Storyboards were first used by Walt Disney to produce cartoons. A storyboard is
a "comic" produced to help everyone visualize the scenes and find potential
problems before they occur. When creating a film, a storyboard provides a visual
layout of events as they are to be seen through the camera. In the case of a
website, it is the layout and sequence in which the user or viewer sees the
content or information.
However, the wireframe provides the outline for your storyboard. Developers and
designers don't need to work in a vacuum - the wireframe guides every design,
information architecture, navigation, usability and content consideration.
Wireframes define "what is there" while the storyboards define "how it looks".
Templates and Style Guide
Templates are standard layouts containing basic details of a page type that
separates the business (follow the $) logic from the presentation (graphics etc)
logic so that there can be maximum flexibility in presentation while disrupting
the underlying business infrastructure as little as possible.
Style guides document the design requirements for a site. They define font
classes and other design conventions (line spacing, font sizes, underlining,
bullet types etc.) to be followed in the Cascading Style Sheets (CSS) used to
provide a library of styles that are used in the various page types in a web
site.
|
|
Computer Help
|
