Interactive Design - Final Project

20.6.21 -  (Week 13 - Week  15)

Sajiya Mir (0340836)

Interactive Design

Bachelor of Design (Hons) in Creative Media

Final Project

---

Instructions

---

Final Project 

For my final project, since I didn't have much artwork that I could showcase, I decided to make a website for another artist instead. I pick John Ebersberger, one of my favorite artists, as his website is very inadequate. The style is very outdated, and it doesn't reflect his personality or his work. Below is his current website: 

John Ebersberger

After looking through the website, I decided on the five pages I wanted to include, the mood board and the call to action.

Fig.1.0 Final Project Ideation

After getting my idea approved by Mr. Shamsul, I started making my home page. I started with the navigation, the carousel, and the contact me section. I followed by wireframe, and the only change that I made was making my carousel smaller, so it was easier to view the whole picture. 

Fig.1.1 Html for Contact me

Fig.1.2 Contact me layout

Once I was finished with the overall layout of the first page, I started working on the second page, which was the 'about' page. This page wasn't difficult to create because it was primarily photographs and words, but I concentrated on how I wanted to present each component. For the About section, I tried putting the text and image side by side to make it look more organized. After that, I simply experimented with picture and font sizes to determine what looked best. I initially wanted to make the images black and white but decided against it because  I didn't want to make it too monochromatic. 

Fig.1.3 HTML for 'About' section 

Fig.1.4 'About' layout

I did the same thing with the autobiography section, but since this section did have more text I decided to add another image to balance out with the text. 

Fig.1.5 HTML for Autobiography

Fig.1.6 Autobiography Layout

The third section of this page was the awards. Initially, I started by displaying it all under one column, but I didn't particularly like how it looked, so I decided to separate it by the year and have it be in its little box. That way it looked much cleaner and organized. 

Fig.1.7 Awards section first layout

Fig.1.8 Awards section final layout

The third page was the paintings, this page would have three gallery sections display the landscape, still life, and commissions. I used a simple lightbox gallery and repeated that for each section. 

Fig.1.9 HTML for Painting Gallery

Fig.2.0  Painting gallery first layout

After getting feedback from Mr. Shamsul, I change the sizes of the images to all be the same. I also added subheadings and captions to each image. Then I repeated the same process for my other two sections. 

Fig.2.1  Painting gallery final layout

The fourth page was the workshop and classes page. The original design consisted of a plain white backdrop with black text. This, like the about page, required lots of words and images, so I used the same layout as I did with the about page and had the words and images be side by side. Still, I eventually added a grey background and color to specific words to make them more cohesive and emphasize certain terms.

Fig.2.2  Workshop first layout

Fig.2.3  Workshop final layout

The fifth page which was the publication page was a simple image gallery with a caption. The final things I added were fade-up animation to each section and also fade-in animation to each page. Once I was done with all five pages I uploaded it to Netlify and shared it with a few of my friends to get final feedback. 

Website first draft

Some of my friends noticed that the hamburger menu wasn't working after the first click and when making the screen smaller some of the pages had unnecessary white space. I tried fixing all those and uploaded the final website.

 

- Final Outcome -

Final Project - John Ebersberger 

Fig.2.5  Final page 2: About 

Fig.2.6  Final page 3: Painting

Fig.2.7  Final page 4: Workshop

Fig.2.8  Final page 6: Publication

Fig.2.4  Final project - pdf

---

Feedback

Week 13: 

Good choice of topic, just make sure the images are cropped so that they don't have the grey border around them. 

Week 15:

Add context to your paintings, explain what it is, the price, etc. Same with the photo album try to explain who, what, when, and where. The thumbnail of the images show all be the same height and width. For the carousel maybe move it to the left and have text on the right-hand side. 

---

Reflection

Experience:  This project was very intimidating because we had to design five pages and then link them to each other, something I hadn't attempted before. It was critical to choose the correct topic because it dictated whether I would have enough content to complete all five pages. That's why I decided to do the project on a different artist than myself, as he had much more work to showcase than me. I went for a more minimalist appearance with this project and carefully used white space to make the website look more professional. I was concerned that my pages appeared too plain or as if I hadn't put in enough effort, but after speaking with and receiving feedback from many of my friends, I felt more confident in my work. Overall, I was pleased to complete all of the pages on time and that the final output reflected my initial idea. 

Observations: I believe it was because I had been working on this for so long that I had been saturated with information and had failed to notice some basic errors that were right in front of me. To correct this, I continued to share the pages with my sister and friends so that fresh eyes might spot any misalignments or missing tabs. Through their feedback, I was able to improve my work continuously. 

Findings: When I looked at the work of a couple of my peers for project two, I saw that their website designs were much more engaging and professional since they used animation. As a result, I also wanted to try learning and using HTML/CSS animation for my final project. After watching a few videos, most instructors advised against using too many animation effects because they can be disruptive to users.  When I tried applying it to my work, having multiple effects made the page look less professional and didn't match the minimalist design I was going for. In the end, I used the fade-up effect for all of my pages; this gave a sense of unity to the design and elevated it. 

Overall, I learned a lot of new things from this module and was happy with what I was able to accomplish.