Skip to main content

Interactive Design: Project 2

8th - 22nd November 2022 / Week 11 - 13
Alana Sofia Othman / 0353451 / Bachelor of Design (Hons) in Creative Media
Interactive Design
Project 2
INSTRUCTIONS
Project 2: Working Landing Page
Week 11
Step 1 - Layout
Figure 1.1. Snippet of HTML and CSS Code 1

Figure 1.2. Snippet Preview of Working Code 1
We were recommended to use Bootstrap as it would ease our burden of coding. Using Bootstrap would allow us to code the HTML while it automatically codes the CSS for us. However, I was unaware of this recommendation until only after I had began coding for this assignment.
I began the project by doing what I already knew, the basic layout code using HTML and attaching a CSS stylesheet. I had already placed the rows, columns, images, etc. as seen in Figure 1.1. After all this, in class, I was informed that we were to use Bootstrap but it was a little too late for me. Though I had issues with my images not fitting into the box as desired, I was not about to restart everything and figure out how to work with Bootstrap. So, I decided to continue with what I was doing.

Step 2 -  Nav Menu & Footer
Figure 2.1. Snippet of HTML and CSS Nav Code 2

Figure 2.2. Snippet of Issue Faced with Code 2

I continued to work eventhough I still could not solve some issues. I moved on the code the top bar of the landing page. I stumbled upon a website called FrontCodes, and found the code for the dropdown menu that I desired. I faced many issues with this code as it was a bunch of things I did not understand. So, to fix that, I took the time to slowly figure out the code and organize/label them in my CSS page, as seen on the right of Figure 2.1. After some help and messing around, I finally got it working and to look the way I wanted that fit my design.

Week 12
Step 3 - Footer and Wave
Figure 3.1. Snippet of HTML and CSS Footer Code 3

Figure 3.2. Snippet Preview of Footer Working Code 3

Figure 3.3. Preview of Suggested Solution to Wave-Deco Issue

I then moved onto the footer. This was relatively easy after the struggle of everything else. The only annoying thing about this was that I could not find svg files for similar looking icons. They would instead be different weights or sizes, causing unnecessaery trouble for my code. So, I took a bunch of different icon png's that I liked and went into AI and traced them out myself, creating my own and exporting them as svg files.

When putting in my waveform as deco, as planned since Project 1, I had issues with it. The problem was that the waveform would not work so well with a gradient behind it as the colour behind affected it drastically. A solution was then proposed that I remove the waveform and continue without it, as seen in Figure 3.3.

Week 13
Step 4- Finishing Fixes & Touches
Figure 6.1. Snippet of HTML and CSS Code 4

Figure 6.2. Snippet Preview of Working Code 4

I also added in shopcart icon and a search bar. For the icons, I traced them out in AI and exported them as svg files. The search bar code was taken from scrolling through CodePen. Just like my process for the navigation menu, I went through it slowly to understand the code and to make it appear visually appealing and in theme with my design.
Despite being advised to remove the waveform, I am stubborn and persistent, which can sometimes be my own undoing but fortunately, it was not. I was unhappy with the idea that I could not accomplish the desired outcome. I also felt that the landing page looked plain and boring without the wave. Through my persistence though, I was able to figure out a solution to get the waveform to work infront of a gradient background, see Figure 6.2.. The trick was to just add more colours and breakpoints to the gradient background code and position the change exactly behind the waveform. Although it is a simple cheat, it was a long process to get there and have it responsive.

Proj 2 Final Outcome
Figure 4.1. Snippet of Final Landing Page

Continue to Final Proj: Design, Exploration and Application
FEEDBACK
Fixing My Code
Step 1, 2 & 3
- I recieved help on to how to fix the code to my images in the Best Sellers cards. This was done by adding "float:left" and width instead of min-width to the id.
- My 3 main image cards were fixed with "object fit: cover" to fill the whole column
- I was advised to compromise on my expectations for my landing page and remove the waveform
- The navigation menu was fixed by changing the 'left' selectors to right. Allowing the position of the opening menu to move to the right, below the menu icon
This Is :

Comments

Post a Comment