Design Research Methodology Final Project

 Blogspot! :)

2024-06-05 - 2024-08-03 (Week 11 - Week 15)
Jolin Ceria [Student ID 0363784]
Bachelor of Design and Creative Media in Taylor's University
Interactive Design Final Project 

Final Project - Website making

We were tasked to create a single-page website of our choice. Considering a disaster of a result I had in the last few times I tried to make something complex-looking due to my lack of experience and skill, I decided to make something much simpler. As I was binging the YouTube channel Spilled Ink at the time, I decided to use it as a website concept; Although what I failed to realize was that since this channel was relatively new (First videos were posted a little less than 3 months ago), there wasn't much content to go off of.

Fig 1.1 Prototype

After my prototype was approved of, I started coding. Even though I was advised to use BootStrap, I forgot about it for some reason? Results were meh, I had no idea how to code in the video selector, but I figured that I would figure it out in due time.

   
Fig 1.2 Test 1

I then decided to test something by turning my design in adobe XD into code through a plugin called "Locofy.ai" (I have no idea if this counts as cheating or not. Although the easiness was quite promising at first, it came to a head when the entire site fell apart, although it seems to be a given since it only really supports certain resolutions. This is my pathetic result in using locofy.ai.

Fig 1.3 Test 2

I decided to actually try BootStrap as I had just remembered to do so under Mr. Shamsul's advice. This time, I decided to focus more on the site being mobile-friendly. Although there were still some drawbacks (Such as the arrows not showing up after I uploaded it to netlify no matter what I did with positioning and z-index along with trying to shrink the arrows, I decided to simply leave it be, as I could still tap on the thumbnail either way. All that mattered to me at that point is that it was functional. I had gone down a mental spiral for reasons both related and unrelated to this project, and I was feeling very burned out, so I decided to just do with what I could.

End result


Fig 1.4 Test 3

Comments

Post a Comment

Popular posts from this blog

Design Principles Task 1

Image
Design Principles Task 1 - Exploration 03.02.2025 - 21.02.2025 Week 1 - Week 3 Jolin Ceria (0363784) Bachelor of Design (Honors) in Creative Media Table of Contents Lecture Notes Instructions Task Principles Gestalt Theory Contrast Emphasis Balance Repetition Movement Harmony Symbol Words and images Exploration Feedback Reflection Lecture Notes Elements of Design: Point: Simplest element of design, used as a repetitive mark forms a line and will create two/three dimensional figures and forms as it moves in space Line:  Can be active or static, aggressive or passive, sensual or mechanical to indicate directions, define boundaries of shapes and spaces, imply volumes or solid masses, and suggest motion or emotion and can be used to depict qualities of light and shadow and to form patterns and textures by grouping them together. Shape: Refers to the expanse within the outline of two dimensional area or within the three dimensional  object. Form : A three dimensiona...
Read more

Design Principles Task 3

Image
  Design Principles Task 3 - Development and Design 03.03.2025 - 19.03.2025  Week 5 - Week 7 Jolin Ceria (0363784) Bachelor of Design (Honors) in Creative Media Table of Contents Lecture Notes Instructions Task Design Process Rationale Feedback Reflection Lecture Notes Lecture Notes from Task 1 Lecture Notes from Task 2 Instructions Task Fig 1.1  Departure of the Winged Ship Information Title: Departure of the Winged Ship Year: 2000 Artist: Vladimir Kush Size: 80” x 100” Medium: Oil on Canvas Online Source:  Here We were to make our own designs based on one of the designs in Task 2 from our own choosing and a 200-word rationale detailing our choices. Design Process Fig 1.2 Sketch I'm using (I decided to use this concept but I used a composition similar to my third sketch) Fig 1.3 Progress report - 03/10/2025 This was the image I had initially given to Mr. Vinod to critique; While I was absent for that particular class I managed to...
Read more

Design Principles Task 2

Image
Design Principles Task 2 - Visual Analysis 21.02.2025 - 07.03.2025  Week 3 - Week 5 Jolin Ceria (0363784) Bachelor of Design (Honors) in Creative Media Table of Contents Lecture Notes Instructions Task Visual Analysis Sketches Feedback Reflection Lecture Notes Visual Analysis is a method of understanding design that focuses on the visual elements and principles. Part of it's process involves describing and explaining a visual structure and recognize how a designer chooses to communicate their ideas and implement things in their design. It's an important part of developing one's visual literacy, as it trains your ability to read and critically interpret images. There are three main steps in visual analysis: To observe  by closely looking and identifying the visual elements in a design and describing them in your own words, preferably without prior information about the design beforehand. Observing a design without prior information will help you look, think, and find goo...
Read more