INTERACTIVE DESIGN - EXERCISES

on
28/08/2023 - Ending Date (Week1 - Ending Week)
Lee Wing Kie / 0364251
Interactive Design / Bachelor of Design (Hons) in Creative Media
Exercises

LECTURES

Week 2: Usability


Group Activity:
- Assign each group a scenario in which they need to design a new interface to solve a particular problem or meet a particular user need.
- Ask each group to sketch out their design ideas and create a basic prototype using paper, cardboard, or other simple materials. (A4 Paper)
- Ask each group to test their prototype for usability by having another group act as "users" and attempt to complete a task using the product or interface.

Our group was assigned scenario 4, which is tasked with designing a a new website for a local restaurant.
User need: Users want to be able to easily find information about the restaurant's menu, location, and hours, and make reservations.
Usability principles to consider: Consistency, Simplicity and Visibility.

INSTRUCTIONS


Exercise 1 - Web Analysis

We are assigned to choose two websites. Review the website that you've selected carefully, taking note of its design, layout, content, and functionality. Identify the strengths and weaknesses of the website, and consider how they impact the user experience.
Write a brief report summarizing your findings and recommendations.

Google Sheet of Exercise 1 - Website Analysis (Week1: 28/09/2023)

Exercise 2 - Web Replicating

We were assigned to replicate two existing websites listed in the link below to gain a better understanding of their structure. We need to adhere to the width and height dimensions of the existing websites. This exercise will help us develop our design skills using software such as Photoshop or Adobe Illustrator, as well as learn about best practices in web design.

Fig 1.1 Given Website (Week 2: 04/09/2023)

We can download fonts from Google Fonts and use any image from Pexels.
Google Fonts link: https://fonts.google.com/

Design Process: 
The website I choose are Morgan Stanley and Ocean Health Index.

Fig 1.2 Original Morgan Stanley Website (Week 2: 04/09/2023)

Fig 1.3 Screenshot in Adobe Illustrator (Week 2: 04/09/2023)
Fig 1.4 Outline view of 'Morgan Stanley' (Week 2: 04/09/2023)


Final Outcome: 
Fig 1.5 Final Replicate Outcome 'Morgan Stanley' - JPEG (Week2: 04/09/2023)
Final Replicate Outcome 'Morgan Stanley' - PDF (Week2: 04/09/2023)


Fig 1.6 Original Ocean Health Index Website (Week 2: 04/09/2023)

Fig 1.7 Screenshot in Adobe Illustrator (Week 2: 04/09/2023)
Fig 1.8 Outline view of 'Ocean Health Index' (Week 2: 04/09/2023) 

Final Outcome: 


Fig 1.9 Final Replicate Outcome 'Ocean Health Index' - JPEG (Week 2: 04/09/2023)
 
Final Replicate Outcome 'Ocean Health Index' - PDF (Week2: 04/09/2023)

Exercise 3: HTML Personal Profile Page
We are tasked with creating a personal profile page using HTML in this exercise. This exercise's goal is to help us practice our HTML skills and create a webpage that showcases our personal interests.

Here are the things to include on the profile page:

HTML Structure:
Begin by creating a new HTML file and setting up the basic structure with <!DOCTYPE html>, <html>, <head>, and <body> elements.
Page Title:
Inside the <head> element, add a <title> element with a title for your webpage, like "My Profile."
Header Section:
In the <body> section, create a header section using the <header> element.
Add a main heading (<h1>) with your name.
Optionally, include a subheading (<h2>) with a brief tagline or description.
About Me:
Create a section for information about yourself.
Include a <h3> heading saying "About Me."
Add a couple of paragraphs (<p>) with a brief introduction of yourself.
My Interests:
Create another section to list your interests or hobbies.
Use an appropriate heading, such as <h3>: "My Interests."
Add an introduction for this section using <p>.
Create an unordered list (<ul>) and list some (more than 3) of your interests using <li> elements.
My Photo:
Insert an image of yourself using the <img> tag.
Specify the image source (src attribute) and provide a brief description using the alt attribute.
Contact Information:
Create a contact section with an appropriate heading.
Include your email address and optionally other contact details like your social media profiles or phone number using the list item.
Testing and Validation:
Test your webpage by opening it in a web browser to ensure everything displays correctly.
Use online HTML validators to check for any syntax errors and fix them if needed.

Design Process:

Fig 2.1 Screenshot in Adobe Dreamweaver

Fig 2.2 Screenshot in Adobe Dreamweaver

Final Outcome:

Fig 2.3 Final Outcome of exercise3

Exercise 4: Recipe Card

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.
References:



Before creating my Recipe Card in Adobe Dreamweaver, I sketch it in Figma to determine the style of recipe card I want.

Sketch:

Fig 3.1 Sketch in Figma before starting to build code

Recipe link that provided by Mr. Shamsul: 
https://insanelygoodrecipes.com/malaysian-recipes/

I chose the Pandan Coconut Ice Cream recipe, and here is the link.

Design Process:

Fig 3.2 My html file in Adobe Dreamweaver

Fig 3.3 My css file in Adobe Dreamweaver

Fig 3.5 Main Heading & CSS link in HTML

Fig 3.6 Ingredients List in HTML

Fig 3.7 Instructions in HTML

Fig 3.8 Text between line

To do text between line, I conducted some online research and found a tutorial video on YouTube that demonstrates this functionality.


CSS code (Text Between Line)

h3:before{
content: "";
width: 50vw;
height: 1px;
background: #000;
position: absolute;
left: 0;
top: 50%;
z-index: -3;
}

h3:after{
content: "";
width: 50vw;
height: 1px;
background: #000;
position: absolute;
right: 0;
top: 50%;
z-index: -2;
}

span{
background: white;
padding: 0 20px;
}

Fig 3.9 Element selector in css

Fig 3.10 Element selector in css #2

Fig 3.11 Class selector in css
Final Outcome: 

Fig 3.5 Final Outcome of my recipe card


REFLECTIONS

Through these exercises, I gained a better understanding of UI/UX concepts as well as the basic structure of HTML and CSS. I thoroughly enjoyed learning through these experiences. Hands-on practice enabled me to experiment with creating visually appealing user interfaces while prioritizing a seamless user experience. This project helped me grasp fundamental concepts such as layout design, color schemes, and the importance of responsive web design. Working with HTML and CSS equipped me with the skills to efficiently design and style web pages, enabling me to bring my creative ideas to life. I am grateful for the opportunity to learn through practical experience and look forward to further expanding my knowledge in UI/UX design and web development in the future.

Comments

Post a Comment