The Website Design The Website Design ProcessProcess

• What are some of the things that make a website good?

• What are some of the things that make a website bad?

Web Design EvaluationAssignment

• http://www.manolith.com/2009/08/25/worst-website-designs/

Poor Websites

• 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,

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.

Important Web Terms

Important Web Terms Visually Explained

• Regardless of the size of your Web site, the process for developing the site involves the same basic steps:– Plan – Design – Develop – Evaluate

The Design Process A website

• 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.

The Planning Stage A Thought

• 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.

The Planning Stage

• 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.

The Importance of Planning

• 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.

How Do I Do My Research?

1. 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.

2. 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.

3. 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.

Pay particular attention to the following:

4. 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!

5. Keep in mind that not everyone has a fast Internet connection. Most people use a 56kbps modem or less.

Points to consider (cont.)

• 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

Site Content

• 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.

Web Site Architecture

• 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

Aesthetic 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

Information 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

Interface Design

How the users get to that information

How these three interact

• 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.

Organization & Navigation Information and Interface Design

1. 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. 2. Place each content item onto a separate

index card. 3. organize the index cards into stacks of

similar items.

OrganizingInformation 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.

Site StructureInformation Design

• 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 userclear, step-by-step access tothe material on the site.

Site StructureHierarchies

http://www.hamptonhigh.ca

• 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.

Site StructureLinear

http://www.survey.walmart.com/

• 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

StoryboardingInformation Design

• 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.

Story BoardsNot just for movies anymore

A Website Storybaord

• 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?

Story BoardsConsider the following

• 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.

NavigationInterface Design

• 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.

Clarity

http://www.rossocarmilla.com/

• 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.

Consistency

• 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

Efficiency

• 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.

Developing a Look and Feel

• 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

LayoutInterface Design / Aesthetic Design

http://designshack.net/articles/layouts/10-rock-solid-website-layout-examples

<div> </div>

• 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.

Developing the sitePrototyping

• 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.

Evaluating the Site

• You should try to view your Web site in the following situations:

1. On a browser different from the one used in the development stage

2. On a different kind of computer

3. With browser window set to different widths and lengths making sure to test the extremes

4. With the monitor changed to lower resolutions

Evaluating the site

• 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.

Site Maintenance

• Idea

• Content (Make lists)

• Storyboard (with page titles)

• Layout (Basic Sketch of layout)

Lets make a SiteApplication – The Planning Stages