Interactive Design-Project 2 - Working Web Page

-

  

23/Apr/2024

ZHANG HANYUAN/0363727/Bachelor of Design (Honors) in Creative Media

Interactive Design /Taylors University

Project 2: Working Web Page

INSTRUCTIONS

Project 1:Prototype Design – Digital Resume/CV

⇛⇛⇛⇛⇛⇛ 

Static prototype LINK

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


Open Figma and export the digital resume you made in the previous project. Put all the elements above in the ‘CV’ folder.





Find the background color in the CV design made in Figma and convert it into code.











FINAL WEB PAGE LINK

https://zhanghanyuanproject2webpage.netlify.app/




Comments

Post a Comment

Popular posts from this blog

Advanced Interactive Design - Task 1: Thematic Interactive Website Proposal

-
Image
22/4/2025 - 13/5/2025- WEEK1-WEEK4 ZHANG HANYUAN / 0363727 Information Design / Bachelor of Design (Hons) in Creative Media Task 1: Thematic Interactive Website Proposal List LECTURES INSTRUCTIONS FEEDBACK REFLECTION LECTURES ： Week 2: Adobe Animate (Exercise 1) In our Week 2 lesson, we learned how to draw with Adobe Animate. We were trained on how to utilize several tools, including the form tool, selection tool, and paint bucket tool. After the tutorial, Mr. Shamsul asked us to draw a boat for practice purposes. Week 3: Adobe Animate (Exercise 2) Week 4: Adobe Animate (Exercise 3) INSTRUCTIONS: Task 1  Description Thematic Interactive Website Proposal for Brand Engagement. A thematic interactive website is a website that focuses on a specific theme or concept with the aim of incorporating interactive elements to interact with users. Most such websites utilize multimedia such as videos, animations, interactive graphics displayed on the page, or other clickable elements which ...
Read more

Advanced Typography/Task 1

-
Image
  25/Sep/2024- 11/Oct/2024 (week 1-week 4) ZHANG HANYUAN/0363727/Bachelor of Design (Honors) in Creative Media Advanced Typography/Taylors University Task 1: Exercise - Typesetting Systems and Finding Types LECTURES SUMMARY: WEEK 1  LECTURES : In week 1, Vinod introduced us to the module requirements and semester assignments! During this week, we had to complete eight printing systems Axial Radial Extended Random Grid Modular Transition Bilateral 1-Axial System All elements are aligned to the left or right of a single axis, which can be curved fig .1,1  Axial System 2-Radial System All elements extend from a single focus and can have multiple focuses. fig .1.2 Radial System 3-Dilatational System All elements expand in a circular manner from a central point, and with a layered approach  can use multiple circles with messages fig.1.3 Dilatational System 4-Random System Elements don't have a specific pattern or relationship, but there is a method in the chaos of cr...
Read more

Information Design - PROJECT 1

-
Image
Information Design -  Project 1 02.17.2025 - 03.03.2025 / Week 3 - Week 5 ZHANG HANYUAN / 0363727 Information Design / Bachelor of Design (Hons) in Creative Media Project 1 -Part 1&2 LIST Instructions Lectures Part 1: Infographic poster Part 2: Minimal animated infographic Feedback Reflection INSTRUCTIONS Lectures week 3 week 4 week 5 lecture link PART 1:--Infographic poster Require： Choose 1 infographic poster reference from Internet (Please consult before proceed) Redesign the poster into A4 size. Sketch the idea and process Redesign and simplify the poster based on visual hierarchy & typography Simplify the poster's design based on color, shape & pattern Attach your final poster on E-Portfolio with explanation and reflective writing Inspiration &  Concept (initial ideas and drafts) I found a poster reference on the Internet (Pinterst) and made a preliminary idea proposal. After showing it to Mr. Fauzi, he said that this one had been refined and suggested tha...
Read more