Web Design Solutions

Web Design Solutions: Process Overview
Prepared by: Aparna Sanaka
Preparation date: 26/03/2006
Version: 1.0

Web Design Solutions – Process Overview | 1
Table of Contents
Overview ......................................................................................................................................................................2
Defining Web Sites & Web Applications .................................................................................................................................3
Definitions ....................................................................................................................................................................4
Chart (Solutions Overview) ................................................................................................................................................5
The Elements of User Experience ........................................................................................................................................6
Basics: Design Fundamentals ..............................................................................................................................................7
Methods of Prototyping.....................................................................................................................................................9
Using Low-Fidelity “Paper” Prototypes................................................................................................................................ 10
Design Process: Traditional Model...................................................................................................................................... 11
Design Process: Best Practice ........................................................................................................................................... 12
Summary .................................................................................................................................................................... 15
References.................................................................................................................................................................. 16

Overview
As the Web continues to extend its reach into our daily lives, an
increasing number of our interactions will happen online. The practical
implication of this for Interface Designers is lots of Web sites and Web
application projects that cover everything from corporate websites,
financial websites, blogs to sharing photos.
“Web design” is the design of web pages, websites and web applications.
The term also refers to web-based graphical user interface (GUI) design
using images, Cascading Style Sheets (CSS), and one of the HTML
standards.
But depending on the type and complexity of the tasks involved, different
design solutions may be better suited to enable the specific interactions
for each product or web page as the case may be. What specifics do you
choose and why? What types of interactivity and visual presentation does
each solution enable? What does each limit? What is the best process to
enable creating a design option within optimal time?
Web Interface Designers encounter these questions time and again. As a
result, I decided to document what I’ve learned and researched, what I
didn’t know about the elements that are essential to create good designs
as well as find and implement the best suitable design process in an
organization. The end result is this designer’s guide regarding process
implementation.
The right Web Design process needs to be created and implemented for
optimum utilization of effort as well as time. I hope this guide helps steer
you in the right direction.
Aparna Sanaka
Information Architect, MphasiS

Defining Web Sites & Web Applications
Web Site
A set of interconnected web pages, usually including a homepage,
generally located on the same server, and prepared and maintained as a
collection of information by a person, group, or organization
[Answers.com 2].
Web Application (Web-based application)
In software engineering, a web application--sometimes called a webapp
and much less frequently a weblication — is an application that's accessed
with a web browser over a network such as the Internet or an intranet
[Wikipedia 1].
To further understand the complexities involved in designing, I have
classified and defined the most popular client solutions available today.

Definitions
Thin Client
Web sites / Web applications that utilize
the Web browser for security, state
management, and script execution (run-
time). Data processing and storage occurs
on a remote server and not a user’s local
machine. Server request and response
occurs through the http protocol.
The primary benefits of thin clients are
wide reach (accessible by anyone with a
Web browser), open development platform
(built on popular open standards), no
footprint (quick download, no artifacts on
user machines beyond browser cookies),
and deployment/manageability (distributed
and maintained from a central source).
Thin Client Solutions:
HTML, XHTML
HTML, JavaScript, and CSS (DHTML)
DHTML with Remote Scripting via iFrame
DHTML with XMLhttpRequest (AJAX)
Rich Internet Application (RIA)
Web applications that enable richer, locally
processed user interactions (fluid animation,
multimedia content, real time validation,
etc.) and advanced remote messaging (Java
Objects, Web Services, etc.). Sun’s Java plug-
in and Macromedia’s Flash are two of the
most common RIA run-times. RIAs can only
run in a Web browser within embedded plug-
ins.
The HTTP communication layer used by Thin
Client applications technically does not
support guaranteed message delivery, does
not guarantee the order of message delivery,
and does not support server-initiated
communications. Many RIA communication
layers provide reliable messaging and enable
server “pushes” of content.
Thin Clients that utilize asynchronous
JavaScript-driven server requests and
responses and advanced DHMTL user
interactions (a combination of technologies
frequently referred to as AJAX) are
sometimes considered JavaScript RIAs.
A Thin Client can embed (integrate through a
Web browser plug-in) an RIA (i.e. a Flash
module in a DHTML application).
Rich Internet Application Solutions:
Flash 6 (and higher)
Flash
Java Applets
Active X
Rich Client (smart client, desktop client)
Web-connected applications that do not run
within the Web browser and can be delivered
as compiled code.
Rich Clients leverage local processing to
enable rich interactions and can utilize
Web Services to connect to distributed data
sources and auto-update. Unlike Thin Client
applications, Rich Clients can be used
offline and more easily integrate with local
hardware and software.
A Rich Client can embed a Thin Client (i.e. a
desktop application with an integrated Web
browser within which a thin client application
can run.
Rich Client Solutions:
Windows Smart Clients
Java Web Start

Chart (Solutions Overview)
The chart below overlays popular Web application technology
solutions on a continuum from Thin to Rich client.
Thin Client
Delivered in the Web browser; uses
browser security, and script
execution; http for data request /
response.
Rich Internet Application (RIA)
Usually delivered as embedded
run-time within Web browser
(plug-ins); goes beyond http for
remote data request/response.
Rich Client
Compiled run-time
on local machine; can
use local and remote
resources; can run
offline.

The Elements of User Experience
A basic duality: The Web was originally conceived as a hyper textual
information space; but the development of increasingly sophisticated
front- and back-end technologies has fostered its use as a remote
software interface. [Jesse James Garret 3]
Visual Design: graphic treatment of
interface elements (the "look" in
"look-and-feel")
Interface Design: as in traditional
HCI: design of interface elements to
facilitate user interaction with
functionality
Information Design: To design the
presentation of information to
facilitate understanding
Interaction Design: development of
application flows to facilitate user
tasks, defining how the user
interacts with site functionality
Functional Specifications: "feature
set": detailed descriptions of
functionality the site must include
in order to meet user needs
User Needs: externally derived
goals for the site; identified through
user research.
Site Objectives: business, creative,
or other internally derived
Task oriented
Visual Design: visual treatment of
text, graphic page elements and
navigational components
Navigation Design: design of
interface elements to facilitate the
user's movement through the
information architecture
Information Design: To design the
presentation of information
to facilitate understanding
Information Architecture:
structural design of the information
space to facilitate intuitive access to
content
Content Requirements: definition
of content elements required in the
site in order to meet user needs
User Needs: externally derived
goals for the site; identified through
user research.
Site Objectives: business, creative,
or other internally derived
Information oriented
Web as hypertext systemWeb as software interface

Basics: Design Fundamentals
Color
This is the first and most important aspect. Color is everything.
Make sure the color is eye-catching but possible to look at. If you
can't stare at the color for at least the minimum amount of time
that you'd want your user’s attention, then don't use it.
Line
It doesn't mean just "a line" it means the line of the elements in
your project. Stand back and squint at your creation. Notice the
line of the text and the images. Where are the lines moving? They
should all direct your user's attention from the top of your page
to the bottom in a seamless movement. If you notice an out of
place line that directs your eyes back to the top of the page or
stops it all together then you need to rearrange a few items.
Form
Related to line. Squint again and notice the text as a block, or
rectangular form, instead of individual lines. Notice the images or
art as shapes. And notice the entire piece as a form. All of the
forms should flow from one to another. Each form should direct
your eye to the next form on the page from top to bottom, again
in a seamless flowing line. ‘Symmetry’ is the key.
Fonts
Choosing the right typeface for your website copy is important, it
should fit the character of your site, be easy to read on a
computer screen, and should widely available across many
browsers and operating systems.
Movement
This is very important. You want your customer to start at the
top left corner and end in the bottom right corner. The
traditional form of movement is a "Z" meaning the eye should
start in the top left, go to the top right, make a diagonal to
the bottom left, and end up in the bottom right. This form is
ideal for advertising and web pages with a lot of graphics or
images. The exception would be a page with all text, where
you would want the reader's eye to move left to right on each
line.
Space (Negative space)
You pay attention to the amount of space that you use on your
projects. What about the space that you don't use? Do you
notice that? Well it's just as important. Stand back and squint
again. Notice the percentage of items filling up your project,
what is the percentage of negative, unused space? While you
want to make the most of your space available, you don't
want all of it used up either. An appropriate percentage can
be anywhere from 60% to 80% used space and 40% to 20%
negative or unused space. Keep your percentages in that
range and you'll have a nicely balanced web page, or project.
Lastly, Remember one thing, when it doubt simplify.
[Kelly Paal 4]

Exploring Design Ideas
Brainstorm – use the basic ideation tool:
Let the ideas flow, record them for later evaluation.
Give yourself lots of choices, make room for new ideas.
Build on/transform/twist/translate/modify your own ideas.
List – questions, attributes, options, alternatives, limitations,
challenges.
Analogize – what is this problem/material/situation like? – sketch it
Project – yourself into the problem – sketch it
Fantasize – about having a complete solution – sketch it.
Plan – your time, your materials, your construction –diagram &
organize
Sketch at every step
- Explore the problem & situation in which it occurs.
- Visualize all the options/attributes/alternatives that you've listed.
- Use quick thumbnails to get ideas down as they flash by.
- Use detailed, complete drawings to really explore an idea
- Use vividness and clarity to provoke clear seeing and understanding
Rules for Brainstorming
• Be Visual
• Defer judgment
• Encourage Wild Ideas
• Build on the Ideas of Others
• Go for Quantity
• One Conversation at a Time
• Stay Focused on the Topic
• Create Idea Logs
What are Idea Logs?
It is a complete graphic record of all your thinking on a project.
It's a place to store your ideas as you have them.
It's also a tool for making ideas happen. It becomes a personal
resource for your own creative imagination. It's not a medium
for communicating to others – it's just for you.
Why keep an idea log?
 To record your ideas so you won't forget them.
 To hold your ideas so you can evaluate them later.
 To help clarify, make ideas tangible that are floating around in
your head.
 To clear your mind of old ideas so there's space for new ones.
 Because "...one good idea leads to another..."
 To give your ideas the importance they're worthy of.

Methods of Prototyping
Prototyping
 Allows multiple parties to envision together
– Designers
– Users
– Engineering, marketing, planning etc
• Reflective conversation with the materials (sketches, storyboards,
flipbooks, flow charts / diagrams)
• Focus for identifying alternatives and tradeoffs
Example: Sketch
Example: Storyboards, Flip books, Flow Diagrams
Storyboard is a series of
illustrations that represent
a process, such as the steps
of interacting with a
computer or website.
Storyboards can be used for
checking that the steps of a
process make sense to the
user once the details are
sketched.
Flip book is a
book with a series
of pictures that
vary gradually
from one page to
the next
Flow Diagrams
are an illustration
showing how a
system will work
A sketch is a drawing or other composition
that is not intended as a finished work.
Sketches usually serve to store ideas for
later use.

Using Low-Fidelity “Paper” Prototypes
Paper Prototyping
It is the creation of low-cost representations of the user interface to
a system or a web site as a method of brainstorming, creating,
testing and communicating ideas about the system being developed.
Facts
Advantages
 Allows design team to identify major navigation and usability
problems before spending a lot of time and money
developing and coding user interfaces.
 If the prototype is sufficiently well developed it can be used
to support metric-based evaluations.
 The prototype can help to communicate the details of the
user interface to the whole design team as well as to users. It
can also be used as an awareness training tool with users.
Disadvantages
 Rushing in to develop a prototype may exclude other design
ideas.
 Design features may be limited by the scope of the
prototyping tool.
– Also called: Early prototyping,
Low fidelity prototyping,
Rapid prototyping
– Lifecycle stages:
Requirements, Design
Example: Paper Prototype

Design Process: Traditional Model
Client Brief
(Document / Call
/ after an IA
meets the client)
Design options
based on IA doc
IA document
Design Review
Team approval
Iterations
(if any)
Designs sent to
client
Use of Images /
Icons repository
Existing Design
(Template bank)
modified
Design Review
Team approval
Iterations
(if any)
Designs sent to
client
(Alternative)
Client Brief
(Document / Call
with the client)
Simple Iterative Model
In the Simple Iterative Model, designing is at
an isolated level, an individual activity. There
is minimum interaction between the
designers, business analysts, information
architects etc.

Design Process: Best Practice
Client Brief
(Document / Call
/ after an IA
meets the client)
Discuss Idea Logs,
Brainstorming
sessions
IA document
(based on Focus &
Research of users
Edit, Create
Paper Prototypes
Test,
Iterations
Designs sent to
client
Participatory Model
In the Participatory Model, designing is at a
collaborative level, a group activity. There
are brainstorming sessions between the
designers, business analysts, information
architects etc.
‘Brainstorming’ is an inexhaustible source of
inspiration and fresh thinking.
Brainstorming == More Ideas == More Creative
== Better Designs
Maintaining Idea Logs, creating paper
prototypes are some of the best ways to
arrive at better designs quickly. Testing and
modifying is simpler too.
Designs created

A common pattern for successful design processes involves five
activities: focus, research, brainstorming, editing, and testing.
It is common at any given point in the design process to be
performing a mixture of these activities.
It may be helpful to view the design process as a repeated series
of contractions and expansions on the scope of ideas. Focusing on
a particular class of user contracts the scope of ideas. Research
typically serves to both contract and expand the scope of ideas.
It is more relevant as an information gathering step, and thus
typically expands more than it contracts. Brainstorming expands
the scope of ideas while Editing contracts it. Testing also
contracts the scope of ideas, as they are compared against reality
and often culled as a result.
Focus
This is the most complex activity in the design process. Choosing
the type of user to focus on, involves consideration of diverse
areas from the market (what can be sold, what will people be
open to) to development (what can be reasonably implemented).
These are ideal candidates to focus on. In any case, try to
document in a concrete way “what class of users performs which
activities”.
Research
Major Design improvements usually stem from insights about
people. These insights can concern many aspects of user's
lives. A good way to encapsulate this information is as a
“persona.” A persona is a fictitious character that embodies
the stereotypical attributes (based on research!) of the user
class you will be designing for.
Another major avenue of research, of course, is existing
products (competitive products, complementary products, and
earlier versions of your own product). Don't just look at what
these products do, but try to infer why particular design
decisions were made. Also, be sure to see how people use
these products, what features they ignore, etc. Try to figure
out why.
Brainstorming
Brainstorming is the most “fruity” activity in the process. It is
critical to designing a product that's more than just a
refinement of existing products.
The goal of brainstorming is to provide ample leaping points
to new ideas in an unfettered environment. If research is
acquiring new information, brainstorming is building new
associations using that information. Brainstorming is one of
the best ways to transform information into insight.

Maintaining Idea Logs and bringing these ideas during
brainstorming is an ideal way to present to the group in order to
gather views.
Edit
The first step of editing is to cull the least interesting ideas. Just
go through the brainstorming “record” (either captured from a
white board, a flip book or a flow diagram) and pick out any ideas
that seem interesting. Often at the end of a brainstorming session
it will be clear what the most interesting ideas are. Once you
have several good mixes of ideas, try throwing together some
simple mock ups, paper prototypes, or design overviews.
Testing
It is important to test early prototypes. This sort of testing serves
as a reality-check on the basic ideas you are using for the
interface / website as the case may be. You may want to test on
specific points that comprise of information architecture
elements, usability goals and user interface requirements. The
best way to keep improving is to put a number against each of
the design evaluation criteria. Based on these numbers the design
maybe evaluated. Testing maybe performed by a set of
evaluators and then their evaluations may be combined to arrive
at the best design option.
Iterations maybe completed based on the results of the testing
exercise leading to the final design.
Design Evaluation Criteria
Information Architecture
 User-focused homepage
 Content organization & hierarchy
 Clear & consistent navigation
 Labeling
Usability Goals
 Learnability
 Ease of Use
 Speed of Use
 Error free Use
 Retention over time
User Interface
 Branding and colors
 Clear & clean layout
 Use of screen real estate
 Readability

Summary
Good user centered design can be seen as a luxury. A luxury that
is hard to justify when trying to run on web time. Even the
enlightened manager might say, "You know, we realize that user
experience is SO important to our business but how is it possible
when we are constantly stretched at full capacity?"
However, building that understanding of the user, which is a
prerequisite for any form of user centered design, does take
time.
In the long run, it is worth the time and effort to create a more
valid design for your business rather than compromising on
quality in lieu of the time factor.
Taking small steps in this direction of implementing and working
with a process would ensure design success. It is backed with
sound logical reasoning behind every aspect that is chosen to
create the final design.

References
[1] Def: Web Design – www.wikipedia.com
[2] Def: Web Site – www.answers.com
[3]Jesse James Garret: The elements of User Experience -
http://www.jjg.net/elements/
[4] Kelly Paal – Basic Graphic Design
http://www.graphicdesignweb.net/articles/Basic-Graphic-
Design-Elements/
Kevin Lynch. Rich Internet Applications: It's Happening!,
Macromedia http://www.klynch.com/archives/000074.html
http://www.stcsig.org/usability/topics/articles/ucd%20_web_
devel.html
http://www.stanford.edu/class/cs147/assignments/00-idea-
log.html
http://developer.gnome.org/projects/gup/hig/
http://www.digitalweb.com/articles/usability_for_rich_inter
net_applications/
http://www-3.ibm.com/ibm/easy/eou_ext.nsf/Publish/602

Web Design Solutions

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Web Design Solutions

Ähnlich wie Web Design Solutions (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Web Design Solutions