Introduction to website designing

• A good website must make the best use of the infrastructure on the web, to design such a site , you need to have an understanding of the web medium.

Technical infrastructure

Elements of the web:

Servers & clients

Web documents

URLsWebsites

Web browsers

Domain names

Elements of the web Web Sites:• A set of interconnected WebPages• Displaying related information on a specific subject• Homepage is a starting point , an overview of the

contents of the site, links to rest of the pages Web Documents:• Information on www is stored in the web documents

residing on servers• Web documents / Web page is electronic document that

stores a set of related information• HTML document

Facilities provided by the Web

• Community building• Resource sharing • Entertainment• Business transactions

Resource sharing:• Excellent medium for people in search of

information, and for those how are sharing information

• Web is bigger & faster then any library or encyclopedia.

• What are the advantages of publishing on the webEntertainment• The field of entertainment is one of the fastest

growing categories of the web usage.• Extensive resource of multimedia music, videos,

animation, film industry, gaming

Community building:The web provides a convenient mechanism for the

People across the world to communicate and share

information

Email, web chat, IM,

Video conferencing

Business transaction: The web is ideal medium to attract potential

customers

E-commerce websites

Types of Websites

Static website Dynamic websites E-commerce sites Corporate sites Portals Personal Home Pages

Static website:• It simply presents pre-defined information to the user• Just like a printed newspaper• Coded in HTML• No database

Example: Lahore school of economics

• Dynamic websites:• The web page content changes automatically • It may accept a user's input and respond to the request

(task based).• Database at the backend • Coded in JSP,ASP,C F ML

Example: online banking, social networking,

e-learning, email sites

E-Commerce:• Any business transactions on the web• An e commerce sit can be a commercial

organization, educational institution, government organization or individual

• Providing a product or service on the web www.ebay.com,www.dell.com

Corporate:• A Corporate website is a site that serve as the

strategic interface on the web for the purpose of promoting its products & services

• Market information for investor and share holders• Data for employees• Information on products & services offered

• Example: • www.britishcouncil.org• www.fedx.com

Portal:• A portal is web site that gathers bits & pieces

of information from different sources.• The user can search for any type of

information from a single location.

Common features:

• Search engine, email services • News, weather information, • Advertising • List of sub-sites & links.

examples: http://student.lahore school.edu.pk, www.msn.com

Personal:• A personal web site is a site built up by an

individual for purpose of sharing information with others on web.

Example: www.atifaslam.com

E-Commerce / E-Business(B2B, B2C, C2C, C2B)

Business Models

e-Commerce

• Commerce– Buying and selling products or services

• e-Commerce– Buying and selling products and services

electronically

• 4 models– B2B (Business to Business)– B2C (Business to Consumer)– C2C (Consumer to Consumer) – C2B (Consumer to Business)

B2B

• Business to Business (B2B)– when a business sells products and services to

customers who are primarily other businesses– typically a manufacturer-supplier relationship – is where most of the money is (about 97%)

Paper supplier

B2B

B2C

• Business to Consumer (B2C)– when a business sells products and services to

individuals

– Most consumers deal directly with a chosen business on the Internet

– Some through e-marketplaces like e-bay

B2C – How do you get to the company?

i.e. How do companies attract us?• Marketing Mix Tools– set of marketing tools a company uses to pursue

its marketing objectives in reaching and attracting potential customers• Registering with search engines• Online ads• Viral marketing• Affiliate programs

B2C – How do you get to the company?

How do companies attract customers?– Viral marketing• encourages users of a product or service supplied by a

B2C business to encourage friends to join in as well

• e.g. www.bluemountain.com– Provides a link so that the recipient can send an e-card back to

the sender

How do companies attract customers?– Affiliate programs

• arrangement between two e-commerce sites that directs viewers from one site to another

• If viewers buy at the second site, the second site pays a small fee to the first site (usually a percentage of the sale)

B2C – How do you get to the company?Shopping happily on amazon.com?

B2C – How to pay?

• Credit Cards– name – credit card number – expiry date – does not require the

card holder’s signature!

Financial cybermediary- Internet-based company that makes it

easy for one person to pay another person or organization over the Internet

- e.g. PayPal (www.paypal.com)- Create an account with personal, credit card and

banking information- To pay money

- Go to the PayPal site- Enter the amount- Enter information of the recipient

C2C

• Consumer-to-consumer – Individuals selling and buying directly with each

other via a Web site

– Mostly in form of auctions• Two main forms of transactions

– Face-to-face– Buyers pay to bank + sellers mail the items trustworthy?

C2B• Consumer-to-Business

– Consumers (individuals) specify their needs to companies and the companies offer products to them• Possible?

– You specify your expertise and your expectations (by posting your resume online). Some company identifies you and offers you a job

– Reverse auction» You specify your needs» Companies compete to obtain business» e.g. http://www.priceline.com/

B2B B2C

C2C C2B

Exercise

Managing a Web project

• Analysis• Design• Development• Implementation• Evaluation & Maintenance

AnalysisDefining the site objectives Site functions & features• Define the features that allow users to perform

various useful function.• What unique feature a site can offer?• What would enhance user performance on the site?• What dose a user expect from the site?

Book ordering feature, prices of a book, ordering form

Analysis Design Development Implementation Evaluation & Maintenance

Defining the media elements• Add a visual appeal(images, audio, video and

animation)

• Identify the concepts that can be complimented through the use of media elements

• Bandwidth limitations

Project Magnitude:• Define the website magnitude or the scope of

the project.• The wider the scope more resource required

for its development

• Flower shop website/ International human rights organization website (range of influence)

Identify the site attributes:• Real world experience.• Study the real characteristics of real world entity to

identify the attributes or features that can be incorporated in the website

• Book cover

• Task Analysis• Identify the steps involved in performing various

tasks on a website• Provide shortcuts to frequently performed activities

Analyzing other similar sites.

• Explore other existing similar websites• Does not mean replicate existing websites• Successful websites / unsuccessful websites

Identifying the Target Audience

Managing a Web Project

Design

Analysis Design Development Implementation Evaluation & Maintenance

Site structural themes

• Web sites are built around basic structural themes that both form and reinforce a user’s mental model of how you have organized your content.

• These fundamental architectures govern the navigational interface of the web site and mold the user’s mental models of how the information is organized.

• Three essential structures can be used to build a web site: sequences, hierarchies, and webs.

Site structural themesLinear/ SequentialThe simplest and most familiar way to organize information is to place it in a sequence, This is the structure of books, magazines,Example: encyclopedia, learning sits, Tutorial, Travel guide

Site structural themes

• Hierarchies• Information hierarchies are the best way to organize most complex bodies of

information. Because web sites are usually organized around a single home page, which then links to subtopic menu pages,

• hierarchical architectures are particularly suited to web site organization. Hierarchical diagrams are very familiar in corporate and institutional life, so most users find this structure easy to understand.

• The simplest form of hierarchical site structure is a star, or hub-and-spoke, set of pages arrayed off a central home page.

Site structural themes

• Web• Webs• In this structure the goal is often to mimic associative thought and the free flow of

ideas. This organizational pattern develops with dense links both to information elsewhere in the site and to information at other sites. Webs work best for small sites dominated by lists of links and for sites aimed at highly educated or experienced users looking for further education or enrichment and not for a basic understanding of a topic

Where to put things, and Why…..

Classic rules of composition and our reading habits combine to govern how we approach information displays

Site structure and eases of access

Eye-tracking studies show that our page- scanning patterns are dominated by top-left scanning for the most important words

and links on a page.

Site structure and eases of access

Users have developed clear expectations about where common content and interface elements are likely to appear.

Site structure and eases of access

Site structure and eases of Access

• Navigation and Wayfiniding:• Hyperlinks (Anchor, target), types of hyperlinks:• Text, Graphics, text and graphics

• Path links Menu links

Interface design• Clear navigation aids, give users confidence that they

can find what they are seeking without wasting time.• Headers are essential for both site identity and

consistent navigation

• No dead-end pages

Interface design

• Simplicity and consistency:• Your interface metaphors should be simple,

familiar, and logical

• The Opera site is a masterpiece of balancing high functionality with interface elements.

Differentiating the home page• Visually appealing• Shouldn’t t have a lot of functionality?• Loads faster• Simple and uncluttered• The user doesn’t t need to scroll the home page

a n d• Maintain consistency through design grids.

Interface design

Maintain consistency through design grids

Interface design

• Interface design conventions

• A canonical page layout(frame), Not every page includes every element shown here

Things that might appear as standard elements of a web page wireframe include:

• Organizational logo • Site identity or titles • Page title headlines • Breadcrumb trail navigation • Search form • Links to a larger organization of which you are a part • Global navigation links for the site • Local content navigation • Primary page content • Mailing address and email information • Copyright statements • Contact information

Examplehttp://www.ibm.com/us/en/

A hair achy of Contrast

Internal page design

Page Template

Components of a web page

• Typography• Color• Graphics (smaller size, GIF,JPEG)• Audio(MP3)• Video(Compressed format)• Plug-ins(Flash elements)

• Advantages of GIF files• gif is the most widely supported graphics format on the web • gifs of diagrammatic images look better than jpegs • gif supports transparency and interlacing • Advantages of JPEG images• jpeg achieves huge compression ratios, which mean faster

downloads • jpeg produces excellent results for most photographs and

complex images • jpeg supports full-color (24-bit, true-color) images

Components of a web page

Examples

• Bad websites:• http://www.angelfire.com/super/badwebs/main.htm• http://www.bluemountain.com/• http://images.businessweek.com/ss/08/06/0623_best

_worst_web/index_01.htm

• Top websites:• http://www.i-indiaonline.com/home2.htm• http://www.unicef.org/• http://www.manutd.com/• www.google.com• http://www.midnightcoffee.be/

Development

• Tools for development Microsoft Expression Web.

Adobe Macromedia Dreamweaver 8

Analysis Design Development Implementation Evaluation & Maintenance

Some tips in web page design

Don't …

• Don't crowd your pages balance text, graphics and space• Don't overuse graphics, animations use them to support and

enhance but not to overpower your work•  Don't use background that distracts the user or makes text

unreadable•  Don't use blinking or glowing text for emphasis•  Don't use long paragraphs of text divide them into readable chunks•  Don't create dead end pages, which have no links to any other

local page in the site•  Don't design for a specific browser

Some tips in web page design

• Dos..

• Plan the web site structure and navigation• Keep the layout simple and intuitive• Use the same general style throughout• Add standard navigation tools to each page• Include copyright and contact information on each page• Use original or free graphics• Use images wisely and keep file size small for fast download• Respect copyright and intellectual property rights• Always state the source of all materials used• Spell check and proofread each page• The download speed of a website

64

Table / Navigational tools

Elements of a web page

Document title

Address (URL)

BannerWeb page title

Footer / Copyright

Graphic elements Hyperlinks

Content

Search tool

Navigational tools

Frames

Hyperlinks

Website project 1st stage (marks 5%)

• Analyze the requirement for the website• Analysis similar websites, target audience • Define the site objectives , URL• Define the site structure (linear, Hierarchal, Web) • site navigational scheme• Submit a paper design of your website showing the

layout & placement of controls & visual elements.• Submit a report, submission dead line • 18 Jan (sec D)• 19 Jan (Sec E)

Six Visual Elements (art elements)We think of the elements as the basic visual material with which to makeart. It’s hard to imagine anything visual without the use of one or more ofthese elements.We think of the principles as ways to work with and arrange the elements