Labels

Interactive Design: Final Project

 7/12/2023 

ALTAIFI, LEEN MAAN A (0367698)

Bachelor of Design (Hons) in Creative Media, Taylor's University

Interactive Design 

Table of Content

1. Lectures

2. Instructions & Tasks

3. Reflections

1. Lectures

Refer to Interactive Design: Exercises


2. Instructions & Tasks

Project Overview

In this web design project, you will create a single-page website dedicated to your favorite topic. This project will help you develop your web design and development skills while allowing you to showcase your passion for the topic of your choice.

Project Requirements

Artist Selection: Choose your favorite topic as the subject of your website. Ensure you are genuinely interested in the topic, as this will help you create a more engaging website. Decide the site's goal to ensure that the site has clear content.


PLANNING

The topic I chose to make my webpage about was my own portfolio. I thought of making a fan-page of a band I love, but as much as I like their music, I didn't feel like I could be creative with it, so I ended up choosing to make a portfolio for my personal art where I can freely design how I want the website to look like. The website's goal is to get clients for my commissions, like a free-lancing job.  

Below is the embedded slides of the planning stage; it's composed of content structure, visual references, and mood board.


PROTOTYPING

I started creating the wireframe on Adobe Xd and start by making a low fidelity layout of the prototype to organize the content. The webpage is divided into 5 sections: About me, Works, Services, Blog, and Contact.

Fig. 1.0: Wireframing Process 1
Fig. 1.1: Wireframing Process 2




I initially had the idea of making the background one long artwork, and only the content would be scrollable because I was inspired by one of my visual references. I made a rough composition of the background artwork to work with it for now.

As seen on the figure on right below, I cut out my art work in the shape of an oval for the landing page next to the main title and above the primary call-to-action button.


Fig. 1.3: Starting out Design Ideas 1
Fig. 1.4: Starting out Design Ideas 2



I ended up not liking my first idea of the long background art, so I scrapped that. It was either the shape of it, or the strong contrast, or a combination of both. Instead, I added a lot of curvature to separate the different sections.


Fig. 1.6: Changing to Another Design
Fig. 1.5: First Design Idea







I showed the lecturer my progress, and he mentioned how the curvature was too strong and the overall designed needs to be improved, so I felt the need to redesign a lot of it. After a lot of long staring at the design, I started to see why I disliked it. It felt more like a corporate webpage advertising a new tech product, and less of my art style. So I decided to take advantage of spacious artworks and make them blend in with the background, so the website could feel as if you're immersed in the art; in the world I've created.

The shift from very light to dark also compliments my artworks more. The simple white background in the previous one felt like it was battling with my art, whereas the dark belongs with it.


Fig. 1.8: Compilation of Artboards in Adobe Xd
Fig. 1.7: Changed Design from Light to Dark








The prototypes are shown below; both the web and mobile version, and so is the Adobe Xd interactive prototype link embedded. The link to the Adobe Xd prototypes is here.


Fig.1.9: Adobe Xd Prototype Web Version
Fig.1.10: Adobe Xd Prototype Mobile Version










CODING

I started coding the basic skeleton of the webpage, that includes setting up the sections by divs in only HTML. As mentioned prior, the main sections of the webpage are About me, Works, Services, Blog, and Contact Me, as seen in the figures below as headers.

I started embedding bootstrap code for more complex interactive and responsive features such as the hamburger menu in the navigation bar, and the accordion drop-down. 


Fig.1.12: Coding Process 2-
 Adding Bootstrap



Fig.1.11: Coding Process 1- Skeleton

I had trouble with the bootstrap code because, initially, the accordion wouldn't collapse once the button is clicked and would only collapse when another is opened. But that was fixed with the help of my lecturer; he realized the version of the bootstrap I was using was outdated thus not working fully. 

I also had trouble with the hamburger menu, a thin stroke under the 3 main thick strokes would appear out of nowhere, but I replaced the whole code with a newer one from bootstrap so that was fixed, too.



Fig.1.13: Coding Process 3 - Navigation Bar
Fig.1.14: Coding Process 4 - Hamburger Menu



After I got the main hurdles out of the way, I started styling and overwriting the bootstrap code with my own CSS.


Fig.1.16: Coding Process 6 
Fig.1.15: Coding Process 5 - Updated Navigation Bar








I centered the main headings, and add the accent color, red, as the background color to the primary call-to-action button's background when hovered. 

Fig.1.18: Coding Process 8 - CTA Button 
Fig.1.17: Coding Process 7 








In the services section, I have a row of images and I want them to be horizontally scrollable. So, I achieved that with putting it all in one div and set the overflow content as scroll; "overflow-x:scroll;" But because I found the scroll-bar unappealing, I removed it with::-webkit-scrollbar {display: none;}

Fig.1.20: Coding Process 10 - Scroll bar Removed
Fig.1.19: Coding Process 9 - Scroll bar







I did the same horizonal scrolling with the Works section, though it is more apparent in the mobile version. I fixed the position of the navigation bar and ensured the z-index position is the highest so it would be on top of all the content in the page. I started working on the contact section. I got the basic code for the form from bootstrap, then I styled it with CSS to my liking.

Fig.1.21: Coding Process 11 - Works Section
Fig.1.22: Coding Process 12 - Contact Section







Next, I added the footer and tried out whether it would look nicer on opposite ends or all at the center...I ended up going with the center (figure on the right), added dummy links to the privacy policy and terms of use, and real links to the social medias. 

Fig.1.23: Coding Process 13 - Footer on
Opposite Ends
Fig.1.24: Coding Process 14 - Footer on
the Center








Lastly, I worked on the responsiveness of my webpage. I struggled the most during this stage due to its tediousness and the frustration of working with CSS, but I managed to do an alright job I'd say.

I had to make a lot of back and forth changes, ensuring every image and text is responsive and looks like the prototype I had already designed. A lot of the sections that were displayed horizontally turned into vertically (I changed it from display:flex to display:block) due to the narrow mobile screens.


Fig.1.25: Compilation of Coding Process - Responsiveness


Instead of directly changing all the html and css code of the original webpage, I added the code: "@media only screen" to only affect the code once the specific screen size is set. I modified the code specifically for when the screen is 1000px and below, and again for 600px and below. 

Fig.1.26: Code for Screen Responsiveness


Fig.1.27: Final Screen Grab of my code on Dreamweaver

Fig.1.28: Screen Grab of Deployed Website on Netlify


Fig.1.29: Screen Grab of Deployed Website on Browser


Fig.1.30: Screen Grab of Deployed Website on Browser
(Responsive Screen)


Final Submission Website link: here


3. Reflections



I had a lot of fun working on this project, especially since the topic was up to us to choose. I enjoyed adding in my own taste and art into this project, so it feels extra personal to me. 

The process of working on this, albeit being frustrating at times, it was way smoother than my previous assignments. My coding practices have been better therefore I didn't get lost in my own code; everything was organized better than my previous assignments. And unlike my previous times, I used the @media screen code to better code for responsiveness and adaptability. It was less challenging to work that way due to lack of back and forth changing, it was more straightforward and less mistakes were made.

As with every practice, I feel my basic coding and problem-solving skills have gotten better, and I'm glad to have this outcome to mark the end of this module. I chose to make an art portfolio website in hopes that I can build over it in the future and make it a fully functional website for me to use professionally. 


Labels:

Comments

Post a Comment

Popular Posts