10.06.2025 - 27.07.2025 / Week 8 - Week 14
Brenda Wynn / 0372128
Interactive Design / Bachelors of Design (Hons) in Creative Media / Taylor's University
Final Project
INSTRUCTIONS
<iframe
src="https://drive.google.com/file/d/1i8Nqn3mcDaXXhlbcjumAXGjUUs0nOjvR/preview"
width="640" height="480" allow="autoplay"></iframe>
PROJECT
We were assigned to make a proper working website that has a minimum of 5
pages. The website has to be responsive, have a clear navigation, and
interactive elements.
WIREFRAME AND PROTOTYPE
Figure 1.1 wireframes (28/06/2025, week 10)
CREATING THE WEBSITE
Figure 1.2 creating icons (05/07/2025, week 11)
Before I started creating my website in Dreamweaver, I collected the images (source) I needed first and converted them to 72dpi. I also created all the needed icons in Illustrator and traced them using the pen tool.
Figure 1.3 navigation bar progress (05/07/2025, week 11)
First, I added the navigation before I started creating the animation background. I also made the "SERVICES" navigation have a drop-down menu to make it easier for the users to browse on the specific service they want.
Figure 1.4 navigation bar progress codes (05/07/2025, week 11)
Creating the navigation was a bit confusing, because I used the justify-content: space-between style. I was a bit confused on how I can add more space to between the logo and navigation bar. So, I experimented by adjusting some codes. In the end, I found out that I can use the margin to set it to a certain space.
Figure 1.5 animation background progress (08/07/2025, week 12)
On the home page, I wanted to create an animation of images as the background to show the users that the website is a photography related web. Mr. Shamsul recommended me to not let the animation background fill the entire screen, since I did not have any description or interactive elements. By making the animation not fill the entire screen, the users will know to scroll down to look at the content.
Figure 1.6 animation background progress codes (08/07/2025, week 12)
After I was done with the navigation bar and logo placement, I started working on the animation background. This part is new, so I asked for some assistance from Gemini AI. I also tried several different codes, but it never really worked out. So, after some adjustments and assistance from Gemini AI. I was finally able to make the animation work and make both the navigation bar and logo visible.
Figure 1.7 footer progress (08/07/2025, week 12)
Then I started on the footer, I wanted to make sure that the information on each side was aligned well with the images above it.
Figure 1.8 footer progress codes (08/07/2025, week 12)
I had some trouble while arranging the footer contacts information since it had icons and I was kind of lost on how I can align the icons with the text beside it. I tried to experiment with some codes first to see if it worked out. But after some trials and errors, I asked Gemini AI to help me fix my code. After some assistance, there were some parts that I was not satisfied with so I adjusted it a bit more.
Figure 1.9 color placement experimentations (13/07/2025, week 12)
During consultation, Mr. Shamsul recommended me to try using the color black as the background. So, I experimented with different color placements to see which one is more pleasing in the eye.
Figure 1.10 lightbox progress (14/07/2025, week 13)
After I picked a suitable color for the elements on the type of services gallery page, I wanted to make the images become bigger if it is clicked on. This was very new to me, so I asked Gemini AI for some guidance and assistance. From the information given, I figured out that I needed to include a lightbox function and a script to make it work. There were some elements that I was not quite satisfied with, so I adjusted it afterwards.
Figure 1.11 interactive elements progress (14/07/2025, week 13)
The next element I wanted to add in the different type of service pages was the "BOOK NOW" button and the push-to-top button. Originally, I had both of the buttons on the right side. But after some feedback from Mr. Shamsul, recommended me to place the "BOOK NOW" button in the middle so it is more visible to the users. He also told me to match the color of the "BOOK NOW" button on all of the pages that has it.
Figure 1.12 interactive elements progress codes (14/07/2025, week 13)
To make the buttons work was a bit confusing, I experimented with placing id's on the texts first. But, it did not worked out as planned. So, I asked Gemini AI to review the code I had for the buttons and it helped me make the buttons interactable by using scripts.
Figure 1.13 corporate photo page progress (19/07/2025, week 13)
For some of the services, the content of the original website also had some description so I had to make it a bit different from the type of services gallery page. I referred to my wireframes and some past references and decided to do this layout instead.
Figure 1.14 corporate photo page progress codes (19/07/2025, week 13)
I did not have any major difficulties arranging the images and the text. After I finished with the overall layout, I asked Gemini AI to review my code because it seemed very long and inefficient. Then I adjusted some of the codes since it was not how I wanted it to look like.
Figure 1.15 courses page progress (24/07/2025, week 14)
For the "COURSES" page, I intended to refer to the design that I did on my wireframe but I stumbled across this design while experimenting and decided that it was a better design than my wireframes.
Figure 1.15 courses page progress codes (24/07/2025, week 14)
The "COURSES" page was mainly made out of 1 set of HTML codes that I copy and pasted. But, I saw that how the information is displayed is different on each boxes. So, I had to check the CSS again and got some assistance from Gemini AI.
Figure 1.16 responsiveness progress (26/07/2025, week 14)
After I was done with the web design, I had to make it responsive. Originally, I intended to use the hamburger menu for phone screens. But, after many experiments and trials it did not work as well.
Figure 1.17 responsiveness progress (26/07/2025, week 14)
Making the website responsive was by far the hardest challenge I faced while making my website. For me, this was still a topic that I did not know well. I asked AI platforms for assistance since I was not quite knowledgeable on making responsive sites. From the assistance I received, I was able to adjust the code to my liking.
FINAL WEBSITE RESULT
Website Link Submission= https://adxstudio.netlify.app/
The original website had changed its layout and content arrangement while I was in the process of redesigning the website and creating the re-designed website. In my proposal from the previous blog (click here to see), I have added some screenshots of the original website before it was re-designed by the company.
REFLECTION
When we were assigned to make a working website, I felt a bit overwhelmed and excited. I was a bit scared to make this project since this would be the first time I would be fully-working with coding. But, I was stoked and excited to see the progress of my website. Though during the process, there were some times where I almost gave up. But, the results made me feel a sense of accomplishment. I was very proud of what I was able to make even though it was not as perfect, but I did my very best.
One thing that I noticed during the period of this project is that I was so behind my peers. I would take so long to even figure out how to make a page. I do think that I could have managed my time better if I knew how long I would actually take to make the website. Also, I wished that I had stayed organized from the start since I was just piling the codes over and over again, which made it a bit confusing. Though I did try to keep it organized after I noticed how messy my codes were.
After going through the process of making the website, I learnt a lot more about what makes a better user experience. I also discovered new code styles and learnt how to use scripts. For future projects, I do think that I could be more organized and managed my time better.
Comments
Post a Comment