Interactive Design - Project 2

-


8/6/22 - 19/6/22 (Week11 - Week12)
Interactive Design / Project 2

Loh Shu Huan / 0349621
Bachelor of Design in Creative Media


LECTURE

Week 11 
   8/6/22
Progression checking and review (working prototype).

Week 12 
   15/6/22
Progression checking and review (working prototype).

PROJECT 2

Working Landing Page

Week 11 - Week12  8/6/22-18/6/22
Before we start doing the project, Mr.Shamsul suggested we use bootstrap as a reference to support the project. Mr.Shamsul also briefed us about it and do a demo to teach us how to use it.

I read the bootstrap to learn more about it before I started working on my website. We do the navigation bar with the demo by Mr.Shamsul. After the class, I started the project with the navigation bar. I customised it and then code the footer by myself.

For the body content, I searched on the provided website for example and some I learned from YouTube tutorials.

In the section of the promotion reminder, I used "blockquote" and customised the margin.

Fig1.1 Navigation Bar

For the main call to action part, I used "jumbotron". To add the logo beside it, I did some research on YouTube for a tutorial of it.

Fig1.2 Primary Call-to-Action

The second part is the most struggled part. I used "grid" and "card". The button "Join" cannot be aligned to the center even though I have already consulted with the lecturer. I've tried to align the second pic but it's still not working or became worse.

Fig1.3 Secondary Call-to-Action

This part is a mixture of carousel and card, and I searched for a tutorial on YouTube.

Fig1.4 Products Carousel

The last part is a small gallery, I used "grid" and set a margin-bottom to align them. But, unfortunately, those pictures are not aligned to the center. Even though I consulted with Mr.Shamsul, the solutions were not working. Actually, if I use the grid it should be aligned to the center automatically.

Fig1.5 Grid Gallery

The last part is the footer which I code by myself.

Fig1.6 Footer

Link to the Project 2.

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