Presentation is loading. Please wait.

Presentation is loading. Please wait.

Basic Principles of Web Design

Similar presentations


Presentation on theme: "Basic Principles of Web Design"— Presentation transcript:

1 Basic Principles of Web Design
Analysing and Planning Setting The Site Goals Identifying Your Target Audience Good Web Design Web Screen, Resolution Key Navigation Aspects Ideas for Organization and Navigation Effective Web Design A Web Site Design Model Nonlinear presentation One to two screens per page Simple navigation Small graphics files Appealing visual effects To Get Neat Stuff on the Net, Copyright Law(exercise)

2 Lecture Objectives Understand the basic principles of Web design
Understanding a Web design model Put the design principles and model into context Design multipage Web sites

3 Analysing and Planning
GOOD WEB DESIGN BEGINS WITH THOROUGH PLANNING!!!!!! Who will work on the project Organizing the team (Management Roles, Creative and Editorial Roles, Technical Roles) What are the goals of the project The clearer your goals the better! Who will use the finished product How will the project be implemented

4 Bilkent University, BIM
4/17/2017 Analysing and Planning What is the purpose of the site? What are the site goals? Who is the target audience? What functions will target audience perform while at the site? What/where is the content? How will the content be structured? How will users move through or navigate the site? Web site Design 1

5 Bilkent University, BIM
4/17/2017 Setting the Site Goals At this point in the process, you need to have answers to a few key questions: What is your company’s mission? Describe your company’s strengths and weaknesses. Whom do you see as competitors? Where do you see your business in 90 days, one year, and two years? What challenges do you see in achieving your business objectives? What business objectives/issues should this site address? Who are the targetted users? Web site Design 1

6 Bilkent University, BIM
4/17/2017 Setting the Site Goals A few Sample goals for public Web Sites; Sell product/Services Increase public awareness of company/product/service Recruit potential employees Entertain Educate Communicate with customers Disseminate information Provide updates to product/services Web site Design 1

7 Bilkent University, BIM
4/17/2017 Setting the Site Goals A few Sample goals for private Web Sites; Faciliate employee communication Enable employees to self-maintain HR information Educate Archieve business documentation Track employee vacation time, billable time Web site Design 1

8 Bilkent University, BIM
4/17/2017 Identifying Your Target Audience Knowing who your target audience is can greatly affect how do you design and develop your Web site. User group Functions Performed Ages Gender Web Experience Target Platforms (Operating System,Typical Home /Work User, connection speed, Screen Resolution, Browser) Examples: Parents/friends, view bus routes, 25-60, Male/female, Average - Potential employees, research jobs, 18-25, Male/female, Avobe Average - Potential campers, Research camp, 11-17, Male/female, Average/Above Average Web site Design 1

9 Bilkent University, BIM
4/17/2017 Good Web Design Good Web Design is not concerned with looking “flash” and “cool” but aims to help the reader locate and assimilate information more rapidly. . Web Screen, Resolution, Display Properties . Effective Web Design . Ideas for Organization and Navigation A good starting point for you: . Just because you can, doesn’t mean you should. . Always think about your site from the user’s point of view. . Navigation is structured around the user’s needs . Content, content, content… Web site Design 1

10 Bilkent University, BIM
4/17/2017 Good Web Design Web Screen, Resolution, Display Properties … Visual Disabilities … Frame of Reference … the screen that you will see on the monitor If page width > web screen width = Horizonal Scrolling If page height > web screen height = Vertical Scrolling You must know the screen area you are working on Monitor Type 14”, 15”, 17”, 19” Resolution Settings 640x480, 800x600, 1024x768, 1152x864 As a result, display properties for a web design; means the best view settings for your page, where depends on yur purpose of your page. Web site Design 1

11 Bilkent University, BIM
4/17/2017 Good Web Design Web site Design 1

12 Bilkent University, BIM
4/17/2017 Good Web Design Print Design Example Entry Page Table of Contents Chapters, and Pages index A technical book is organized in an information hierarchy of Entry Page, Table of Contents, Chapters, Pages and index. It may divide chapters into further levels of related information. Web site Design 1

13 Good Web Design Key navigation aspects are; Sense of location
Awareness of the current context or location of a page! Link choices from a page Railroad > driving in roads > on see or in the air > Web! Return to previously read pages New location  return safely to starting point!

14 Bilkent University, BIM
4/17/2017 Good Web Design Ideas for Organization and Navigation in On-Line Though the shortest one, all the contents would have a lot to talk about. So, you must plan, organize and present your information by a group of structured rules. What is the best way to make a web site readable? What should be your principals? What information will be or could be grouped together? Looking at each group, how should the information within the group relate to each other? What other relationships or connections between information should or could be present? Web site Design 1

15 Bilkent University, BIM
4/17/2017 Good Web Design Effective Web Design Focus Group information in a logical order and organize your content. Relavant Information Consistency, Contrast, Functionality The larger your Web site, the more attention you should pay to maintaining consistency across your pages. Efficiency Consider dial-up users too. Web site Design 1

16 Bilkent University, BIM
4/17/2017 Good Web Design Effective Web Design Navigation Useful navigation structure Portability Everybody may not use all the latest Web technologies Maintenance Keep your site fresh and up to date Feedback Learn from the others Web site Design 1

17 Bilkent University, BIM
4/17/2017 Good Web Design Navigation Home 1 2 3 User A, entering the site from page 1 through the search results, but s/he can not see the home page or the other page! No HOME, BACK or FORWARD links Web site Design 1

18 Bilkent University, BIM
4/17/2017 Good Web Design Navigation User B, can access any page from any page of the site. Every page should feature a link back to the HOME. Where a page forms part of a sequence, NEXT and PREVIOUS links should be addes. Web site Design 1

19 Bilkent University, BIM
4/17/2017 Good Web Design Ideas for Organization and Navigation Web site Design 1

20 Bilkent University, BIM
4/17/2017 Good Web Design Ideas for Organization and Navigation Hierarchies Web site Design 1

21 Bilkent University, BIM
4/17/2017 Good Web Design Ideas for Organization and Navigation Combination of Linear and Hierarchical Web site Design 1

22 Principles of Web Design
Web Design Differs from Print Design Nonlinear presentation One to two screens per page Simple navigation Small graphics files Appealing visual effects

23 Nonlinear Presentation
Multidimensional User / visitor / student-centered Non-sequential Multimedia approach Using more than one medium simultaneously NOT Linear or sequential Writer / producer / teacher-centered

24 One or Two Screens Per Page
Home page Complete picture of site Includes corporate name, logo, key information Content pages Hyperlinks for Background information Explanations References

25 Simple Navigation Hyperlinks grouped together
Each hyperlink connecting one category Products Services Investor relations Hyperlinks placed on left, right or top of screen Common file technology

26 Smaller Graphics Files
JPEG Joint Photographic Experts Group No more than two 50KB JPEG pictures Navigation buttons smaller than 5KB GIF Graphics Interchange Format GIF images 1-2KB each Small graphics = speedy download

27 Appealing Visual Effects
Appropriate use of Style Color Layout Text 10 pt Verdana 11pt Arial or 12pt Times New Roman Color contrast Light background, dark text

28 Web Design Model

29 Phase 1. Front- and Back-End Analyses
Needs assessment (self and client) Client hardware & software evaluation Web technology trend analysis Web site cost-benefit analysis Selection of Web development tools

30 Phase 2. Design and Development Home and content pages
Text fonts, styles and color Horizontal lines and tables Hyperlinks and navigation buttons links Frames and forms Graphic arts and images

31 Phase 3. Web Site Testing Local-host testing Server-side testing
Test on developer’s computer Server-side testing Test between server and developer's computer Client-side testing Test with various configurations and browsers at different places and times

32 Summary Basic Principles of Web Design Web Design Model
Nonlinear Presentation One or Two Screens Per Page Simple Navigation Smaller Graphics Files Appealing Visual Effects Web Design Model

33 Bilkent University, BIM
4/17/2017 Write clearly and be brief Organize your documents for Quick Scanning (use headings to summarize topics, use lists to summarize related items, don’t forget link menus, don’t bury important information in text) Don’t use browser specific terminology Spell check and proofread your documents Don’t overuse images Use alternatives to images; use ALT attribute of the <IMG> tag. Use headings as headings Group related information within a page; separate sections visually Use consistent layout; (each section usually has the same page layout) use consistent page elements and forms of navigation Use links if they are useful for your readers; explicit and implicit navigation links, definition links or footnote links Use link back to home Use copyright info Don’t split topics across pages Web site Design 1


Download ppt "Basic Principles of Web Design"

Similar presentations


Ads by Google