Interactive Design | Project 2: Working Web Page

-
19.06.2024 - 29.06.2024 || Week 9 - Week 10
Hanson Pea Wei Hao || 0359463
Interactive Design || Bachelor of Design (Honours) in Creative Media || Taylor's University
Project 2: Working Web Page

Lists



Instructions



This assignment aims to transform our 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 our original prototype. Review our static prototype from Project 1 and analyze its layout, typography, color scheme, and imagery. We need to use HTML and CSS to translate the design elements into code, ensuring a faithful representation of the original prototype.

Project 1 (Static prototype):

Fig 1.1, Static Prototype for digital resume
Website for Project 1:

Fig 2.1, preview for Html

\
Fig 2.2, preview for CSS

Fig 2.3, a preview of how the website looks

Fig 2.4, a preview of how the website in difference device

Final Outcome

<Digital Resume>


Reflections

I really enjoyed this task, it let me understand how to make a real website based on my wireframe. It also taught me how important details to make a good website like color choice, typography, fonts, and arrangement of the layout. I guess the only problem I suffer will be making a skill bar, it takes me a long time to figure out, and get to do it after lots of errors.

Comments

Post a Comment

Popular posts from this blog

Typography/ Task 1:Exercise

-
Image
25 September 2023/ Week 1- Week 6 Hanson Pea Wei Hao 0359463 Typography / Bachelor of Design (Hons) in Creative Media / Taylor's University Task 1: Exercise List/ Jump link 1. Lectures 2. Instructions 3. Feedback 4. Reflections 5. Reading LECTURES Week 1:  Summary of class: Mr Vinod has briefed us on the module information booklet and ideas about how we going to start the module. He also talks about the rules and some advice for typography. Then, the class started, and we followed a video he made by himself about how to create a blog in Blogger. In the video, we learn about how to use compose and HTML, label the blog, and more. Lecture 1: Typo_0_Introduction -The importance of typography in our daily life. Calligraphy: The types of writing style. Lettering: Drawing the circumference of the letter Typography: The art and technique of writing and arranging language to become legible, readable, and appealing when displayed. Font: a set of printable or displayable typography or
Read more

Digital photography & Imaging / Task 1

-
Image
5 October 2023-  26 October 2023 / (Week 2 - Week 5 ) Hanson Pea Wei Hao / 0359463 Digital Photography and Imaging / Bachelor of Design (Hons) in Creative Media  Task 1: Exercise 1 Lists 1. Instruction 2. Tutorials 3. Feedback 4. Reflection INSTRUCTIONS Task 1| Exercise 1:Digital Collage Our first task was to create a digital collage by only using a set of images provided to us.   Fig 1.1, Composition 1 Fig 1.2, Composition 2 Fig 1.3, Composition 3 After getting feedback from Mr. Martin, he suggested that my composition 3 would be my final art for digital collage. Task 1| Exercise 2: Digital Imaging 1. Hearst mansion For this exercise, We have been learning to combine a character named Shazam into the Hearst mansion. Fig 2.1, Hearst mansion Fig 2.2, poster of Shazam Fig 2.3, Combine of Shazam and Hearst Mansion After that, We need to recreate with the same process but this time, we need to change the Shazam to myself. Fig 2.4, Hearst mansion with full body Self-portrait Task 3: B&a
Read more

Typography: Task 3: Type Design and Communication

-
Image
13 November 2023-  17 December 2023 / (Week 8 - Week 12 ) Hanson Pea Wei Hao / 0359463 Typography/ Bachelor of Design (Hons) in Creative Media Task 3: Typographic Exploration and Communication Lists 1.  Lectures 2. Instruction 3. Feedback 4. Reflection 5. Reading LECTURES All Online Lecture Note Week 8: Summary of class:  Independent's Leaning Week Week 9: Summary of class:  In this class, Mr. Vinod showed us some past year students' excellent e-portfolios and told us how can we improve our e-portfolios. After that, He had a feedback section for each student individually for our sketch and taught us how to digitize it. Week 10: Summary of class:  This week, Mr. Vinod told us to send the typeface to give us feedback. after that, He talked about the importance of creating a correct and good E-portfolio. After that, he showed current students the best example to us, he told us to fix our e-portfolio if we had problems with the last two that we handed in.  Week 11: Summary of clas
Read more