CIS1203 Web Design Principles - Part 1

1,651 views
1,504 views

Published on

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

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,651
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
28
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Objective: goal
  • Purpose: reason
  • CIS1203 Web Design Principles - Part 1

    1. 1. Planning a Web Site CIS1203 1
    2. 2. Learning Objectives 1. Website Design Strategies (slide 3) 2. Business Objectives (slide 4) 3. Purpose of Websites (slides 57) 4. Types of Websites (slides 815) 5. Target Audience (slides 16 21) 6. Define the Planning Documents (2226) 7. Website Security Measures (2728) 2
    3. 3. 1- Web Site Design Strategies Plan 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) 3 – Make your site unique
    4. 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 4
    5. 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. 5
    6. 6. 3- Purpose of Website: Why are you building this website? Example 2: Websites Built to Share Information A website to share information may not require as many features as a site that sells something. 6
    7. 7. 3- Purpose of Website: Why are you building this website? 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 7
    8. 8. 4- Types of web sites Categorization is based on content 1. Search engine, directories, yellow pages and portals  Google, Yahoo and MSN 8
    9. 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. 9
    10. 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). 10
    11. 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" 11
    12. 12. 4- Types of web sites 5. Forums Forum types of web sites serve as platforms and promote interactions amongst the users. 12
    13. 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. 13
    14. 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 14
    15. 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). 15
    16. 16. 5- Target Audience What 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. 16
    17. 17. 5-Target Audience: Demographic characteristics? 1- Demographic characteristics: – – – – – – – Age Gender Language Culture Economic status Social status …. 17
    18. 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? 18
    19. 19. 5- Target Audience: What type of technology they have? 3- What technologies the target audience has: 1. 2. 3. 4. 5. Computer equipment Operating system - version and updates Latest updates for various software Type of internet connections Browser - version and updates 19
    20. 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? 20
    21. 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? 21
    22. 22. 6- Define the Planning Documents Documents used in planning: 1. 2. 3. 4. Sitemap Wireframes Storyboards Flowchart 22
    23. 23. 6- Define the Planning Documents: Sitemap  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. Home Page (index) About Us Cafe Spa Activities 23
    24. 24. 6- Define the Planning Documents: Wireframe Text-only skeletal structure of every click-through possibility Wireframes created to answer “what” questions related to site A simple wireframe shows page regions, identifying them with labels. 24
    25. 25. 6- Define the Planning Documents: Storyboard Diagrams of the layout of each page Storyboards answer “how” questions related to the site 25
    26. 26. 6- Define the Planning Documents: Flowchart Flowchart is a diagram that shows the steps of a process. 26
    27. 27. 7- Identify website security measures  Authentication  Input data validation  Encryption 27
    28. 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. 28

    ×