Interactive Design / Project 2 : Working Landing Page

11.11.2022 - 23.11.2022 / Week 11 - 13
Interactive Design / Bachelor of Design (Hons) in Creative Media

Yung Siew Weng / 0339847
Project 2 / Working Landing Page

Project 2 : Working Landing Page

MODULE INFORMATION

INSTRUCTION

For project 2, this is the extension from project 1. From a prototype to working website. In a given project for web development, your task is to develop a microsite that you have proposed in project 1. The website must be fully functioned with a clear call-to-action.

EXPLORATION

After reviewing the lecture recordings on the Bootstrap tutorial, I obtained an understanding of how to create a landing page using Bootstrap, but I began to develop my progress on project 2. In this particular task, we are required to make our project 1, landing page design be real in web. The landing page #click this to jump to Project 1: Landing Page Design.

At the very first, quick start the pages by the starter template provided in Bootstrap. The full tutorial can view here under lecture week 11.

//There are not having much screenshots for the full process for this task as the task was explored randomly. //

#The first version (before further adjustments / stylise)

Fig 1.1 the first version (week 12/ 14.11.2022)

#some further adjustments / stylise :

I found that the icons for the cart and search bar are not aligned with the text on the navigation bar which make the sense of inconsistency.

Fig 1.2 The icon not aligned (week 12/ 15.11.2022)

After some exploration, I found out the solution of solving the issue. Initially, I used the <button></button> to link the icon but yet finding the best solution is class the button.

#solution;

Fig 1.3 The icon aligned, solved (week 12/ 15.11.2022)

I felt that the nav elements and the logo is not on a same line; whereas the elements (text and icon) slightly positioned on middle of the logo. So, I styled padding (CSS) towards it.

#solution;

.nav-item{

padding: 15px;

}

Fig 1.4 After padding (week 12/ 15.11.2022)

Following by the "card section", since my original landing page are not having the border (and I felt the border is ugly) so I make the amendment. To be mentioned, I figured this features for a long time but luckily Mr. Shamsul advised on setting the border to 0.

Fig 1.5 before adjustment, card borders (week 12/ 15.11.2022)

#solution;

.card{

border: 0;

}

Fig 1.6 after adjustment, card borders (week 12/ 15.11.2022)

Fig 1.7 after adjustment, border-radius (week 12/ 15.11.2022)

After, I felt that the alignment on the "JQ's collection" section is a bit mess up, I get some advices from Mr. Shamsul and developed it.

Fig 1.8 before and after adjustment, desciptions (week 12/ 15.11.2022)

#solution;

<p class="card-title">Jäcy Essential Tee<br>

MYR 79

</p>

</div>

//created a new class "left" and stylise it//

.left{

float: right;

margin: 0;

padding: 0;

margin-right: 10px;

}

Fig 1.9 after adjustments (week 12/ 15.11.2022)

I felt that the cart icon under "JQ's collection" is a bit awkward then I adjust the sequence of the button and the text.

#solution;

<p class="card-title">Jäcy Baseball Cap<br>

MYR 69

</p>

Fig 1.10 proof of 'coding' in Adobe Dreamweaver (week 12/ 15.11.2022)

Fig 1.11 recording of full Outcome #1,MacBook 13'' view (week 12/ 15.11.2022)

Fig 1.12 Screenshot, full outcome #2, Project 2, PNG (week 12/ 15.11.2022)

//feedback @ week 12 : Minimalist but professional.//

Although it's seems that the outcome was completed, but I did a comparison on this and my previous proposal in project 1 a day after, I realised that I missed the a "previous and return" button for the JQ's collection. And, if without the button, the collection section will looks a bit strange then I started to develop again.

Fig 1.13 after adjustment (week 12/ 16.11.2022)

#solution;

//I found that the solution can be solved by carousel, placing the cards in the carousel. The codes was quite long, may proceed to the pdf in final outcome; under JQ's collection//

Fig 1.14 the button issue (week 12/ 16.11.2022)

Following by, I realised that the button was too "inside" which I have the intention to make the gap between to be bigger.

#solution;

//add a class "buttoncards" and stylise the CCS file//

.buttoncards {

width: 5%;

display: grid;

padding-bottom: 50pt;

}

Fig 1.15 after adjustment (week 12/ 16.11.2022)

After, I checked on the cart icon and figured that the cart icon will not be consistent in different screen.

Fig 1.16 before vs. after adjustment (week 12/ 16.11.2022)

#solution;

.card-body{

display: block;

box-sizing: border-box;

}

Last but not least, I felt that the text is not guided, a bit messy.

Fig 1.17 before vs. after adjustment (week 12/ 16.11.2022)

#solution;

.aboutme {

font-display: inline;

text-align: justify;

}

Fig 1.18 screen-recording from MacBook 13'' (week 12/ 16.11.2022)

Fig 1.19 Final Outcome, PNG (week 12/ 16.11.2022)

//Feedback @ Week 13 : Good, but the footer should be higher, suggest having at least 10px margin on the top and bottom.//

After receiving the feedback, I start to adjust the margin-bottom.

Fig 1.20 after adjustment (week 13/ 22.11.2022)

#solution;

.copyright{

margin-bottom: 50pt;

margin-top: 30pt;

}

//10px is equally the original version, I tried on several size and yet decided on 30pt, 50pt//

Fig 1.21 Final outcome, screen-recording from laptop 13'' (week 13/ 22.11.2022)

#FINAL OUTCOME @ PROJECT 2

Netlify Submission Link : https://ysiewweng-project2-jacqesign.netlify.app

//use google chrome / other web browser except Safari to view the Netlify Link, the icons were not works in safari//

Fig 1.22 Final Outcome, PNG (week 13/ 22.11.2022)

Fig 1.23 Screenshot, Final outcome, Project 2, PDF (week 12/ 15.11.2022)

Fig 1.24 Final outcome, Project 2, HTML source code PDF (week 12/ 15.11.2022)

Fig 1.25 Final outcome, Project 2, CSS style file PDF (week 12/ 15.11.2022)

FEEDBACK

Week 12 / 15.11.2022

Minimalist but professional.

Week 13 / 22.11.2022

Good, but the footer should be higher, suggest having at least 10px margin on the top and bottom.

REFLECTION

Despite having a load of pending tasks at the ending of the semester, I thoroughly enjoyed the process of coding, advancing from 2D to "3D." Simply said, it was an incredibly cool and great experience. The only thing that makes this process challenging for me is that Safari, which is generally my preferred online browser, would not display my icons. The fact that Google Chrome does not offer a function similar to Safari's that enables you to save the entire site might be inferred as a barrier to my ability to draft the progress. Even so, I am yet still excited for the following task, in which we will create the complete web!

Yung Siew Weng / Jq 0339847

Search This Blog

Interactive Design / Project 2 : Working Landing Page

Comments

Post a Comment