Interactive Design: Exercises

28/8/2023 - 10/10/2023 (Week 1 - Week 8)
Seh Zi Qi/ 0355872/ Bachelor of Design(Honours) in Creative Media
Module Name: 202308/ Interactive Design
Exercises
LIST

Exercise 1:
Exercise 2:
Exercise 3 & 4:


LECTURES



INSTRUCTION

<iframe src="https://drive.google.com/file/d/1m8uzcmfrnsSQ-1zmxppBqhq8Wro2TM0Z/preview" width="640" height="480" allow="autoplay"></iframe>

_______________
Exercise 1 - Web Analysis
“Your task is to analyze an existing website and identify areas for improvement. This exercise will help you develop your critical thinking skills and gain insights into web design best practices.”

____________
Process

I started off by choosing 2 specific websites from the link that Mr Sham sent. I decided to choose AIMKO and Anya’s Gallery for my specific websites.

Fig 1.1, Choosing websites, 1/9/2023

After that, I did the analysis which can be seen after this.

____________
FINAL Web Analysis


Fig 2.1, Final Web Analysis (AIMKO), 4/9/2023

Fig 2.2, Final Web Analysis (AIMKO), 4/9/2023

Fig 2.3, Final Web Analysis (AIMKO), 4/9/2023

Fig 2.4, Final Web Analysis (AIMKO), 4/9/2023

Fig 2.5, Final Web Analysis (AIMKO), 4/9/2023

Fig 2.6, Final Web Analysis (Anya’s Gallery), 4/9/2023

Fig 2.7, Final Web Analysis (Anya’s Gallery), 4/9/2023

Fig 2.8, Final Web Analysis (Anya’s Gallery), 4/9/2023

Fig 2.9, Final Web Analysis (Anya’s Gallery), 4/9/2023

Fig 2.10, Final Web Analysis (Anya’s Gallery), 4/9/2023

Fig 2.11, Final Web Analysis PDF, 4/9/2023


_______________
Exercise 2 - Web Replication
“ Your task is to replicate an existing website to gain a better understanding of its structure. This exercise will help you develop your design skills using software such as Photoshop or Adobe Illustrator, and gain insights into web design best practices.”

____________
Process

I started off by choosing 2 out of 3 websites, I went with Morgan Stanley and Ocean Health Index. After choosing my website, I took screenshots for reference and went into Adobe Photoshop to recreate the website.

Fig 3.1, Using screenshots as a reference, 8/9/2023

After putting in the reference, I started replicating each section; When I was making each section, I realised that they're very clean and direct with their layouts because they only show what they want you to see. 

When replicating, I realised that the background used images that I didn't know where to find so I taught myself a neat trick where if I inspected the elements of the website, I could find each and every image if I opened the right files.

Fig 3.2, Inspecting elements, 9/9/2023

After downloading the specific images from the source code, I went back to replicating the website in Photoshop. For maximum precision, I went ahead and compared each text and layout next to the screenshots just to be sure that it was the right size and length.

Fig 3.3, Inspecting elements, 9/9/2023


____________
FINAL Web Replication

Google Slides Link:


Fig 4.1, Final Web Replication (Morgan Stanley) 1, 11/9/2023

Fig 4.2, Final Web Replication (Morgan Stanley) 2, 11/9/2023

Fig 4.3, Final Web Replication (Morgan Stanley) 3, 11/9/2023

Fig 4.4, Final Web Replication (Ocean Health Index), 11/9/2023

Fig 4.5, Final Web Replication PDF, 11/9/2023


_______________
Exercise 3 & 4 - Recipe Card [HTML & CSS Document Development & CSS Layout]

____________
Process

Firstly I went on Google to search for a recipe to copy, I stumbled on Sally's Baking Recipes and decided that chocolate chip cookies sounded like a good recipe to recreate.

Actual Recipe Website Link: 

Fig 5.1, Recipe website, 4/10/2023

Similar to exercise 2, I used 'Inspect Element' to find the specific pictures that Sally had used within her recipe.

Fig 5.2, Inspecting elements in recipe website, 4/10/2023

After finding the recipe and images that I needed, I went into Adobe Dreamweaver to create a recipe card that was needed for the assignment. 

I decided that the website should be direct and precise, so the only things I needed were the recipe, steps and additional notes; the CSS was quite simple since I just needed to change specific headers and paragraphs that felt right.

Fig 5.3, HTML & CSS of recipe card, 6/10/2023


____________
FINAL Recipe Card


Fig 6.1, Final recipe card, 10/10/2023


Fig 6.2, Final recipe card PDF, 10/10/2023


REFLECTION

Personally, I don’t have a lot to say but this module is very intriguing as I’ve never gone in-depth into how a website works and how important the functionalities are when it comes to being the interactive part of the website. Being able to create my own websites by replicating them in Photoshop and Dreamweaver, I’m able to figure out the ins and outs of what creates a good website and what I need to include when it comes to making my own website.


Comments

Post a Comment

Popular posts from this blog

Design Research Dissertation Compilation & Reflection

22/4/2024 - 4/8/2024 (Week 1 - Week 15) Seh Zi Qi/ 0355872/ Bachelor of Design(Honours) in Creative Media Module Name: DIS60304/ Design Research Dissertation Design Research Dissertation Compilation & Reflection LIST Task 1: Draft Dissertation Task 2: Final Dissertation & TURNITIN Report Task 3: Visual Design Publication Task 4: Research Article Journal Feedback Reflection ASSIGNMENTS TASK 1: DRAFT DISSERTATION Draft Dissertation Sheet Link: https://docs.google.com/spreadsheets/d/12bIVJyTp2OddJPPf3AAGkWGHcevJ202jg5kiVx6x-QI/edit?usp=sharing Fig 1.1, Draft Dissertation PDF TASK 2: FINAL DISSERTATION & TURNITIN REPORT Fig 2.1, Final Dissertation PDF Fig 2.2, TURNITIN Report PDF TASK 3: VISUAL DESIGN PUBLICATION Flipbook Link: https://online.fliphtml5.com/tksug/mrhu/#p=1 TASK 4: RESEARCH ARTICLE JOURNAL Research Article Journal Word Doc: https://docs.google.com/document/d/13CRuh3iITzNMBSuIHjlyeQD_HnJaEGVv/edit?usp=sharing&ouid=102364224628150830797&rtpof=true&sd=tr...
Read more

Information Design: Final Project

Image
3/2/2024 - 23/3/2025 (Week 1 - Week 7) Seh Zi Qi/ 0355872/ Bachelor of Design(Honours) in Creative Media Module Name: Information Design Final Project LIST Lectures Final Project Progress Week 1 Week 2-3 Week 4 Week 5-7 FINAL Final Project Feedback Reflection LECTURES Click here for the lectures. INSTRUCTIONS <iframe src="https://drive.google.com/file/d/19GbSnatV2f1uAcvbNRp8m00OaRtvXdc-/preview" width="640" height="480" allow="autoplay"></iframe> _______________ FINAL PROJECT " INSTRUCTION: Based on FLIP group topic research, produce a basic video animation. DESCRIPTION:  Using a processed design framework, you will now produce an infographic report to present the given information to a ‘target audience’ with the purpose of: Creating ...
Read more

Information Design: Project 1

Image
17/2/2024 - 16/3/2025 (Week 3 - Week 6) Seh Zi Qi/ 0355872/ Bachelor of Design(Honours) in Creative Media Module Name: Information Design Project 1 LIST Lectures Project 1: Animated Infographic Poster Part 1 Progress Part 2 Progress FINAL Animated Infographic Poster Reflection LECTURES Click here for the lectures. INSTRUCTIONS <iframe src="https://drive.google.com/file/d/19GbSnatV2f1uAcvbNRp8m00OaRtvXdc-/preview" width="640" height="480" allow="autoplay"></iframe> _______________ PROJECT 1: ANIMATED INFOGRAPHIC POSTER "Your main intention is to analyse the “delivery mechanism’s” that affect  the outcomes of your infographics. Though content is important,  however the aim of this presentation is too look at what makes an  infographic presentation work or does not...
Read more