Interactive Design-Project 2

-
29.05.2023-05.06.2023 / Week 9-Week 10
Kor Qian Qian / 0359496
Interactive Design / Bachelor of Design (Hons) in Creative Media
Project 2


INSTRUCTIONS


Project 2

We were asked to code a working landing page with the prototype we had done earlier in exercise 2. I have chosen The Daily Mail, a UK news website.

This is the prototype I did earlier in Adobe XD:

fig 1 Landing page prototype

Progression:


fig 2 typeface chosen

Before I start, I find a font that look clean and easy to read, usually sans-serif font is more suitable to use in website content, so I decided to use "Poppins" as the font. 



fig 3 Web width

I keep the wed width at 80%, to leave blank on both sides of the screen.


fig 4 Responsive

Opening this webpage on devices with different screen sizes will show that all content is out of position, or even overlapped, so @media can help adjust the places of every content.


fig 5

Add a: link, a: visited, a: hover, a: active, improve the webpage's interactivity and allow users to see more clearly what they are doing.


fig 6

After I added hover in CSS, when the mouse pointer is on the menu, it will become blue.



fig 7

This is the display of the layout on a small screen. The CTA button flexes into a column and the menu bar is compressed into a hamburger icon.

Final Submission:

https://korqianqian-project2.netlify.app


Comments

Post a Comment

Popular posts from this blog

Advanced Interactive Design-Final Project

-
Image
23.06.2024-03.08.2024 / Week 9-Week 15 Kor Qian Qian / 0359496 Advanced Interactive Design / Bachelor of Design (Hons) in Creative Media Final Project INSTRUCTIONS Final Project -  Completed Thematic Interactive Website In tasks 1 and 2, we have fully expressed our ideas and plans. In this final project, we will transform our prototype into a real webpage using Adobe Animate. All animations must be completed in Adobe Animate. We will integrate visual assets and refine the prototype into a complete, working, and functional product experience. Process Preloader page At first, I created the layout in Adobe Illustrator and then imported it into Adobe Animate. However, because the layer arrangement in Illustrator was crucial, I had difficulty grouping the layers correctly. Ultimately, I decided to create the layout directly in Adobe Animate. For the preloader page, I created a new file specifically for it and, a...
Read more

Advanced Interactive Design-Task 1

-
Image
24.04.2024-29.05.2024 / Week 1-Week 4 Kor Qian Qian / 0359496 Advanced Interactive Design / Bachelor of Design (Hons) in Creative Media Task 1 INSTRUCTIONS Task 1 - Thematic Interactive Website Proposal What to do:  Fig 1.1 Requirement Brainstorming Initially, I explored food brands such as Starbucks, McDonald's, and Burger King, but these themes didn't interest me. So, I looked into many luxury brands, and finally decided to base my assignment on Jo Malone's Mother's Day collection. Jo Malone's Mother's Day collection includes various products such as perfumes, scented candles, and cosmetics. I decided to focus solely on the perfumes from the same collection for the website I'm about to create. Fig 1.2 Main product ...
Read more

Minor Project-Pink Stuff

-
Image
24.04.2024-15.08.2024 / Week 1-Week17 Kor Qian Qian / 0359496 Minor Project / Bachelor of Design (Honours) in Creative Media Pink Stuff-Pinkify Instruction Important link MIRO Board Website Prototype Final Proposal Presentation Slide Final Project Presentation Research Question Google Form Pink Stuff Week 2 - Meet Client Met with the client to gather insights about their preferences for pink-themed products. Discussed the client's expectations from the project. Aligned on the overall vision and direction for the project. Every group members give their idea and opinion for the direction of our products, I suggested pet supplies and eco products. My idea These are the ideas of the team members. All members's ideas Week 3 Decided to focus on gaming accessories as the main product line. Discussed and finalised the specific products to be featured. Planned surveys or interviews to gather user feed...
Read more