Higher National Diploma in Digital Technologies

Unit 16 : Web Design & Development

Lecturer name
Unit Learning Outcomes
By the end of this unit students should be able to:

LO1 Explain server technologies and management services associated with

hosting and managing websites
LO2 Categorise website technologies, tools and software used to develop
websites
LO3 Utilise website technologies, tools and techniques with good design
principles
to create a multipage website
LO4 Create and use a Test Plan to review the performance and design of a
multipage website.
Web Design and
Development
What is a website?
A web site is:

•a presentation tool;

•a way to communicate;

•a learning tool;

•a teaching tool;

•a marketing important tool;

Step 1 Follow the Rules
Think before you do anything else, the four things you need to spend time thinking
about :
What is the purpose of the web page/site?

Who is your target audience?

What will bring your audience back?

Where will your audience be using the site?

Step 2
To create a website, you need to follow these rules:

Rule 1: YOU are NOT the USER.

What you understand is not what a user will understand; ask the users to design the site the way they want.

Rule 2: USERS are NOT PROFESIONALS

Users will not think carefully about the new added features in the Web site without your directions.

Rule 3: Give the common user a little control

Allow the user some choices and the ability to control color and themes on their accounts.
Step 3
To create a website, you need to follow these rules:

 Rule 4: Make sure the visual contents of a site relates to its function.
 A nice-looking design must enforce the website functionality

 Rule 5: Respect GUI and Web interface conventions.

 Designers need to respect conventions of navigation choices, navigation placement, colors, and so
on.

 Rule 6: Know and respect the Web and Internet medium constraints.
• Don’t ignore the differences in the emerging Web medium, color reproduction, bandwidth
limitations, and so on.
Wireframes
“What are
Wireframes?”
Wireframes
• What are wireframes?
• Why use them?
• Examples
The Design Process

At times, the design process can

seem very complicated, a lot of
things are happening at the same
time. Many people from different
disciplines are all working together
(and often simultaneously) on the
same project.

Everyone has their own role, and to

make a truly good product, the
communication between the different
parties involved must be good.
Interaction Design
• The task of an interaction
designer will be to primarily focus
on the structure and skeleton of
an interface.
• There are many tools that can be
used in this part of the design
process, one of the most
important being wireframes.

Jesse James Garret | The Elements of User Experience

Why use Wireframes?
• Before making the visual design,
you first make decisions about the
structure, content, layout, etc.
• Wireframes are a tool to
communicate these ideas.
• “Blueprint for design”
• Get everyone on the same page
Prototype for usability tests
• Easier to change a wireframe, than
a design!
The structure of Wireframes
Content
What will be displayed on this
site?
Information Hierarchy
How is this information
organized and displayed?
Functionality
How will this interface work?
Behaviour
How does it interact with the
user? How does it behave?
Types of Wireframes
Types of wireframes

Sketches
Quick / experiment Good
for feedback
Types of Wireframes
Types of Wireframes
 What is wrong with this Wireframe?
This is a bad wireframe!

Forget visual design

Avoid using color / gradients

Adding unnecessary elements makes the

wireframe less powerful, remember:

Wireframes focus only on the content and

interaction of the interface!
 How to start?
Start big! Start with the largest parts of the interface, the frame, header, footer, etc. Then work you way through
the smaller elements of the interface. The following slides will show a quick wireframe build-up.

Final tip!
Remember, your wireframe will be used by lots of different people for different purposes:

Designers Developers Project leaders Usability testers Clients

Homepage
Product Page
About Us Page
Contact Us Page
References
Frain, B. (2012) Responsive Web Design with HTML5 and CSS. UK: Packt Publishing.
Krug, S. (2013) Don’t Make Me Think: A Common-Sense Approach to Web Usability.
USA: New Riders.
Lidwell, W., Holden, K. and Butler, J. (2010) Universal Principles of Design, Revised
and Updated: 115 Ways to Enhance Usability, Influence Perception, Increase Appeal,
Make Better Design Decisions and Teach Through Design. USA: Rockport Publishers.
Useful Links:
Wireframes 0 http://userpathways.com/2008/06/26/the-what-when-and- why-of-wireframes/
(PDF) Wireframes - The how and the why http://vakgroep.cmd.hro.nl/iad/wp-content/uploads/
2008/12/wireframes_thehowandthewhy_v10.pdf
Designing for Interaction by Dan Saffer pgs 109 - 113
“Any Questions?”
References
Frain, B. (2012) Responsive Web Design with HTML5 and CSS. UK: Packt Publishing.
Krug, S. (2013) Don’t Make Me Think: A Common-Sense Approach to Web Usability. USA: New Riders.
Lidwell, W., Holden, K. and Butler, J. (2010) Universal Principles of Design, Revised and Updated: 115
Ways to Enhance Usability, Influence Perception, Increase Appeal, Make Better Design Decisions and
Teach Through Design. USA: Rockport Publishers.

Links
This unit links to the following related units:
Unit 38: Planning Social Media Campaigns
Unit 39: Digital Marketing