Interactive Design | Final Project (0373754)

 Course: BDCM

July 2 - July 27, 2025

INTERACTIVE DESIGN | Final Project

Melvern Owen Tjia (0373754)

Module MIB

Elaboration on the assignment's overview

As this is our final assignment, we are to now develop at least five pages of the chosen website to remaster. Our obligation is to ensure it is released on a fully working URL. The website itself is to be developed on any medium using the knowledge that was provided to use along the entire semester.

WEBSITE LINK : https://cyphervern7.wixstudio.com/americanpiping

Phase 1 Prototyping (Recap)

Before the website is to be developed, we must first design the layout of three pages using Figma, this will be our main blueprint for the coming website, I've decided that the 5 pages would consist of the home page, the contact page, and three other service pages. The chosen website as I've stated in previous iterations will be using (https://americanpipinginspection.com/) as means to remaster the design. First, I would start by cleaning up a bulk of the design as well by changing parts of the color scheme to make it look less jarring to look at. The next logical step of the design's development is to see the navigation bar simplified for easier access. The layout will be overhauled as well for better visibility allowing more people to read the text given without compromising too much of the original design.

Prototyping Process

Phase 2 Coding 

Now that we've gotten the prototype's recap out of the way I would now begin to start the coding process on Adobe Dreamweaver. Like all websites we have to start by managing the site while also preparing a folder for the index file to be placed within as the index file will be the first thing for the website to recognize within a folder and without it the site simply would cease to be. As all websites begin, we will start by also developing a CSS section which will allow a much easier customization for everything that's going to be presented later on.

First order of business is the navigation bar for our header over here. The top blue bar present within the design can be coded using a background option much like {background-color: blue; for example, with the height and width altered to match the effects present. We then move on to adding in the images present there using a code like "Img src" which will then use an image of the icon consisting of a bald eagle with the star sprangled banner.

Then the navigation bar, it'll utilize the nav{ code as the style for nav a{ will be adjusted accordingly. The rest of the website should utilize rudimentary coding much like the img and paragraph. For the navigation bar will also contain a dropdown menu as the code will utilize something akin to

 .dropdown {

      position: relative;

      display: inline-block;

    }

 

The content is to be hidden before interaction; the rest should have its options supported with the <a href= line to link the options to the other webpages. This will be repeated on the other four sites as well.

Changing Methods and Elaboration

As of writing the blog considerable progress was made, but unfortunately a bulk of what was made in the process, the project encountered 2 roadblocks. The first one had its text wrap code damage the entire website forcing the site to load infinitely, essentially doing the exact opposite of what we're trying to accomplish which was to also make the load time faster and as a result the loading screen had to be removed. The second roadblock was the file corrupting itself on crash making the file unusable. With days of progress gone and little to no time lingering I've decided to attempt to manually recreate the project on wix using the figma prototype as a reference to also design the remaining two pages. also using the remaining code on the file's history to compensate for this mess. 

The Infinite Loading Screen

We will have all the changes designed up from the navigation bar down to the footer. I've also taken some creative liberties by adding additional effects and animations to further increase the website's appeal so that it would seem more modern than the real site. The nature of this website builder allows us to add in elements and fonts of our own while also editing and even exporting in sections.

Ultimately the website was designed with what appears to be roughly 85% accuracy with some minor color changes and so. The Navigation bar will have a slightly different look to it while the images with semi-opaque overlays will appear slightly paler as a result. A lot of buttons may appear as duds as the required minimum of the site was that of five pages. 

There are many troubles encountered when making the site so far, ranging from the functions refusing to work down to the navigation bar breaking making it not possible to use whatsoever prompting so many changes, images appearing not as they should, etc. And with that the site is completed with animation overhauls and fully linked pages that'll connect to each other as it'll utilize the h ref code. The finished website will feature three services pages along with a home page and contact page. Attempted additional changes were made in order to slightly change the overall theming to the website but was ultimately scrapped due it the changes being a little too unfaithful to the already approved prototype design.

Reflection

Throughout my entire time in this class, I haven't really got to learn that much in terms of knowledge, as most of the stuff thought such as in line elements, menus, and their drop downs, including other CSS aspects have already been taught to me a long while. However, this class did open my eyes to how websites are designed in general, from its wireframes to its other aspects like feedback and such.