Transcript My Web 2.0 Design

Web Design
Harold Waterman
Associate Professor
Design Topics
•
•
•
•
•
•
•
•
•
Internet Usage Stats
Web 2.0
Web Design Process
Planning
Site Goals and Objectives
Knowing your Audience
Building your Site
Working with Images
Publishing your Site
Usage
Although the internet is an increasingly global phenomenon, many parts of
the world still have less that 1% of their population online.
More Stats
Population Web Stats
“Contentious problems are best
solved not by Imposing a single
point of view at the expense of
all others, but by striving for a
higher-order solution that
integrates the diverse
perspectives of all relevant
constituents”
-Mary Parker Follett
Web 2.0
• Embraces an architecture of participation—a
design that encourages user interaction and
community contributions. You, the user, are the
most important aspect of Web 2.0—so
important, in fact, that in 2006, TIME Magazine’s
“Person of the Year” was “you.”
Source:www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html
Web 2.0 Continued…
O'Reilly's philosophy of Web 2.0 included
these ideas:
• Using the Web as an applications platform
• Democratizing the Web
• Employing new methods to distribute
information
Web 2.0 Continued…
The example O'Reilly used in his blog entry was Google.
He said that Google's value comes from several factors:
• It's a multi-platform service. You can access Google
on a PC or Mac (using a Web browser) or on a mobile
device like a cell phone.
• It avoids the business model established by the software
industry. You don't need to buy a particular software
package to use the service.
• It includes a specialized database of information -search results -- that seamlessly works with its search
engine software. Without the database, the search
application is worthless. On the other hand, without the
search application, the database is too large to navigate.
Web Design Process
• THE FIRST STEP in designing any Web
site is to define your goals. Without a
clearly stated mission and objectives the
project will drift, bog down, or continue
past an appropriate endpoint. Careful
planning and a clear purpose are the keys
to success in building Web sites,
particularly when you are working as part
of a development team.
Web Design Process
Planning
• Web sites are developed by groups of people
to meet the needs of other groups of people.
Unfortunately, Web projects are often
approached as a "technology problem," and
projects are colored from the beginning by
enthusiasms for particular Web techniques or
browser plug-ins (Flash, digital media, XML,
databases, etc.), not by real human or
business needs. People are the key to
successful Web projects.
Web Design Process
Planning
• To create a substantial site you'll need
content experts, writers, information
architects, graphic designers, technical
experts, and a producer or committee chair
responsible for seeing the project to
completion. If your site is successful it will
have to be genuinely useful to your target
audience, meeting their needs and
expectations without being too hard to use.
Web Design Process
Planning
• Although the people who will actually use your
site will determine whether the project is a
success, ironically, those very users are the
people least likely to be present and involved
when your site is designed and built. Remember
that the site development team should always
function as an active, committed advocate for
the users and their needs.
What are your goals?
• A short statement identifying two or three goals
should be the foundation of your Web site
design. The statement should include specific
strategies around which the Web site will be
designed, how long the site design, construction,
and evaluation periods will be, and specific
quantitative and qualitative measures of how the
success of the site will be evaluated.
Know your audience
• The next step is to identify the potential
readers of your Web site so that you can
structure the site design to meet their
needs and expectations. The knowledge,
background, interests, and needs of users
will vary from tentative novices who need
a carefully structured introduction to expert
"power users" who may chafe at anything
that seems to patronize them or delay their
access to information.
Know your audience Continued…
• A well-designed system should be able to
accommodate a range of users' skills and
interests. For example, if the goal of your
Web site is to deliver internal corporate
information, human resources documents,
or other information formerly published in
paper manuals, your audience will range
from those who will visit the site many
times every day to those who refer only
occasionally to the site.
Site Design
• The fundamental organizing principle in Web
site design is meeting users' needs. Ask yourself
what your audience wants, and center your site
design on their needs. Many organizations and
businesses make the mistake of using their Web
sites primarily to describe their administrative
organization, and only secondarily do they offer
the services, products, and information the
average user is seeking.
Site Design
• Most readers won't care how your company or
department is organized and will be put off if
such inside information is all your site appears to
offer. Talk to the people who make up your
target audience, put yourself in their shoes, and
make the items and services they want the most
prominent items on the home page.
Design Strategies
• Why do we like
certain pages?
• Navigation
• Content
• Text
• Contrast
Home
Design
Elements
Site Map
The
Reader
Web Design Process
• A wireframe is a non-graphical
layout of a web page. It is a
simple drawing of the chunks
of information and functionality
for each page in your site.
Dynamite create a wireframe
for the home page, each
unique second level page and
any other significantly different
page on the site.
• Wireframes include the
containers for all the major
elements of the page.
Elements include navigation,
images, content, functional
elements (like search) and
footer
Source: www.webstyleguide.com
Final Content Outline
• Final content outline will
help to create a sitemap
or site diagram. A site
diagram is just a visual
representation of your
content outline and site
structure.
Professional Sites
Professional Sites Continued…
Global Structure elements
<HTML>
Opening Tag
The HTML element:
Identifies a file as being
an HTML document.
Usually found at the start
and end of code.
</HTML>
Closing Tag
Global Structure elements (cont.)
<HTML>
<HEAD>
Opening Tag
</HEAD>
Closing Tag
</HTML>
The head element:
Contains information about
the document, such as the
title, indexing information,
and style rules.
Global Structure elements (cont.)
<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
</HEAD>
Opening Tag
Closing Tag
The title element:
Displays its contents in the
title bar of the document
window. The title is used
as the reference when a
page is used as a
bookmark(favorite).
</HTML>
Global Structure elements (cont.)
<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
</HEAD>
<BODY>
Opening Tag
The body element:
Holds the contents of a
Web page. Any attributes
applied to this element
affect document-wide
properties.
</BODY>
</HTML>
Closing Tag
Adobe Dreamweaver
Dreamweaver Starter Pages
Quick Design
Adobe Dreamweaver
http://www.youtube.com/watch?v=yxqErPjuq80
http://www.youtube.com/watch?v=Ltq6GnP6qoQ
Split View
Microsoft Expression Web
http://www.youtube.com/watch?v=2ETY4IVmTes
Microsoft Expression Web
http://www.youtube.com/watch?v=CXDCy8_HWEE
Web Graphics
• Although electronic
publishing frees you from
the cost and limitations of
color reproduction on
paper, you will still need
to make careful
calculations (and a few
compromises) if you wish
to optimize your graphics
and photographs for
various display monitors
and Internet access
speeds.
Web Resource for Educators
Blogging your students
• http://rogers.edublogs.org/.
• http://futureofmath.misterteacher.com/blogs2.html .
• To get started go to the following site:
• www.wordpress.com
• https://www.blogger.com/start
• http://www.flickr.com
Free Web Page Stuff
•
•
•
•
•
•
•
www.w3schools.com/
www.pagebreeze.com/download.htm
www.thefreecountry.com/webmaster/freeftpclients.shtml
http://files.uberdownloads.com/software/ftp-clients/filezilla.html
www.merlot.org
http://www.freetwitterdesigner.com/
http://www.templateworld.com/free_templates.html
•
•
Accepting Credit Cards
http://www.thesitewizard.com/archive/creditcards.shtml
Questions