Interactive Design - Exercises

on

28/08/2023 - 16/10/2023 / Week 1 - Week 8
Joey Lok Wai San / 0350857
Interactive Design / Bachelor of Design (Hons) in Creative Media 
Exercises


TABLE OF CONTENTS


LECTURES
WEEK 1 | Module Briefing 
In Week 1, Mr. Shamsul introduced us to the module along with the assignments we will be doing. We then signed up to Netlify, and looked at award-winning websites from https://www.csswinner.com/winners. 

WEEK 2 | Usability 
There are five stages of design thinking: empathise, define, ideate, prototype, test. An interface should not be complicated. The five key principles of usability include: 
  1. Consistency - Consistent design is intuitive. It ensures that your website looks coherent and works harmoniously. Similar-looking elements should produce the same outcome.
  2. Simplicity - User interfaces should be simple for users. Simple means reducing the number of steps in a process. E.g to subscribe to an app, you can sign up with your Google account instead of filling up a form. 
  3. Visibility - Users will know about visible elements such as thumbnails of photos, symbols, and buttons (a bright colour button is a call-to button). If the element is hidden, it is difficult to know about and use.
  4. Feedback - A result of an interaction. Without feedback, users will not know if a task is completed (e.g. whether payment succeeded). E.g. a loading icon, a progression bar - when you download something, "thank you for completing the form", and a PC sound when a task fails. On a website, a dialogue box will appear when a task fails. 
  5. Error Prevention -  Alerts when the user is making an error, and does a task without making a mistake. E.g. An asterisk to ensure the form is filled out, suggesting a stronger password, and red lines for spelling errors. 

Fig. 1.1 Lecture Slides - Usability, Week 2

We did a group activity in class where we were given a scenario and had to design a new interface to solve a particular problem or meet a particular user need. We created a basic prototype using paper. Our scenario: 

Scenario 1:
Your group is tasked with designing a new e-commerce website for a local clothing store.
  • User need: Users want to be able to easily browse and purchase clothing items online, with clear product descriptions and images, and a simple checkout process.
  • Usability principles to consider: Consistency, Simplicity, Visibility, Error prevention

Fig. 1.2 Group Activity, Week 2

WEEK 3 | Understanding Website Structure
Website structure affects user experience, SEO, and overall website performance. A good structure helps users find information easily and keeps them engaged. They are divided into 3 sections: header, body, and footer.
  1. The header consists of a logo, navigation menu, and contact information. It is best to place the logo on the left. 
  2. The body is the main content area. It consists of text, images, videos, and other multimedia elements. There needs to be sufficient information hierarchy and contrast to have good readability. 
  3. The footer length depends on what the website provides. It consists of copyright information, website name, links to important pages, and contact details. You can include links to the top parts of the website.
Organizing content: Use headings (H1, H2, H3, etc.) to create a hierarchical structure. E.g. H1 - main heading, H2 - subheading, H3 - sub-subheading, etc. The grouping must be logical with clear labels for each section.

Navigation menus: Needs clear and concise labels for menu items. Use dropdown menus for complex sites.
The hamburger icon menu should only be used on a smaller size screen. You should not hide your navigation on a large screen.

Fig. 1.3 Lecture Slides - Understanding Website Structure, Week 3

We did a group activity in class where we designed a navigation menu for a fictional (e-commerce store) website.


Fig. 1.4 Group Activity, Week 3

WEEK 4 | The Web
HTML (Hyper Text Markup Language): The standard markup language for creating web pages. HTML codes have two sides, an open and a close.
CSS (Cascading Style Sheets): Style the web page created from HTML. 

*Used only in lowercase and in American English. 
Add opening and closing tabs first, then enter add space to add content  

Attributes (property and value)
Attribute has property and value. You need a space after one attribute to add another attribute. property="value".
 
Head, body, paragraph
<head> section has the <title> which is the icons for the tabs.
<body> section is all the elements you want to display in the browser. 
<h1> main heading, <h2> subheading, <h3> to <h6> further subheadings. Do not use <b> bold for headings, as <h1>, <h2> etc. are already bold  
<p> tag for a new paragraph. To add a new line in the paragraph, use <br> line break

Lists
<ol> Ordered lists have numbers
<ul> Unordered lists have bullet points 
<li> List item after opening with <ol> <ul>

Links
Use <a> to create links 
<a href="URL or path">text</a>
Href is an attribute and hyperlink reference 
Can add alt and title for your link 

Images
Add images using one side tag <img> 
<img src="link.jpg">

Add file name then image name 
<img src="Images/Beach.jpg" width="200" alt="The Beach" title="Logo"/>
        Height will follow the width
        Alt will show when the image is broken 
        Title will show at the cursor


Fig. 1.5 Lecture Slides - The Web, Week 4

We then did some computer hacking- I mean, creating a Personal Profile Webpage using HTML.

Click here for my Personal Profile Webpage!


Fig. 1.6 In-class Exercise - Webpage, Week 4
 
WEEK 5 | HTML & CSS
Dreamweaver:
Create a new page: file → new → link HTML if there's one.
Define/ manage the site: files panel -> manage sites -> new site -> name the site -> locate the folder (every time you start a project, create a new folder) -> save. Always define a site by clicking on manage sites  
Insert window: new paragraph, image, table, etc. "Div" is used to create a website with a layout, generic with nothing - a block element in an HTML file. There is no meaning unless you include ID or class attributes in the HTML tag.  

Do not use any special characters, and only in lowercase when naming a file. 

ID and Class Attribute:
ID attribute:
Every HTML has a unique ID element. One ID name on the HTML tag
Class attribute:
Have the same name on several HTML tag
There can be multiple class names, but need to separate those names with a space 

Block and Inline Elements:
Block elements: Some elements start on a new line in the browser window. Block level element are <h1>, <p>, <ul>, <li> 
Inline elements: Elements are displayed on the same line as their neighbouring elements. Inline elements are <b>, <i>, <em>, <a>, <img> 
You can change the display property from block to inline or inline to block. The <ul> is a block element, you can change it to an inline element to make a navigation menu. 

CSS (Cascading Style Sheet)
Allows you to create rules that specify how the content of an element should appear.
The default is a white background, with black Times New Roman text. HTML uses < >, CSS uses { } { propety: value; }. All the style declarations inside the bracket

CSS Rules
Contains two parts: selector and declaration. 
  1. Selector: the element the rule applies to. E.g. <p>, <h1>, #id (ID uses hashtag #), .class (class uses period .). You can group your selector. For example h1, h2, h3 in a line will use the same style 
  2. Declarations: The property and the value. Property is the rule you want to change (font family, font style, decoration, etc.); the value depends on the property (font size). The property and value must be separated by a colon, and end with a semi-colon. You can have multiple property and values in a bracket. 
There are different ways to style CSS:
The first method is <h1 style ="..."> in the body section will only apply to this particular h1, and not to all the other h1.
The second method is to use a global style, the rule will govern the whole document. Must be typed in the head section. In the HEAD section, <style type="text/css"></style>

Background
There are different ways to format code:



Fig. 1.8 Background Code, Week 5

Text Formatting
System font: already installed on your computer, but those without the typeface can't see the typeface. 


Fig. 1.9 Lecture Slides - HTML & CSS, Week 5

WEEK 6 | Selectors in CSS
CSS selector targets and styles HTML elements on a web page. There are element selectors, universal selectors, ID selectors, class selectors, descendant selectors, child selectors, pseudo-class selectors, and pseudo-element. 
  • Universal Selector: Selects all elements on the page *{
  • Element Selector: Targets HTML elements by their tag name p{ a{ li{ h1{ ul{
  • ID Selector: Targets an element with a specific class attribute #ID-name{
  • Class Selector: Targets an element with a specific class attribute .class-name{
  • Descendent Selector: Selects an element that is a descendent of another element  .container a{ . Shows <a> elements is living in <div> named container.
  • Child Selector: Selects elements that are direct children of another element. Child element of <ul> is <li>. ul > li{
  • Pseudo-class Selector: Selects elements based on their state in relation to other elements. Common ones are :hover, :active, :visited, :link, :focus, :nth-child(n). Can apply to any HTML element. a:hover {
  • Pseudo-element Selector: Selects parts of an element rather than the element itself. Common ones are ::before and ::after to add content before or after an element. p::before{
Fig. 1.10 Types of Selectors, Week 6

Fig. 1.11 Lecture Slides - Selectors in CSS, Week 6

WEEK 7 | Box Model
Display is the most important property in CSS to control and create a layout.
Block-level element: <div> is the standard block-level element, and to create a structured layout. Starts on a new line and stretches out to the left and right as far as it can.
Inline element: <span> is the standard inline element. An inline element can wrap some text inside a paragraph <span> like this </span> without disrupting the flow of that paragraph.
Other display properties: inline-block, flex, grid

Each box has three layers that surround its content. The layers are, in order from inside to outside:
1) Padding
2) Border
3) Margin


Fig. 1.12 Box Layers, Week 7

Links
A:link normal link – current state
A:active when you press, it will release (micro interaction)
A:hover when you hover over, it will have different state
A:visited visited link

Display:flex to allow content to sit side by side

Fig. 1.13 Lecture Slides - Box Model, Week 7

WEEK 8 | ILW
There was no lecture during ILW - Independent Learning Week.

WEEK 9 | Positions
There are 5 positions in CSS:
  1. Static
    Position according to normal document flow
    This is the default value, and elements are not affected by the top, right, bottom, or left properties.

  2. Relative
    Positioned relative to their normal position in the document flow.
    Use the top, right, bottom, and left properties to move the element from its normal position without affecting the layout of other elements

  3. Absolute
    Positioned relative to their nearest positioned ancestor (an element with a position value other than static) or the initial containing block (the viewport if no positioned ancestor is found).
    Use top, right, bottom, and left properties to control the element's position.
    -  Absolute positioned elements are removed from the normal flow and can overlap elements.

  4. Fixed
    Removed from the normal document flow but are positioned relative to the viewport, meaning they stay in the same position even when the page is scrolled.
    Use top, right, bottom, and left properties to set the element's position on the screen 

  5. Sticky
    Positioned based on the user's scroll position and the normal flow of the document
    They behave like relatives until they reach a specified offset position, after which they become fixed
'vh'
A value that can be set that represents a percentage of the height of the viewport or the visible area of a web page in a browser. 

Fig. 1.14 Types of Positions, Week 9

WEEK 11 | Bootstrap CSS
#! important: change the original CSS
#Java Script must be at the end of a document
# ideo background: new <div>, position: absolute, top:0, left:0, z-index: -1


INSTRUCTIONS

https://drive.google.com/file/d/1zzXnrHL39y2kBn-Hd5YoqvDFZwUugOXv/preview


EXERCISE 1: Website Analysis
Choose TWO (2) websites from the link given. Take note of its design, layout, content, and functionality. Identify the strengths and weaknesses of the website, and consider how they impact the user experience.

What To Have in The Analysis:
  • The purpose and goals of the website - are effectively communicated to the user?
  • The visual design and layout of the website, including its use of colour, typography, and imagery.
  • The functionality and usability of the website, including its navigation, forms, and interactive elements.
  • The quality and relevance of the website's content, including its accuracy, clarity, and organization.
  • The website's performance, including its load times, responsiveness, and compatibility with different devices and browsers.

Final Website Analysis
Click here for the Google Slides Link!


Fig. 2.1.1 Final Website Analysis - PDF, Week 1 (02/09/2023)


EXERCISE 2: Replicate a Website
Replicate TWO (2) existing main pages of the websites from the links given to gain a better understanding of their structure. Follow the dimensions of the existing website from the width and height.  Focus on the layout, type style, and colour style. This exercise will help you develop your design skills using software such as Photoshop or Adobe Illustrator, and gain insights into web design best practices.

Resources:

Website 1: Ocean Health Index

Fig. 2.1.2 Screenshot of Original Website 1, Week 2 (07/09/23)

The website uses 'Montserrat' font as shown below. Fun fact, if I recall correctly, something I learned from IGCSE (shoutout to my lovely ICT teacher) is that the other fonts written will be displayed when the original is not available. Helvetica, Arial, or any other sans-serif font will be displayed in its place if Montserrat is unable to load.

Fig. 2.1.3 Font Family using Inspect Tool, Week 2 (07/09/23)


Fig. 2.1.3 Montserrat Font on Google Fonts, Week 2 (07/09/23)


Fig. 2.1.4 Outline View of Replication, Week 2 (07/09/23)

 
Fig. 2.1.5 Original Screengrab (left) vs. Website Replication (right), Week 2 (07/09/23)

Fig. 2.1.6 Final Outcome of Website Replication 1: Ocean Health Index - JPEG, Week 2 (07/09/23)

Fig. 2.1.7 Final Outcome of Website Replication 1: Ocean Health Index - PDF, Week 2 (07/09/23)


Website 2: Morgan Stanley


Fig. 2.2.1 Screenshot of Original Website 2, Week 2 (07/09/23)

The website uses MS Gloriola II Std as its main font. It was not available to download on Google Fonts, thus I decided to use Arial (a sans-serif font) as the alternative.

Fig. 2.2.2 Font Family of Morgan Stanley, Week 2 (07/09/23), Week 2


Fig. 2.2.3 Outline View of Replication, Week 2 (07/09/23)

Fig. 2.2.4 Original Screengrab (left) vs. Website Replication (right), Week 2 (07/09/23)
Fig. 2.2.5 Final Outcome of Website Replication 2: Morgan Stanley - JPEG, Week 2 (07/09/23)


Fig. 2.2.6 Final Outcome of Website Replication 2: Morgan Stanley - PDF, Week 2 (07/09/23)

What did I learn from website replication?
Focusing on the layout, type style, and colour style, I noticed that websites are well-organized to ensure users know what section they are on. There is a smooth transition between each section of content. I also learned that type style and colour style remain somewhat constant throughout the website to ensure consistency.

Final Website Replication

Fig. 2.3.0 Final Outcome of Website Replication - PDF, Week 2 (07/09/23)


EXERCISE 3: HTML & CSS Document Development
In this exercise, you will create a recipe card using HTML and CSS. The goal is to design a basic webpage that displays a recipe's ingredients and instructions in a visually appealing format.
  • Create an HTML file named "recipe.html."
  • Create a section that displays the following information:
  • Recipe title
  • Include necessary images for the page
  • List of ingredients
  • Step-by-step cooking instructions
  • Create an external CSS file named "style.css."
  • Apply CSS rules to style your recipe card.
  • Use CSS selectors such as element selectors (e.g., body, h1, ul), class selectors (e.g., .recipe-title, .ingredient-list), and ID selectors (e.g., #instructions) to style different parts of the card.
We can find a recipe on the following two websites:
https://insanelygoodrecipes.com/malaysian-recipes/

(I was contemplating choosing between dessert or pasta. I was craving pasta at the time, so I chose the Shrimp Alfredo (it's delicious, you don't even need to taste it to know it.))

Fig. 3.1.0 The food that made sir hungry in class, Week 7 (09/10/2023)


Sketching the Wireframe
Recipe Card Layouts:
- Has a very simple and straightforward layout
- Ingredients and Directions are placed side by side, and sometimes one after another 
- Soft neutral background colours, make the image stand out 


Fig. 3.1.1 Recipe Card Layout, Week 6 (07/10/2023)

After finding some recipe cards for inspiration, I started sketching out some layouts. I already had an idea of how I wanted the website to look so it was quite a smooth process.


Fig. 3.1.2 Recipe Card Layout Sketches,  Week 6 (08/10/2023)

HTML 
I first put all the needed text and images into HTML. I divided my recipe card into five sections: the title and image, description, 'Ingredients,' 'Directions,' and 'Notes/ Tips.' 

Fig. 3.1.3 HTML, Week 7 (08/10/2023)


Fig. 3.1.4 Recipe Card, Week 7 (08/10/2023)

Color Palette
I extracted the main colours of the image using Adobe Color. I found some images I could use as the background for the recipe card - bottom right images in Fig. 3.1.6.

Fig. 3.1.5 Extracting Main Colors using 'Adobe Color', Week 7 (08/10/2023)

Fig. 3.1.6 Color Pallete and Theme, Week 7 (08/10/2023)


Fig. 3.1.7 Applying Color Theme to Website Elements, Week 7 (08/10/2023)

I matched the micro-interactions/ link hover to the colour palette. The normal view is beige, hovering turns it orange to add a little pop of colour to the website. I was also feeling fancy and added a cursive italic font for the title. 

CSS
Once I had the content written out in HTML, I went ahead to style the page with CSS. My first attempt at styling the page did not go as planned, mainly due to my lack of understanding of how to use <div> or that you need to section out different parts to style them.

I was too distressed to take a screengrab of the mess, but here is one I found. Basically, the content was going out of the margins. 


Fig. 3.2.1 First Attempt at CSS, Week 7 (09/10/2023)

Fast forward to Week 7's class when sir taught us how to do inline elements and woohoo! Problem solved. I used display:flex to get the elements displayed side by side and flex-grow to set the flex item to grow to fit the space available in the container. 


Fig. 3.2.2 Inline Elements Applied from Tutorial, Week 7 (09/10/2023)

Another problem I faced was the width of the page. Initially, I thought it was the margins and padding being too small. I later found out that you need to put everything into a 'container' or <div> and adjust the width of it. I adjusted the width to a smaller size (900px) and margin to 0, auto.


Fig. 3.2.3 Inline Elements Applied from Tutorial, Week 7 (10/10/2023)

I noticed the leading between the lists and paragraphs was quite small, and hindered the readability due to how crowded it was. I increased the line height to 24px and added a bottom margin of 10px. 

Fig. 3.2.4 Leading - margin and line height of the <li> tags, Week 7 (10/10/2023)

Using the knowledge and computer hacking- I mean code we learned in the tutorial, I decided to make my life harder by adding a row with 3 columns at the bottom of my recipe card. 

Fig. 3.2.5 Columns In a Row, Week 7 (10/10/2023)


Final Recipe Card
Click here for a Recipe Card: Shrimp Alfredo! (https://exercise3-recipecard.netlify.app/)

Fig. 3.3.1 Final Recipe Card, Week 7 (10/10/2023)

Fig. 3.3.2 Final Recipe Card - HTML Code, Week 7 (10/10/2023)

Fig. 3.3.3 Final Recipe Card - CSS Code, Week 7 (10/10/2023)

FEEDBACK
WEEK 3
Change the images for 'Website Replication 2' so it won't get mistaken when compared with the original.


REFLECTION

In the web replication exercise, the biggest challenge was finding similar images. The guides and grids were really useful because they were more accurate than having to measure them by the eye. This was not a very difficult exercise, it taught me the layouts and structure of a website. The most challenging exercise was creating a recipe card using HTML and CSS. It seemed simple to follow along in class, but doing it by myself was quite challenging. Nonetheless, it was quite rewarding when I saw the results of creating a website from scratch. 

Comments

Post a Comment