Module #3: Principles of Design (HTML) Flashcards
What is UX? What is it for? What is UI?
User experience (UX) refers to the utility
gained by a user while interacting with a
designed entity.
UX is used when referring to user’s
experience while interacting with digital
application (e.g., a web or mobile
application).
It is different from user interface (UI)
quality: A design can be visually appealing
and yet equally problematic for the user
7 Fundamental
Principles of Design
- Discoverability
- Feedback
- Conceptual Model
- Affordances
- Signifiers
- Mapping
- Constraints
What is Discoverability ?
Principle that ensures:
* It is possible to determine what actions are possible
* It is possible to determine the current state of the device
example: Problem Example 1: Site visitors are not visiting two important sections of
the site.
What is Feedback ? Give an example
The principle that ensures:
* There is full and continuous information about the results of actions
* There is full and continuous information about the current state of the product or service.
* After an action has been executed, it is easy to determine the new state.
Problem Example: An app user inputs their username and password, hits
enter, the page refreshes without going to next page and only the
username/password input boxes being emptied.
What is Conceptual Model? Give an example.
The principle that ensures:
* The design projects all the information needed to create a good conceptual model of the system, leading to understanding
and a feeling of control. The conceptual model enhances both discoverability and evaluation of results.
A conceptual model is basically a clear understanding of how a designed entity work.
Problem Example:
“I recently wasted half an hour trying to print a report that had many screenshots.
Several of the images printed only as “X.” Why? Was it a problem with Windows’98?
Or with Word 2000? Or was it that the vendor had yet to update the printer driver?
Maybe the printer simply had too little memory. The point is: I couldn’t figure it out, and
I have a Ph.D. and 28 years’ experience using computers. After messing with various
settings, I finally succeeded in getting my printout, but this small victory was no help
the next day, when we were suffered under a different piece of software.”
What is Affordances? give an example
The principle that ensures:
* The proper affordances exist to make the desired actions possible
Problem Example: a clickable link that
does not have a blue color or is not
underlined.
What is Signifiers? Give an example
Effective use of signifiers
ensures discoverability and that
the feedback is well
communicated and intelligible.
Signifiers ensure affordances
are detected
Problem Example: A Button
on a page without a
distinguishable border from
its background.
what is Mapping? Give an example
This principle ensures:
* The relationship between controls and their actions
follows the principles of good mapping, enhanced as
much as possible through spatial layout and temporal
contiguity.
Problem Example: A phased
application form hosted all on a
single page and without visual
hierarchies.
What is Constraints? give an example
Providing physical, logical, semantic,
and cultural constraints guides actions
and eases interpretation.
Problem Example: No back buttons,
enabling deleting of an image only
through right clicking (no delete
buttons)
Name the 7 a sentence explaning them. (that’s a summary)
Discoverability increases understanding of the available options and where
to perform them.
* Feedback communicates the response to our actions or the status of
systems.
* Conceptual models are simple explanations of how something works.
* Affordance is the perceived action of an object.
* Signifiers tell us exactly where to act.
* Mapping is the relationship between the controls and the effect they have.
* Constraints help restrict the kind of interactions that can take place.
5 Principles of Visual
Design (UI)
- Scale
- Visual Hierarchy
- Balance
- Contrast
- Gestalt Principles
Visual Design , what is Scale?
The principle of scale refers to using relative
size to signal importance and rank in a
composition.
* Most important elements in a design are
bigger than the ones that are less important.
* When the principle of scale is used properly
and the right elements are emphasized
Visual Design , what is Visual Hierarchy
The principle of visual hierarchy refers to
guiding the eye on the page so that it
attends to different design elements in the
order of their importance.
* Visual hierarchy controls the delivery of the
experience. If you have a hard time figuring
out where to look on a page, it’s more than
likely that its layout is missing a clear visual
hierarchy.
* To create a clear visual hierarchy, use 2–3
typeface sizes to indicate to users what
pieces of content are most important or at
the highest level in the page
Visual Design , what is Balance
- The principle of balance refers to a satisfying arrangement or proportion of
design elements. - Balance occurs when there is an equally distributed (but not necessarily
symmetrical) amount of visual signal on both sides of an imaginary axis
going through the middle of the screen. This axis is often vertical but can
also be horizontal.
Balance can be: - Symmetrical: elements are symmetrically distributed relative to the central imaginary axis
- Asymmetrical: elements are asymmetrically distributed relative to the central axis
- Radial: elements radiate out from a central, common point in a circular direction.
Visual Design , what is Contrast
The principle of contrast refers to the
juxtaposition of visually dissimilar
elements in order to convey the fact that
these elements are different (e.g.,
belong in different categories, have
different functions, behave differently).
* Contrast provides the eye with a
noticeable difference (e.g., in size or
color) between two objects.
Visual Design , what is Gestalt Principles
Explain how humans simplify and organize complex images that consist of
many elements, by subconsciously arranging the parts into an organized
system that creates a whole, rather than interpreting them as a series of
disparate elements.
* Gestalt principles capture our tendency to perceive the whole as opposed to
the individual elements.
* There are several Gestalt principles, including similarity, continuation,
closure, proximity, common region, figure/ground, and symmetry and order.
* Proximity is especially important for UX — it refers to the fact that items that are visually closer together are
perceived as part of the same group.
What is HTML? Understand it..
HTML (HyperText Markup Language)
- It is the standard language used to create web pages.
- It provides a way to structure content, similar to how a word processor
organizes text.
- HTML is made up of a series of elements. These elements instruct the web
browser (Edge, Chrome, Safari, etc.) on how to display the content.
- Elements act as labels, identifying parts of the content like:
- “This is my page’s heading.”
- “This is my first paragraph.”
What is an element?
HTML Elements
- Elements consist of two main parts: tags and content.
- Tags define how the content should appear, such as:
* A paragraph.
* Bolded text.
* An image, etc.
- Elements can be nested – meaning one element can be placed
inside another.
What is an attribute? Write Anchor tag example.
Attributes provide additional information to the browser about how a tag should
behave or appear.
Example 1 – Hyperlink (Anchor) Tag:
* < a.. href=”https://www.mcgill.ca”>To Another Century of expanding minds< /a>
Some attributes are necessary→ what is an anchor tag without an anchor?
Some are optional:
* < img… src=”img_girl.jpg” width=”500” height=”600” >
HTML Basic Tags examples (give the writing for it). Show how you close a tag.
- Head tag
- Body tag
- Heading Tag
- Paragraph tag
- Anchor tag
- Image tage
Head tag (< head >)
* Body tag (< body >
* Heading Tag (< h1>
* Paragraph tag (< p >)
* Anchor tag (< a>)
* Image tage (< img >)
close: < /h4 >
Links (write the anchore tag)
< a href=“https://mcgill.ca”>Click me!</a >
Images. Write how to do it
click on it to see as it is fucked up < img src=”pic_trulli.jpg” alt=”Italian Trulli” />
< img> : balise HTML pour insérer une image.
src=”pic_trulli.jpg” : définit le chemin vers l’image (ici, un fichier nommé pic_trulli.jpg).
alt=”Italian Trulli” : définit le texte alternatif, qui s’affiche si l’image ne peut pas être chargée (important pour l’accessibilité).
🔧 Remarque importante :
La balise < img> est auto-fermante
How do you leave a comment?
< !– This is a comment –>
Identifie and understand what happen if you omit certain parts:
1)protocol
2)domain
3)name
4)path
5)filename
Http :// www.modulemedia.com/ ourwork/ index.html
What happens if you omit parts of a URL
* If you omit the protocol, http:// will be used.
* If you omit the filename, the default document name for the web
server will be used.
* The default document name is typically index.html, default.htm,
or some variation.
Protocol (http/https):
What happens: The browser may assume http:// by default, but this can cause problems if the site requires https://.
Risk: May lead to errors, failed loading, or insecure connections.
Domain (e.g., www.modulemedia.com):
What happens: There’s no destination. The browser won’t know where to send the request — results in an error.
Risk: Page won’t load at all.
Name (e.g., “modulemedia” in the domain):
What happens: Same as omitting the full domain — you’ll get an error, as there’s no valid address.
Note: A domain without a name like “.com” or “.org” is incomplete.
Path (/ourwork/):
What happens: You’ll be directed to the homepage or the default index file (like index.html) in the root directory.
Example: http://www.modulemedia.com/ would still load the site.
Filename (index.html):
What happens: Most servers automatically serve a default file like index.html or index.php if no filename is specified.
Example: http://www.modulemedia.com/ourwork/ may still work if index.html is the default.
Q: What are the basic HTML tags needed to build a table from scratch?
- < table> – starts the table
- < tr> – defines a table row
- < th> – defines a header cell (appears bold + centered)
- < td> – defines a regular data cell
what is the basic structure needed to build a table
< table>
< tr>
< th>Header 1</th><th>Header 2</th>
< /tr>
< tr>
< td>Data 1</td><td>Data 2</td>
< /tr>
< /table>
this is a 2 by 2 table,
Q: What does “use the Tab button to visually order the code” mean in HTML tables?
A:
- The Tab button is used to indent lines of code
- Indenting makes the structure easier to read
- It shows which elements are inside (embedded in) others
- For example:
- <table> contains <tr>
- each <tr> contains < td> or < th>
- indenting helps you see this hierarchy clearly
- It doesn’t affect how the table looks in the browser—only how readable your code is!
Q: How do you build an unordered list in HTML and what do each of the elements mean?
A:
- < ul> – defines the unordered (bulleted) list
- < li> – defines a list item
- Each < li> must Embedded inside the <ul>
Structure example:
< ul>
< li>Coffee</li>
< li>Tea</li>
< li>Milk</li>
< /ul>
Result on the page:
* Coffee
* Tea
* Milk
Q: How do you build an ordered list in HTML and what do each of the elements mean?
A:
- < ol> – defines the ordered (numbered) list
- < li> – defines a list item
- Each <li> must go inside the <ol>
- Used when item order matters (steps, rankings, etc.)
- Indent for better readability
Structure example:
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Result on the page:
- Coffee
- Tea
- Milk
Q: What does the <form> element do in HTML and how is it structured?
A:
- < form> is a container for input elements
- Used to collect user data (text fields, checkboxes, radios, etc.)
- Wraps all form controls in a structured block
- Often used with attributes like action and method
Structure:
< form>
…form elements…
< /form>
Result:
Displays a form on the page where users can fill in data using various input fields.
Q: What does < input type=”text”> do in an HTML form?
<…type=”text”>
A:
- Creates a single-line text field
- Used to input names, emails, etc.
- Placed inside a <form>
Code:
< form>
< input type=”text”>
< /form>
Result:
[ ] ← a blank field to type in
Q: What does < input type=”radio”> do in an HTML form?
A:
- Creates a round radio button
- Used to choose only one option from a group
- Buttons in the same group must share the same name
Code:
< form>
< input type=”radio” name=”drink”> Coffee
< input type=”radio” name=”drink”> Tea
< /form>
Result:
( ) Coffee ( ) Tea
(Only one can be selected)
Q: What does < input type=”checkbox”> do in an HTML form?
type=”checkbox”
A:
- Creates a square checkbox
- Used to select one or more options
- Each box is independent
Code:
< form>
< input type=”checkbox”> Milk
< input type=”checkbox”> Sugar
< /form>
Result:
[ ] Milk [ ] Sugar
box to check
Q: What does < input type=”submit”> do in an HTML form?
<…type=”submit” value=send>
A:
- Creates a button that submits the form
- Sends form data to a server
- Needs to be inside a <form>
Code:
< form>
< input type=”submit” value=”Send”>
</form>
Result:
[ Send ]
click to send the info on a page
Q: What does < input type=”button”> do in an HTML form?
<…=”button”>
A:
- Creates a simple clickable button
- Does not submit the form
- Used for custom actions (usually with JavaScript)
Code:
< form>
< input type=”button” value=”Click Me”>
< /form>
Result:
[ Click Me ]
Q: How do you create a form with labeled text inputs for first and last names?
]
A:
- Use a <form> container
- Use <label> tags linked with for and id
- Use <input></input> for user input
- Use <br></br> to break lines</label>
Full Code:
< form>
< label for=”fname”>First name:</label><br></br>
< input type=”text” id=”fname” name=”fname”><br></br>
< label for=”lname”>Last name:</label><br></br>
< input type=”text” id=”lname” name=”lname”>
< /form>
Result:
First name: [ ]
Last name: [ ]
Q: How do the for attribute in <label> and the id in <input></input> work together?</label>
A:
- < label> adds a description for a form input
- for=”something” in the label must match the id=”something” in the input
- This links the label to the input field
- Clicking the label focuses the input box
- Improves accessibility and user experience
Code Example:
< label for=”fname”>First name:</label>
< input type=”text” id=”fname” name=”fname”>
Result:
First name: [ ]
Clicking “First name:” will place your cursor in the box.
Q: If the for and id are missing, will the label and input still display normally?
A:
- Yes — the visual display is the same
- The label still shows and the input box still works
- But: clicking the label won’t focus the input
- It makes the form less accessible and user-friendly
- Best practice is to always link them with for and id
Q: What does the value attribute do in an HTML input
A:
- Sets an initial value shown in the input field
- User can edit or delete it freely
- Used to pre-fill fields like names, emails, etc.
- Updated value is sent when the form is submitted
Example:
< input type=”text” value=”John”>
Result:
[ John ]
where to place the value attribute in a bigger code
✅ Full HTML Code (with value attribute):
< form>
< label for=”fname”>First name:< /label>< br>
< input type=”text” id=”fname” name=”fname” value=”John”>< br>
< label for=”lname”>Last name:< /label>< br>
< input type=”text” id=”lname” name=”lname” value=”Doe”>< br>
< input type=”submit” value=”Submit”>
< /form>
💻 What it looks like on the page (Result):
First name: [ John ]
Last name: [ Doe ]
[ Submit ]
Q: What does the < select> element do and how does it work with < option> and value?
A:
- Creates a drop-down menu
- Each choice is defined with an < option> tag
- Each < option> has a value sent to the server if selected
- Use selected to pre-select an option
- Use name so the selected value is included when the form is submitted
- The < label> is linked using for and the id of < select>
Code Example:
< label for=”cars”>Choose a car:< /label>
< select id=”cars” name=”cars”>
< option value=”volvo”>Volvo< /option>
< option value=”saab”>Saab< /option>
< option value=”fiat”selected>Fiat< /option>
< option value=”audi”>Audi< /option>
< /select>
Result:
Choose a car: [ Fiat ▼ ] (pre-selected)
Q: What is the purpose of the < div> tag in HTML?
Hello! |
A:
- Defines a division or section in a webpage
- Acts as a container for other HTML elements
- Used to group and organize content
- Can be styled using CSS
- By default, creates a line break before and after
- Does not look like a box unless CSS is added
Example Code (unstyled):
< div>
< p>Hello!< /p>
< /div>
Result (default): Just shows:
Hello!
(with line breaks before and after)
Example Code (styled like a box):
< style>
div {
border: 1px solid black;
padding: 10px;
}
< /style>
< div>
< p>Hello!< /p>
< /div>
Result (styled):
hello in a box
What is Bootstrap
-Front-end framework with pre-built styles
-Enables responsive design (e.g., mobile adaptability)
-Relies on pre-developed libraries to simplify coding
-Supports low-code, usability-focused, and user-friendly design trends
how to acces bootstrap framework
In your HTML page, in the head tag, include the following:
< link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css”>
< script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>
< script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js”></script>
< script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js”></script>
exemple of how to make a 3 by 2 table in bootstraps
< div class=”jumbotron”>
< h1>BS First Page< /h1>
< p>Resize this page!< /p>
< /div>
< div class=”container”>
< div class=”row”>
< div class=”col-sm-4”>
< h3>1st col< /h3>
< p>something interesting!< /p>
< /div>
< div class=”col-sm-4”>
< h3>2nd col< /h3>
< p>Here is another thought…< /p>
< /div>
< div class=”col-sm-4”>
< h3>3rd col< /h3>
< p>not short for ideas< /p>
< /div>
< /div>
< /div>
jumbotron: makes a big header box
container: keeps content centered
row: tells Bootstrap you want a row of columns
col-sm-4: tells Bootstrap how wide each column should be
What is Bootstrap best for?
-Creating a responsive grid layout
-Uses up to 12 columns (called spans)
-Spans can be combined (e.g., 4 + 8, or 6 + 6) to organize content
how to create a 2 by 2 table where the first row is cut in half
and the second is 1/3 , separation, 2/3. (style is for color background)
< div class=”row”>
< div class=”col-sm-6” style=”background-color: lightblue;”>
Row 1 - Column 1
< /div>
< div class=”col-sm-6” style=”background-color: lightgreen;”>
Row 1 - Column 2
</div>
< /div>
<!-- Row 2 -->
< div class=”row”>
< div class=”col-sm-4” style=”background-color: lightcoral;”>
Row 2 - Column 1
</div>
< div class=”col-sm- 8”style=”background-color: lightyellow;”>
Row 2 - Column 2
</div>
</div>
what is the General Structure of a Bootstrap Button
-Use btn base class + a style class
-Format:
< button type=”button” class=”btn btn-[style]”>Text< /button>
-Example:
< button class=”btn btn-primary”>Click me< /button>
how to acces bootstrap in the body
class= …
What Are Bootstrap Alerts Used For?
Bootstrap alerts are used to display quick messages to the user. These messages stand out with color and padding to show:
✅ Success
⚠️ Warnings
❌ Errors
ℹ️ Info
They’re perfect for things like:
“Your form was submitted successfully!”
“Warning: Password too short.”
“Error: Something went wrong.”
“Info: Updates are available.”
what is the general format of an alert
General format:
< div class=”alert alert-[style]”>Message here< /div>
what are bootstraps navigation bar
Bootstrap’s navbar helps you create:
A horizontal menu at the top of your page
A menu that can collapse into a hamburger icon on small screens
A responsive and stylish layout without writing much CSS
explain the ancor tag
An anchor tag in HTML is used to create hyperlinks, which allow users to click and be directed to another location — either within the same page or to a different webpage altogether.
The anchor tag is written as <a>, and the most important attribute it uses is href, which stands for hypertext reference.</a>
Basic Structure:
html
Copier
Modifier
< a href=”https://www.example.com”>Click here</a>
Explanation:
< a>: This is the opening anchor tag.
href=”…”: This is the link destination. It can be a URL, an email address, or an internal page section.
Click here: This is the clickable text that users will see.
</a>: This closes the anchor tag.
exemple of attributes
Attribute ; What it does
src ; Specifies the source file (used in < img>, < script>, etc.)
alt ; Alternative text for images
href ; Link destination (used in < a>)
id ; Unique identifier for an element
class ; Groups elements with the same style; style Inline CSS styles
title ; Tooltip text when hovering over an element
Key Points:
how to use an attribute
Attributes go in the opening tag.
They are written as attribute=”value”.
You can use multiple attributes in one tag, separated by spaces.
