Home Syllabus Class Sessions Coursework Blackboard Discussion Topics Student Progress

    Website Creation Basics

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.

  1. Visualize your Website in your mind - picture using it, what content will it have and what personality will it have?
  2. 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 (everyone sees the same content) or of dynamic pages (everyone sees somewhat different content) 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:

  1. Formatted Text
  2. Non-Text - images, animations, audio and video
  3. Interactivity - links and forms; CSS, Image maps, Click-to-play, Games, etc.
  4. 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 vs HTML, mac vs pc, 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)
    (Not to be confused with an image map)

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.

How you build the website and create the pages and content is often called a "web solution". it's your online business plan location and store layout. 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. 
  • Site navigation and Site 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 Page Layout Templates - 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 and 89)

An eCommerce site needs many types of servers to provide the variety of user and business functions at an eCommerce site:

cabrillocollege.biz

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

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:

  1. Customer Functions & Needs met; include alternative ways for customers to use and interact with your technology
  2. Your business' goals and operating needs; include technology, order retrieval, statistical tracking, etc.
  3. Hosting and making technology work
10 - Further Information
Further Information websmith.com Blog
© David Ambrosini 1998-2008 
 to top