How do I get Started
Designing a Website?
|
Web
Page designs begins with good planning and visualization of your
website. We often focus on the user and then design a website that
is not only aesthetically pleasing but follows widely accepted guidelines
for functionality known as "Usability." Usability is a
concept popularized by author, Professor and Usability Guru Jakob
Nielsen.
http://www.useit.com/
"Usability
rules the Web. Simply stated, if the customer can't find a product,
then he or she will not buy it. The Web is the ultimate customer
empowering environment. He or she who clicks the mouse gets to
decide everything.".
Jakob
Nielsen, author, Designing Web Usability
John Lasseter,
the Director of Toy Story and Toy Story 2, in speaking about
what technology is doing to the arts says:
There
are all these tools out there - personal computers, digital camcorders,
the Internet. With all these fun toys, it's easy to lose sight
of the fact that what makes great art are the fundamentals of design,
composition and storytelling. To be good, you still gotta learn
this stuff. Computers are just a tool. To do good work with them,
you still need skill, discipline and creativity.
Generally, when
planning your website there are steps you can follow that will
help you create a site that is both usable and pleasing.
- Visualize
your Website in your mind - picture using it, what content will
it have and what personality will it have?
- Look at other
websites for navigation, layout color schemes, content and so
on. Get ideas. Sample
1 | Sample
2 | Sample
3 | Sample
4 | Sample 5 | Sample
6 | Sample 7 | Sample8 |
Getting started
is a challenge in itself.
http://www.bareSquare.com/play/writersblock/
|
1
- How do I get Started Designing a Website?
|
A website is
a collection of static or dynamic pages containing containing
content arranged in a hierarchical order, designed and arranged to
be navigable and interactive for users. webpage | elements
of a webpage | Static
Pages | Dynamic
Pages |
A webpage can contain:
- Formatted Text
- Non-Text - images,
animations, audio and video
- Interactivity
- links and forms; CSS, Image maps, Click-to-play, Games, etc.
- Hidden Information
- Metadata, Javascript, Comments
The entry point
is usually a Home page but can also be a Splash page or landing page:
Home
Page: The Home Page is your main page that starts
navigation and makes the main functions of the site available
to the user in a hierarchy. An issue regarding the content of
a home page (or any page for that matter) is "above the
fold" or "below the fold" content. Above the fold
is the content you see when the page loads without any scrolling
down. Many visitors never scroll down, especially when surfing
the web or conducting Internet.Web searches. To get people to
scroll down you might:
- include intriguing
information below the fold that they will come back for once they
find it
- give a hint
of what's below by "straddling the content
http://www.cruzio.com/ notice
the content on the fold or
crease?
- direct them
to continue down
Splash
Page: Reasons for starting with a Slash Page
include:
- a Login Page
- Choose to view
the site as Flash, HTML, etc.
- Load files in
the background
- Have a quick
loading page and get the user to interact right away
- Set the personality
for the website
- Let users know
they are in the right place
- Acts like a
book cover
- Start with a
sitemap or Site Index - an overview of the site (TOC)
Landing
Page: A Landing Page (aka lead capture page)
is NOT a Home Page nor a Splash Page. It is a page at your eCommerce
site that is created to appear as the result of:
1. Clicking on
a hit link resulting from a Search Engine Query
2. Clicking on an Advertising link
The page will usually
display content that is a logical extension of the advertisement
or link, and that is optimized to feature specific keywords or phrases
for indexing by search engines.
An eCommerce site
minimally needs to:
|
Minimum
Requirements of an Online Web Solution |
- Database -
the product information, including variations (e.g. size,
color, etc.) and prices need to be stored in a database,
that is, separate from the Web page layout information. Otherwise
updating and changing it will be much more time consuming
and take multiple entries in multiple places.
- Interface
for Applications - the solution must interface with
other applications such as a payment processor and ordering
system. They must 'talk to each other."
- Payment -
the solution should support multiple payments models for
differing customers, business models and user preferences
or you will lose sales.
- Reporting -
customer wants and interests should be track able through
reports generated by the solution and your Web host archives.
- Search
Engines - Customers should be able to find a particular
item with one or two mouse clicks.
- Shopping
Cart (Basket) - a tool for collecting the customer
order while they are onsite and making decisions regarding
products. The customer must be able to review it as they
go as well as change their mind on items or altogether.
- Terms
and Conditions - In order to make a contract legal
it is necessary to display the terms and conditions including
prices, costs, taxes, shipping, refund policy, etc.
- Web
Design Template - the solution should use templates
to aid the design process and allow easy changes and updates
for the business.
|
|
2
- Hosting Your Website on A Server
|
Your
website is collected into a Root
Folder , you register a Domain
Name and then upload the root folder to a Hosting
Service's Server.
Each page has a
unique Filename and a Page Title and
pages are organized and stored in sub-folders inside the root folder.
(show Bus89 instructor folder for 5 an 89)
An eCommerce site
needs many types of servers to provide the variety of user and business
functions at an eCommerce site:
| Types
of Web Host Servers |
User
Tasks for Server Info |
|
DNS
Servers
|
- Assigns
temporary IP Addresses to ISP customers that logon for their
Internet connection; Directs operator/client commands for
URL's and files to the proper server/web host on the Internet.
|
Webpage
Servers
(aka IP Servers)
|
- Catalog
Inventory and related Info - products, price, sizes, availability,
etc.
|
Secure
Servers
|
- Process
real time payment systems
- Store
encrypted information
|
Database
Servers
|
- Store & Retrieve
Order Info
- Track
Orders and order status
- Customer
History - recognize customer, shopping cart info, past pages
visited, customer delivery and order data, etc.
- Collect
user site usage stats and server stats
|
FTP
Servers
|
- Transfer
large files on the Internet but don't open and display the
files
|
Email
Servers
- Pop
= outgoing
- SMTP
(or Mime) = Incoming
|
- Suggestive
Selling - coupons, discounts, communications, auto responders,
etc
|
Chat
Servers
|
- Customers
exchange information
- IT Site
support
|
Usenet
Newsgroups
(aka Bulletin Board Servers)
|
- Customers
post and respond
- Website
information posted
|
Listserv
Servers
|
- Website
distributes Newsletters
- Coupons
|
Applications
Servers
|
- a server
computer in a computer network dedicated to running certain
software applications, CGI scripts, Sun Microsystems J2EE
platform, etc.
more
information
|
| Other
Servers? |
|
| |
|
3
- Site Maps or WebPage Hierarchies
|
You
will need to create an Organizational Structure for your site. This
is the organization of pages and their relationships to each other
for the website. An organizational structure is usually shown as
a hierarchical, parent/child relationship called a Site
Map, Organizational Chart, decision tree, flowchart
or page hierarchy. (occasionally it is called a storyboard,
particularly if you lay it out in movable pieces, in software or
erasable sketches that allow you to adjust the relationship as you
work on it.)
|
4
- Page Content
|
Each
page may contain:
- text
- graphics
- animations
- audio
- video
- interactivity
I see content as
divided amongst the categories of Main Features, Support Features,
Special Features, Interactivity, and Acknowledgements & Footnotes.
|
Main
Features- |
This
will be the main components that fulfill the Web sites specific
and primary functions. |
|
|
|
Support
Features- |
These
are essential to the customers use and satisfaction when visiting
the site but play a facilitating, auxiliary or support role
for the main features. |
|
|
|
Special
Features- |
Special
features are for excitement, fun, deliver secondary but related
content, enhance the user's overall experience and round out
your site. |
|
|
|
Interactivity- |
Interactivity
allows the user to command and navigate the content, send and
receive information and take some action that furthers the
purposes of the Web site.
Virtual Tours | Forms | Video |
|
|
|
Acknowledgements & Footnotes- |
These
are notices and announcements that may have a purpose for legal
or informational reasons. |
|
5
- Tables
|
Tables
Are Essential - Tables give us alignment, a placeholder, proximity
for related elements, allow us to repeat or create a pleasing pattern
for balance and unity and establish contrast between elements, foreground
and background. Whether you use an authoring tool or HTML coding,
both are page layout tools. The one absolutely, positively required
skill is to master tables and learn to splits cells.
|
Notice
all the things the table does for the page layout and unity
of the whole page. A basic table structure can be extended
to most of the site's pages. |
 |
Mapping Out
Your Page - The way this is done is by mapping your page freehand.
You need to be thinking about and have made decision about content,
page elements, repetitive elements, and so on first. It helps you
determine things such as the size to make a graphic, how to arrange
content and create proximity and so on. (And, I told you you'll
need to master tables.) Think in rows and columns; some rows span
several columns; some columns span several rows; some rows or columns
are split or merged; some tables are nested within other tables.
Try the example below on for size.
| Mapping
is the container for your vision on a Web page. |
 |
 |
|
6
- Planning Your Website
|
When
do you need to break a page or reorganize page relationships or add
pages? How do you begin to put all this together?
| Website
Planning |
Options |
| 1.
Organizational Website Chart of Your Site - plan the hierarchical
structure and main pages as content containers; aka site storyboard sample
1 | sample 2 |
1a.
Include Text Outlines - lists or outlines of content for
each page
1b. Use Word-Art, Visio, Inspiration, Illustrator, Dreamweaver "Site">Site
Map |
| 2.
Interactive Prototypes - a skeletal, working model of the
plan before it is actually built. May become the site skeleton
of pages without content with filenames & page titles and
. Clarifies confusion and tests basic structure and navigation |
2a. Add
text links for navigation and possibly add lists or outlines
of content on each page as in 1a above
sample
1
|
| 3.
Page Thumbnails/Sketches - Layout the page content and
roughly sketch it for each page or key page type; organize
with tables and structure sample
1 |
Thumbnails
are often laid out in a storyboard fashion - rough, sketch quality
designs for a page, brainstormed quickly and as many as possible |
4.
Content Maps - detailed layout in sketch form of each
pages contents and relationships to other pages
aka Comp or comprehensive
Lake Tahoe Rental Works content
map
sample
1
Lake
Tahoe Rental Works old
http://www.laketahoerentalworks.com
Lake Tahoe Rental Works new
http://www.cabrillo.cc.ca.us/~dambrosini/oldsite/index.htm
|
4a.
Page Schematics - another stage of detail; a line drawing
or placeholders to show a page designer the information (text),
links, content, promotional space and navigation and priority
of each page; often a digital prototype
Comp1.swf | Comp2.swf | Comp3.swf
|
| 5.
Produce the site - usually a team process; revise |
myrasite/ambrosini_finalx.swf |
| 6.
Testing & Evaluation - test with 5 users; fix and retest
with five new users |
This
is the 5x5 model for testing |
| 7.
Publish site - choose web host, publish and maintain |
|
|
7
- Site Navigation
|
Navigational
links can completely bypass the hierarchical
structure. Make sure they make sense. It is not necessary to
be able to jump from every page to every other page. Navigation
is a matter of the designer building ways to get from place to
place and back that the user can learn quickly. Some of the tools
the designer uses are:
- menu
bars, frames, icons, image maps, text menus, hypertext links,
drop down menus, breadcrumbs, site search engines and so on. This
will be addressed in detail in the navigation lecture.
The
designer tries to decrease the users dependency upon the browser for
navigation because it becomes unreliable as the user explores
more deeply into the website. A rule of thumb is three clicks
max from anywhere to anywhere else on the same site. My dictum
is "thank God for bookmarks."
|
8
- Personality and Aesthetics
|
Here are some examples
of developing a site personality.
You should develop
a site personality. It is your Identity, Storefront, Brand image
and more to the user. It is a key part of your Marketing Plan.
|
9
- Usability
|
Just
as we began, we end by thinking about why you are creating an eCommerce
site. Your purposes are generally threefold:
- Customer
Functions & Needs met; include alternative ways for customers
to use and interact with your technology
- Your
business' goals and operating needs; include technology, order
retrieval, statistical tracking, etc.
- Hosting
and making technology work
|
10
- Screen
Design Principles |
Chapter
16 at the Interlit site gives a decent summary of basic page design principles.
http://www.udel.edu/interlit/chapter16.html
|
| |
| to
top |
| © David
Ambrosini 1998-2008 |
return to
David's facutly home page - Now Featuring
