Interactive Design - Project 2: Working Landing Page

7/6/2022 - 26/6/2022 (Week 11 - Week 13)

Sasilvia Cheong Pei Hoong / 0345031 / Bachelors of Design in Creative Media
Interactive Design
Project 2: Working Landing Page

LECTURES

Week 12- Bootstrap
We were taught how to use Bootstrap in class to help with our working landing page. Mr. Shamsul used the version 4.4 bootstrap to give us a demonstration. 

Getting Started
First, we were demonstrated on how to link the bootstrap codes to the HTML file where we used the "getting started" codes in bootstrap and pasted them into our HTML file. We just had to directly copy and paste the codes from the starter template below.



Fig. 1.1 Starter template codes in bootstrap


Navbar
Then we move to the navigation bar. In bootstrap, they provided codes for creating the navigation bar. We also had the choice whether we want to make our navbar with sticky top or not. Sticky top is a code to make the navigation bar stick on top when we scroll down to other pages.


Fig. 1.2 Navbar codes in bootstrap


Carousel
After that, we used carousel for the main page which helps to create a slideshow with images and text. 


Fig. 1.3 Carousel codes in bootstrap


Cards
Finally, we used the cards code in bootstrap to create a flexible and extensible content container. We are also taught on how to set the margins for the cards.


Fig. 1.4 Cards codes in bootstrap


INSTRUCTIONS


Project 2
For my working landing page I created the HTML file like always and link the CSS file with it. After that I added the images into the images file.



Fig. 1.1 HTML, CSS and images file 


In my images file, there are a few versions of the images and icons. There are also two photoshop files in it. At first, I thought I was able to just use back the images I used in my project 1 landing page design but my image appears to be too big when I inserted them into the codes, so I had to edit them in photoshop to get the right sizes for each of the images. After that, I also added a beige colour icon for the socials to insert in the CSS codes for when a cursor hovers on them on the website and changes colour.


Fig. 1.2 Images used 


When starting my HTML codes I used the bootstrap starter template that was taught in class. I also used back the navbar and cards, I did not use the carousel since my website did not have it. When doing the navbar I had to delete the search bar and also adjust the nav links into a correct position and for my navbrand, I changed it to the name of the arts and crafts center which is "Techne". 

I pasted all the images and contents that I need for my website into the HTML codes then I adjusted everything in CSS later on including the background images. I tried making my website responsive with media query codes but it did not work and I tried for so many hours I got extremely frustrated because it was like no change at all even when I added the codes for it. In the end, I just decided to leave it as it is and focus on project 3 which is the microsites. 


Here are some of the websites that help me solve some of my problems :'D
Fig.1.3  https://www.w3schools.com/html/
Fig.1.4 https://stackoverflow.com/



Fig. 1.3 W3 Schools



Fig. 1.4 Stack Overflow



Final Landing Page Design



Fig. 2.1  HTML Codes for final working landing page (24/6/2022)



Fig. 2.2  CSS Codes for final working landing page (24/6/2022)



Fig. 2.3  Screen recording for final working landing page (24/6/2022)

FEEDBACK

Week 12 (21/5/2022)- 
Specific Feedback: 
For the main page try adding col-sm-6 to give (1) the logo and (2) the text and button a container so that the text and the button will go down when it is set as mobile view. Then change the padding from a fixed value to a percentage instead as a fixed value will cause some issues. Add a background colour for the navigation background because when using a sticky top without background the navigation button will blend in with the other contents. Try adding border to the footer contents to help make the socials go to the middle.

REFLECTIONS

This project absolutely frustrates me, I felt like I was doing add maths where I was not able to solve anything at all. It took hours and days to figure out certain issues and when I find the solution it leaves me absolutely speechless. Coding is incredibly sensitive, one mere mistake and everything goes wrong. I was sort of happy that I was able to at least make my codes work on laptop view, other than that are beyond my capability and will kill off my brain cells. I will try to at least make the microsites work better hopefully T^T

Comments

Post a Comment

Popular posts from this blog

Design Principles Week 2 - Lecture and Exercise 2

Image
31.8.2021 (Week 2) Sasilvia Cheong Pei Hoong / 0345031 /  Bachelors of Design in Creative Media Design Principles Exercise 2 Lecture 2 Balance and Emphasis Balance - The distribution of visual weight in a design work is referred to as balance. It can be either symmetrical balance or asymmetrical balance. a) Symmetrical Balance - Has the same amount of weight on both sides of a centrally located fulcrum Fig. 1.1 Symmetrical Balance 3 Kinds of symmetrical balance : - Bilateral balance is where there is an equal arrangement of elements -  Radial balance is when elements are distributed equally around a central point - Approximate symmetry is when equivalent but not identical forms are grouped around the fulcrum line Fig. 1.2 Approximate symmetry b) Asymmetrical  Balance ...
Read more

Vehicle and Props Design - Final Project: Post Production and Profiling

Image
26/11/2022  -  12/12/2022 ( Week 13- Week 15 ) Sasilvia Cheong Pei Hoong / 0345031 /  Bachelors of Design in Creative Media Vehicle and Props Design / Entertainment Design Final Project: Post Production and Profiling INSTRUCTION Final Project For our final project, we are required to create a key artwork for our chosen vehicle and also polish all 3 of the vehicles.  We were given two options, one which was to 3D model our chosen vehicle or two to polish all 3 of the vehicles by rendering and drawing all their orthographics. I went with second option since I was not so confident with 3D modelling and was afraid that I would not have enough time to finish it.  Below are my render and orthographics for the water vehicle. I named the he...
Read more

Design Research Methodology - Project 4: Research Report and Presentation

  23/6/2022 - 10 /7/2022  (Week 13 - Week 15) Sasilvia Cheong Pei Hoong / 0345031 /  Bachelors of Design in Creative Media Design Research Methodology Project 4 -  Research Report and Presentation LECTURES WEEK 12 - Presentation Contents 5 minutes presentation, keep slides in point forms. Slides design and verbal (video) are part of the assessment. Relevant visuals can be included in the design. Research Problem, Research Objectives, Research Questions Key Literature Research Methods Data Collection and Analysis Research Problem: One or two lines to inform of your research problem (Problem statement is too long so it is not suitable to be included here). Research Objective(s): Number your objectives Research Question(s): Number your questions Key Literature...
Read more