Web Design with HTML & CSS Lesson 1. Planning Your Website Good design comes from decisions that designers make in order to have a certain effect.

Web Design with

HTML & CSS Lesson 1

Pla

nnin

g Y

our

Websi

te

Good design comes from

decisions that designers

make in order to have a

certain effect on their

potential customers viewing the websites.

Therefore, It is important

to understand the fundamentals of design in

order to be able to create

well designed websites.

There

are

8 S

tages

of

Pla

nnin

g a

websi

te

The categories – 1.Defining goals &

strategy, 2.Research, 3. Information Architecture, 4.Sketching,5.Wireframe6.Mockups7.Prototype8.UX

Sta

ges

expla

ined

Imagine the following scenario –

There is a gentleman, called,

Tad. He loves designing T-shirts

and has been doing so since he

was a teenager. He is not a

digital native but he is business

minded and knows well that

selling from his shop only, puts

him at a disadvantage. He

therefore starts looking for a

good company that designs

websites. He finally finds one,

called ‘Zeb designs’

Tad, t

he T-

shir

t desi

gner

He makes an appointment

to see one of the designers

at Zeb designs.He is greeted by the

receptionist and is asked to

have a seat.A few minutes later, one of

the designers greets him

and takes him into another

room in the office.He is greeted by six other

designers

The desi

gners

in

troduce

th

em

selv

es

*Goal and strategy*ResearchGood morning, I’m Susie and I will

be responsible for finding out about

your goals and will inform you of

the strategies I will adopt to achieve

your goal. I will also be researching

about your type of business to seek

out competition.*Information Architect

* SketchingGood morning, I am Armen and I

shall be organizing the structure

and the layout of your web pages to

ensure success. I will also show you

a few layout sketches.

Intr

oduct

ions

Cont’

d

*Wireframes, *MockupsGood morning, I am Laticia and

I shall be responsible for your

website wireframe and mockup*Prototype *User Experience (UX)

Good morning, I am Mike and I

will be producing a prototype

of your website and employ

people to put the site to test

at various stages of design.

Thre

e im

port

ant

quest

ions

Before we set to work, we need

to know three facts–1.What is your website going

to be about (Goal)2.How much are able to invest

in your website (money will

determine how much work

goes into building the

website)3.When do you need this

website? (a deadline will

determine quality of work

Cust

om

er

Answ

ers

I design T-shirts for tennis players and

I sell from my shop in Brentwood but

fewer people are walking into the

shop and more people are shopping

online. He then takes out one of his

flyers that he had a print shop, print

50,000 copies and distribute to locals,

for $200I guess my goal is to reach to

companies all over the world as the

most unique designers of T-shirts for

Tennis players.My budget is about $1000 - $1200

I don’t really have a perishable

product to have a deadline but I

would like the site to be up and

running within three months, max.

Desi

gners

exp

lain

-

Goal, Strategy, Research

Susie speaks – The reason I need to know the goal

of your website is to built a site that

serves its purpose. You clearly set

out your goal to be the most unique

T-shirt designer for Tennis players.

Knowing your goal will help me

design web pages with tennis

players in mind rather than any

other sport.This information will help focus my

Research. I will be analyzing

competition, how their site is

designed and which ones have more

success than others.

Desi

gners

exp

lain

co

nt’

d

Information Architecture

SketchingArmen speaks –Based on the website goal, I’ll be

making decisions about the best

structure or layout to help users

navigate from A to B with ease. We

will be discussing the benefits of

Horizontal vs Vertical navigation

menus.

Arm

en co

nti

nues

-

info

rmati

on

arc

hit

ect

ure

I’ll be making many sketches like the following -

Desi

gners

ex

pla

in -

Wireframes, MockupsLaticia speaks –Hi, I will be creating the wireframe

and the mockup.The wireframe of your website will

be in black & white or gray and I’ll

be organizing the content rather

than the visual aspects.Then I shall be creating Mockups to

include the visual elements such as

the look of the buttons, navigation

bars, typography, layout, all the T-

shirt images. I will create a few different styles

for you to review like the following -

Lati

cia

conti

nues

Lati

cia C

onti

nues -

Desi

gners

exp

lain

-

Prototype and Usability testing

Mike Speaks,Hi, I shall be building an example or

a model of the real thing, the site will

be fully functional with all the

buttons, animation and the shopping

cart.I also put the site to test at various

stages of design. I appoint users to

use particular section of a page to

find out if it was user friendly. I use

their feedback to come up with

solutions and integrate the solution

into the site. Let me show you an

example of a prototype that you can

actually interact with.

Mik

e c

onti

nues

Mik

e c

onti

nues

-

And users will be asked to put the pages into test by

answering questions like this –

1. What are your first impressions of the layout of

this page immediately upon viewing it?

2. What section of the page does your eye go to

first?3. Is that section the most important element on

the page?4. What associations do the color and images

evoke?5. Without clicking on anything on the site,

describe the navigation choices you see on the

home page and indicate what you think they do.

6. Without clicking on anything yet, if you were

exploring, what would you click on first and

why?7. Go head and pretend to be shopping online and

go through the motions of putting an item in the

cart and describe your experience.

Ta

d

The customer is impressed

and writes a check for $750

for the initial payment.He also leaves his contact

details for a constant

communication and collaboration.He leaves the office excited

for a better future for

himself and his family.