Web Design L 2 Remediation

+

ICT Web Design

Jupiter Middle School of Technology

LESSON 2 – PLANNING A WEBSITE

+Planning a Web Site

+6 Steps to Effective Web Design

1.
Assessing needs (goals) of the website

2.
Determining content structure

3.
Determining site structure

4.
Determining Navigation structure

5.
Creating a wireframe

6.
Selecting appropriate tools to build website

7.
Search Engine Optimization

+

Step 1 – Assessing Needs

+Assessing Needs

Define:

■ Purpose

■ Main goals

■ Target audience

+Assessing Needs

Websites usually fall into 2 categories:

1. Selling a product/service

2. Providing information about a specific

topic

+Purpose & Goals

Purpose: the reason you create
the web site

Example:

To inform my students about
proper web design and web
development.

Goal: what you specifically want
to happen.

Example:

To have 90% of my students pass
the ICT Web Design Essentials
digital certificate by the end of
the fiscal year.

Purpose

Goals

+Website Goals support

Organization Goals

+SMART Goals

– who, what, when, where, and how

– Can I measure the goal?

– Is this something I can commit to?

– Is it a doable goal?

– When do I want this goal completed?

Specific

Measureable

Achievable

Realistic

Time-bound

Multiple Choice

SMART goals can have a range of time to complete it in, like 1-2 weeks.

• True

• False

Multiple Choice

Smart goals are specific.

• True

• False

Multiple Choice

A SMART Goal is:

• Something you already know

• Easy to complete

• Set too high to reach

• Attainable

+Step 1- Assessing Needs

Knowing Goal, Purpose and Target Audience
allows:

1.

Determine the scope of the Web site

2.

Determine site content

3.

Establish the site structure needed to meet

the needs of the client and site visitors

+Target Audience

Who might visit the site and why

■ Type of information:

✔

Physical demographics (age, gender, health) – to determine
usability and accessibility requirements for the site.

✔

Cultural demographics (education level, nationality, social
group) – to establish the writing level and style that should be
used.

✔

Computer experience – to determine functionality and
navigation requirements for the site.

✔

Expectations – to create a site that does not disappoint
visitors.

+Target Audience

Target audience can be easily influence a site’s:

■ Look and feel of the website (Aesthetics)

■ Writing style and tone of the content

■ Multimedia used in the contents

+Target Audience

National geographic: Adults

National geographic: Students

Multiple Choice

Which of the following is part of determining your target audience?

• Physical demographics

• Selecting development tools

• Assessing needs

• Random structure

Multiple Choice

Which of the following should NOT be considered when determining a Web site’s target audience?

• Age

• Gender

• Nationality

• Internet Address

Multiple Choice

Which of the following is not influenced by the Web site’s target audience?

• Web authorizing tools used

• writing style and tone of content

• overall look and feel of the web site

• multimedia content used

+Step 2: Determining Content

Structure

+Content Structure - Scope

Scope: Features and Functions

■
Content – topics

■
Forms

■
Interactivity

■
Blog / Wiki

■
Embedded video

■
Embedded content

+Wiki:

Informative & collaborative

Login: Edit and
update.
Give access only
to those you wish
to have edit
access, public
website

+Blog: Share your PERSONAL feed

you control
https://www.danflyingsolo.com/

+Embedded Content:

Gif
https://www.codecademy.com/learn/learn-how-to-code

+Embedded Content:

Example: Video you can watch on
the Website

+Content Structure

The general content of the website consists of:

■ Primary (Home) page – generally indicates who owns

the Web site, what is available on the site, and where
the information is located within the site (navigation).

■ Secondary pages – should include the same visual

identity as the primary page (including name, logo,
colors, fonts).

+Mind Mapping

Mind Mapping can help generate ideas for Web
site pages and content.

✔

renew your sense of purpose

✔

spark your creativity

✔

clarify your ideas

✔

refine your goals

+Card Sorting

1.
Place the major categories at the top of a table,

2.
place subcategories underneath,

3.
and place sub-subcategories under that.

After the categories are organized the site plan
begins to develop.

Products

About

Contact

Support

Clothing:
Shirts
Pants
Dresses
Shorts
Shoes

Purpose:
History
Mgt. Bios

Info:
Street Address
Telephone
Fax

Tech Support:
Live Chat
Telephone
Email

+Page Structure

1.

At least one heading to identify its contents.

2.

Appropriately page title for search engine optimization and
bookmarking.
Search engines use keywords to choose which results to show and
in what order, and bookmarks use the page title in their menu.

3.

Page header that includes the organizational logo and name in the
upper-left corner of the page.
Logos are usually linked back to the home page.

4.

Include contact information or a link to the Contact page.

5.

Page footer that provides copyright information and text links that
match the main navigation structure.

6.

Include page titles and content section headers that are consistent
with the Web site purpose and goals.

7.

Contain a site content navigation menu,
Generally as a distinct left panel or as a horizontal menu across
the top of the page.

+

Step 3: Site Structure

+Site Structure

Blueprint of the linked arrangement of site pages

(site navigation).

■ Sketches of the site's structure helps the designer organize the

site's pages and link relationships.

■ It enables the designer to visualize the step-by-step flow of

interactions visitors must complete to accomplish each task.

+Hierarchy

■ Linear - A specific order.

It’s best suited for tutorial or chronological
information that needs to be presented in a certain
order

■ Hierarchical – organize into categories and

subcategories by increasing level of detail.
Use most commonly on websites today.

■ Random or Webbed - do not contain a primary

path. This type of structure can be confusing for
visitors and is best suited for simple Web sites that
contain only a few pages

+Site Structures

+Hierarchal

Multiple Choice

What are the 3 most common web site site structure?

• Linear, vertical, hierarchal

• linear, random, hierarchal

• horizontal, vertical, random

• random, hierarchal, horizontal

+

Step 4 : Navigation Structure

+Navigation Bar:

Navigation TOP:

Navigation SIDE:

+Navigation Structure

The navigation structure helps visitors find their way
around the site and encourages them to dive deeper into
its contents.

■ Navigation location: Top or left

■ Best recommendations with a web site’s navigation structures

are:

1.

Include a link back to the home page on every page.

2.

If you are using images or graphics as links, make
sure you include alternative text

3.

Include text links in the page footer.

4.

Consider using breadcrumbtrails to help orient
visitors.
navigation aid to help users to keep
track of their locations within programs
or documents

Multiple Choice

Which of the following is recommended when using graphics as part of a Web site’s navigation scheme?

• use graphics only on the home page navigation

• use a primary color

• provide text links in the page footer

• make sure the graphics are small

+Breadcrumb

Multiple Choice

Which of the following is a type of navigational structure? ()See the example to your left.)

• Logo

• Color Scheme

• Breadcrumb

• Cultural demographics

+Wireframe

■ A wireframe is a visual

representation of a Web page
layout.

■ It is used to connect the content

and site structure.

■ It’s a skeletal blueprint layout

representation only (no color,
graphics, or other elements)

Multiple Choice

What is the term for a sketch displaying the skeletal blueprint of a Web page structure?

• Card sort

• Mindmap

• Breadcrumb

• Wireframe

+

Step 6: Appropriate Tools

+Development Tools

The available tools for web development include:

■ Text or Web editors

■ Online or offline site builders

■ Content management systems (CMSs)

+Text Editors

■ Create Web pages by typing in markup language tags and

other related text into a document.

■ Incapable of displaying formatting, fonts or graphics on display

screen while editing.

■ Must know some HTML

■ No templates

+Web (GUI) Editors

■ Also called WYSIWYG: what you see is what you get

■ Allow designers a more visual approach to creating Web

pages.

■ Display formatting, fonts and graphics on screen while

editing.

■ Must still learn the interface.

■ Contain pre-defined templates

■ Example: Adobe Dreamweaver

+Text Editor – GUI Editor

■ Must transfer (FTP) files to a web host

■ Web and text editors are installed and run on your computer.

■ Web Host: a company that has servers that are permanently

connected to the Internet.

■ When you put your Web pages on their servers, anybody on

the Internet can view them.

■ Web site is considered live, or published, meaning it is

available for viewing on the Internet.

+Online Site Builder

■ Some web hosts provide a site builder service.

■ Log in to the Web host's site.

■ Design a web site using just a browser.

■ Do not require any special software.

■ Examples:

Weebly and Wix,

+Online Site Builder

Advantages:

■ No need to transfer web files to a web host.

■ Contain a variety of pre-designed templates for

designers to use and customize.

Disadvantages:

■ Lose flexibility and control.

■ Template and graphics used by online site

builders are copyrighted.

■ If you want to move your site to another host,

you will have to create a new Web site.

+Content Management System

■ Pre-designed templates and allow you to connect to your site with your

browser for modifications.

■ CMSs are not tied to a Web host. You can choose where to host your site.

■ Some CMSs offer a variety of social media and interactive options, such

as member pages and blogging.

■ CMSs are harder to use than site builders.

■ CMSs require you to upload files, set up a database and configure the

CMS on your system.

■ CMSs offer a large amount widgets and plug-ins that allow you to add

interactivity and dynamically generated content.

■ Examples: Drupal or WordPress

Multiple Choice

Which Web authoring tool does not require Web files to be transferred to a Web host?

• Text editor

• Web Editor

• Offline site builder

• Online site builder

Multiple Choice

Which Web authoring tool allows you to keep all content and design features of your Web site when transferring to a new host?

• Web editor

• Offline site builder

• Online site builder

• All Web authoring tools

+Content Management System

+Step #7: Search Engine

Optimization

+What is SEO?

■
The process of improving how high your web site
is ranked in the various search engines

■
A major industry with in the field of web design.

■
The higher your web site is ranked in any particular
search engine determines how high it is placed in
the search results for specific key words used in a
search.

+Keys to SEO

Ways to optimize your search engine rank:

■

META tags – description & keyword

■

key words and placement of content,

■

being optimized for mobile,

■

valid code,

■

use of social media,

■

referring web sites,

■

and meeting accessibility guidelines.

+Meta Tags

Keyword

■
provides the search engine specific words

■
central to the content on the page

Description

■
A brief summary of the content in the web page

■
The information the search engine displays in its search
results

+Keywords in Content

■
In page titles

■
In heading tags

■
Used repeatedly on a page

■
Part of main content

+Optimized Mobile

■
Page speed

■
White space

■
Responsive
design

+Valid Code

■ Use clean current valid code

+Social Media

■ Current

■ Social

■ Relevant

+Back Links: Referring Web Sites

■ Authority

■ Relevance

+Accessibility Guidelines

Multiple Choice

How do you get your website to attract visitors?

• META tags

• Bad reviews

• Word of mouth

• Links from other sites