Interactive Design/ Final Project: Design, Exploration, & Application

on
08.11.12 - 11.12.22 (Week 11- Week 15)
Janaan Ahmed / (0353333)
Interactive Design / Bachelor of Design (Hons) in Creative Media
Final Project: Design, Exploration, Application
Instructions
  

FINAL PROJECT: DESIGN, EXPLORATION, APPLICATION
This task is an expansion of the previous ones. We are to develop a minimum of 5 pages of our website. This means I will be expanding on PlantenJoy. Now I'm not too sure if this includes the landing page we made earlier or not, so I will be creating the pages as per what's on the navigation:
  1. Plants
  2. Pots
  3. Gifts
  4. Care Guide
  5. About

Fig 1.1: PlantenJoy's navigation bar


1. SKETCHES/WIREFRAMES
Since the 'Plants', 'Pots', and 'Gifts' sections fall under the products category, they will utilise the same design. I referenced Bloomscape and Patch (plant shops) once again to study how they do it, mainly because I'm (ironically) not too acquainted with plant care. Most e-commerce websites have the filter items section on the left and the products on the right. So my layout is pretty standard (honestly maybe it's for the best as coding is going to more achievable this way).

Fig 1.2: Wireframe Sketches

As for the 'Care Guide' and 'About' pages, I plan to utilise the upper portion of the index page design (project 2) and make slight variations to the rest of the page. The sketches were made after deciding on the content, both visual and textual. 

Fig 1.3: Content of page 4 (left) and 5 (right)

2. FILE MANAGEMENT
Before the coding process, I recalled Mr. Shamsul talk about the importance of file naming conventions and organisation. This is how I have organised my files:

Fig 2.1: Organising files (picture taken post-coding)


3. CODING (VISUAL STUDIO CODE + BOOTSTRAP 4.6)
The first thing I did was make a copy of the HTML and CSS file of my index landing page. I erased everything except for the navigation and footer, so I have a blank slate but with necessary styling (body colour, font, etc).

Pages 1, 2, & 3: Plants, Pots & Gifts
These pages share the same layout and will only differ in the images and written content. I first created the base structure of the page trying not to get too stuck on the details. 
I have created 2 main columns for the 'filter section' and 'products section', col-sm-2 and col-sm-10 respectively (shown in figure 3.1)  Inside the products section, I make a second tier of rows, each filled with their own columns. I copy-paste the card I created in the index page into the level-2 columns. The images will simply be replaced later on.

Fig 3.1: Using Bootstrap grid system 

I decided to use the dropdown/ accordion component from bootstrap for the filter section. However, I replace the body text with form checkboxes as shown in fig 3.2.  

Fig 3.2: Adding and styling dropdown/accordion 

For some reason, I noticed that the dropdowns stayed open by default on visiting the page, which was very visually unappealing. After scavenging for a solution online, I learned that this could be fixed by removing the 'show' on the collapse div class.

Fig 3.3: Making dropdowns closed on startup/default


With that out of the way, I add a new row above the one containing the filter and products. This new row is for the title and the 'sort by' dropdown.

Fig 3.4: Adding Title and 'sort by'

I am not all satisfied with the outcome above (fig 3.4), and decided to tackle that later. I proceeded to replace the images and add their descriptions instead to ease my mind a bit. With the basic structure done, it was then a matter of replacing images and content. And so I created the other 2 product pages (pots and gifts) and added the relevant information in the 'filter' section. I also added an icon on the dropdown header (from fontawesome).

Fig 3.5: Scaling images to same dimensions

I then decided to move the 'sort by' dropdown inside the products column instead of sharing with the title. I also added a hyperlink to advertise a service relevant to the page. It helped to fix the issue of the excessive and awkward white space.

Fig 3.6: Adding a textual hyperlink to fix excessive white space

Page 4: Care Guide
As mentioned earlier, for the sake of efficiency, I tried to reuse a lot of the structures that I'd already made and replaced them with different content. I think it works though in establishing a consistent style/layout.

Fig 3.7: Upper section of page 4

I decided to use the card component for the next section of the page. I often used the 'inspect' function on the browser to check my website on mobile resolutions. I used d-flex justify-content-center to horizontally align everything in the center of the columns. Anyhow, it was very much a case of copy-pasting for this part.

Fig 3.8: Progress with page 4

Fig 3.9: Before and after central alignment of content in column

I decided that I wanted to make the entire card clickable instead of just the card header. I also wanted the opacity to change on hovering. I wonder if things would've been a lot easier if I knew how to use Javascript. Anyhow, after much searching, I learned that we can add a class element called stretched-link to the card to make it clickable. Afterwards I learned that we imply change the hover setting of the card instead of the link <a> tag.


Fig 3.10: Making clickable cards

I later discovered that adding the hover effect to 'card' changed the styling of another component sharing the same class name. Therefore I went back and changed the class name of the card to which the hover effect would be applied.

Fig 3.11: Hover effect applied to shared class (not wanted)

Fig 3.12: Adding new class name

Page 5: About
This page followed the same process as page 4 for the upper portion. For the lower portion, I copied the same html and simply changed the styling of it (such as the padding and background colour). 

Fig 3.13: Progress on page 5 (About)

Most of the buttons are just clickable without a link. However I added a link to the Plants page in one of the buttons.

Fig 3.14: Linking existing page to link button

I finished off the end of page 5 with a little community spirited section and included dummy links to social media.

Fig 3.15: Progress on page 5

With everything done, I then linked all the html pages to each other, including within the footer if necessary (About PlantenJoy, and Plant Care). I also changed the title of each html file to suit their designated page content. 

Fig 3.16: Linking pages to each other

FINAL OUTCOME:
Fig 4.1: Final HTML Compilation [PDF] - (12.12.22)

Fig 4.2: Final CSS Compilation [PDF]

Reflection
Experience
This project was equally frustrating as it was fun. I am relatively satisfied with my outcome as there were many MANY challenges in getting things to look the way I wanted. However it wasn't as overwhelming as project 2, since I have a better understanding of how to use Bootstrap grids and whatnot. I'm just really proud of myself for getting through and think it's pretty neat that I got to make a functional website! Week 1 Janaan would've never guessed I could do it.

Observation
My biggest hurdle was in establishing proper alignment between the elements while making the web design responsive. This was an issue I had though using Bootstrap. I didn't quite have enough time to make the media query for all my pages, so I sometimes compromised in my design. Though a lot of my customisations could probably have been made with Javascript, I didn't use it as I figured it would take longer for me to learn it. Also, coming up with the content for the other pages was a bit difficult as I don't know much about plants, or brand marketing aha!
Findings
I learned that it is very important to be organised and neat while coding so as to pinpoint mistakes or any area that needs improvement. Writing notes to myself within the script also helped me to distinguish the different sections within my web layout. It isn't always easy to precisely translate your wireframe sketch into code, but looking up references never hurt anybody.


Comments

Post a Comment