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
.jpg)
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
.jpg)
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
.jpg)
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.
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.
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
.jpg)
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
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.
Comments
Post a Comment