Download Introduction to website designing

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 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 web
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
 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%)
B2B
Paper supplier
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
B2C – 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)
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?
• Consumer-to-Business
C2B
– 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
B2B
B2C
C2C
C2B
Managing a Web project
•
•
•
•
•
Analysis
Design
Development
Implementation
Evaluation & Maintenance
Analysis
Defining 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 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(MP3)
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_w
orst_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
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 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 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