1. The Website Design Process

2. What are some of the things that make a website good?
Web Design Evaluation
Assignment
What are some of the things that make a website good?
What are some of the things that make a website bad?

3. Poor Websites

4. Web Page: A single file in a Web site which,
Important Web Terms
Web Site: A collection of one or more Web pages, linked together in a meaningful way to create an overall consistent effect
Web Page: A single file in a Web site which,

5. Important Web Terms
Home Page: The "entry" page or the first page your site visitors will see
The home page is the top-most page in your Web site which can link to additional pages in the same Web site.
Usually displays an overview of the content of the site that is available from that starting point
Often, a table of contents or a set of icons link to the rest of the pages in the site.

6. Important Web Terms
Visually Explained

7. The Design Process
A website
Regardless of the size of your Web site, the process for developing the site involves the same basic steps:
Plan
Design
Develop
Evaluate

8. Every Web site begins with an idea or concept.
The Planning Stage
A Thought
Every Web site begins with an idea or concept.
post a shopping site for skateboarding gear,
photo album for your family,
a portfolio of your work experience or a
Web site of your favourite music and movies.

9. The Planning Stage
The conceptualizing and researching steps are very exciting. You begin with your core idea, then brainstorm on how you will present it as a Web page. During this stage, you will create many lists, sketches and notepads full of rough notes with ideas on what will make your site or pages exciting, what your goals are and who your target audience is. It is a time to plan your basic strategy, what resources you will need and how much it will cost.

10. The Importance of Planning
Web development and design firms spend more time on researching and planning than on any other stage of production.
Jumping in to write HTML code right away =
poorly structured and unprofessional site
That does not reach it's full potential.

11. How Do I Do My Research?
Researching your Web site idea is a very important step in creating the site. The best way to research how your Web site should look and be structured is to spend some time looking around the Internet at other Web sites.
Pay particular attention to the following:
Web sites that would be your competitors or that offer the same type of service that you will offer. You will get lots of ideas that you can use and improve upon.
Identify things about the other sites that you do not like or find difficult to use so you can avoid making the same mistake in your own Web site.
Do not assume that the flashiest, coolest looking Web site is the best. Often these sites will only work in the latest browsers, take a long time to download and are difficult to navigate.
Sites with lots of animation are not always the best. They take time to download and remember, the average attention span of most Internet users is eight seconds! How many times do you wait around when you encounter a "loading" sign?
Keep in mind that not everyone has a fast Internet connection. Most people use a 56kbps modem or less.

12. Pay particular attention to the following:
Web sites that would be your competitors or that offer the same type of service that you will offer. You will get lots of ideas that you can use and improve upon.
Identify things about the other sites that you do not like or find difficult to use so you can avoid making the same mistake in your own Web site.
Do not assume that the flashiest, coolest looking Web site is the best. Often these sites will only work in the latest browsers, take a long time to download and are difficult to navigate.

13. Points to consider (cont.)
Sites with lots of animation are not always the best. They take time to download and remember, the average attention span of most Internet users is eight seconds!
Keep in mind that not everyone has a fast Internet connection. Most people use a 56kbps modem or less.

14. Site Content
Before you can determine what information you will put on your Web site you will need to determine:
Who is your target audience
The user's skill level with the Internet

15. Web Site Architecture
Once you have decided on the content, you will need to decide on the framework of your site and how the content is going to fit together. This is known as the site architecture.
This is an important part of the planning as it will form the basis for your site's navigation.

16. Aesthetic Design
The Web is a visual medium so you must pay attention to the visual presentation which is everything you see on the page including:
Graphics
Colour
Layout
Typography

17. Information Design
Information Design is an often overlooked area of Web design that includes the organization of the content and how you get to it.
It’s how the site's information is organized

18. Interface Design
This area of Web design focuses on how the page "works" rather than how it looks, focusing on methods for doing things including:
Buttons
Links
Navigation devices
How the users get to that information

19. How these three interact

20. Organization & Navigation
Information and Interface Design
This is all part of the planning stage, before you type your first HTML tag or create your first graphic. Even a personal Web site will benefit from logical organization and good navigation.

21. Place each content item onto a separate index card.
Organizing
Information Design
Refine your list of content that you began thinking about in the planning stage.
One really simple way to organize your content to use index cards.
Place each content item onto a separate index card.
organize the index cards into stacks of similar items.

22. Site Structure
Information Design
Site diagrams use boxes to represent pages with lines and/or arrows to represent the links between pages.
The site diagram represents a model for the overall shape of the site and can suggest a system for navigation.

23. Site Structure
Hierarchies
The most common site structure is the hierarchical or menu structure. This structure begins with a top page called the home page which offers several choices which branch out below into a "tree" shape.
This structure offers the user clear, step-by-step access to the material on the site.

24. Site Structure
Linear
In a linear structure, the user is guided from page to page in a particular order.
Information that must be viewed in sequence is well suited to this type of structure.

25. Storyboarding
Information Design
Storyboarding is the process of creating a rough outline and sketch of what your Web site will look like before you actually write any pages. Storyboarding helps you to visualize the entire Web site and how it will look when it is complete, including:
Which topics go on which pages
The primary links
Types of graphics and where they will go

26. Another tool used to plan Web sites. Taken from the film industry.
Story Boards
Not just for movies anymore
Another tool used to plan Web sites.
Taken from the film industry.
A diagram of the pages and layouts with lines that show the linkage between the pages.
Helps you visualize the site.

27. A Website Storybaord

28. Story Boards Consider the following
What topics go on which pages?
Usually each topic is one page but sometimes you will want to put a few small topics on one page.
Try not to make pages too big.
Navigation?
How do the users navigate the site?

29. Navigation Keep your navigation controls: Interface Design
How the user navigates around your Web site can make or break your site. If the site is too difficult to navigate, the user is not going to enjoy the time spent on your site and may not return to it another time.
The key characteristics of a good navigation system are clarity, consistency and efficiency.
Keep your navigation controls:
Obvious
Simple
Consistent-Keep the colour and location consistent so the user always knows where to find them.
Navigation controls can be text or images.

30. Clarity
Users must learn the navigation system so it is in your best interest to make the navigation tools you use intuitive and easy to understand at a glance. To make your system user-friendly, follow these guidelines:
Navigation should look like navigation and stand out on the page.
Label everything clearly.
Use icons with caution.

32. Consistency
Navigation should remain consistent throughout the site--Consistent in appearance and in availability.
Make sure you present the navigation options the same way each time. For example:
If the home page button appears in blue at the top, right-hand corner of one page, do not put it at the bottom, in red, on another page.
If you offer a toolbar, keep the toolbar selections in the same order on every page.

33. Efficiency
Pay attention to the number of clicks it takes to get to a piece of information or to complete a task. Your goal should be to get the user to the information as quickly and efficiently as possible. Provide options such as:
Shortcuts to information
Site maps
Search functions

34. Developing a Look and Feel
The "look and feel" phase of the design stage includes choosing colours, fonts and the graphical style for the content and navigational elements. The visual design or look and feel, is an important factor in contributing to your site's usability.

35. Layout
Interface Design / Aesthetic Design
Just placing text on your Web page does not always make for good page design. It may look good in your browser at the time but if you change the size of your browser window, it may completely destroy the layout of your page.
Using invisible “tables” to control the layout of your Web page can be very useful. Using tables gives you more control over:
The placement of text
The placement of images
The alignment of navigation buttons
<div> </div>

36. Developing the site
Prototyping
At some point, all the pieces are brought together into a working site or working prototype. Rather than occurring as a distinct step in the development process, the development of the working prototype is an ongoing process as the HTML files and graphics are produced.

37. During this stage, you must check to make sure:
Evaluating the Site
Just because a page is working well on your machine does not mean it will look that way to everyone.
During this stage, you must check to make sure:
The site is in working order.
All the links work.
The site performs appropriately on a wide range of browsers and platforms.

38. You should try to view your Web site in the following situations:
Evaluating the site
You should try to view your Web site in the following situations:
On a browser different from the one used in the development stage
On a different kind of computer
With browser window set to different widths and lengths making sure to test the extremes
With the monitor changed to lower resolutions

39. Site Maintenance
A final aspect of Web site production is how the site will be maintained. A Web site is never truly "done". The ability to make updates and keep your content current is one of the advantages of the Web medium.

40. Storyboard (with page titles) Layout (Basic Sketch of layout)
Lets make a Site
Application – The Planning Stages
Idea
Content (Make lists)
Storyboard (with page titles)
Layout (Basic Sketch of layout)