Introduction to website designing A good website must

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: Domain names Servers & clients Web browsers Web documents Websites URLs

Elements of the web Web Sites: • A set of interconnected Web. Pages • 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 q q 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

q. 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 web q. Entertainment • 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 Ecommerce sites Corporate sites Portals Personal Home Pages

q 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

q 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

q 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

q 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

q 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 (B 2 B, B 2 C, C 2 B) Business Models

e-Commerce • Commerce – Buying and selling products or services • e-Commerce – Buying and selling products and services electronically • 4 models – – B 2 B (Business to Business) B 2 C (Business to Consumer) C 2 C (Consumer to Consumer) C 2 B (Consumer to Business)

B 2 B • Business to Business (B 2 B) – 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%)

B 2 B Paper supplier

B 2 C • Business to Consumer (B 2 C) – 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

B 2 C – 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

B 2 C – How do you get to the company? How do companies attract customers? – Viral marketing • encourages users of a product or service supplied by a B 2 C 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

B 2 C – How do you get to the company? Shopping happily on amazon. com? 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)

B 2 C – 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. Pay. Pal (www. paypal. com) - Create an account with personal, credit card and banking information - To pay money - Go to the Pay. Pal site - Enter the amount - Enter information of the recipient

C 2 C • 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?

• Consumer-to-Business C 2 B – 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/

Exercise B 2 B B 2 C C 2 B

Managing a Web project • • • Analysis Design Development Implementation Evaluation & Maintenance

Analysis Defining the site objectives q 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

q 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

q 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)

q 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 •

q. Analyzing other similar sites. • Explore other existing similar websites • Does not mean replicate existing websites • Successful websites / unsuccessful websites q. 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 themes Linear/ Sequential The 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

Site structure and eases of access 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 • 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.

Interface design • • • 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 and Maintain consistency through design grids.

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

Example http: //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(MP 3) Video(Compressed format) Plug-ins(Flash elements)

Components of a web page • 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

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/home 2. 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

Elements of a web page Document title Address (URL) Banner Web page title Navigational tools Search tool Table / Navigational tools Graphic elements Hyperlinks Content Hyperlinks Frames Footer / Copyright 64

Website project 1 st 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 make art. It’s hard to imagine anything visual without the use of one or more of these elements. We think of the principles as ways to work with and arrange the elements