Web Design with HTML & CSS Lesson 1
Jan 01, 2016
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.