Interactive Design // Exercise 1-3
28th August 2023 - 16th October 2023 (Week 1 - Week 8)
Emran Tarek Sayed // 0346648
Bachelor of Design (Hons) in Creative Media
Interactive Design // Exercise 1-3
INSTRUCTION
<iframe
src="https://drive.google.com/file/d/1axYTTpG4QssakTuddTkAz4EMs-uYBMkR/preview"
width="640" height="480" allow="autoplay"></iframe>
EXERCISES
Exercise 1: Web Analysis
The first exercise instructed to us by Mr Shamsul is to write a
report of any two websites from the link he gave to us
in the Google Classroom. We need to find the strengths and
weaknesses of the chosen websites in the report. The report
must be in Google Slide format, 500 words or less, and
screengrab each of the parts that we explain.
The link he gave us and the chosen two websites can be found
below:
The link:
https://www.csswinner.com/winners
Website 1:
https://people.wannathis.one/
Website 2:
https://annautkina.com/
I started writing the report a few days after the initial class.
Before writing the report, I went through the two chosen websites
and fidgeted around them, observing and admiring them
simultaneously. After a bit of a while, I have gotten used to the
websites and am ready to write the report for the
websites.
Progression
Google Slide
https://docs.google.com/presentation/d/e/2PACX-1vQnvJ1LZjDccWMQmqJQQ43nSR__oniqgrQdGRhR4s9_9bgXaBpEDEg35zvqOMdws_F7xSncqsrB2RAP/pub?start=false&loop=false&delayms=3000&slide=id.p
Fig. 1.0 Web Analysis 1 (Cover Page)
4th September 2023
Fig. 1.1 Web Analysis 2 (Second Page)
4th September 2023
Fig. 1.2 Web Analysis 3 (Third Page)
4th September 2023
Fig. 1.3 Web Analysis 4 (Fourth Page)
4th September 2023
Exercise 2: Web Replication
In the second exercise, we are tasked to replicate any
two existing main pages of websites in the
link he has given to us. We are to follow the
dimensions of the page from width to
height. Choosing any images, fonts,
colours, etc, with a similar style is
necessary.
Here are the two website links I have chosen for the replication
exercise:
Website 1:
https://www.morganstanley.com/?authuser=0
Website 2:
https://banditrunning.com/
Progression
First Website Replication
I started by taking a screenshot of the web page, inspecting it and
typing "run>screenshot" to capture an area screenshot of the
whole main page.
Fig. 2.0 Web Replication Start
8th September 2023
Fig. 2.1 Web Replication 1 Reference
8th September 2023
As I was done with the screenshot, I used the main page as a
reference to create a replica of my own main page. Below are steps
taken to finish the whole replica:
.png)
Fig. 2.2 Web Replication 1 (Part 1)
8th September 2023
.png)
Fig. 2.3 Web Replication 1 (Part 2)
8th September 2023
.png)
Fig. 2.4 Web Replication 1 (Final Part)
8th September 2023
Fig. 2.5 Web Replication 1 Complete
8th September 2023
Second Website Replication
Not much difference compared to the first one, I took a
screenshot of the whole main page. I then used it as a reference
to replicate the website. An additional detail I would add is
that I used Procreate to replicate the logo that can't be
replicated by searching for the images.
Fig. 2.6 Web Replication 2 Reference
9th September 2023
The steps taken to replicate the web:
.png)
Fig. 2.7 Web Replication 2 (Part 1)
9th September 2023
.png)
Fig. 2.8 Web Replication 2 (Part 2)
9th September 2023
.png)
Fig. 2.9 Web Replication 2 (Final Part)
9th September 2023
The complete version of the second web replica:
Fig. 2.10 Web Replication 2 Complete
9th September 2023
Source
The source where I got similar fonts and images
from.
1. https://www.pexels.com/
2. https://fonts.google.com/
Comparison
Website 1
Fig. 2.11 Web Replication 1
Original (Left) & Replica (Right)
9th September 2023
Website 2
Fig. 2.12 Web Replication 2
Original (Left) & Replica (Right)
9th September 2023
Exercise 3
We are given the final exercise; we are required to
create a recipe card using HTML and
CSS code from what we have learned in class. We must create
a basic website design that displays the
food ingredients and instructions. The name of the
HTML needs to be "index.html" and
"style.css" for CSS. It is required to have the
recipe title, related images,
list of ingredients and
step-by-step instructions.
I didn't join a few classes due to my trip overseas, but I managed
to do it in the end with the help of Mr Shamsul's recorded video and
YouTube.
Progression
I started by choosing the food that I would be doing for this
exercise. Without a second thought, I have decided to create a Kuih
Tepung Pelita recipe card as it is my favourite Hari Raya
kuih.
Planning
I began writing down everything that needed to be displayed on the
website.
<iframe
src="https://drive.google.com/file/d/1GkqEkZ5XtsuQZ_ocfYfnxkPOT-z0hpRQ/preview"
width="640" height="480" allow="autoplay"></iframe>
HTML Section
Without further ado, I commenced by watching the recorded videos
sent by Mr Shamsul and a couple of YouTube videos to learn the
basics of HTML codings. Firstly, according to my planning note, I
typed down the codes and put everything in order (it took me a few
minutes as it was pretty straightforward). Here is my first progress
(I forgot to mention that photos will be added
accordingly):
.png)
Fig. 3.0 HTML Code (First Attempt)
10th October 2023
.png)
Fig. 3.1 HTML Look (First Attempt)
10th October 2023
CSS Section
I then added a style.css to the index.html. As for this part, it
took me a while to figure out how to align the images, titles,
descriptions, etc. I removed the first image and added three new
images for each section. I centralised the top part, "Home",
"About", "Ingredients", and "Instructions". Left and right aligned
the images. And centralised the titles, headings, and descriptions
in their representative section. Here is how it looks now:
.png)
Fig. 3.2 CSS Code (First Attempt)
10th October 2023
.png)
Fig. 3.3 CSS Look (First Attempt)
10th October 2023
Updated HTML & CSS Section
To finalise the exercise, I decided to add a final touch to it:
colours. I decided to use three colours: dark blue, lighter yellow
and white. Adding the colours was relatively easy, so it was done
quickly.
But then I wanted more, so I came up with another section at the
bottom, a query section, where you can type down anything and
submit it. To show that it works, I had to make the disappear as
the submit button has been pressed to visualise that its been
submitted. I also added a colour change to the buttons at the top
and bottom for a cool effect.
I had to make sure it worked on other devices, too, so following
a YouTube video, I could make it adapt to different phone sizes.
Here is the final update on it:
.png)
.png)
Fig. 3.4 HTML & CSS Code (Updated)
10th October 2023
.png)
Fig. 3.5 HTML & CSS Look (Computer)
10th October 2023
.png)
Fig. 3.5 HTML & CSS Look (Phone)
10th October 2023
Here is the HTML and CSS code I used in the Adobe
Dreamweaver. I pasted it on my notes so you could see
it.
HTML Code
<iframe
src="https://drive.google.com/file/d/1ZntteRYgzROFNYaZSQRV7AafKaSYy1BY/preview"
width="640" height="480"
allow="autoplay"></iframe>
CSS Code
Final Outcome
For the final step, I added what I had done into Netlify.
Link to the webpage:
Kuih Tepung Pelita Recipe Card !
Kuih Tepung Pelita Recipe Card !
In case it doesn't work, here is the link to manually copy-paste:
https://657498f81b4717030b4c4442--emrantareksayed-exercise3.netlify.app/
FEEDBACKS
"Feedback has been mentioned under Exercises."
REFLECTIONS
Exercise 1
In this exercise, I looked through two websites to learn about their layout and features. This process exposed me to the importance of visually appealing design and easy navigation in web development. I took my time examining these websites' advantages and disadvantages. This helped me realize that, although having a visually appealing interface is essential for keeping users interested, a seamless user experience also requires easy navigation. I learned so much from this task, particularly how important it is to have a website that is both visually appealing and easy to use. This knowledge is essential for my upcoming web design projects because it has given me a better understanding of the delicate balance that must be struck between usability and aesthetics in web design.
Exercise 2
Replicating two websites required a thorough and instructive process. I had to carefully replicate the original websites' layout, colour schemes, and font styles, so it called for an acute attention to detail. This exercise tested my ability to replicate complex design elements accurately and patiently. It also highlighted how crucial honouring original designs when referencing them is. I gained a deeper understanding of the intricacies of web design and enhanced my technical skills due to this precious experience. I learned much about the components that combine functionality and visual appeal in a website. My understanding of the creativity and strategic thinking that go into professional web design has grown due to this assignment and my practical web design skills.
Exercise 3
Using HTML and CSS to create a recipe card was a rewarding and challenging experience. This project tested my coding knowledge and ability to create a functional and aesthetically pleasing webpage. Making the design responsive was my main goal to make the webpage look good and function well on various devices. The project became more complex when an interactive query section was added, introducing me to the dynamic aspects of web design. Through this exercise, I developed my coding skills and gained knowledge about the significance of colour, layout, and imagery in web design. This project was a practical lesson in designing visually appealing and user-friendly web pages and a means of honing technical skills.
Comments
Post a Comment