Interactive Design / Exercises
22.4.2024 - 20.6.2023 / Week 1 - Week 9
Bong Sue Zhiun / 0366866
Interactive Design / Bachelor of Design ( Hons ) in Creative Media
Exercises
.png)
TABLE OF CONTENTS
1. Lectures
2. Instructions
4. Exercises
5. Reflection
LECTURES
Week 1 - Usability
Week 3 - Understanding Web Structure
1. Header : The upper (top) part of the webpage.
- hamburger menu - Hide the links to various pages or sections behind a hamburger button, which is recognisable by its three horizontal lines resembling a hamburger.
- sticky header - Keep the header fixed at the top of the page as users scroll down, ensuring that the main navigation remains accessible at all times. This is particularly useful for content-heavy pages with extensive scrolling.
- two-layer navigation - Include two sets of navigation links in the header to distinguish between two important routes for website usability.
2. Call-To-Action ( CTA ) Button : An element of a user interface aimed at encouraging a user to take a certain action.
3. Hero Section : The above-the-fold area of the webpage displays a strong visual element like a hero image, slider, engaging typography, video, or anything else that grabs visitors' attention and delivers a key message.
4. Footer : The lower (bottom) part of the web page which usually marks its end.
5. Slider : An interactive slideshow or carousel displays various products, offers, etc., commonly used on e-commerce and business websites to showcase a gallery of products or services.
6. Search : Internal search allows visitors to search for content within the website and displays results based on their search queries.
7. Menu : One of the core navigation elements in user interfaces. It is a graphical control that presents the options of interactions with the interface.
- Classic horizontal menu - The most common and easily recognisable type of menu is the horizontal line of core navigation items located in the website header.
- Sidebar menu - A classic type of menu that presents a vertical list of options, usually positioned on the left or right side of the webpage.
- Dropdown menu - For content-heavy websites, a more complex menu type is available where additional options appear below the primary one when clicked or hovered. Another similar option is the dropup menu, where the list opens upward instead of downward, but the functionality remains the same.
- Megamenu - This is the expandable menu, which is more complex. It presents a large list of choices in a two-dimensional dropdown layout. This is useful for cases with a vast number of options.
- Hamburger menu - A button marked with three horizontal lines. When clicked, it expands to reveal the menu options. It's commonly used in mobile versions of websites to save space.
8. Breadcrumbs : Navigation elements help users navigate through the website, keeping them aware of their location and helping them familiarise themselves with the website's structure.
9. Form : An interactive element that allows users to send information to the system or server.
10. Cards : Also known as tiles, are layout elements that organise and display similar data or content in a visually appealing and easy-to-scan format.
11. Video : While video used to be less common on web pages, it's becoming increasingly prevalent due to advancements in web development and technical capabilities.
12. Progress Indicator : A small, helpful element that assists visitors in understanding their current position within a larger volume of information or set of actions.
13. Favicon : Also known as a URL icon or bookmark icon, it is a special symbol that represents the product or brand in the URL bar of the browser and in the bookmark tab.
14. Tags : It's another secondary navigation element commonly found in blogs and websites with lots of similar content.
Week 4 - Web Standards
Notes from week 4 lecture
1. Headings : < h1>Main heading</h1>
 | |
|
 | |
|
3. Bold : <p>paragraph<b>bold</b></p>
 | |
|
4. Italic : <p>paragraph<i>italic</i></p>
 | |
|
5. Ordered list :
<ol>
<li>ordered list</li>
</ol>
 | |
|
<ul>
<li>unordered list</li>
</ul>
 | |
|
<ul>
<li>unordered list</li>
<li>unordered list
<ul>
<li>unordered list</li>
</ul>
</li>
</ul>
 | |
|
8. Writing Links : <a href="link">TEXT</a>
 | |
|
9. Adding Image : <img src="image" alt="text"title="title"/>
 | |
|
Week 5 _ HTML & CSS
INSTRUCTIONS
TUTORIAL & PRACTICAL
Week 2 - Class Activity
Our class activity involves group discussions, and our group will be taking on scenario 2. For scenario 2, our task is to design a new social media platform for a specific interest group, such as fans of a particular TV show or hobby, using a paper prototype.
User need:
Users want a platform that is easy to use, with clear communication and sharing features, and a sense of community among other users.
Users want a platform that is easy to use, with clear communication and sharing features, and a sense of community among other users.
Usability principles to consider:
- Consistency
- Simplicity
- Feedback
- Error prevention
After understanding the scenario, we begin discussing which specific interest group we want to cater to on the social media platform.We decided to create a mobile app for people who love drawing. They can use it to share, communicate, and talk about their art.
To start, we look at platforms like Discord, Pinterest, Instagram, and Facebook to get ideas for our paper prototype.
Below are the rough sketches we've discussed to do :
.jpeg)
Fig.1.1 & 2. Rough Sketches, Week 2, 2.5.2024
Final Outcome
 |
| Fig.1.3. Final paper prototype , Week 2, 2.5.2024 |
| Vid.1.1. A tutorial video demonstrating how to use the app |
One of our classmates tested the app and mentioned that everything is okay, but she felt that the comment section's space is too large, which can be confusing when deciding where to type.
Week 4 - HTML code
Mr. Shamsul instructed us on how to write basic HTML code.
1. Open TextEdit and create New Document.
 | |
|
2. Format > Make Plain Text
 | |
|
3. Save as index.html and leave the option " If no extension is provided, use ".txt". unchecked.
 | |
|
4. Open with Google Chrome.
 | |
|
5. Start coding.
Final Outcome
 | |
|
 | |
|
Netlify link : https://bongsuezhiun-exercise.netlify.app/
Week 5
In the week 5 class, we will create a timetable using Adobe Dreamweaver, continuing from the content covered in last week's session.
Dreamweaver syntax colour identify
Blue: HTML element
Green: Attribute Name
Orange: Attribute Value
White: Content element
1. Finder > index.html > Open with Adobe Dreamweaver.
 | |
|
2. A error has been identified. To fix it, insert a space ( the attribute must be space ).
 |
| Fig.1.20. Way to solve the error, Week 5, 23.5.2024 |
3. Dreamweaver has a feature that allows us to select the HTML codes for symbols or special characters.
( space in html: )
 |
| Fig.1.21. Tips in Dreamweaver ,Week 5, 23.5.2024 |
 |
| Fig.1.22. Create a timetable in HTML, Week 5, 23.5.2024 |
Final Outcome
 |
| Fig.1.23. Final outcome, Week 5, 23.5.2024 |
We've been assigned homework to create a contact form below the " My Favourite "section.
 |
| Fig.1.24. Contact form, Week 5, 23.5.2024 |
Week 6
Mr. Shamsul reviewed the homework assigned in week 5, which involved creating a contact form. As part of his review, he also shared the HTML code for the contact form with us.
 |
| Fig.1.25. HTML code created by Mr Shamsul ,Week 6, 30.5.2024 |
For example, change
After that, Mr. Shamsul also taught us how to change the font. We can download new fonts from Google Fonts.
2. Paste it inside the
3. Link CSS File to HTML:
<table border="2" border colour="ffffd" style="border-collapse:collapse"> to
<table>
Therefore, insert <style type="text/css"></style> inside the <head> section. All the styling will be inserted inside the `<style>` section.
 |
| Fig.1.26. Deleting the style ,Week 6, 30.5.2024 |
We have to update the timetable by changing its colours: the rows for Monday, Wednesday, and Friday will have the same colour, while the rows for Tuesday and Thursday will be a different colour.
 |
| Fig.1.27. Changing the colour in the timetable ,Week 6, 30.5.2024 |
To change the font in HTML, follow these steps:
1. Select the font and copy the embed code:
Go to Google Fonts, select the desired font, and copy the embed code provided.
2. Paste it inside the
<head> section:
Add the embed code inside the
<head> section of our HTML document.3.Copy the code located in the CSS class for a variable style:
Copy the CSS code provided for the selected font style.
4. Paste it inside the
<style> section: Add the CSS code to the
<style> section in the <head>. |
| Fig.1.28. Steps to change font in HTML ,Week 6, 30.5.2024 |
Week 7
Mr Shamsul taught us to organise our CSS into a separate file instead of embedding it directly in our HTML file.
1. Create a CSS File:
Start by creating a new file with a
.css extension. Name it styles.css.
2. Move CSS Styles:
Copy the CSS styles that were originally inside the
<style> section of our HTML file into the styles.css file.
In our HTML file, remove the
<style> section containing the CSS and replace it with a <link> tag in the <head> section to link to your external CSS file.4. Edit CSS in External File:
Any edits or additions to the CSS styles can be made directly in the
styles.css file. This approach keeps our HTML file cleaner and separates structure (HTML), presentation (CSS) for better organisation. |
| Fig.1.29. Steps to organise css into a separate file ,Week 7, 6.6.2024 |
 |
| Fig.1.30. Progress, Week 7, 6.6.2024 |
Week 9
Mr. Shamsul provided us with a tutorial on the layout exercise. Here's my result:
 |
| Fig.1.33. my outcome ,Week 9, 20.6.2024 |
 |
| Fig.1.34. my outcome (html),Week 9, 20.6.2024 |
 |
| Fig.1.35. my outcome (css) ,Week 9, 20.6.2024 |
Week 10
Mr. Shamsul provided us with the final tutorial on creating a simple web page before allowing us to start working on our final project.
My results:
 |
| Fig.1.36. my outcome ,Week 9, 20.6.2024 |
 |
| Fig.1.37. my outcome (html) ,Week 9, 20.6.2024 |
 |
| Fig.1.38 my outcome (css) ,Week 9, 20.6.2024 |
EXERCISES
Exercise 1- Web Analysis
This exercise requires us to pick two websites from the provided links and analyse the chosen websites. The analysis should cover aspects like design, layout, content, and functionality, noting strengths and weaknesses and their impact on the user experience. Afterward, we'll need to summarise our findings and offer recommendations in a brief report.
Links provided :
1. csswinner
2. awwwards
3. webbyawards
What to have in the analysis:
- Check if the website clearly tells users what it's about.
- Look at how it looks: colours, typography, and imagery.
- See if it's easy to use: Can you find your way around? Are forms and buttons clear?
- Read the content. Is it accurate and easy to understand?
- Test how fast it works and if it works well on phones and different web browsers.
Report requirements:
- Ensure the summary report exceeds 500 words.
- Use screenshots for each website section or page to enhance clarity.
- Maintain clear formatting with headings and subheadings throughout the report.
Report of Website Analysis
Website 01 - Justine Soulie
Purpose and Goals Communication
 |
| Fig.3.1.1 The home page of this website, Week 1, 25.4.2024 |
Visual Design Evaluation
While the website maintains a minimalist visual aesthetic with various shades of grey, the cover of Justine's works and the "About" section stand out with a bright and eye-catching colour palette, predominantly featuring primary colours like red, blue, and yellow. This contrast enhances the attractiveness of the content and adds visual interest to the overall design.
 |
| Fig.3.1.2 The cover of Justine's works , Week 1, 25.4.2024 |
 |
| Fig.3.1.3 The page after clicking into the "About " , Week 1, 25.4.2024 |
Besides, this website utilises clean and easily readable typography, with a preference for sans-serif fonts across its pages. The website features high-quality images and illustrations. These visuals help to add excitement and variety to the site, making it more interesting to look at.
 |
| Fig.3.1.4 The typography used & High quality images, Week 1, 25.4.2024 |
Functionality and Usability Assessment
Users can navigate the website by using the menus located at the top of page that lead to different sections, such as the "About" page and Justine Soulie's portfolio. The portfolio section is well-organised, allowing users to easily browse through all of her creative works. The inclusion of a "Scroll to see more" prompt in the bottom right corner of the page when users open a project is beneficial as it guides users on what steps to take next.
 |
| Fig.3.1.5 " Scroll to see more" at the bottom right , Week 1, 25.4.2024 |
Content Quality and Relevance
Each project in Justine's portfolio is explained clearly by a brief overview that provides insight into her creative work. The "About" section provides a concise overview of Justine's background. However, some of her social media links are located at the bottom right corner of the "About" page.
Fig.3.1.6 & 7 The brief overview of each work, Week 1, 25.4.2024
 |
| Fig.3.1.8 Social Media links at the bottom right , Week 1, 25.4.2024 |
Website Performance Examination
The website loads fast and works smoothly, even on phones. It's designed to look good and function well on different devices, whether users are using a smartphone or a computer.
 |
| Fig.3.1.9 The mobile version of this website , Week 1, 25.4.2024 |
Things that I found that can be improved
While the website adopts a minimalist and clean style, it could benefit from enhancing the visibility of the navigation menu. One suggestion is to incorporate buttons for each section, making it noticeable and easier to identify.
 | |
|
Conclusion
In conclusion, Justine Soulie's portfolio website does a great job of showcasing her creative work with a clean and attractive design. Users can easily navigate the website and discover her background and portfolio. The website loads fast and looks well on both computers and phones. While some small adjustments, like making the navigation menu easier to see, could improve the user experience slightly, overall, it's a great platform for discovering Justine's talent.
Website 02 - Don't board me
Purpose and Goals Communication
The website effectively communicates its purpose of providing in-home pet care services to users. It uses simple words, so the users will know exactly what it's about. Information regarding the services provided, including dog walking, pet visits, and overnight care, is prominently showcased, ensuring users are well-informed about the website's offerings.
| Fig.3.2.1&2 (Left) Home page , (Right) The services provided ,Week 1, 25.4.2024 |
Visual Design Evaluation
The website looks nice and professional, using colours, fonts, and images well. Soft colours in the background make it cozy, and dark colours show important buttons.
 |
| Fig.3.2.3 dark-coloured button stands out nicely against the soft-coloured background,Week 1, 25.4.2024 |
The website's choice of sans-serif font is appropriate for modern and clean design. However, using all capital letters for the font might make it more difficult to read.
 | |
|
There are lots of cute images of pets, making it feel friendly and warm. Overall, the website's design makes the users feel good and interested in pet care.
 | |
|
Functionality and Usability Assessment
The website functions smoothly, with clear and user-friendly navigation menus that make it simple for users to locate the information they seek.
 | |
|
It's easy to find contact forms and booking options on the website, so users can quickly reach out to the business or request services. If users have any questions or doubts, they can also ask them directly on the site. This makes it simple for users to get in touch and communicate with the business.
 | |
|
The website is also responsive, adapting smoothly to different screen sizes and devices, ensuring a consistent user experience across desktops, tablets, and smartphones.
 | |
|
Content Quality and Relevance
The content on the website is informative, relevant, and well-written. Descriptions of services are detailed yet concise, providing users with a clear understanding of what to expect.
 | |
|
Testimonials and reviews from satisfied customers add credibility and confidence, helping to build trust with potential clients.
| Fig.3.2.10&11, The testimonials and reviews from customers ,Week 1, 25.4.2024 |
Furthermore, the blog posts and articles offering pet care tips and advice show the website's commitment to providing valuable content to pet owners.
| Fig.3.2.12&13, Blog posts and articles ,Week 1, 25.4.2024 |
Website Performance Examination
In terms of performance, the website loads quickly and functions smoothly. Pages load promptly, minimising wait times for users and enhancing their overall experience.
Things that I found that can be improved
To improve the website, incorporating a combination of uppercase and lowercase letters would be beneficial. Although this method can improve comprehension and readability, some users may find it difficult to tell the difference between words and letters. However, the user experience can be improved and content accessibility for a wider audience can be ensured by finding a balance between uppercase and lowercase letters. This change could enhance comprehension and reading, which would enhance the website's overall user experience.
Conclusion
In conclusion, the website performs a great job of providing users with clear information about its pet care services. It looks nice and professional with its colours, typography, and images, making users feel cozy and interested in pet care. Although the website works smoothly and is user-friendly across several devices, it may benefit from using a combination of upper and lowercase to enhance readability. Overall, the website provides helpful information and tips for pet owners, enhancing their experience. Minor adjustment like mixing uppercase and lowercase letters in the text could make the website more enjoyable and easy to use for everyone.
Exercise 2 - Web Replication
This exercise involves replicating the main pages of two distinct websites from the provided link. Doing so will enhance understanding of their layout and structure.
Links provided:
Select any two websites from the provided link and replicate their main pages. Adhere to the existing dimensions for width and height. This exercise aims to enhance our design skills using software like Photoshop or Adobe Illustrator and to provide insights into web design best practices. We can use any stock images or free stock icons, as they don't need to match the original images exactly—just find similar ones. Focus on replicating the layout, typography, and colour scheme. For similar typefaces, download fonts from Google Fonts. We might need to take screenshots of the websites to begin the replication process.
Web replication 01- Morgan Stanley
The first website I chose to work on is Morgan Stanley. Before I started replicating, I screen grab the website.
Steps to screen grab website : Right Click ( Inspect ) > Adjust and ensure the appearance of website is complete ( All panel can be seen ) > click 3 dot > Run command > Type ( Run > Screen ) > Choose Capture Full Size Screenshot > Done
 | |
|
After that, I export the screenshot of website into Adobe Illustrator.
Steps to begin replicating the website: Select the screenshot > Object > Artboards > Fit to Artwork Bounds > Go to the Layer Section > Press on the panel > Template > Create New Layer
 |
| Fig.3.3.2, The location of the layer panel ,Week 3, 6.5.2024 |
I selected the fonts that closely match those used on the original website, which are Kohinoor Telugu and Seravek.
 |
| Fig.3.3.3, Place the text ,Week 3, 6.5.2024 |
 |
| Fig.3.3.4, Place the graphics & icons ,Week 3, 6.5.2024 |
I sourced the images online, with some from Pexels.
 |
| Fig.3.3.5, Place the images ,Week 3, 6.5.2024 |
Final Submission / Exercise 2 : Web Replication
 |
| Fig.3.3.6, Final Outcome of Web replication #1 ,Week 3, 6.5.2024 |
Web replication 02 - Ocean Health Index
I followed the steps from first website to replicate the second website.
.png) |
| Fig.3.3.7, Screenshot of Original Website ,Week 3, 6.5.2024 |
Place all the text using the Arial font.
 |
| Fig.3.3.8, Place the text ,Week 3, 6.5.2024 |
Trace the icons and graphics, then place them according to the layout of the original website.
 |
| Fig.3.3.9, Place the graphics & icons ,Week 3, 6.5.2024 |
Locate the images online and position them accordingly.
 |
| Fig.3.3.10, Place the images ,Week 3, 6.5.2024 |
Final Submission / Exercise 2 : Web Replication
 |
| Fig.3.3.11, Final Outcome of Web replication #2 ,Week 3, 6.5.2024
|
Exercise 3 - Creating a Recipe Card
In this exercise, we'll design a recipe card using HTML and CSS. Our task is to create a simple webpage that presents the ingredients and instructions of a recipe in an attractive way. We can select a single recipe from the provided link to work with.
Instructions:
Create an HTML File:
- Name the file
index.html. - In this file, create a section to display the following:
- Recipe title
- Necessary images
- List of ingredients
- Step-by-step cooking instructions
- Name the file
Create a CSS File:
- Name the file
style.css. - Use this file to style your recipe card.
- Apply CSS rules using:
- Element selectors (e.g.,
body,h1,ul) - Class selectors (e.g.,
.recipe-title,.ingredient-list) - ID selectors (e.g.,
#instructions)
I have chosen the Flourless Chocolate Cake recipe for this exercise. Below is the information I will use for my recipe card.
 |
| Fig.3.4.1, Information of Recipe ,Week 7, 6.6.2024 |
1. Research
Begin exploring recipe layouts on Pinterest for inspiration.
After that, I open a CSS file and link it to the HTML. Then, I'll begin arranging the layout according to my sketch #3. To maintain balance in the layout, I've decided to use only two columns for both the ingredient and serving sections ( Right fig ).
After that, I adjust the background colour, recipe book colour, and font colour using the colour palette I discovered on Pinterest.
 |
| Fig.3.4.2, Research ,Week 7, 6.6.2024 |
2. Sketching
I have sketched three different layout options. I have decided to use sketch #3 for the recipe layout.
Fig.3.4.3, Sketches ,Week 7, 6.6.2024
3. Image Preparation
Crop out all the necessary objects using Photoshop and organize them into a folder specifically for this recipe exercise.
Fig.3.4.4 & 5, (Left) Images, (Right) Arrange into folder ,Week 7, 6.6.2024
4. Begin Coding
Start coding the recipe layout using HTML and CSS based on the chosen sketch. First, I input all the information and images into the HTML file.
 |
| Fig.3.4.6 , Initial Attempt ,Week 7, 6.6.2024 |
After that, I open a CSS file and link it to the HTML. Then, I'll begin arranging the layout according to my sketch #3. To maintain balance in the layout, I've decided to use only two columns for both the ingredient and serving sections ( Right fig ).
 |
| Fig.3.4.7, Arrange the layout using css ,Week 7, 6.6.2024 |
After that, I adjust the background colour, recipe book colour, and font colour using the colour palette I discovered on Pinterest.
 |
| Fig.3.4.8, Colour palette ,Week 7, 6.6.2024 |
Lastly, I make some font size adjustments and switch to a different font family to enhance the overall appearance of the recipe layout. I choose the fonts from Google Fonts.
H1 & H2 : DM Serif Text
Remaining texts : Barlow
 |
| Fig.3.4.9, Adjust Font Size & Change Font ,Week 7, 6.6.2024 |
Final Submission / Exercise 3 : Creating a Recipe Card
| Fig.3.4.10, Final Submission / Exercise 3: Creating a Recipe Card ,Week 7, 6.6.2024 |
REFLECTION
Over these 9 weeks, I've been learning the basics of HTML and CSS, which was a completely new experience for me. It was exciting to get into web development and start creating things from scratch. When I coded things correctly, it felt really fun and rewarding to see my work come together as planned.
However, it wasn't always easy. Since I didn't have a deep understanding of HTML and CSS, I often felt stuck and unsure of what to do next. It was especially challenging when I ran into problems or wanted to add features but didn't know how. These situations were frustrating and sometimes made the process feel slow.
Despite the challenges, this experience has been valuable. It pushed me to think critically and solve problems. Even though it was sometimes frustrating, figuring things out made me feel more confident in my skills. I've realised that learning the basics is just the start, and there's so much more to explore in web development. Overall, this journey has had its ups and downs, but it has been worthwhile and has given me a solid foundation to build on. I hope the skills I've learned during these nine weeks will help me in my final project.
Comments
Post a Comment