Interactive Design - Final Project: Creating a Single-Page Website for An Artist

23.10.2023 - 10.12.2023 / Week 9 - Week 16
Adriena Tan Yan Zi / 0351236 / Bachelor of Design (HONS) in Creative Media
Interactive Design
Final Project

---

Instructions

---

Final Project - Creating a Single-Page Website for An Artist

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

Project Requirements:
Artist Selection: Choose your favorite artist as the subject of your website. It can be a musician, painter, actor, or any other creative individual or group. Ensure you have a genuine interest in the artist, as this will help you create a more engaging website.

Content:
Your single-page website should include the following sections:
Header with the artist's name and a brief tagline.
Introduction: Provide an overview of the artist's background and why you admire them.
Biography: Include a brief biography or description of the artist's life and career.
Gallery: Showcase images, videos, or other multimedia related to the artist's work.
Contact Information: If applicable, include contact details or links to the artist's social media profiles.

Design Elements:
Choose a color scheme and fonts that reflect the artist's style or your personal taste.
Ensure a visually appealing layout with a balanced use of text and multimedia.
Create a responsive design that adapts to different screen sizes (mobile-friendly).

Navigation: Implement smooth scrolling navigation or a simple menu that allows users to jump to different sections of the page.

Interactivity: Consider adding interactive elements such as image sliders, hover effects, or lightboxes for multimedia content.

1. References 

Moodboard

I sought permission from Mr. Shamsul to base my website on an author, and he granted approval for the idea. With the green light, I chose to focus on one of my favorite authors, Mo Xiang Tong Xiu (墨香铜臭). Following that, I went online to discover aesthetic elements that would serve as my mood board, shaping the overall look and feel of my website based on the creations of the author.

Website visual references 

After deciding to center my website around the author Mo Xiang Tong Xiu, I explored Pinterest to find visual references that matched the aesthetic and layout I envisioned. Fortunately, I discovered some designs that resonated with me, and I'm contemplating adapting my website's visuals and layout in line with these inspirations.

Chosen colour palette

Now equipped with a carefully curated moodboard and selected visual references, the next crucial step is to establish a cohesive color palette for my website. The chosen colors will play a pivotal role in ensuring consistency across various pages, contributing to a harmonious and visually appealing user experience. I consider the tones and shades that resonate with Mo Xiang Tong Xiu's works, aiming to evoke a sense of familiarity and alignment with the author's aesthetic. Each color choice is deliberate, reflecting the mood and atmosphere I want to convey on different sections of the website. This thoughtful approach to the color palette is integral to creating a unified and immersive online environment for visitors.

2. Sketches

Having finalized my color scheme, I delved into researching existing wireframes that resonated with the chosen aesthetic of Mo Xiang Tong Xiu. I identified a few examples that captured the vibe I envisioned for the artist's website. Taking careful notes, I transitioned into the design phase, using Illustrator to sketch out wireframes that seamlessly blended the selected color scheme with the desired aesthetic. This hands-on approach allowed me to visualize the layout and structure of the website, ensuring that each wireframe aligned with both the artist's vibe and the overall aesthetic I aimed to achieve. The iterative process in Illustrator facilitated the refinement of the wireframes to create a cohesive and visually appealing framework for the upcoming website.

Sketch 1

Sketch 2

Sketch 3

Sketch 4

Sketch 5 

3. Prototype 

After selecting the most promising wireframes from my initial sketches, I proceeded to develop a low-fidelity prototype to refine the design further. This stage allowed me to experiment with the chosen layouts and explore potential adjustments. To delve deeper into the intricacies of the design and to visualize the website's possibilities comprehensively, I turned to Figma. In this versatile design tool, I meticulously fine-tuned the layout, scrutinizing details and assessing the overall user experience. 

low-fidelity prototype

Prototype 1 

Prototype 2

Prototype 3

4. HTML & CSS Codes 

5. Process screenshots

First of all, I code the half picture half colour background following a tutorial on youtube. While i'm at it, I also coded the navigation bar with a hover effect to increase the responsiveness, added the author's signature to indicated that this website is about the author.

I coded the biography section moving on to the gallery section that I wanted to include all the more well-known novels written by the author.

I coded the synopsis of the popular novels first in html using <h1></h1> <p></p>, found it credible information online before coding it into the website.

In css, I added colour to the box i created with div, picking the second colour of the colour palette. 

Continuing on I've decided to take away the background colour and replace it to the cover of the mentioned books instead so that the viewers would have a better idea of what the books would look like when they do intend to find it in the bookstores.

This is the part when i coded the veil that was suppose to appear alongside the synopsis when being hovered over. Without the effect the text will just sit on top of the book covers blocking the visual which I find not as visually appealing. 

Here shows that I succeed in coding the intended affect when i hover over the 2 book on the list. The ones that are not hovered over, shows only the cover of the book exposing the great artwork feature on the cover.

Next moving on to coding one of the hardest section as I will need to include a main video player which in my case from learning the technique from youtube, we can only do it with javascript. The above shows the widget element for the main video player on the far left to the middle taking half of the section. 

Then for the right side of the section, I coded 2 more widget for the trailers of the 2 remaining popular animations. Initially, I wanted to make all there of them being played as a video player in the website but it was quite hard to do even for one of them as I run into several problems of the video not playing at first but after consulting with sir on week 14, he suggested that I should just link the other 2 widgets to the official youtube trailer as my website is just a portal to connect people with getting to know the other, so they should not be viewing all the videos in my website. 

Here Im just showing how the videoplayer i insterted is just showing half and half of it is out of the frame. Soon, by changing some of the elements in css, I mange to make it behave properly below the widgets. Except that the viewers need to watch out for the volume as it might start playing loudly at first until they adjusted the setting in their laptop. 

I've successfully implemented the final contact section, incorporating comprehensive information for viewers to connect with the author. This includes essential details such as email, social media links, and any other relevant contact information. Additionally, I've seamlessly integrated these sections into the navigation bar, ensuring a user-friendly experience for visitors as they navigate through the website. The improved navigation makes it effortless for viewers to explore different sections of the website and easily locate the contact information when needed. Overall, these enhancements contribute to a more polished and user-centric website design.

6. Final website 

Figma board link: Figma

Final Website link 

---

Feedback

Week 14: Change the main font as the current one doesn't suit the overall aesthetic. Include a background the the author's brand image and it blends in with the background. Just include a single main video player instead of trying to code all three, link the other two the the official trailer video in youtube.

---

Reflection

My journey with this assignment over the past nine weeks has been remarkably pleasant, with most aspects unfolding according to plan. I derived immense enjoyment from grounding my coding efforts in the inspiration drawn from someone I deeply admire for their content. Each coding section became a source of delight for me, and I approached the task with the hope that the resulting webpage would evoke the same excitement and joy that I experience when consuming the content that inspired it.

Admittedly, at the outset, I approached this assignment with a sense of trepidation. Coding was a novel skill for me, one that I only began learning this semester. The uncertainty of how extensively I needed to explore and expand my coding skills to achieve the envisioned result initially weighed on my mind. However, as the weeks progressed, I found that my fears were gradually replaced by a growing confidence and enthusiasm. Each section of the webpage took shape with a sense of accomplishment, and the process became an empowering journey of discovery.

In reflecting on the experience, I appreciate how this assignment served not only as a practical application of my newfound coding skills but also as a means of personal expression. Coding, once an intimidating venture, transformed into a creative outlet through which I could manifest my admiration for inspiring content. Looking back, I am pleased with the evolution of my skills and the tangible outcomes, and I feel a sense of pride in overcoming the initial apprehension. This assignment has been a valuable learning experience, and I am eager to carry forward the lessons and enthusiasm it has instilled in me.

Facing numerous failed attempts and even experiencing moments where the entire code I had worked on disappeared, there were instances when I felt compelled to throw in the towel. Despite these challenges, I persevered, driven by an unwavering commitment to see the website through to completion in line with my original vision. In the end, I remained steadfast and achieved the goal I had set for myself.