LAB 4 - Designing a website to demonstrate design principles

GOALS
Design principles help us design websites that will make users productive. The purpose of this
laboratory is to build a website for a service shop that will respect the design principles presented in
Dr. Norman's book Design of Everyday Things. The design principles we’re going to focus on are
visibility, feedback, affordance, mapping, constraints and consistency.
During this laboratory, you will need to:
• Learn a CSS framework, Bootstrap, to make website design easier with a more modern
and standardized look.
• Develop a semi-static site (responding only in Bootstrap components) in which you
pay close attention to design principles.
SUBMISSION DEADLINE
● Wednesday, March 3rd, 2021, 11:30 p.m.
SUBMISSION METHOD
● In Brightspace, the lab 4 contains a link to your submission.
● Don't submit files. Submit a link to your GitHub repo as well as your web page for this lab So
the TA can compare the rendering of your online grocery alternatives.
● WARNING: Any code or even "little piece of code" you take from a website such as stack
overflow or other should be accompanied by a comment that recognizes the source. You must,
in your submission text, state "Code for X inspired by (html link)")
SEG3125 Analysis and
Design of User Interfaces LAB 4 - Designing a website to
demonstrate design principles
INSTRUCTIONS / TUTORIALS TO FOLLOW
We are continuing the exploration of HTML/CSS/JavaScript technologies that are mostly used for
building websites. This week we will use a framework called Bootstrap. Next week we continue
withJQuery, because Bootstrap and JQuery are often used together. In Lab 4, we will focus only
on Bootstrap.
You've seen so far that HTML/CSS is used
to design your web page and that
Javascript allows you to perform actions
(modifying the DOM based on events).
Bootstrap is mainly to help with HTML
writing, having already pre-encoded
several styles into a CSS style sheet that
you need to import into your HTML code,
and having pre-programmed JavaScript
scripts in a script file that you also need to
import into your HTML.
Bootstrap has already done some of the work for you... It offers standardized styles for colors,
buttons, certain structural patterns, etc. All this to get a nicer website, with less effort. Now that
you've worked with basic HTML/CSS/JS in the last 2 labs, you'll be able to better appreciate what
Bootstrap has to offer.
I suggest you use, again, the w3schools.com site, to explore what is possible to do with Bootstrap 4.
You can also use the code I provide you (see Starting Point section) which contains several small bits
of code and links to the appropriate sections of the tutoriel on Bootstrap 4 in the w3schools site.
Design
In this lab, you must choose a service company from two options:
1. Hair Salon/ Barbershop
2. Bicycle Repair Shop
What is common to these companies is that:
• There is a physical place (address) to go to.
• You can make an appointment for a service (e.g., haircut, brake repair)
• Several services are offered (e.g., long cut, short cut, tune-up, repair)
I strongly suggest you first try to make paper sketches of your website. You must think monochrome
first, even if later you want to include colors. Thus, the paper sketch is the best way to propose
several quick ideas in monochrome.
Once you start programming, be sure to pay close attention to your color and font choices so that
they reflect the image you want to project for your site. One of our themes this week is visual
communication. Make sure you have a good visual communication.
Don't know where to start? Take inspiration from existing sites by seeing what you like and what you
don't like about the layout, the colors, the fonts, the alignment of the text. Ask yourself if these sites
offer good visibility and potential. Ask yourself what is the aesthetic coherence of the site and what
creates this consistency. Is the text readable (look at the alignment)?
The sites below are just examples.
https://www.atelier-velo.com/
http://www.cycosport.ca/
p://bikemobile.ca/
https://hairrepublic.ca/
https://metcalfe-barber-shop.business.site/ c.ca/
https://hairdynami
STARTING POINT
I provide a code file that uses Bootstrap components in a "mixed" way but shows the use of
Bootstrap. You can see the rendering here. I suggest you browse this code in which you can find
several comments and links to appropriate sections of the tutorials offered by the w3schools.
Don't forget that this is just a starting point, your site should reflect your design choices.
Programming
You must generate a web page to choose a service, a date, and provide your personal information
to book that service. We will continue this site next week using jQuery to add payment information
validation. But for this week your focus is ONLY on the design of your page, on design principles and
on using Bootstrap to implement your page.
You need to make a single page, because we need to have a "mobile first" design approach that aims
to present all the information in a downward mode. Your site should not contain side navigation (no
tab). This is not a general rule of design, it is only a constraint for this laboratory to force you towards
a vertical design, better corresponding to mobile phones.
Basic requirements of your page (Compulsory)
Your web page (one page) must respect the design principles listed below.
Visibility: Where am I? What can I do from here?
The following items must be present and easily visible (or accessible):
• Information:
o on which site the user is (logo, image)
o where to go (shop’s address)
o the services offered and their prices (the user does not want to be surprised on the
spot)
o Who are the experts? The user wants to be confident and to know a little more about
the hairdressers or mechanics.
• Actions
o Selecting a service
o Selecting a date and time
o Entering his contact information
So this is where much of your design should take place. You must think about how to organize the
information, and how to present it.
Affordance: I recognize what I see, and I know what to do.
The user must easily understand what to do and not just see what it can do:
• Use standard components (buttons, lists)
• Add "tooltip" for items if necessary (small explanations)
Mapping: I understand the results of my actions and choices (before I make them).
The user must easily understand what the result of his actions would be before taking action.
• Use photos to show short, medium, long, or hair color cuts.
• Use photos showing portions of bikes supported by each service (brake repair,
puncture, maintenance)
Consistency: The elements I see are consistent in the application, and consistent with
standards I know.
The user must recognize the industry standards inthe functionality, but feel a consistency
in your site that gives it its unique touch:
• Aesthetic consistency: Make sure you keep the same choices of fonts, colors, in your page.
WARNING: We need to think about the idea that "Fonts have moods." Bootstrap uses the
Helvetica Neue font, but maybe it doesn't fit your business. For example, is it a superserious and fast repair shop or a workshop with a younger, relaxed look where you can have
a coffee while waiting for your bike?
• Functional consistency
o External: Using the standard Bootstrap components gives you this
consistency of known features (lists, buttons)
o Internal: Bootstrap already suggests color choices to express different types of
messages (success, warning, danger, etc.), you can keep these choices if they seem
suitable for your website.
There will still be 2 principles (feedback and constraints) to explore next week.
Additional possibilities (Optional)
You already know Bootstrap, why not do the 2 sites, hairstyle, and bike, with the idea of
"reusing components" in mind. Would the choice of colors, fonts, images, be enough to have 2
different sites but that would have the same structure (same navigation and structuring
ofinformation)? If you do both sites, provide two links in your submission.
EVALUATION
● This lab is worth 3.5%.
● Any group who has followed the required design principles (visibility, affordance,
mapping, aesthetic coherence, functional coherence) and put an effort into the
conception will be awarded 10/10.
● Failure to provide code-inspired sources of online code will result in a score of zero.
● Any delay, beyond the deadline, will have a penalty of 10% per day of delay, up to 2 days.
Questions
● You can ask your questions during the lab session on Wednesday, February 24th.
● You can also send your questions to your TA Farouk (bfarouk@uottawa.ca)