Transcript Powell, T. , Web Design - Journalism and Multimedia Arts

Today’s objectives
Defining web design
 Introduction to design precepts
 Markup

Define Web Design


Good web design is much more than creating pretty
pages.
Basic concepts of color theory, typography, layout ,
and usability are all part of a good design.
(Hogan, 2009)
Define Web Design
Everyone has some sense of what Web design is... but
what is it really.
 Graphic
design,
 Programming,
 Information architecture (creation and organization of
content),
 Usability?

All part of any discussion - but their importance in
design and development varies from person to
person and from site to site.
Define Web Design

Web design is influenced by:
 library
science,
 graphic design,
 programming,
 networking,
 user interface design,
 usability,
 human computer interaction
 and a host of other fields.

A multidisciplinary field.
Define Web Design
Web design encompass a number of disciplines:






Visual (graphic) design
User interface and experience design
Web document and style sheet production
Scripting and programming
Content strategy
Multimedia
Define Web Design
A definition:
…multidisciplinary pursuit pertaining to the
planning and production of Web sites, including,
but not limited to, technical development,
information structure, visual design, and networked
delivery.

Powerll, T.
Define Web Design


At it’s core, design is all about visual communication.
To be an effective designer, you have to be able to
clearly communicate your ideas to users or else lose
their attention. (Jones, 2011)
COMPONENTS OF WEB
DESIGN
Define Web Design
Components of Web design:
 Content - information (text, images, etc.) and how it is
organized and structured.
 Visuals - screen layout and graphic used in a site.
 Technology - HTML, CSS, interactive elements,
programming techniques, languages.
 Delivery - speed and reliability of a site’s delivery
over the Internet.
 Purpose - reason the site. Should drive all decisions
involving site.
Powell, T. , Web Design
Define Web Design

Amount each component of Web design influences
a site may vary according to the type of site being
built.
Define Web Design
Web sites are primarily a client-server network model
with three common elements:
 Server-side - server hardware and software as well
as other elements (e.g., Java based applications and
databases).
 Client-side - browser and supported technologies
(e.g., HTML, CSS, and JavaScript).
 Network -Connectivity elements utilized to deliver
Web site to a user (e.g., various networks on the
public Internet or private connections within an
intranet.)
Powell, T. , Web Design
TYPES OF WEB SITES
Types of Web Sites
Abstract Groupings
 First, consider if a site is
 information
focused (w3Schools | Duquesne), document-
centered
 task (Kuler |Type Tester) focused, application-centered.

Hybrid sites do a little of both (Amazon)
Powell, T. , Web Design
Types of Web Sites
Broad categories of sites – based on type information:
 Informational - provide information about a particular subject,
very common type of sites.
 Transactional - used to conduct some transaction (Ecommerce).
 Community - provide information and interaction between
likeminded individuals.
 Entertainment - games or forms of entertaining interaction.
 Other artistic, experimental sites, personal sites, blogs.
Powell, T. , Web Design
Types of Web Sites
Categories of sites - based on type of organization:
 Commercial - site built for commercial gain.
 Government - a government organization
 Educational - educational institution, to support learning or
research.
 Charitable – nonprofit or the charitable organization.
 Personal – individual or some person, outlet of personal
expression.
Powell, T. , Web Design
Types of Web Sites
Site Genres
 PERSONAL E-COMMERCE
 BLOGS
 WEB APPS THAT WORK
 STIMULATING ARTS & ENTERTAINMENT
 EDUCATIONAL FORUMS
 GRASSROOTS INFORMATION SITES
 NONPROFITS AS NETWORKS OF HELP
 GOVERNMENT
Design of Sites, Douglas K. van Duyne, James A. Landay and Jason I. Hong
SOME PRINCIPLES BEHIND
WEB DESIGN
Web Design

Do people read web sites?

People are fickle.

Given large block of information, chances are
they won’t read it.
We think people read like this...
But they probably see this…
Web Design
…people will see our designs in terms
relationships…
of
What do you see?
What do you see?
You likely see a large red box and a small blue box, not
just two boxes.
People try to differentiate between objects, size, color or other
differences – to help them distinguish between objects and give them
unique meanings.
You likely see a large red box and a small blue box, not just two boxes.
Greater complexity, greater need to “distinguish” objects in terms of relationships.
Greater complexity, greater need to “distinguish” objects in terms of relationships.
What objects are related? How are they related?
• Shape
• Color
• Size
• Position
Greater complexity, greater need to “distinguish” objects in terms of relationships.
Proximity why are some close to each other – must be related.
Alignment.
Web Design

…understanding that people will see our designs in
terms of relationships is crucial to becoming a more
effective designer.
Web Design

It’s not enough to dish out information, as web
designers, our job is to break down that raw
information into meaningful visually relevant
information. (Jones, 2011)
Common principles to show Relationships






Size
Color
Contrast shows relative important. Dramatic shifts in
text-size or color will impart a message that
something is different.
Alignment - creates order between elements.
Repetition - assigns relative meaning. If all important
words are Blue, a blue word is important.
Proximity - separates elements from each other and
creates sub-hierarchies.
Size and hierarchy – bigger is important and gets attention
Apple | Craft Beer | Design Week
Leaders
Color and hierarchy – creating relationships with color and size
Leaders
Thinkers
Contrast and hierarchy – emphasizes how big and how little the objects are.
Contrast and hierarchy
Contrast shows relative important.
Contrast
Contrast
Subtraction
Contrast and hierarchy
Contrast
Contrast
Contrast and hierarchy
Contrast
Contrast
Changing from a light
background to dark
background can
separate the core
content of a page from
the footer.
Contrast and hierarchy
Contrast
Contrast
Alignment – No alignment
Subtraction
Alignment.
Alignment – square emphasis
Alignment – Row emphasis
Alignment – Row emphasis.
Repetition
Repetition
Working with structure and Hierarchy in Web Design | Part 1
Sed ut perspiciatis unde omnis iste natusasd error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam
rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui
dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum
exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem
vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui
dolorem eum fugiat quo voluptas nulla pariatur?
Hierarchy in Web Design
Sed ut perspiciatis unde omnis iste natusasd error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
Repetition- repeated patterns provide people useful information about the text.
Working with structure and Hierarchy in Web Design | Part 1
Sed ut perspiciatis unde omnis iste natusasd error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam
rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui
dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora
incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum
exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem
vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui
dolorem eum fugiat quo voluptas nulla pariatur?
Hierarchy in Web Design
Sed ut perspiciatis unde omnis iste natusasd error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt
explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
Proximity
Proximity