Interactive Design - Exercises
Chan Wan Qing / 0350928 / BA of Design (HONS) in Creative Media
Interactive Design
Exercises 1 - 4
INDEX:
2. Exercises
LECTURES
Week 1 / 28.8.2023
In week 1, we were briefed about this module and our assignments throughout the whole semester. Our first task is to do a web analysis on 2 websites based different aspects.
Week 2 / 4.9.2023
In the second week, we learned about the topic of "Usability: Designing Products for User Satisfaction." We were introduced about usability, which means how effectively, efficiently, and successfully a particular user can utilise a product or design in a certain situation.
The key principles of usability include consistency, simplicity, visibility, feedback and error prevention.
We also had a group activity in our class, where we were divided into groups, we need to design a new interface to solve a particular problem or meet a particular user need. After that, we exchanged our paper prototype and gave comments to the other group.
Week 3 / 11.9.2023
The three key elements of a website are header, body and footer. Header means the top section of a webpage, usually contains the logo/name and navigation bar. Next, body is the main content area of a webpage, proper organisation in this part is essential for readability. Lastly, it's the footer, the bottom of a page, usually this part includes copyright information, links to important pages, and contact details.
After the lecture, we were divided into groups. We need to design and come out with a navigation menu for a travelling website. Our groups started with doing some researches from other websites. We drew out the navigation menu with 5 sections and had a sub menu for each section. After completing, we presented our work, a few advises from Mr Sham is, the best placement for the logo is on the left, we should be cautious when naming the navigation bar, and consider what is more important.
Week 4 / 18.9.2023
In week 4, we are about to start our first project. Therefore in this lecture, we learned about web standards. We learned about how the web works, word structures and web structures. After that, we learned about the html codes. After finishing with the lecture, we had a practical class on writing html codes. I used Notepad while doing this exercise. Mr Sham show us how to write html codes and save the file step by step.
Before we start to write the html codes:
2. Save document as 'index.html' in a new folder
3. Do not close the notepad
4. Save the note after writing the codes (do not close!) and refresh the website
Notes:
3. <hr/> horizontal line - single html text
4. For link,
target="_blank" - open in new tab
6. The image should be in .jpg or .jpeg or .gif
Process of Writing Codes and Result
For this week in-class exercise, we are required to create a personal profile webpage following what we had done in the previous section. We have to include header section, about me, interests, a photo of ourselves and contact information in this exercise.
I started with opening a new notepad on my laptop, like what we had done in class, I save the notepad in a new folder, I named it as 'W4_exercise'. Then I started with <!DOCTYPE html> and <html> with </html>. After that, it is the head part, with the code <head> and </head>, I used 'Wan Qing's Profile' as my title. Then, it is the body part, so I included the codes <body> and </body> first and then started with the main heading using <h1> and </h1> with my name. For the second heading, I put a tagline that I like with the codes <h2> and </h2>. In heading 3, using codes <h3> and </h3>, I started with 'about me' following with 3 paragraphs using <p> and </p>. I also included heading 4 using <h4> and </h4> while writing about me to categorised the paragraphs. For the following sections, 'My Interest' and 'My Contact', I used <h3> and </h3> for the titles, following with a short paragraph and lists with codes <ul> and </ul> with <li> and </li>.
After completing the coding, we uploaded the files to Netlify. This is my personal profile webpage on Netlify.
Week 5 / 25.9.2023
- all id and class attributes should not be numbers
Default display of the elements
- - can change in CSS
-
Block Elements
- can add width, dimension, border,...
- eg: <h1> </h1>; <p> </p>;... -
Inline Elements
- eg: <b>; <i>; <em>;...
-
Selector
- html elements that you want to change the appearance
-
Declaration
- style declaration
- symbol: {}
- style: {property: volume;}
In Adobe Dreamweaver
.png)
.png)
.png)
CSS Practical
In week 6, we learned about CSS selector. CSS selector is a fundamental part of CSS that allow you to target and style HTML elements on a web page. There are different types of CSS selectors including element selector, universal selector, ID selector, class selector, descendant selector, child selector, pseudo-class selector, pseudo-element. These selectors enable us to control the presentation and layout of the web pages.
Week 7 / 9.10.2023
This week, we learned about display property. Display is CSS's most important property for controlling layout. There are block-level element and inline element. We also learned about box model in CSS this week. Most HTML elements are containers. We can apply the CSS to the paragraph tag in order to control the size of the padding, border, and margin of the paragraph.
Creating layout in Adobe Dreamweaver:
1. *Top to bottom; left to right
2. Create the boxes first; insert
<div> with class="container"
3. Insert <nav> at in between
<div> and </div>
4. Insert <div> with class attributes
like main, row, footer
5. Insert unordered list and list items between
<nav> and </nav>
6. Orders for links - [ a:link > a:active > a:hover > a:visited ]
Week 8 / 16.10.2023
Independent Learning Week
Week 9 / 23.10.2023
This week, we learned more different styles in CSS. We focus on positions this week after we were briefed about the final project.
5 positions in CSS:
Static
- Position according to normal document flow
- This is the default value, the elements are not affected top, left, bottom, right properties
Relative
- Positioned relative to their normal position in document flow
- Can use top, right, bottom, left properties to move the element from its normal position without affecting the layout of other elements
Absolute
- Positioned relative to their nearest positioned ancestor (an element with a position value other than static) or the initial containing block (viewport if no positioned ancestor is found)
- Use top, right, bottom, left properties to control the elements' position
Fixed
- Removed from the normal document flow but positioned relative to the viewport, they stay in the same position even when the page is scrolled
- Use top, right, bottom, left properties to set the element's position on the screen
Sticky
- Positioned based on the users' scroll position and the normal flow of the document
- They behave like relative until they reach a specified offset position, after which they become fixed
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.
In-class Practical Exercise
.png)
.png)
EXERCISES
Exercise 1 - Web Analysis
In the first exercise, our task is to analyse 2 chosen websites from the link given. We have to review the websites and identify the strengths and weaknesses of the website, and consider how they impact the user experience.
Requirements:
1. A brief report in Google Slides
2. Not more than 500 words for 2
analysis
3. Include a screen capture of each section or page of
the website
4. Format should be clear (heading/subheadings)
What To Have in The Analysis:
1. Purpose and goals of the website - communication with the user
2.
Visual design and layout of the website, including its use of color,
typography, and imagery.
3. Functionality and usability of the website,
including its navigation, forms, and interactive elements.
4. Quality
and relevance of the website's content, including its accuracy, clarity, and
organization.
5. Website's performance, including its load times,
responsiveness, and compatibility with different devices and browsers.
I chose 2 websites from the given link. Both of them have a very different style, one is about event organiser and another one is about food. As the themes are different, I tried to look into the websites and understand their themes for the websites as well. As I'm not familiar with the terms, I faced some challenges while doing this exercise as I don't know how to explain different parts.
Exercise 2 - Replicating Website
In exercise 2, our task is to replicate 2 existing main pages of the websites in order to gain a better understanding of their structure. We have to follow the dimensions of the existing website from the width and height. This exercise will help us to develop our design skills using software such as Photoshop or Adobe Illustrator, and gain insights into web design best practices.
First of all, I screen grab both website with the webpage size (width 1036 px). I used Adobe Illustrator in this exercise. I placed the original website side by side when I'm replicating the website so that I am able to get a more accurate measurements of the images, boxes and also the placement of the text. After that, I started to find some images that are of the same tone and similar to the theme of original website from Pexels. After working on the boxes and images, I started to replicate the text, I tried to find similar typefaces that have similar characteristics with the original webpage. For the first replication, I used Univers Lt Std and Gill Sans Std as they are the most similar one with the original website, whereas for the second one, I used Acumin Variable Concept with different font for different parts.
.png)
.png)
.png)
.png)
1. Ocean Health Index (https://www.oceanhealthindex.org/?authuser=0)
Original Website (Screen grab)
Replicated Website
2. Bandit Running (https://banditrunning.com/?authuser=0)
Original Website (Screen grab)
Replicated Website
In this exercise, we 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.
First of all, I decided to search for a recipe of chocolate cookies on YouTube because I made it before. Then, I copied down the ingredients and steps before I started to do the HTML coding. I started to write the codes on notepad like what we had done in Week 4 to draft out what I had to include in the file.
.png)
.png)
After completing the HTML codes in notepad, I moved to Adobe Dreamweaver to create the HTML file. I followed what we had learned in week 5 and week 6 to apply the CSS style into the coding. I first created a new HTML file in Adobe Dreamweaver and named it as 'recipe.html'. Then, I included all the contents into the file following each code, from <head>, <body> and also <h1>, <h2>, <ul> and more. According the tutorial video in week 6, I followed the steps accordingly while creating the codes in HTML files, for ingredients, I used unordered list and for cooking instructions, I used ordered lists.
.png)
.png)
.png)
.png)
.png)
From what we learned in Week 6, I used CSS selectors such as element selectors, class selectors and ID selectors to style different parts of the card. I used class selector for the first image under the main heading as I aligned the main heading and heading 2 to centre. For h1, h2, p, body and more, I used element selector to style them, I also used ID selector to style h3 with different IDs.
Final Recipe Card
Recipe Card: Chocolate Cookies Recipe
HTML and CSS coding
FEEDBACKS
No feedbacks are given in these exercises.
REFLECTION
Exercise 1 / Website Analysis
This exercise has allowed me to dissect a website's various elements to understand its design, functionality, usability, and content. I observed that meeting the needs and expectations of users is very important when designing a website. Every element on a website, from layout to navigation to content, should prioritize user experience. I also found that a clean and visually appealing design which match with the theme of the website enables users to understand the contents of the websites more with a suitable color schemes, typography choices, and overall aesthetics in influencing user perception. Besides, I also understand that website navigation should be intuitive and effortless so that visitors are able to find what they're looking for quickly. Analyzing websites has also allowed me to take notes on the importance of ensuring that websites are fully functional and visually appealing on various devices and screen sizes. In conclusion, this exercise had deepened my understanding of the intricacies of web design and user experience. The most important thing of a website is its functions.
Exercise 2 / Replicating Websites
This exercise was a fun exercise for me. In this exercise, I have to observe and think about the visual of the websites, including images, typefaces and so on. While replicating a website, I gained a deeper appreciation for the role of design in user experience. Every layout decision, color choice, and font selection impacts how users interact with a site. It reinforced the idea that design isn't just about aesthetics; it's a critical element of usability and functionality. Through the website replication exercise, I could understand the pattern of a landing page design and the elements included in the landing page of a website such as the logo, navigation bar, and footer which consists of contacts. This exercise also allows me to understand the placements of the elements which is the most user-friendly and has the most readability.
Exercise 3 / HTML and CSS Document Development
It was an interesting exercise where we need to find a recipe and create a HTML file and a CSS file. This exercise allows me to apply what I learned in the lectures into practical exercise like HTML coding and CSS coding. HTML coding is not very difficult, but we need to be careful when writing the codes such as remember to include opening tag and closing tag. For me, applying CSS to style the HTML file was both creative and challenging. Creating a CSS file and writing CSS codes are more difficult as there are more types and different rules. But it showcased the power of CSS in transforming a plain HTML document into an user-friendly webpage. This exercise of creating a recipe webpage with HTML and CSS was a valuable learning experience that allowed me to apply technical skills, exercise creativity, and gain a deeper appreciation for web development as a blend of coding and design.
Comments
Post a Comment