cis1203 web design principles - part 1

28
Planning a Web Site CIS1203 1

Upload: paul-leslie

Post on 22-Jan-2015

1.201 views

Category:

Technology


0 download

DESCRIPTION

Part One of Web Design Principles - Written by the faculty at Sharjah Women's College - Supported by previous faculty efforts.

TRANSCRIPT

Page 1: CIS1203 Web Design Principles - Part 1

1

Planning a Web Site

CIS1203

Page 2: CIS1203 Web Design Principles - Part 1

2

Learning Objectives

1. Website Design Strategies (slide 3)

2. Business Objectives (slide 4)

3. Purpose of Websites (slides 57)

4. Types of Websites (slides 815)

5. Target Audience (slides 16 21)

6. Define the Planning Documents (2226)

7. Website Security Measures (2728)

Page 3: CIS1203 Web Design Principles - Part 1

3

1- Web Site Design StrategiesPlan a way to make your web site

Put together top design strategies for getting a great website:– Keep it simple– Update often– Provide relevant content– Look professional– Use quality graphics. – Use quality fonts– Spell check everything– Download time matters– Use animation sparingly(not all the time)– Make your site unique– Navigation is the key

Page 4: CIS1203 Web Design Principles - Part 1

4

2- Business Objectives

Identify the site’s business objectives– Selling products or services– Educating consumers– Providing technical support - FAQ– Collecting information from visitors– Recruiting talented employees LinkedIn

Page 5: CIS1203 Web Design Principles - Part 1

5

3- Purpose of Website: Why are you building this website?

Example 1: Make Money with Website

What is needed? a way for the visitor to pay for the items. Use a shopping cart for multiple purchases Implement security features to protect the

purchaser's information. a professional appearance to give a good

impression of a business your.

Page 6: CIS1203 Web Design Principles - Part 1

6

Example 2: Websites Built to Share Information

A website to share information may not require as many features as a site that sells something.

3- Purpose of Website: Why are you building this website?

Page 7: CIS1203 Web Design Principles - Part 1

7

Example 3:Websites Built for Family and Friends- SNS Facebook These websites would have a less formal feel. Users would need the ability to add contents to

the website such as personal information, picture

3- Purpose of Website: Why are you building this website?

Page 8: CIS1203 Web Design Principles - Part 1

8

4- Types of web sitesCategorization is based on content

1. Search engine, directories, yellow pages and portals

Google, Yahoo and MSN

Page 9: CIS1203 Web Design Principles - Part 1

9

4- Types of web sites

2. Information web sites- “How Stuff Works” Provides information Information web site can also contain updated

time tables, TV guides, reference material, sports data (like cricket scores), weather and stock data.

Page 10: CIS1203 Web Design Principles - Part 1

10

4- Types of web sites

3. Blogs and online diaries Blogs are like online diaries For example Blogger.com (Google) or

Windows Live Spaces (Microsoft).

Page 11: CIS1203 Web Design Principles - Part 1

11

4- Types of web sites

4. Company web sites Most company web sites have just a few pages

of information on the business, its services and clients.

These are more like "online brochures"

Page 12: CIS1203 Web Design Principles - Part 1

12

4- Types of web sites

5. Forums

Forum types of web sites serve as platforms and promote interactions amongst the users.

Page 13: CIS1203 Web Design Principles - Part 1

13

4- Types of web sites

6. Online shops-amazon.com

auctions web sites –souq.com Many companies have set up shops online. For

example Amazon. Online shops are not restricted to selling

products; they can also provide services such as airline ticket and hotel reservation.

Auction websites such as eBay sells both new and used products.

Page 14: CIS1203 Web Design Principles - Part 1

14

4- Types of web sites

7. Social networking A social network service is an online service, or site that

focuses on building social relations among people Facebook, MySpace, Twitter are some examples

Page 15: CIS1203 Web Design Principles - Part 1

15

4- Types of web sites

8. File sharing type of web sites Megaupload,com and RapidShare.com are two prime

examples of file sharing web sites. You can not only find images, but also music (sometimes

even full albums) and video (entire movies).

Page 16: CIS1203 Web Design Principles - Part 1

16

5- Target AudienceWhat is your target audience? Target audience are the specific group of people

who will be looking at your website.

Target audience profile consists of– Demographic characteristics – Age profile, Gender

find this info using interview or survey– Technical skills, – Access to technology.

Page 17: CIS1203 Web Design Principles - Part 1

17

5-Target Audience:Demographic characteristics?1- Demographic characteristics:

– Age– Gender– Language– Culture– Economic status– Social status– ….

Page 18: CIS1203 Web Design Principles - Part 1

18

5- Target Audience:Technical Skills?

2- Target Audience Skills :

They can be categorized into:– users with no computer experience– users with little computer experience– computer experts

Skills:– how to save files you offer for download?– how to or be able to download a plug-in to view your

site?

Page 19: CIS1203 Web Design Principles - Part 1

19

5- Target Audience: What type of technology they have?

3- What technologies the target audience has:

1. Computer equipment

2. Operating system - version and updates

3. Latest updates for various software

4. Type of internet connections

5. Browser - version and updates

Page 20: CIS1203 Web Design Principles - Part 1

20

5- Target Audience: What type of technology they have?

3- What technologies the target audience has:

What operating system will target audience have? – Windows? What version?– Macintosh? What version?– Linux?

Are you going to use all operating systems?

Page 21: CIS1203 Web Design Principles - Part 1

21

5- Target Audience: What type of technology they have?

3- What technologies the target audience has:

What browser will target audience be using? Will your visitors be using:

– Internet Explorer? – Firefox? – Google Chrome?– Safari? – Opera?– Any other browser?

Page 22: CIS1203 Web Design Principles - Part 1

22

Documents used in planning:

1. Sitemap2. Wireframes3. Storyboards4. Flowchart

6- Define the Planning Documents

Page 23: CIS1203 Web Design Principles - Part 1

23

Sitemap is used to show how pages are related. The designer should know what pages are

required for the Web site before creating them to ensure that relationships are established.

6- Define the Planning Documents: Sitemap

Home Page (index)

About Us Cafe Spa Activities

Page 24: CIS1203 Web Design Principles - Part 1

24

Text-only skeletal structure of every click-through possibility

Wireframes created to answer “what” questions related to site

6- Define the Planning Documents: Wireframe

A simple wireframe shows page regions, identifying them with labels.

Page 25: CIS1203 Web Design Principles - Part 1

25

Diagrams of the layout of each page

Storyboards answer “how” questions related to the site

6- Define the Planning Documents: Storyboard

Page 26: CIS1203 Web Design Principles - Part 1

26

6- Define the Planning Documents: Flowchart

Flowchart is a diagram that shows the steps of a process.

Page 27: CIS1203 Web Design Principles - Part 1

27

7- Identify website security measures

Authentication

Input data validation Encryption

Page 28: CIS1203 Web Design Principles - Part 1

28

7- Identify website security measures for Different Sites

High Security Measures:– Banking websites requires userID, passwords and

tokens passwords

– e-Commerce sites requires subscribed users with userID and passwords

Low Security Measures:– Forums and chatting websites

– News and Media sites requires less security sites.