Interactive Design-Project 1

-
03.04.2023-08.05.2023 / Week 1-Week 6
Kor Qian Qian / 0359496
Interactive Design / Bachelor of Design (Hons) in Creative Media
Project 1-Prototype Design


INSTRUCTIONS


Project 1-Landing Page Design Prototype

To create a landing page for an existing website of your choice that you feel has a design problem with Figma or Adobe XD. A one-page design concept that describes your landing page and the design issues you are addressing.
  • page size width is 1366 pixels
  • include a call-to-action (CTA)
  • adhere to web design best practices, including accessibility and usability

Chosen website-The Daily Mail: https://www.dailymail.co.uk/home/index.html

fig 1.1 Screenshot of landing page

fig 1.2 Screenshot of landing page

fig 1.3 Screenshot of landing page

When I click on the website, my view is filled with blue colour. There are too many advertisements appearing at the same time. The layout of the webpage appears cluttered and dense, making it difficult to read. In fig 1.1 and 1.2 we can see the pop-up advertisement window is covering the content of the webpage, this makes the reader feel annoyed. The content font size of the news is too small, and it is hard to read it. The footer on the original website is difficult to find the information. It feels too squeezing and small.


Progression:

Wireframe:
fig 1.4 Wireframes

Top Navigation Bar

References:
fig 1.5 References of the top navigation bar

Before I start designing my wireframes, I refer to several news websites. I arrange every message that I want to show in my navigation bar. Company Logo, Subscribe button, Sign In button, Date & Weather, Search button and Category Navigation. Under the navigation bar, I leave a place for advertisements. 


Content

References:

fig 1.6 References of the Content

I search for several news websites for reference to the layout used. The blue highlighted part is the template I refer to.


Footage

References:

fig 1.7 References of the Footage

Most of the footage is in grey and white. I arrange every message to be added to the footage. Company info, navigation, terms & conditions and more are the most common information written in the footage.


Attempt:


Fig 2.1 & Fig 2.2-Attempt for web landing page

I chose red colour as the theme colour at first because I feel like the red colour is more striking, but I change it back to the original website colour--blue colour. Fig 2.2 is the improved version of Fig 2.1.


Final Submission:

After receiving sir's feedback, I made some changes. First, I removed the hamburger menu from the navigation bar, because that is for a minified version of the site to use it. Second, I scaled down the size of the social media icon in the footage and change the CTA button to red colour to have more contrast with the grey background.

Fig 2.3-Final submission for web landing page JPEG


Fig 2.4-Final submission for web landing page PDF

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