Interactive design/Exercise
28/8/2023 -
Woo Yau Ka (0355281)
Interactive Design / Bachelor of Design (Hons) in Creative Media
Exercise 1 & Exercise 2
Lectures
Week 1
In the first week we were given a brief overview of the module and the assignments throughout the semester. Our first task was to conduct a web analysis of two websites.
Week 2
In the second week, we learned about usability, which means we should design a website that users can use effectively and successfully.
There was also a group activity in the class. The class was divided into four groups. We needed to design a new website page for the theme provided by the instructor. The theme we assigned was a local restaurant. After the design was completed, we needed to exchange and share with other team members Propose ideas.
Exercise 1
Consider the purpose and goals of the website and evaluate whether they are effectively communicated to the user.
Evaluate the visual design and layout of the website, including its use of color, typography, and imagery.
Consider the functionality and usability of the website, including its navigation, forms, and interactive elements.
Evaluate the quality and relevance of the website's content, including its accuracy, clarity, and organization.
Consider the website's performance, including its load times, responsiveness, and compatibility with different devices and browsers.
Deliverables.
Evaluate the visual design and layout of the website, including its use of color, typography, and imagery.
Consider the functionality and usability of the website, including its navigation, forms, and interactive elements.
Evaluate the quality and relevance of the website's content, including its accuracy, clarity, and organization.
Consider the website's performance, including its load times, responsiveness, and compatibility with different devices and browsers.
Deliverables.
- Short report in Google Slides
- Two analyzes should not exceed 500 words.
- Include screenshots of every section or page of your website
- The format should be clear (title/subtitle)
Exercise 2
Original website
In exercise two, we need to copy the structure and design style of two websites in photoshop or illustrator. This exercise can help us understand and practice web design.
Use the capture all page in the web capture function to obtain the screen of the entire web page and put it into a layer in photoshop for reference.
Right-click inspect from the web page, find the font family column, and know that the fonts it uses are montserrat, Helvetia, arial and san-serif. So I downloaded the montserrat font and used it as much as possible.
Replicated Website
Use the capture all page in the web capture function to obtain the screen of the entire web page and put it into a layer in photoshop for reference.
I couldn't find the font it used from the web page, so I used the similar font monsterrat.
Pinterest
Find available images to use from both websites.
Replicated Website
Exercise 3
HTML and CSS Document Development
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.
After completing the HTML code for notepad, I moved to Adobe Dreamweaver to create the HTML file. As per the tutorial video of week 6, I followed the steps accordingly while creating the code in the HTML file to create style.css.
I changed the font type to a font I found on Google Font and placed it in the center just like we did in week 5. I copied and pasted the link into an HTML file and a CSS file, and I used selectors and declarations to change the font type.
html code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Gabarito&family=Raleway:wght@600&display=swap" rel="stylesheet">
<title>exercise 3</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="container">
<center><h1 class="how">How to make a Crab roe tofu</h1></center>
<center><img src="images/tofu.jpg" width="200" alt="Logo" title="Crab roe tofu"></center>
<hr/>
<center><h2 class="in"> Ingredients</h2>
</center>
<center><ul>
<li>Tofu 2 boxes</li>
<li>2 eggs</li>
<li>Appropriate amount of ground ginger</li>
<li>Appropriate amount of minced green onion</li>
<li>Minced garlic appropriate amount</li>
<li>appropriate amount</li>
<li>chili a little</li>
<li>sesame oil a little</li>
<li>pepper a little</li>
<li>A little wine</li>
</ul></center>
<hr/>
<center><h2 class="ins"> Instructions</h2>
</center>
<center><ul>
<b>Step 1</b>
<ol>Cut the tofu into small pieces and boil it in salted boiling water to remove the beany smell and shape it.</ol>
<b>Step 2</b>
<ol>Scoop out the egg yolk from the cooked salted egg.</ol>
<b>Step 3</b>
<ol>Add oil to the pot, stir-fry the millet and pepper until fragrant, then add the salted egg yolk and stir-fry until foamy.</ol>
<b>Step 4</b>
<ol>Put the tofu into the pot and add an appropriate amount of water. Stir well and add a little salt to taste. Add a little chicken essence before the juice is reduced.</ol>
<b>Step 5</b>
<ol>Serve on a plate and sprinkle with coriander and chopped green onion.</ol>
</ul></center>
</div>
</body>
</html>
CSS code:
@charset "utf-8";
/* CSS Document */
body{
background: #CAF1FF;
padding: 0;
margin: 0;
font-family: 'Raleway', sans-serif;
}
.in{color: cornflowerblue;
text-decoration: none;
}
.in{color: darkgray;
text-decoration: none;
}
.ins{color: darkgray;
text-decoration: none}
.how{color: navajowhite;
}
.container{
color: darkslategray;
}
留言
發佈留言