web design process

22-3375 Web Design I // Columbia College Chicago

Site Planning & Structure

Quiz ReviewYes, you can use your notes.

Anatomy of a Web Page

Understanding Conventions & Expectations

Users have certain expectations when they visit a website, expectations that, if not met, could result in them having trouble understanding how it works. Therefore, it's important that websites are designed so that users can predict how things will work and where certain elements will be.

Conventions in Life

cultural conventions

limits of technology

familiarity from other media

ease of use

advertising

common platforms

trends/follow-the-leader

Some ways that conventions have developed

The First Web Page (1992)

Cultural conventions

Limits of technology

Limits of technology

Limits of technology

Limits of technology

Limits of technology

Familiarity from other media

Familiarity from other media

Familiarity from other media

Familiarity from other media

Ease of use

Advertising

Advertising

Common platforms

Trends

Trends

Trends

Trends

Trends

Trends

Trends

Trends

Trends

Trends

Trends

Header

Feature Area

Body/Content

Sidebar

Footer

Background

Basic Components of Most Sites

Header

Feature Area

Body/Content

Sidebar

Footer

Background

Student Presentations

How does the design use white space to create hierarchy and rhythm?

Give an example of how the site uses one or more gestalt principles

Give a simple breakdown of how the site is divided, how many types of containment areas are used?

Does the site clearly use a grid system?

Is there a clear logic to the spacing between elements, type size, and line-height?

What aspects of this design would you like to carry over to your own work?

Discuss Project 1

Site Planning

Planning1

Design2

Production & QA3

Launch +4

Standard Web Development Process

Where does the web designer !t in?

Graphic/Communication DesignReferred to as the “look & feel” of the site, but it is more than that. The skill of using type, imagery and layout to convey literal and emotional messages.

+UI (user interface) DesignThe skill of creating consistent, intuitive and engaging interactive systems. Include usability issues: is the user able to effectively complete their goals?

+UX (user experience) DesignAn umbrella skillset that asks the question: was the interaction positive? How could it be better?

Standard Web Development Process

Planning1

Design2

Production & QA3

Launch +4

Planning

This stage might include:

1. Statement of Work (SOW)

2. Creative Brief

3. Research and analysis: site goals, competitive research, de!ning the user, de!ning the shape and scope of the site.

4. Technical requirements

5. Schedules

6. Budget

Research and Analysis: De!ning the user

Before you can start !guring out the shape and structure, you need to have some idea of who you users are, and why they would come to your site. Unless your role is strictly on visual design, this is usually the !rst stage that a UI/UX designer is engaged.

This analysis can take the form of

use cases,

personas,

and/or user/task !owcharts.

Use Case

Personas

User/Task Flows

Research and Analysis: De!ning the shape and scope

The sitemap is the start of the IA phase of a project (information architecture). It is a schematic showing the pages and their relationships. It provides an overview of the site and navigation needs. This document and any user "ow outlines are closely related.

Standard Web Development Process

Planning1

Design2

Production & QA3

Launch +4

Design

This stage might include:

1. Wireframes

2. Moodboard/conceptual design

3. Static mockups

4. Asset production

5. Styleguide

Wireframes

Moodboards

Moodboards

Class Exercise

De!ne goals

De!ne user tasks

Competitive analysis

Positioning Exercises