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) designUser interface and experience designWeb document and style sheet productionScripting and programmingContent strategyMultimedia

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 GroupingsFirst, 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 (E-commerce).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 organizationEducational - 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 GenresPERSONAL E-COMMERCEBLOGSWEB APPS THAT WORKSTIMULATING ARTS & ENTERTAINMENTEDUCATIONAL FORUMSGRASSROOTS INFORMATION SITESNONPROFITS AS NETWORKS OF HELPGOVERNMENT

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 of relationships…

What do you see?

What do you see?

You likely see a large red box and a small blue box, not just two boxes.

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.

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.

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 Contrast

Contrast shows relative important.

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 DesignSed 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 DesignSed 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