Interactive Design: Final Project

Ng Zheng Kai 0359424
Interactive Design / Bachelor of Design in Creative Media (hons)
Final Project

INSTRUCTIONS




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.

Process

For this project, we were to create a single page website dedicated to our favorite artists, I've chosen Nujabes, a Japanese record producer as my main theme for my website.

Sketches
First, I sketch out a wireframe for my website using pencil and paper.

Fig 1.0 Sketch 1

Fig 1.1 Sketch 2

Fig 1.2 Sketch 3

Fig 1.3 Sketch 4

Fig 1.4 Sketch 5

After some feedback, I've chosen go on with Fig 1.1 sketch 2, as it is more mainstream.
Prototypes
I then created a lo-fi prototype based on Fig 1.1 sketch 2



I then created a hi-fi prototype.



After some considerations, I decided to change some of the design to make it more interesting.


Coding


Fig 1.5 HTML PDF



Fig 1.6 CSS PDF

Final





REFLECTION

Throughout this assignment, I have faced some hardships with the coding part mainly because I was sick and cannot think straight, so I had to retry a couple of times when coding for my website. I faced some issues mostly regarding the display size on mobile devices, but the navigations work fine, the images does link to a Youtube video successfully, and the display size for the computer is correct. But in the end, I am glad that I am able to code out a website that actually functions how I want.

Comments

Post a Comment

Popular posts from this blog

Intercultural Design

Image
Week 1 - 7 Ng Zheng Kai 0359424 Intercultural Design / Bachelor of Design in Creative Media (hons)`  Project 1, 2 & 3: Hanhaba Obi  INSTRUCTIONS A proposal to concretise ideas, supported by research, for a final design revolving a given theme that reflects students’ understanding and interpretation of global issues and design aesthetics. The general theme is “Cultural Sensitivity in Design” You are to study a cultural phenomenon, or a particular subculture that is perceived as ‘sensitive’, and “frame” your study within the chosen theme. You are to convey this cultural aspect without altering the actual facts but within a presentable interpretation and adaptation that raises awareness from the viewers. Produce some preliminary ideas on how to visually express you interpretation using design language. Each idea is to be supported by a short ratio
Read more

Advanced Typography- Task 2: Key Artwork & Collaterals

Image
21/9/2023 - 7/11/2023, Week 5 - Week 11 Ng Zheng Kai / 0359424 Advanced Typography / Bachelor of Design in Creative Media (Hons) Task 2: Key Artwork and Collateral LECTURES All lectures are completed in  Task 1 INSTRUCTIONS Task 2A: Key Artwork Sketch For my key artwork, I am going for a graffiti bubble style font. Because I want to give off a sense of a chill and friendly vibe for my key artwork. Fig 1.1 Sketch Digitalize Fig 1.2 Image Trace Fig 1.3 Word Digitalization Color Palette Fig 1.4 Color Palette For my color, I decided to choose a bright and vibrant color palette. Final Design Fig 1.5 Final Design (JPG) (B&W)
Read more

Interactive Design: Project 2 - Working Web Page

Image
Ng Zheng Kai Interactive Design / Bachelor of Design in Creative Media (Hons) Project 2 - Working Web Page INSTRUCTIONS Project 2 - Working Web Page The objective of this assignment is to transform your static prototype from Project 1 into a fully functional and interactive web page. You will apply your knowledge of web layout class to create a working website that closely aligns with your original prototype. Review your static prototype from Project 1 and analyze its layout, typography, color scheme, and imagery. Use HTML and CSS to translate the design elements into code, ensuring a faithful representation of the original prototype. Aim for pixel-perfect precision while maintaining responsive design principles to ensure compatibility across different devices and screen sizes. Upload the file in Netlify and submit the link here. Update your e-portfolio with all the processes do
Read more