INTERACTIVE DESIGN / PROJECT 2 - WORKING WEB PAGE

08/05/2023 - 22/05/2023 / Week 6 - Week 8
Chew Zhi Ern / 0358995
Interactive Design / Bachelor of Design (Honours) in Creative Media / Taylor's University
Project 2 / Working Web Page


INSTRUCTIONS


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

LECTURES

Lectures: Refer to Exercises

PROJECT

Task: Working Web Page

Instructions:
The objective of this assignment is to transform your static prototype from Project 1 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.

Requirements:
- 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 and submit the link here. Update your e-portfolio with all the processes documented in the blog.


In this project task, I'm working my way through the process of transforming a static prototype into a fully functional and interactive web page. This project allowed me to apply my knowledge of web layout and design principles while ensuring a faithful representation of the original prototype.

To begin the process, I carefully reviewed the static prototype created during Project 1. I analyzed its layout, typography, color scheme, and imagery to understand its visual elements and overall design direction. This step provided me with a solid foundation for translating these design elements into code.

The static prototype from Project 1 is shown here:

Typeface used: 
ITC Garamond Std & Gill Sans MT

Colour Palette Used

Final Outcome for Project 1 - JPEG Format

Final Outcome for Project 1 - PDF Format


I then began using Adobe Dreamweaver to code. Implementing HTML and CSS is the focus of this phase. 

Using my previous knowledge of HTML and CSS, I started translating the design elements into code. I began by creating the HTML structure, ensuring semantic tags were used appropriately to enhance accessibility and search engine optimization.

Here are a few instances of process proofs.

HTML

Next, I focused on CSS styling, meticulously replicating the typography, color scheme, and layout from the static prototype. I paid special attention to achieving pixel-perfect precision, trying to ensure that every element matched the original design.

CSS

To create an engaging user experience, I employed JavaScript to add interactivity to various parts of the website. For example, I utilized JavaScript to create dynamic elements such as image sliders and interactive navigation menus, enhancing the overall usability and functionality of the web page.

JavaScript

In today's mobile-driven world, responsive design is crucial. Hence, I incorporated responsive design principles into my coding process to ensure that the website looked and functioned well across different devices and screen sizes. I utilized CSS media queries to adapt the layout, font sizes, and images based on the device's screen width. The @media rule is used in media queries to apply different styles for different media types/devices. This step involved rigorous testing and tweaking to achieve a seamless user experience on various devices.

CSS @media rules are included in the encoding part

Once I completed the coding part, I proceeded to upload the website to Netlify.

The end result of this endeavor is as follows.

HTML & JavaScript Code

CSS Code

Comments

Post a Comment

Popular posts from this blog

MAJOR PROJECT / PROJECTS

Image
26/04/2024 - 26/07/2024 / Week 1- Week 14 Chew Zhi Ern / 0358995 Minor Project / Bachelor of Design (Honours) in Creative Media / Taylor's University Projects INSTRUCTIONS <iframe src="https://drive.google.com/file/d/1BouMV6wry6NHld6fGib6QdoJmBBcPVMP/preview" width="640" height="480" allow="autoplay"></iframe> LECTURES Week 1: Introduction to the Module In the first week of the Major Project module, we were briefed on the overall objectives and guidelines. We were given the option to complete the project individually or as part of a group, with the understanding that there would be some limitations regarding the combination of different specializations and the number of people allowed if we chose the group route. After the briefing, Ms. Anis shared examples of past works from seniors, providing us with inspiration and insight into what had been accomplished in previous years. Following this, we began brainstorming ideas for our pr...
Read more

SONIC DESIGN / FINAL PROJECT - GAME AUDIO

Image
23/09/2024 - 20/12/2024 / Week 1- Week 14 Chew Zhi Ern / 0358995 Sonic Design / Bachelor of Design (Honours) in Creative Media / Taylor's University Final Project / Game Audio INSTRUCTIONS <iframe src="https://drive.google.com/file/d/1Hm1JQBXG_x3g0XBg7wMGOQajuKAe56gW/preview" width="640" height="480" allow="autoplay"></iframe> LECTURES Lectures:  Refer to   Exercises PROJECT FINAL PROJECT: GAME AUDIO In this final project, we will bring a gameplay video to life by designing and implementing its complete audio experience. The task involves creating sound effects, foley, and voice recordings to enhance the game's immersive quality. We will plan and organize studio recording sessions for capturing foley and voiceovers, with access to portable recorders if needed. The project emphasizes creativity, technical skill, and the seamless integration of sound elements to elevate the overall gaming experience. Choosing a gameplay video to...
Read more

SONIC DESIGN / PROJECT 3 - AUDIO STORYTELLING

Image
23/09/2024 - 20/12/2024 / Week 1- Week 14 Chew Zhi Ern / 0358995 Sonic Design / Bachelor of Design (Honours) in Creative Media / Taylor's University Project 3 / Audio Storytelling INSTRUCTIONS <iframe src="https://drive.google.com/file/d/1Hm1JQBXG_x3g0XBg7wMGOQajuKAe56gW/preview" width="640" height="480" allow="autoplay"></iframe> LECTURES Lectures:  Refer to   Exercises PROJECT PROJECT 3: AUDIO STORYTELLING For this project, we will select a fairy-tale story and create an engaging audiobook. This task builds on the skills developed in auditory imaging, requiring us to not only design a compelling soundscape but also incorporate recorded voice acting to bring the story to life. The objective is to integrate sound effects, voice recordings, and creative sound design to enhance the storytelling experience. The final audiobook should mimic a radio show, captivating listeners through immersive audio and carefully crafted sound element...
Read more