Interactive Design - Project 1

-

17/5/22 - 1/6/22 (Week8 - Week9)

Interactive Design / Project 1


Loh Shu Huan / 0349621
Bachelor of Design in Creative Media


LECTURE

Week 8 
  17/5/22
Independent learning week.

Week 9 
   24/5/22
Progression checking and review (wireframe).

Week 10 
   1/6/22
Progression checking and review (finished prototype).
PROJECT 1

Landing Page Design

Week 8 - 17/5/22
This week we have to indicate a topic for our microsite and create at least FIVE sketches of the landing page design.

I did some visual research to learn more about what is a landing page.

Fig 1.1 Visual Research

So I created ONE homepage sketch, FIVE sketches and TWO prototypes. My call to action here is "Join".

Fig 1.2 Attempt #1. Sketches 

Week 9 - 24/5/22
This week, Mr. Shamsul reviewed and gave us feedback on our sketches. When listening to the feedback for my classmate, I realized that I could be misunderstanding what a landing page is. So at that moment, I redo my sketches. I heard that the landing page needs to include a highlight or something about the website, so I made these two sketches immediately.

Fig 1.3 Attempt #2. Sketches 

But later, I knew that the landing page is exactly the homepage of the website. Luckily, I did a sketch of the homepage on week 8, so I modified it a bit and then came out with ONE more sketch for Mr.Shamsul to review.

Fig 1.4 Attempt #3. Sketches 
When it came to my turn, I explained it to Mr.Shamsul. He said my sketches look clean and clear, even though two of the sketches don't have a big difference. He also told me that, normally, we don't have two carousels on the same page. Besides, he suggested moving the navigation to the header.

After receiving the feedback from Mr.Shamsul, I did some amendments to my sketch and I decided to use it to proceed with my Landing Page Prototype.

Fig 1.5 Final Wireframe 

This week we were required to proceed with our sketch into a prototype (with all the information, images, colours included).
Brown and beige are my favourite colours recently, so I decided to do a website with this kind of colour scheme. 

I downloaded the images from some royalty-free image websites which were suggested by Mr.Shamsul. Besides, the product images are from H&M.
Picture Credit: H&M

Fig 1.6 Attempt #1.  Landing Page Design 

Week 10 - 1/6/22
This week same as week 9, Mr.Shamsul checked on the finished prototype of our landing page.
He suggested I add a "Join" button in my second section which corresponds to my sub-heading "Join us now" and it will become my secondary call to action button.
I confirmed the pages of my working prototype with Mr.Shamsul, and here is the final flow chart of my website.

*Only the selected pages have navigations provided.

Fig 1.7 Final Landing Page Design

Here are my selected pages:
  • Homepage
  • New Arrival
  • Product
  • Sales (primary call to action)
  • Account (secondary call to action)
Fig 1.8 Final Flowchart and selected  pages

This week is also our submission week for Project 1 - Landing page design. After doing the minor amendment, I arrange all the designs along with their functions in the slides.




Comments

Post a Comment

Popular posts from this blog

Major Project

-
Image
22/04/2023 - 09/08/2023 | Week 01-16 Major Project  Loh Shu Huan / 0349621 Bachelor of Design in Creative Media INSTRUCTION PROGRESSIONS Week 01 On the first day of the semester, we were briefed about our Major Project. There some pathways that we can work on - our dissertation topic, client, any topic or group project (studio based).  For our final year project, we were advised to not to make it an assignment but a industry-standard project. Mr.Asrizal advised us to finalise our proposal by week 3 and we will be assigned to a supervisor based on our selected topic. We were required to start brainstorming for our project ideas and co...
Read more

Professional Development Week

-
10/06/2023 - 14/06/2023 | Week 08 Professional Development Week Loh Shu Huan / 0349621 Bachelor of Design in Creative Media   In order to familiarize recent graduates with the careers and fields of work before graduation, the Taylor’s held the Professional Development Week for us to learn from professionals in different fields and to answer questions about their fields through a question-and-answer session. I attended six workshops, which were: “Financial Literacy for Fresh Graduate” by MAYBANK  Keynote: “Aspire to Inspire” by POS MALAYSIA "The Art of Storytelling" by KAKISENI "Maximize Your LinkedIn Presence" by BDO. "A.I. in Digital Media" by MALAYSIAN ADVERTISERS ASSOCIATION. "Digital Transformation and Solutions: The Importance of Making It Easy" by APLIKASI. REFLECTION Each workshop provided unique insights that have contributed to my personal and professional growth. This career development week emphasized the importance of financial planni...
Read more

Advanced Interactive Design - Final Project

-
Image
28/06/2023 - 18/07/2023 | Week 13 - Week 16 Advanced Interactive Design  / Final Project Loh Shu Huan / 0349621 Bachelor of Design in Creative Media PROGRESSIONS For this task, we were required to create a website that promote a certain thing, such as a new launch product, a song, an app, or an album. We need to create 5 pages by using Adobe Animate. It need to include some micro animation as well. For this project, I decided to do an extension website for one of my project in other module, as it is also a promotional campaign. Week 13 - 16 1. Promotional Website Layout Design This website is actually to promote one of the series of perfume from Zara, called Chapter 6. This chapter has four different fragrances in total. Fig 1.0 Zara Chapter6 Promotional Website Design 2. Progression in Adobe Animate Once I exported all of my assets, I started to import them in AN and create the micro animation for the website. I decided to finish all the design and animation for every pages f...
Read more