Interactive Design - Exercises
28/8/2023 - 8/10/2023 (Week 1 - Week 6)
Katelyn Tan Kye Ling (0354148)
Bachelor Of Design In Creative Media (Interactive Design)
Exercise 1-3
LECTURE
WEEK 1 - 28/8/2023
During our first class, Mr. Shamsul briefed us on what platforms we'll be using and what assignments are to come. He explained each assignment with much details and told us what we'll be learning in order to complete the assignments. He then went in depth into our first exercise which was called "web analysis" and assigned it to us.
Fig. 1.1 Google Classroom Exercise 1 (28/8/2023)
WEEK 2 - 4/9/2023
Firstly, we started off by our lecture where Mr. Shamsul taught us about usability and its key principles. (Notes are below) He then proceeded to give us a group activity. There were 4 groups and 4 scenarios given, each group had to design (on a paper) a prototype for a platform/website according to the scenario given, allowing other groups to test out later on. Lastly, we were given our second exercise which was to replicate 2 website on Adobe illustrator.
Fig. 1.2 Google Classroom Exercise 2 (4/8/2023)
WEEK 3 - 11/9/2023
During week 3, we were taught abt the website structures. This week we had a lecture and a group activity where we had to design a travel agency navigation menu. Mr. Shamsul then only asked us to update our e-portfolio for the week and ended class.
WEEK 4 - 18/9/2023
In week 4, we had a lecture about interactive designs web standards. Mr. Shamsul then gave us a tutorial on how to code. After learning about it, we were given an exercise to code a website for our own profile as homework.
In Class Exercise: file:///C:/Users/User/Desktop/interactive%20design%20coding/index.html
Personal Profile Webpage Exercise (Homework): https://katelyntankyeling.netlify.app/
WEEK 5 - 25/9/2023
In week 5, we learnt about CSS like how to add different fonts, colour, background, etc. We were also introduced to Adobe Dreamweaver and Mr. Shamsul showed us step by step on how to use it and code.
WEEK 6 - 3/10/2023
Class cancelled. However, Mr. Shamsul did give us an exercise to complete along with the recorded lecture and tutorial video.
INSTRUCTIONS
Exercise 1 - Web Analysis
Choose TWO (2) websites from the link given. (https://www.csswinner.com/winners?authuser=0) 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.
MY WEB ANALYSIS:
Exercise 2 - Web Replication
Choose any 2 websites from the link given. Follow the dimensions of the existing website from the width and height. This exercise will help to develop design skills using software such as Photoshop or Adobe Illustrator, and gain insights into web design best practices. 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.
Websites 1:https://www.oceanhealthindex.org/?authuser=0
FULL SCREENSHOT OF ORIGINAL WEBSITE 1:
Fig. 2.1 Screenshot of Website 1
I split the website into a total of 4 sections to replicate each part of the website.
MY REPLICATION OF WEBSITE:
Fig. 2.2 Section 1 of Website 1
Fig. 2.3 Section 2 of Website 1
Fig. 2.4 Section 3 of Website 1
Fig. 2.5 Section 4 of Website 1
Website 2: https://banditrunning.com/?authuser=0
FULL SCREENSHOT OF ORIGINAL WEBSITE:
Fig. 2.6 Screenshot of Website 2
Same as website 1, I split the website into a total of 4 sections to replicate each part of the website.
MY REPLICATION OF WEBSITE:
Fig. 2.7 Section 1 of Website 2
Fig. 2.8 Section 2 of Website 2
Fig. 2.9 Section 3 of Website 2
Fig. 2.10 Section 4 of Website 2
Exercise 3 - Recipe Card
In this exercise, we 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.
The recipe I've chosen was Kuih Kodok from this link.
I first drafted out on googles docs what content I wanted to include in my recipe card. Click here to view draft.
For the "extra information" part (Refer to google docs link above) I decided to make my own picture of it with icons and a table.
Fig. 2.11 Extra Information (7/10/2023)
HTML:
This is how my work looks like before CSS.
Fig. 2.12 HTML #1
Fig. 2.13 HTML #2
Fig. 2.14 HTML #3
Fig. 2.15 HTML #4
Fig. 2.16 HTML #4
CSS:
For the CSS part, I applied what Mr. Shamsul taught in week 5 and 6. Like changing fonts, colour of text, size of text, text aligns etc.
P.s: I also changed the "extra information" picture slightly to fit the whole aesthetics of the website.
Background used:
Fig. 2.17 Background Used (7/10/2023)
New "extra information" picture:
REFLECTION
Experience
All these 3 exercises were really fun for me. The first exercise really wow-ed me. From the websites we were suppose to analyse on, I found so many good websites there. The navigation and interactivity of the websites were so cool that I did not even know a website could do that. However, the second exercise was kind of tedious. Replicating every single detail one by one was tough, the part where I had to find pictures that are close enough and the same size was also pretty difficult. But in the end I was able to pull through. The last exercise was my favourite. It was so fun making a recipe card, also this was my first website I've ever made.
Observation
I observed that different websites have their own different specialty and uniqueness to them. From the colour theme, to the font and to the pictures and placement of elements as well. I also observed that when a website has high interactivity it also must have very good performance and must be smooth running, if not users can get frustrated at the loading times.
Findings
I find that websites with so much interactivity (like the websites I analysed on in exercise 1) has a much higher success rate at catching users attention and can give information to users more efficiently once their attention is caught. I also find that have a plan for your website before designing it is very important like what I did for my recipe card.
Comments
Post a Comment