Labels

Interactive Design / Final Compilation & Reflection

2.9.2022 - 2.12.2022 (Week 1 - Week 14)
Takuto Hozumi / 0354047 / Bachelor Of Design (Hons) In Creative Media
Interactive Design
Final Compilation & Reflection

INSTRUCTION


SUBMISSIONS

Exercises

2.9.2022 - 14.10.2022 (Week 1 - Week 7)

Exercise 1 - TRIATHLON HISTORY


Exercise 2 - Vision for the Unequal World


Exercise 3 - Independent Learning Week Task

Fig.1: Exercise 3 Final Outcome JPEG

Exercise 4 - The Ultimate Web Design Workspace for Photoshop


W10 In-class Exercise - Layout Exercise


W11 In-class Exercise - Bootstrap Tutor


Project 1 / Landing Page Design

16.9.2022 - 23.9.2022 (Week 3 - Week 4)

Landing Page Design Final Outcome JPEG

Fig.2: Final Comprehensive Layout of LP (28/10/2022)

Project 2 / Working Landing Page

21.10.2022 - 28.10.2022 (Week 8 - Week 9)

Working Landing Page Final Outcome


Fig.3: Screen Shot of the LP Design(25/11/2022)


Final Project / Design, Exploration and Application

4.11.2022 - 2.12.2022 (Week 10- Week 14)

The whole of Website Final Outcome


Fig.4: Screen Shot of my Website Design(28/11/2022)

List of pages produced
Total 6 pages


REFLECTIONS

Experiences
Through this module, I was able to learn the basics of website building with HTML, CSS, JS, and other languages. I have run a blog on WordPress and edited HTML and CSS in small areas such as widget areas and additional CSS, but this is my first experience creating an entire website from scratch in this module. Compared to creating a website using a template or editor, it was more time-consuming to come up with a design and implement it, but I found it very interesting to be able to create my ideal design more freely.

Observation
I record my understanding of technical matters.
  • The structure of a website is implemented by placing HTML, CSS, and other code in the server
  • The arrangement of elements is based on HTML
  • HTML can be linked to other program files such as CSS and JS or external resources as needed
  • Distinguish between block and inline elements
  • CSS is mainly responsible for the decoration of the website
  • JS can implement more complex movements but seemed more difficult to handle than CSS (I did not learn how to edit in this module)
  • Very helpful and time-saving if you could copy some of the resources online and paste them into your own code
  • Images and videos can be stored in a relatively free and tidy manner
  • When loading preconfigured code, such as bootstrapping, the code added yourself may not be effective due to the priority level (Need to look into this later. In this module I added !important to solve)

Findings
I think the most significant learning outcome of this module was understanding that the code is a single command and that the functionality is implemented by combining multiple commands. The best example is responsive design. I never understood how responsive design worked until now. Now I understand the basic logic of how it is implemented by adding fluidity to a content segmentation element like div with some code, and changing the width specification according to the screen width using media queries. Perhaps, depending on the design of the page, I could write completely different code for the PC and SP versions and switch between display/non-display. From now on, I will be able to look up the code on the Internet and implement it based on the design I want to create.
Labels:

Comments

Post a Comment

Popular Posts