The Website Design Process

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?

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

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,

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 Visually Explained

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

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.

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.

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.

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.

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.

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.

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

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.

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

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

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

How these three interact

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.

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.

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.

Site Structure http://www.hamptonhigh.ca 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.

Site Structure http://www.survey.walmart.com/ 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.

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

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.

A Website Storybaord

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?

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.

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.

http://www.rossocarmilla.com/

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.

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

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.

Layout http://designshack.net/articles/layouts/10-rock-solid-website-layout-examples 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>

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.

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.

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

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.

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)