Interactive Design / Exercises
Teh Ming En/0364908
Interactive Design-Bachelor of Design (Honours) in Creative Media--Taylors University
Exercises
Instructions
Exercise 1: Web Analysis
We need to choose TWO (2) websites from the link given. Review the website
that we 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
in not less than 500 words.
What To Have in The Analysis:
- 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.
The website link that I chose: https://www.csswinner.com/winners
Website 01: La Formosa
1. Purpose and Goals
|
| Fig 1.1 Homepage Of The Website |
The purpose of the website is to showcase the brand's beer. It promotes its
brewing process and ingredients to engage with consumers. The goal of it is to
create a memorable online experience for visitors and a connection with
consumers.
2. Visual Design and Layout
|
| Fig 1.2 Page Of Showcase The Beer |
The website is consistent with the color scheme of the beer packaging, which deepens customer memories of the product. The use of images is appropriate for the overall website.
|
|
Fig 1.3 The Word 'BOUTIQUE' Obscured By Image |
|
| Fig 1.4 Page Introduce The Beer |
|
| Fig 1.5 Text And Button Appear Crowded |
In terms of layout, the titles were displayed clearly on the pages. Some text
is obscured by images, this causes the text appear incomplete. On the page
introducing the beer, the content is lengthy, but the entire text is used in
uppercase, this reduces the readability of the content. Additionally, the
layout of a page appears crowded between the text and 'Oder Now'
button. It needs to use more white space. The design of the website is
great but needs to improve the layout.
3. Functionality and Usability
|
| Fig 1.6 Clearly Labels On Homepage |
The homepage clearly labels the main sections such as Home, About, and Order Now, and they are easy to find. However, when clicking the Explore button, the page does not respond. When I click the Contact button, it redirects to the order page instead of the contact page.
|
| Fig 1.7 Transition Screens |
The website uses 3D models to decorate parts of pages, which adds to the
visual appeal. The transition screens are creative and cool, which
enhances the visitor's experience. The functionality is good, but it lacks
usability.
4. Quality and Relevance of the Content
The website's content is clear but lacks some information and details.
The words used are easy to understand. It is also relevant to its
purpose and aligns with its goals.
5. Website's Performance
|
| Fig 1.8 Test Website On Mobile Device |
The website loads quickly, and the transition screens are smooth
without any lag. I tested the website on two browsers, Google Chrome and
Microsoft Edge, and it functions properly on both browsers. On laptops,
its responsiveness is normal. However, browsing the website on a mobile
phone differs significantly from the laptop experience. Many contents
and designs are missing, it is unfriendly for mobile users.
Words: 331
Website 02:
Optimist India
1. Purpose and Goals
|
| Fig 1.9 Homepage Of The Website |
This website is an online presence for a creative agency and design
studio. Its purpose is to introduce the studio and showcase its
portfolio of work. The goal of the website is to promote the studio
and increase its visibility among a wider audience.
2. Visual Design and Layout
|
| Fig 1.10 Showing The Effect |
The website used a color scheme of black, white, and gray for its
background and text. There is a special design that is the watercolor
collision effect that appears in the background as users scroll down on
most pages, which adds visual interest.
|
| Fig 1.11 Titles |
However, on some pages, the titles quickly disappear when I scroll
down, making it difficult to catch titles such as 'Portfolio' and 'Our
Story.' The images are relevant to the titles and content. The overall
design of the website is great.
3. Functionality and Usability
|
| Fig 1.12 Clearly Labels On Homepage |
The website's navigation is clear, and the buttons are easily
accessible for browsing different sections. The 'Optimist' and 'O' icons
on the top also function as home buttons. This setup ensures usability,
even if one of the buttons doesn't work, users can still navigate back
to the homepage using the remaining buttons.
|
| Fig 1.13 Interactive Elements |
The website effectively utilizes interactive elements to showcase the
studio's portfolio, favourite projects, studio goals, etc. Engaging
users and enhancing their experience. Furthermore, the scrolling of the
website is smooth without any lags. The functionality and usability of
the website are good.
4. Quality and Relevance of the Content
The website provides accurate and authentic information, and users can
easily find the studio's social media by clicking on the buttons. The
content on the website is clear and easy to understand, using simple and
straightforward language.
5. Website's Performance
|
|
Fig 1.14 Test Website On Mobile Device |
I also used two browsers and devices to test its load times,
responsiveness, and compatibility. The website has a fast loading
speed in both browsers and can be responsive on different
devices. The website has a really creative design.
Words: 298
Total Words: 629
Exercise 2: Web Replication
In exercise 2, we need to replicate two websites. We have to select two of the three website links given to replicate.
Task required:
Choose any two from the link given. Follow the dimensions of the website from the width and height. You can use any image from stock image or free stock icon. The image that you will be using does not have to be an exact image from the original website. You may replace it with a similar image. Focus on the layout, type style, and color style. To find similar typefaces/fonts, you can download fonts from Google Fonts.
Website 01: https://www.oceanhealthindex.org/?authuser=0
Process
 |
| Fig 2.1 Full Size Screencapture Of Website |
After comparing fonts on the webpage with the Google Fonts website, I decided to use the Montserrat and Reddit Sans fonts for the entire website.
 |
| Fig 2.2 Text Before Kerning |
 |
| Fig 2.3 Text After Kerning |
I found that the spacing of the text on the website was different from our normal text spacing, so I have to kern the text.
 |
| Fig 2.4 Replicate The Elements |
Mr. Shamsul said that the Logo of the website don't need to be exactly the same and I made a roughly logo on it. I created two ellipses and a rectangle and made them partially overlap. Then, I used the minus front in Pathfinder to subtract the overlapping parts and the rough logo was done. I also used them on the other elements, such as the letter 'm' and the 'head' of letter 'i'.
 |
| Fig 2.5 Replicate Graphic Elements |
Moving on, there are some simple graphic elements in the websites, and I chose to replicate them with the pen tool, shape tool and line tool.
 |
| Fig 2.6 Picture From Pexels |
 |
| Fig 2.7 Picture From Original Website |
About the use of website images, some of them were downloaded from the Pexels, while others are original images from the website. I also downloaded social media icons in Freepik. The replication of the first website was done.
Website 02: https://banditrunning.com/
Process
 |
| Fig 3.1 Full Size Screencapture Of Website |
Same as the first website, I chose to use Arial and Montserrat as the fonts of the website.
 |
| Fig 3.2 Before & After Kerning |
After typing all the text of the site, I started to kern the spacing of them. It is easier to kern the font spacing of this site than on the first site, because their spacing is not much different.
 |
| Fig 3.3 The Compare Of Both 'B' |
The special about this site 'Bandit' is the “B” in its name, it has been slightly adjusted, so I decided to draw it out with the pen tool and also minus front from Pathfinder to help me.
 |
| Fig 3.4 Logo |
Same with the first site, the logo was completed in roughly.
 |
| Fig 3.5 Picture From Original Website |
 |
| Fig 3.6 Picture From Freepik |
Final Submission
 |
| Fig 4.1 Final Web Replication 01 |
 |
| Fig 4.2 Final Web Replication 02 |
Exercise 3: Creating A Recipe Card
For exercise 3, we need to create a recipe card using HTML and CSS. We will learn to design a basic webpage that displays a recipe's ingredients and instructions in a visually appealing format. We are given the recipe website to choose the recipe as the reference.
Task required:
Create an HTML file named "index.html." Apply CSS rules to style the recipe card. We should 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.
Create a section that displays the following information:
- Recipe title
- Include necessary images for the page
- List of ingredients
- Step-by-step cooking instructions
Process
 |
| Fig 5.1 Creating A New HTML Document |
To begin, I chose to use Adobe Dreamweaver to complete the exercise. I put the general content of the original web page into my HTML document. I have used some pictures from the original website in the exercises.
 |
| Fig 5.2 Creating Class Selector |
 |
| Fig 5.3 Editing In CSS Part |
After that, I created a class selector so that the seasonings and ingredients can be displayed on the right side of the first picture.
 |
| Fig 5.4 Separate List Of Seasonings |
 |
| Fig 5.5 Editing In CSS Part |
There are a total of eight seasonings that need to be prepared. It would be too long if they were all listed together. So I use class selector to separate them into two parts to make it easier to edit in the CSS part.
 |
| Fig 5.6 Adding Fonts |
I chose two fonts for my site from Google Fonts.
 |
| Fig 5.7 Editing Images In CSS |
In the images part, I wanted to make them look comfortable, so I used border-radius and box-shadow on the image to give the them a shadow.
 |
| Fig 5.8 Creating Table |
In this part, I have chose green as the primary color of my site and applied it to the headings and part of the content. The original recipe website provided a notes for viewers, I want to make a table to display the notes, this is convenient for viewers to read.
 |
| Fig 5.9 Creating Form |
 |
| Fig 5.10 Editing In CSS |
For the last part, I created a comment and subscribe parts. Here I used textarea, input and label in the form. I also edited them in the CSS part to decorate them look better.
Final Submission
Netlify Link: https://recipe-spicy-miso-sup.netlify.app/
 | |
|
Reflection
Through this lecture, I have a better understanding of user experience design and website structure. The first class activity is my first experience with interactive design. To me, that experience was truly memorable. Because it was the first time attempted an application on paper from a designer's perspective, me and my team members were panic as we wanted to perform well. Besides that, by observing the two exercises (web analysis and web replications), I found that my understanding of web pages has deepened, from structure to layout and so on. For the exercise 3, it was a new experience for me. In this exercise, I was allowed to create web pages independently. Although I have just started to learn how to write code, I am more familiar with them through this exercise. In addition, I will also use the browser to gain some knowledge about the code. There is still a lot I need to learn about in this area.
Feedback
General Feedback: For all the files attached from Google Drive make sure in public. The process should be presented in the blog.
Comments
Post a Comment