Wikibooks

The Computer Revolution/E commerce/Web Site Design

< The Computer Revolution
This page may need to be reviewed for quality.

Website design is the work of determining how a website will look and feel and how it will flow. The two most important functional requirements of web site design are the intended user of the site and the objective of the site. Once these are determined, basic design tools such as flowcharts, page layouts, and storyboards can be used to determine the organization of the site. Things to keep in mind during design include:

  1. Interest – how to keep the site interesting so that people visit frequently
  2. Accessibility – is the site accessible via all the different platforms (different browsers and hardware types
  3. Bandwidth requirements – how fast does the page load on various systems
HTML Code

Once the website it properly designed, the development process (actually creating the site and its content) can begin.

Page Layouts

edit

A page layout deals with arrangement, navigation, and content placement of a website. Ultimately, page layouts can make or break the site. Depending on the project and target audience, the web designer’s flexibility can vary, as content placement is extremely important.

Generally, a user’s eyes will look in certain sections of the page depending on what they’re looking for. For instance, if a first-time user is at an e-commerce website looking for a search bar, their eyes will most often go to the upper-right corner of the page.

Flow Charts

edit
 
Flowchart diagram

A flowchart, when used to design a web site, describes how the pages in the site relate to one another. Flowchart is actually the map of the structure of the web site. A single box is used to represent each web page and the lines between the boxes shows the logical organization of the web site.

Basically, flowchart gives a description of a web site with the help of different links to pages in a way web site designer likes, hence visitor to the web site can visit the pages in any order that they like. Even though the lines between the flowchart boxes indicate necessary hyperlinks, usually there are additional links between the pages, with the help of which surfing through the web site gets more complex and easy.

Storyboards

edit

A storyboard is a graphic organizer that arranges images on each page or screen in an animation sequence. They are normally used for the purpose of designing animated, motion graphic, or interactive media sequences. For example, a storyboard may be used to design components for an animated splash page- which is an introductory page that appears before the home page of a web site is displayed. An advantage to using a storyboard is that it allows the user to test the changes in the sequence to fit their needs. Storyboards, flowcharts, and page layouts are often used after the basic content and objectives for a website have been determined.

Reference: Morely, Deborah; Parker, Charles. Understanding Computers Today and Tomorrow. Course Technology, 2011, Page 411.


Cascading Style Sheets

edit
File:CSS.svg
CSS

CSS (Cascading Style Sheets) are used to apply an entire set of styles to a website for consistency and simplicity.

For instance, a web designer will create a .css file with their preferred styling coding. By simply adding a link in the header of each page, all of the coding inside that .css file will be effective on each of those pages - saving that web designer time and effort.

File Types

edit

With web design there is more than meets the eye as there is need to portray the message across. To achieve the proper effect different file types could be used to display images on the foreground or background of any website. The most common file types for images used are .JPG (Joint Photographers Experts Group), .PNG (Portable Network Graphics), and also .GIF (Graphics Interchanged Format). Those formats compose what could be the colors and design of the website. Along with those types of image files there are audio and video file types that could be used in a website given an embedded codded player is available on the website. An example of a GIF format...

Source: Understanding Computers: Today & Tomorrow, Comprehensive, 13th Edition – Cengage

 
gif globe


Different Image Files

As discussed we learned that there are different formats of images that can be used in website. We will briefly discuss the purpose of using each file.

  • GIF

Gifs are most often used for logos, banners, and nonphotographic images.

  • PNG

This format was created for Web page images in response to patent issues surrounding the GIF format.

  • JPEG

This format is the standard for Web page photographs.

Retrieved from "https://en.wikibooks.org/wiki/The_Computer_Revolution/E_commerce/Web_Site_Design"