The Website Development Process: Tutorial

Match the phases of the design process with their explanation. Pairs 1. creation of a sitemap that roughly maps the structure of the web pages that will make up the website arrowBoth 2. coding of the website arrowBoth 3. finalization of the look and feel of your website arrowBoth 4. creation of a rough draft of what you want to see on your website

1. planning 2. development 3. design 4. learning

Blog:

A blog is a website presented as a journal where users can share their thoughts on various topics.

Browser:

A browser is a software application that reads web pages. Some examples include Firefox, Safari, Internet Explorer, and Chrome.

Cookie:

A cookie is a small text file sent by a web server to a browser. It contains information about the user and the current browsing session, and the browser stores it on the user's computer.

Phase 6: Maintaining

A designer's responsibilities may continue even after the team hands the finished project over to the client. There may be regular updates and maintenance of the website. Changes in platforms or browser technology may require some changes to the original design to keep it up to date with the latest technologies.

Domain name:

A domain name (also called a domain address) is a unique name given to a website. No two websites can have the same domain name.

Flowchart

A flowchart or workflow diagram is a pictorial summary of the whole site. Using a flowchart, you can explain how pages in a website connect to one another. You use boxes and arrows to represent the overall flow of information on the website. Every website has a main page called the home page. Users land on this page when they visit a website. A box depicting the home page typically appears at the top of the flowchart. Additional boxes branch from the home page and show different main sections of the website. Each main section may have additional subsections, or child pages. Each child page will link back to its respective main section, also referred to as the parent page. The image on the right shows a flow chart of a website with three main sections and two child pages of the third section. You can use special tools like organization charts in word processors and presentation programs to create flowcharts on a computer.

Homepage:

A homepage is the default or opening page of a website.

Plug-in:

A plug-in is a third-party code that extends a website's capabilities. For example, users can install plug-ins such as Adobe Flash Player to view a video or an interactive game on a website.

Storyboarding a Website

A storyboard helps in sketching the overall logic, flow, and structure of a website. It includes a single image or multiple visual images that shows a website's design before working on the actual site. You can create a storyboard on paper or using relevant software. The aim of your storyboard is to show the overall framework of your website. It will show the sequence and flow of web pages, and depict how all the pages in the website link together. It also verifies whether the layout needs changes before it goes into production. On a storyboard, you'll create screens—one by one—to show the order and flow of information contained in your website. You can use a flowchart to represent the information flow. You can then make a wireframe of every page. Let's learn more about flowcharts and wireframes.

Sign up with a web hosting company

A web hosting company provides web server space where designers can upload their websites. These companies usually charge a monthly fee that varies according to the amount of space the site requires and the services it provides. Some web hosting sites provide free services with minimal space and restrictions.

Web page:

A web page is a single page of a website, and usually it is an HTML document.

Web server:

A web server is a computer that stores and delivers web content over the Internet.

Website:

A website is a collection of web pages under a single domain name.

Wireframe

A wireframe or prototype is a two-dimensional visual layout of how the interface of each page will look. It provides a visual idea of how much space each element will take on a page. Examples of common elements in a wireframe diagram include a navigation bar, links, and space for images and text. The image on the left shows some of the common elements in a wireframe. You can use a wireframe to verify whether the main elements on the website are spaced out well enough to capture a user's attention. It also helps you to verify the navigation controls of the website. You can use specialized computer programs like Axure and iRise to create professional wireframes.

What does targeting your users mean? A. attracting users who would find value in your website B. excluding a certain group of people from accessing your website C. attracting users who qualify to be your target audience D. providing overload of information to certain users

A, C

Publishing the Website

After you create your website with the help of a website development tool or a WYSIWYG editor, the next step is to publish the site on the Internet so that the users can access it. To publish a website, you must register a domain name and buy space on a web server that will host the website. After you publish the website, any computer connected to the Internet can access it. Steps include:

Phase 4: Developing

All the coding happens in this phase. The designer may either use existing templates to build the website or build the site from scratch. Coding from scratch requires some knowledge of HTML, CSS, JavaScript, PHP, and other such markup and scripting languages to develop dynamic web pages. Various web design tools help you create simple web designs. WYSIWYG (What You See Is What You Get) is one such type of tool. With this tool, you can see text and graphics in a way that corresponds to how the page will look as a finished product, without needing extensive programming knowledge. Construction of the actual live website occurs during this phase.

IP address:

An IP (or Internet Protocol) address is a unique identifier given to every computer on the Internet. Every domain name has a unique corresponding IP address.

Phase 2: Planning

As a designer, the information you gather in the first phase, helps you create a plan for the website. Designers use this information to create a sitemap that roughly maps the structure of the website's pages. The sitemap serves as a guide. It enables the designer to visualize the structure of the website. It also helps develop the content and create page-to-page navigation. The designer must also determine the needed tools for designing the various aspects of the website.

Web Terminologies and Protocols

Before we learn about website design planning, process, and publishing, let's learn about some basic important terms associated with website design.

What does the HTTPS protocol define? A. how to transmit data over a network B. how to divide data into secure web pages C. how to transmit secure web page data over the Internet D. how to transmit web page data over the Internet

C

DNS:

DNS (or Domain Name System) is a system that translates a domain name provided by a user (for example, www.edmentum.com) into its equivalent IP address.

Target users:

Different websites use different construction methods to cater to an intended target user. The user may be of a certain age, group, or region, or the website may be for a specific kind of user (for example, a website specifically for high school students or nature enthusiasts). The content, structure, and layout may differ for different target users. The blueprint should profile the target user and describe how the website caters to this group.

Phase 5: Testing and Delivering

During the coding phase, the programmers test various aspects of the website, in detail. After the project is complete, it goes through a thorough testing phase. The programmers subject it to worst-case scenarios to check how it handles errors. They also test for functionality errors, during which they test every aspect and function for proper output. They test the website for compatibility issues with different browsers, operating systems, and devices. After the team completes the testing and ensures that the project meets all goals set in the initial phase, they deliver the site to the client. The client also tests the site to check for completeness and conformance. If the client is happy with the project, the site will go live for public use.

FTP:

FTP (or File Transfer Protocol) defines the transfer of files from one computer to another over a network. FTP provides a secure transfer of files, and it is useful for uploading and downloading files.

Steps for Creating a Storyboard

First, you'll create a flowchart. Begin by creating a box at the top of your flowchart and labeling it as the main page. Typically, the main/home page has a description of an organization or product. It can also contain contact information and a layout of links to other pages. Next, use boxes and arrows and branch out the second-level pages that link to the main page. In the image, the second-level pages have labels as page 1, page 2, page 3, and page 4. They each connect to the home page. Now, branch out the child pages below each second-level page. These become the third-level pages. In the image, you'll see that page 1 has two child pages, while page 2, page 3, and page 4 have one child page each. Similarly, based on the website content, you can continue to branch out for each subcategory. This way, you can document the navigational flow of the website.

Allow easy navigation:

Great content alone is not enough to make a great website. If visitors find it difficult to navigate the website and locate the required information or services, they may leave and go elsewhere. Designing intuitive navigation can ensure a more effective user experience. The blueprint should specify how the website could facilitate user navigation.

HTTP:

HTTP (or HyperText Transfer Protocol) defines the transfer of web content in the form of hypertext. Most websites on the Internet make use of HTTP to communicate and transfer web content.

HTTPS:

HTTPS is a secure form of HTTP that defines the transmission of web content using secure encryption methods. HTTPS makes use of SSL (Secure Sockets Layer) to transmit data securely.

ISP:

ISP (or Internet Service Provider) is a company that provides users with access to the Internet.

Assign keywords:

Keywords are terms that describe the content or theme of your website. Search engines use keywords to index websites. An optimized site has a greater chance of being higher up in a relevant search. Building website content around specific keywords will help optimize your website for search engine traffic. Your blueprint should contain possible keywords that will help optimize content.

Specify user actions:

Most websites have provisions for user interactions, or user actions. An example is an icon or button to download a file, buy a product, or search for a service. User actions provide a richer user experience. Websites that make use of these tools are dynamic websites. The blueprint should specify what user actions the website will offer.

Phase 1: Learning

One important step in the design process is to gather information for the website. When you design the website for yourself or for your company, this phase enables you to create a rough sketch of what you want on the site. When you design for a client, this phase allows you to collect important information from the client. Following are some types of information to collect. - Purpose: What is the website's intention? What service or information does it provide? - Goal: What is the goal of the website? The goal or objective sets a success parameter for the project as well as a standard for the designer to achieve. - Target users: Who are the users this website aims to attract? The layout, structure, and content of the website must match the expectations of the target users. - Content: Content refers to the subject matter of the website. What facility, information, or service does it provide?

Web Protocols

The Internet is the biggest worldwide network of interconnected computers, servers, and other devices. It relies on protocols to facilitate effective and consistent communication and data transfer between devices. A protocol is a set of rules that defines connection, communication, and data transfer on a network. The beginning of a URL of a web resource gives the protocol used for communication. For example in the URL http://www.example.com, the protocol used is http. The Internet requires the use of such protocols.

Register the domain name

The domain name gives the website its unique identity. When you register a domain name, the registration service checks whether the domain name already exists. This is because two websites on the Internet cannot have the same domain name. The service also assigns a unique IP address to the domain name. The domain also requires a redirect to the user's host website.

Storyboarding Techniques

The storyboarding technique you use will depend on the flow of information in your website. There are several ways to structure this type of information. Let's discuss some common techniques.

Upload the website

The web hosting service will offer options to upload the website to its servers. Hosting companies usually use the File Transfer Protocol (FTP) to upload the website to their servers. After you upload and publish your site, anyone on the Internet can access it using the registered domain name.

Set objectives:

This is a very important step. Setting objectives or goals for a website gives the project direction. It gives the designer a broad overview of expectations and needs. The blueprint should specify the website's objectives clearly. Completing an objective is a measure of success.

Phase 3: Designing

This phase works on the look and feel of the intended website, which depends greatly on the intended users. A website for children, for example, will use simple language, be intuitive, and have an attractive design. Other factors, such as intended access device (PC, smartphone, and so on), will also play a role in defining the look and feel of the site. The designer can use a model or mock-up to illustrate the look and feel, to help gain a better understanding of the necessary elements and structure. This facilitates the coding process.

Webbed:

This technique is a mix of linear and hierarchical technique. The resulting layout is like a web. Use this method for websites where the order in which a user views pages does not matter. Users can navigate freely between pages, but may need to follow a linear or hierarchical structure for some pages. A good example is an e-commerce site. You can easily navigate to most of the pages on the website using the navigation bars or menus that appear on all pages. For a small website, most storyboards are hand-drawn on paper. However, you can also use software programs like Microsoft Word or PowerPoint. Alternatively, you can use web-based storyboarding tools such as Storyboard That and Shotbox.

Wheel:

This technique uses a central idea with many ideas flowing out from it. Like the spokes of a wheel connected to a main hub, a main page would have links to all other web pages within a site. After visiting a web page, the user must return to the hub before navigating to another page on the website. A good example of this method is a website for a theatre personality with many different stage performances.

Now let's learn how to create a wireframe based on the flowchart you created in the previous slide.

To create the wireframe, you need to collect all the information (including text and images) you'll want to include on the website. First, you need to sort this information into topics. Start at the general level and work down to specific topics. Now, allocate appropriate text to the correct sections and subsections. Next, determine the title, heading, subheading, and content for each page of the website. Using the flowchart, you've already planned the structure of the information and how the pages will link. Now in the wireframe, you'll draw the layout of each page with its respective elements, including navigational items and hyperlinks. For images and content, you'll use placeholders. A placeholder is an empty box sketch on a wireframe to show where content or images will go. These tools help your team members and other stakeholders to visualize what the finished website will look like. The wireframes also provide an opportunity for team members to contribute comments and suggestions before the actual design and coding phase begins.

Linear:

Use the linear technique when you want the user to navigate sequentially through your website. In this mode of navigation, the user moves from one screen to the next, step by step. In this method, the flow of information is almost like a book or a journal—one page at a time, and moving either forward or backward. Linear storyboarding is ideal for a personal website or a single-product website.

Blueprint Design

Website creation is an extensive job and in a way similar to constructing a house or bridge. An architect or engineer would not start building a house without a plan. Such jobs require proper planning and blueprints to help visualize the end project. Planning and blueprints are useful ways to communicate ideas between the website designer and the client. A blueprint helps the designer show the client the vision for the site, which helps the client obtain a better idea of what the designer plans to create. Here are some guidelines for a quality blueprint creation. - Build toward the website objective. - Keep the intended user in mind. - Design to facilitate user actions. - Make navigation easy. - Maintain a list of keywords you use during website creation.

Website Design and Publishing

You have already seen the importance of creating blueprints for a prospective website design. The design process follows a series of phases that helps define specific tasks. This method of dividing the design process helps a project run smoothly and efficiently. The design process has six phases, as shown in the image here. Let's learn about these phases.

Hierarchical:

You should use the hierarchical technique to storyboard a website that has many pages and page branches. This technique usually begins with a home page and has links that lead to multiple child pages, which contain links back to the home page. Thus, the navigation is top-down, not linear. Hierarchical storyboarding is ideal for storyboarding a large company website with information that may need to be subdivided into layers.