INTERACTIVE DESIGN / Project2 (Working Web Page)

19 June 2024 - 29 June 2024 (Week9-10)
Kaho Yamaya / 0364278
Interactive Design / Creative Media / Taylor’s University
Project2- Working Web Page
JUMP LINK


・Submissions


INSTRUCTIONS

Fig 1.1 Instructions for this project, PDF

The objective of this assignment is to transform your static prototype from Project1 into a fully functional and interactive web page. You will apply your knowledge of web layout class to create a working website that closely aligns with your original prototype. Review your static prototype from Project 1 and analyze its layout, typography, color scheme, and imagery. Use HTML and CSS to translate the design elements into code, ensuring a faithful representation of the original prototype.
Aim for pixel-perfect precision while maintaining responsive design principles to ensure compatibility across different devices and screen sizes.
Upload the file in Netlify, update your e-portfolio with all the processes documented in the blog, and submit the link as a submission

SUBMISSIONS
Project2-Working Web Page (Week9-10)

WEEK9
Fig 2.1 Expected pages, Week9 (23/6/2024)

From Project1 Prototype, I would like to make these pages as one webpage. The purple pages in above are the main one, the green pages are the sub pages, and the yellow ones are the links for outside webpage.

WEEK10

Fig 2.2 Pre-layouts before start making page, Week10 (24/6/2024)

Before start making webpage, I made some layouts and expected visuals. I use Adobe Illustrator for making them.

Fig 2.3 Layouts before making actual webpage, Week10 (24/6/2024)

Fig 2.4 All files in my project, Week10 (29/6/2024)

I made html files and CSS files that related to individual html files because I want to do different things in each pages.

Fig 2.5, 6 Coding home page, Week10 (24/6/2024 - 29/6/2024)

I learned the moving picture part from several blog in internet. 

Fig 2.7, 8 Coding contact page, Week10 (24/6/2024 - 29/6/2024)

And also the contact page, I referred some seniors coding and professional’s blog to get how to make these functions in actual pages.


FINAL WORKING WEB PAGE

Fig 3.1 Final Working Webpage, MOV, Week10 (29/6/2024)




REFLECTIONS

First I made ideal visuals that I want to make in this project. However, it was the worst mistake. I’m not so familiar with HTML and CSS, and the visuals that I made are too difficult to make them as actual page. It took so many time and I couldn’t manage it by myself. I learned that before make any layouts, I need to research if it’s having a potential to come true. The most difficult part in this working process is the position of elements. I was too upset and rush myself to make my visual in dreamweaver, but the elements are moving too different position from what I expected and I almost start crying because I couldn’t found the error part. As a result, the visuals are going too different one. I prioritised my desire to make my own visuals instead of my actual skills of HTML and CSS. Therefore, I really really learned from this experiences that I shouldn’t misunderstand the priority in making webpage. 
My favourite part in this project is the moving pictures in home page. It was the most hard and fun part. And also I’m satisfied for my basic layouts of whole pages. The result was bit different from expectation, but I think I can make better layout from project1. I added too much characteristic in previous project, so I focused to make layout that have more readability and consistency.

Comments

Post a Comment

Popular posts from this blog

Digital Matte Painting / All Exercises and Projects

Image
24 Sep 2024 - 10 Jan 2025 (Week1-16) Kaho Yamaya / 0364278 Digital Matte Painting / Creative Media / Taylor’s University Exercises 1&2, Project1-3 JUMP LINK ・ Submissions ・ Feedback ・ Reflections INSTRUCTIONS Fig 1.1 Instructions for this module, PDF SUBMISSIONS For the first exercise, we need to get a fundamental knowledge for the field painting. To get these sense, we are going to do a edit on landscape picture to several time (morning, noon, twilight, night). Fig 2.1 Original landscape pic, Week1 (24/9/2024) This picture is for my original reference. I will use Photoshop for editing. Fig 2.2-5 Edited pictures, Week1 ( 26/9/2024) As the time and the sun goes, I edited the shadows in these pictures. The backgrounds in here are mountains, so I added some white in here because the objects paled out by the air.  Fig 2.6-8 Working screen of landscape drawing, Week2 (6 /10/2024) In this exercise, students requires to draw exact the same colour with their reference image. Student...
Read more

Information Design / Project1

Image
17 Feb 2025 - 10 Mar 2025 (Week3-6) Kaho Yamaya / 0364278 Information Design / Creative Media / Taylor’s University Project1: Animated Infographic Poster JUMP LINK ・ Lectures ・ Submissions 　・ Infographic Poster 　・ Minimal Animated Infographic ・ Feedback ・ Reflections INSTRUCTIONS Fig 1.1 Instruction of this module, PDF LECTURES Past lectures(W1-W7) are in  Exercise  post SUBMISSIONS DESCRIPTION:  After time exploring media and learning about information design, you will now develop an infographic that presents a series of different processes as visuals rather than text. REQUIREMENT: 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 work. This includes content but only as one of the many components of an infographic: PART 1: Infographic poster (10%)       ...
Read more

Major Project Ⅰ / Task1: Proposal

Image
3 Feb 2025 - 23 Feb 2025 (Week1-3) Kaho Yamaya / 0364278 Major Project Ⅰ / Creative Media / Taylor’s University Task1: Proposal JUMP LINK ・ Reflections PROGRESS From the week2 meeting, we decided our team's goal as animation. The basic storyline is come from Yong. The main characters are three. Father(protagonist), Mother, and daughter. We try to find references for character, world/environment, scene, artstyle, colour, and architecture.  Fig 1.1  Miro board progression, Week2 (12/2/2025) Fig 1.2  Storyline rough sketch, Week2 (16/2/2025) Before we proceed the sketches, I made a rough sketch of storyline(main event) to visualise and share the idea with all team members. Fig 1.2 Animation references, Week3 (17/2/2025) After we decided our decision, we started to find animation references. I suggested the stylised art style before we start to find the references because it makes our research more easy.   Fig 1.3 Environment sketch reference, Week3 (17/2/2025) Fig...
Read more