Unit 28 Week 5

Web Design
The process of designing
a website
Image from: http://antiqueradios.com/forums/viewtopic.php?f=1&t=188309&start=20

Objectives
• To be able to describe an overview of
a typical web design process
• To have experience with a range of
tools to aid the web design process
• To create simple sketches/mockups
of websites

Designing a Website
First up: Don’t imagine we jump
straight into HTML and CSS as soon as
a project task has been set!


Web Design is a process
• If we miss out steps or try to take
shortcuts we will not produce our
best work
• The evidence of following this
process will be important for the
assignments you submit in the rest of
this unit

The Process

Gather
Info

Plan

Design

Develop

Test &
deliver

Maintain


Gather Information
Key Questions

Possible Deliverables

• What is the purpose of the
site?
• What goals do you want to
achieve by building the site?
• Who is the target audience – a
specific group of people who
will help reach your goal?
• What content should be on
your site?

• Notes
• Mindmaps
• User profiles


Planning
Key Questions


• What should be in the site
map?
• Who is the end user?
• What technologies do we plan
on using?
• What is the timeline for
completion?

•
•
•
•
•

Notes
Mindmaps
User profiles
Site map
Development plan/
timeline


Design
Key Questions


• Who is the end user? How can
we meet their needs?
• What does the home page look
like?
• What colours, fonts, images
etc. will we use?
• What feedback does the client
have?
• Can we include all the required
functionality?

•
•
•
•
•

Sketches
Wireframes
Moodboards
Mockups
Prototypes

Increasing
complexity


Development
Key Questions


• How can I create a webpage
from the design?
• How can this feature be best
implemented?
• What is the structure of the
page?

•
•
•
•

Prototypes
Templates
HTML + CSS webpages
Live website on a
testing server


Testing & Delivery
Key Questions


• Does it work as designed?
• Does it meet the standards for
the chosen technologies? Does
the code validate?
• Does it function on a range of
devices/browsers?
• Does it meet the needs of the
user/client?
• Where do we finally upload it?

•
•
•
•

Test plan
Proof of validation
End-user testing
Uploaded, live website


Maintenance
Key Questions


• Does any content need to be
changed/updated/added?
• Is the site visible on search
engines
• Is there user feedback that
needs to be taken onboard?

• Updates to the live
website
• SEO/SES reports


What to do with this?
• Set up the template for the design
report
• Use the key questions and
deliverables from the powerpoint to
make the heading pages for each
section of the process

What to do with this?
• We need to practice this process and
how to create these deliverables
• It will help to discuss and share ideas
at this stage


Practicing Web Design
• Your client: A small secondary school in
south Birmingham
• You should:
– Discuss ideas – make notes or a mindmap
– Create a/some user profiles
– Make some sketches or wireframes of
ideas
– Create a moodboard

Present your ideas
Show us what you have – describe &
explain what you’ve thought about,
the designs etc.


User Profiles
• Description of an imaginary person
that represents the intended target
audience
• Can include quite detailed stories
about who they are, what they want,
how the site can help them.

Site Map
• To plan out the links between sites
• Do all link to all the others?
• Are there key ‘central’ pages that link
to a number of others?


Development Plan
• Timeline or Gantt Chart
• To plan order and time required for
each part of the process
• Key deadlines for deliverables


Sketches
• Literally hand drawn ideas for layout,
annotated with colours,
ideas about
images etc.
• Quick & easy to
do, no pressure,
no problem to
throw out!

Wireframes
• A computer version of the sketch –
no effort put into styling,
just position and
annotate with
more detail if
necessary

Moodboards
• Just like in Art or DT work
• Combination of images,
colours, fonts,
ideas, some notes
• Not about layout,
but just how it will
look

Mockups
• Using image editing software
• Exactly how the website will look –
fonts, backgrounds, colours etc.
• Often uses fake “filler” text called
“Lorem ipsum”
• Takes longer to do than a sketch or
wireframe but quicker than coding
HTML/CSS

Prototypes
• Actual HTML/CSS of the website
• Often used when a complex “Content
Management System” will be created to
go behind the scenes to show how the
web design works separately from the
CMS
• Still work to do before it’s a complete
site – content, images etc. will only be
partially done


Templates
• An outline page, just like the “slide
master” view in PowerPoint
• No content, blank and ready to be
filled in with all the details


Testing Server
• If you have a big brand you don’t
want a half finished site on your
main web page!
• A ‘testing server’ is only accessible to
the developers, anyone involved in
testing (possibly including the client)
• It’s an actual webserver, just private
to those people only

Test Plan
• Testing is on-going throughout the
development, of course!
• Testing must be done by end users
and client to ensure it is clear to
them and does what it should
• Results recorded in test plan

Validating Code
• Broken HTML/CSS may work or it
may not – and it may be different on
different browsers & devices
• There are sites that will check your
code to make sure it is valid
• The evidence needs to be shown to
the client

Delivery
• Once testing has been completed to
a satisfactory standard, the website
will “go live” to the actual internet!
• This means uploading it to the
webserver, removing the old site
• It’s important to have a smooth
transition!

Unit 28 Week 5

More Related Content

What's hot

Similar to Unit 28 Week 5

More from MrJRogers

Recently uploaded

Unit 28 Week 5