Interactive Design / Project 2 / Working Web Page

18.6.2024 - 29.6.2024  / Week 9 - Week 10  

You Siyuan / 0366978
Interactive Design / Bachelor of Design (Hons) in Creative Media / Taylor's University 
Program name bachelor of design (honors) in creative media

Project 2 - Working Web Page 



TABLE OF CONTENTS

1.  Instructions 
2. Lectures
3. Project 2 - Working Web Page 
4. Reflection



 Instructions 






Lectures





Project 2 - Working Web Page 

The goal of this task is to transform the static prototype in Project 1 into a fully functional interactive web page.

Requirements:
Use your knowledge of web layout to create a working website that closely matches your original prototype.
Look at the static prototype in Project 1 and analyze its layout, typography, color scheme, and images.
Use HTML and CSS to transform design elements into code, ensuring a faithful representation of the original prototype.
Aim for pixel-level accuracy while maintaining responsive design principles to ensure compatibility between different devices and screen sizes.
Upload files in Netlify, update this e-portfolio using all the processes documented in this blog, and then submit the link as a submission.

Process:



 Fig.1.1Colour Palette


Fig.1.2Image Used




Fig.1.3Code








Fig.1.4Ultimately










Reflection

This project was a valuable experience for me and helped me deeply understand the importance of planning and iterative development. I learned how to find a balance between aesthetics and functionality, and recognized the critical role of testing in delivering high-quality products. In future web development projects, I will apply these lessons and continue to focus on user-centered design and responsiveness. Through continuous reflection and improvement, I believe I can make greater progress in this field.

Comments

Post a Comment

Popular posts from this blog

Information Design/Final Project

Image
  03/02/2025 - 17/03/2024 (Week 01 – Week 07) You Siyuan / 0366978 Information Design / Bachelor of Design (Honours) in Creative Media / Taylors University Final Project CONCENT INTRODUCTION FINAL PROJECT FEEDBACK REFLECTION INTRODUCTION FINAL PROJECT Introduction Based on FLIP group topic research, produce a basic video animation. 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 awareness Explaining a process Defining a concept Any time based media and software using photography, vector imagery. Organization Principles – LATCH and Content Organization Aesthetic Principles – Animation principles Cognitive Principles – Principles of visualization The presentation must be deliberated on, consider each assessment rubric of sorts to your final outcome: Show causality Multivariate graphics and visuals Integrate word number and images Content count Within eye...
Read more

Information Design Progect 1&2

Image
You Siyaun / 0366978 Information Design / Bachelor of Design (Hons) in Creative Media  Progect 1&2 CONCENT INTRODUCTION LECTURE PROJECT 1&2 FEEDBACK REFLECTION INTRODUCTION LECTURE WEEK 3 Key Concepts: Chunking  – People can better remember information when it is grouped into meaningful  chunks  rather than presented as individual elements. Cognitive Load  – If too much information is presented at once, it exceeds the brain’s processing capacity, leading to confusion or forgetfulness. Applications in Design & Communication: User Interface (UI) Design: Menu options or navigation links should be grouped into 5-9 items per section for better usability. Education & Learning: Breaking down complex concepts into small, manageable chunks enhances comprehension and retention. Marketing & Advertising: Product messages should be short, concise, and structured within the memory limit to maximize impact. Limitations & Modern Updates: Some later resea...
Read more

Major Project：Final

Image
WEEK 01 - WEEK 15 (22/04/2025 - 1/08/2025) You Siyuan (0366978) / Bachelor of Design (Honours) in Creative Media Minor Project INSTRUCTIONS PROJECT  All the members have shared their discoveries. We have selected some colors as the main colors for our products. Most people prefer the second one. This is some relevant material for these products. After the layout was designed, everyone discussed and agreed on the font style. The final poster we designed. Google Docs https://drive.google.com/drive/folders/1euepJuK86V_5j9Ow9fHMbmIF3wXB8WpE?usp=sharing PPT https://www.canva.com/design/DAGuX3q3Ul8/IRVxTW-xc33n2nkMdo8Peg/edit?utm_content=DAGuX3q3Ul8&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton REFLECTION Experience This small project gave me the opportunity to collaborate with team members from diverse backgrounds, which was a very valuable experience. During the project, I was mainly responsible for the poster design and also participated in the overall c...
Read more