Interactive Design - Task 2 Working Web Page

Week 9-Week 10

JIN RONG / 0361701
Interactive Design / Bachelor of Design (Hons) in Creative Media
Project 2: Working Web Page

INSTRUCTIONS


LECTURES






Project 2: Working Web Page

Working Web Page

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.
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

Prototype review
Before processing the webpage, I reviewed the prototype webpage in Project 1 regarding layout and layout. I have layouts in three and four prototypes.


I have added mouse hover animation effects in the skills section







I have created a hyperlink in the information section for easy contact.




I found that my webpage does not adhere to responsive design principles, as it cannot ensure compatibility between different devices and screen sizes. I made some modifications









Final Submission












评论

发表评论

此博客中的热门博文

Application Design II / Task 1

图片
WEEK1-WEEK4 NAME: JIN RONG I.D: 0361701 COURSE: Application Design II  / Bachelor of Design (Honors) in Creative Media Application Design II / Task 1 INSTRUCTION Week 1  To Do List  Get analysis feedback from GPT, prompt out all the pros and cons based on your app MVP features. Update blog Communicate with ChatGPT ✅ Highlights (good things) Consistent visual style: color matching and font usage are consistent, in line with Jakob’s Law (users expect the interface to follow a familiar pattern). Clear layout: the screen is divided reasonably and has a good hierarchical structure, in line with the Gestalt Law of Proximity (related elements are close together). Intuitive icon use: icons are intuitive, which helps speed up user understanding and reduce cognitive burden (in line...
阅读全文

Information Design - Exercise 01: Quantifiable Information

图片
WEEK1-WEEK 7 NAME: JIN RONG I.D: 0361701 COURSE: Information Design / Bachelor of Design (Honors) in Creative Media GROUP: Class 01 Sec 04 Information Design - Exercise 01: Quantifiable Information INSTRUCTION Exercise 1 - Quantify & Visualize Data  For this exercise we supposed to quantify our chosen items and arrange the objects into a presentable layout or chart. I decided to go with fluffy color deco balls. I started by sorting them based on their colors and then arranged them in order of their quantity and condition on the A3 paper.  Fig1.1 Sorted out according to colours Feedback: The number of buttons is a little small, you can get more I started by arranging them in order of their quantity on an A4 sheet of paper. Then I start to finish and finalize my ideas Exercise 02 - L.A.T.C.H. In exercise 2, we have to organize a group of information int...
阅读全文

Information Design - Project 1

图片
  WEEK1-WEEK 7 NAME: JIN RONG I.D: 0361701 COURSE: Information Design / Bachelor of Design (Honors) in Creative Media GROUP: Class 01 Sec 04 Information Design - Project 1 Part 01: Infographic Poster Instructions 1. Choose 1 infographic poster reference from Internet (Please consult before proceed) 2. Redesign the poster into A4 size. Sketch the idea and process 3. Redesign and simplify the poster based on visual hierarchy & typography 4. Simplify the poster's design based on color, shape & pattern 5. Attach your final poster on E-Portfolio with explanation and reflective writing Chosen Poster After deciding between a few posters, I proceeded with this infographic poster  Digitisation process COLOR I chose a color scheme dominated by blue and teal because they effectively convey the purity and tranquility...
阅读全文