Interactive design-Final Project/Creating a Single Page Website for Your Favourite Artist
Start From 30.10.2023
30.10.2023 - 1.12.2023/Week 8-Week 14
Kong Cai Yi / 0363862
Interactive design / Bachelor of Design (Hons) in Creative
Media
Final Project: Creating a Single Page Website for Your Favourite Artist
INDEX
- Exercise
- Lectures: All lectures in Project 1/Prototype Design
- Project 2/Working Web Page
- Final Project: Creating a Single Page Website for Your Favourite Artist
INSTRUCTIONS
<iframe
src="https://drive.google.com/file/d/131kfj0FzZefJeIRNVXvbSKwWB1m6VhnZ/preview"
width="640" height="480" allow="autoplay"></iframe>
Final Project/ Creating a Single Page Website for Your Favourite
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.
Gallery: Showcase images, videos, or other multimedia related to
the artist's work.
Biography: Include a brief biography or description of the artist's
life and career.
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.
Artist Chosen-BLACKPINK
Introduction
Background:
Blackpink is a South Korean girl group formed by YG Entertainment,
consisting of four talented members: Jisoo, Jennie, Rosé, and Lisa. They
made their debut in 2016 and quickly rose to global stardom, becoming one of
the most influential and popular K-pop acts in the world. Known for their
catchy music, stunning visuals, and dynamic stage performances, Blackpink
has captivated audiences worldwide. Their music often blends different
genres, and their lyrics, which incorporate both Korean and English, make
their songs accessible to a diverse international fanbase. Beyond their
musical success, Blackpink's advocacy of individuality, empowerment, and
philanthropic efforts have endeared them to fans, making them not only a
musical sensation but also role models for many.Why I admire them:
Members:
Jisoo: The eldest member of Blackpink, is known for her charming visuals and versatile talents. With a captivating stage presence and a powerful voice, she brings a unique flair to the group. Jisoo's elegance and charisma have made her a standout performer and a beloved member of the K-pop sensation, Blackpink.
Jennie: Often recognized for her rap skills and stylish presence, is a dynamic force in Blackpink. As the group's rapper and fashion icon, she brings energy and attitude to their performances. Jennie's charisma and trendsetting style have established her as a prominent figure in the world of K-pop.
Rosé: the main vocalist of Blackpink, is celebrated for her soulful voice and musical prowess. Hailing from New Zealand, she adds an international flavor to the group. Rosé's emotive singing and guitar skills contribute to Blackpink's diverse musical palette, making her an indispensable member of the quartet.
Lisa: the group's main rapper and lead dancer, is renowned for her incredible stage presence and rap delivery. Hailing from Thailand, Lisa adds cultural diversity to Blackpink. Her dynamic dance moves and rap verses have earned her widespread acclaim, solidifying her status as one of the most influential performers in the K-pop scene.
Biography:
Blackpink has achieved global fame with hits like "Boombayah" and "Ddu-Du Ddu-Du." Beyond their music career, they are fashion influencers and brand ambassadors. Their limited but impactful discography showcases versatility. Details about their daily lives are generally kept private. As of my last update in January 2022, they continue to be influential in both music and fashion, with an international fanbase and successful endorsements. For the latest information, it's advisable to check more recent sources.
Visual References
5 sketches
Visual References
Some Existing BLACKPINK website / article:
- https://www.blackpinkmusic.com/
- https://24365withblinks.com/
- https://time.com/5562946/blackpink-k-pop-everything-to-know/
- https://www.ygfamily.com/artist/main.asp?LANGDIV=K&ATYPE=2&ARTIDX=70
Fig 1.1 Visual Reference (16.10.2023-Week 8)
I draw 5 Sketches include the category of "HOME", "ABOUT", "GALLERY","COLLECTIONS" and "CONTACT".
Fig 1.2 Sketches (23.10.2023-Week 9)
Mood Board
Progress in FIGMA
Fig 1.3 Process in Figma (30.10.2023-Week 10)
Fig 1.4 Final Project Prototype (6.10.2023-Week 11)
Colour Pallet
- BLACK #000000
- PINK #F8A4BD
Fig 1.5 Colour hunt(6.10.2023-Week 11)
Font
The font that I choose are:
- Heading:
- Subheading:
- Body Paragraph:
Progress in Dreamweawer
SECTION A- HOME
1) Add Logo
2) Add Navigation
3) Add Menu Bar
4) Add Group Photo
Logo & Navigation:
Fig 2.1 BLACKPINK Logo (19.11.2023-Week 13)
Fig 2.2 First section- HOME (19.11.2023-Week 13)
Fig 2.3 Logo align left (1.12.2023-Week 14)
Menu Bar:
Fig 2.4 Adding Menu Bar (1.12.2023-Week 14)
Fig 2.5 Make responsive media (1.12.2023-Week 14)
Group Photo:
Fig 2.6 Home- group photo (1.12.2023-Week 14)
Fig 2.7 Change group photo and make nav bar sticky (1.12.2023-Week 14)
1) Introduction of blackpink
2) Reason that I admire them
3) 4 Members
4) Link to Instagram
5) World Tour Video
6) Schedule of World Tour
4 members:
Fig 3.1 Image of 4 members (19.11.2023-Week 13)
Word Overlay Image:
Fig 3.2 Words overlay image (19.11.2023-Week 13)
Link to instagram: Hover- Hot Pink Colour
Fig 3.3 Added link to each instagram (24.11.2023-Week 13)
Responsive:
Fig 3.4 Make responsive media of 4 members's photo(1.12.2023-Week 14)
Fig 3.5 Make responsive image (1.12.2023-Week 14)
Fig 3.6 Mobile phone view (1.12.2023-Week 14)
World Tour:
Fig 3.7 Add full screen video (23.11.2023-Week 14)
Fig 3.8 overlook (3.11.2023-Week 15)
Finale in Seoul spot video:
Fig 3.9 world Tour Video (3.12.2023-Week 12)
World Tour Video Cover:
Fig 3.10 world Tour cover (3.12.2023-Week 14)
Scroll-bar (Schedule of World Wour):
Fig 3.11 Add Scroll-bar (3.12.2023-Week 14)
Image:
Fig 3.12 World Tour Image (3.12.2023-Week 14)
SECTION C-GALLERY
2) Add Songs
3) Songs Cover Poster
4) Add album
First Songs:
(Pink Venom- BLACKPINK)
Fig 4.1 Pink Venom (1.12.2023-Week 14)
Fig 4.2 Pink Venom-cover (1.12.2023-Week 14)
Second Songs:
(Jennie- YOU & ME)
Fig 4.3 YOU & ME (1.12.2023-Week 14)
Fig 4.4 YOU & ME-cover (1.12.2023-Week 14)
Album Cover:
Fig 4.5 Album cover (1.12.2023-Week 14)
Create image gallery with description:
Fig 4.6 Album gallery (1.12.2023-Week 14)
Make responsive:
Fig 4.7 responsive gallery(1.12.2023-Week 14)
SECTION D-COLLECTIONS + BIOGRAPHY
1) Collections- Apparel & Music
2) Biography
Collections Image:
Fig 5.1 Collections image(1.12.2023-Week 14)
Fig 5.2 Outcome (1.12.2023-Week 14)
Add Biography:
Fig 5.3 Biography section (1.12.2023-Week 14)
SECTION E-CONTACT
1) Add Social Media Icon
2) Add Copyright
3) Add Group photo
Fig 6.1 Contact section (1.12.2023-Week 14)
Active Navigation Bar
Fig 6.2 Add active navigation(1.12.2023-Week 14)
FINAL PROJECT SUBMISSION
NETLIFY: https://caiyi-blackpink.netlify.app/
REFLECTIONS
Experience
When designing the prototype for my website, I felt satisfied with the combination of different sections from my five sketches. I used a color scheme of black, pink, and white (BLACKPINK), which contributed to overall coordination and aesthetic appeal. When I began coding, I initially didn't consider many factors and neglected responsiveness. It wasn't until I noticed the navigation bar looked displaced and unattractive on mobile devices that I decided to add a menu bar. However, integrating it was challenging, and the entire website had issues that I didn't know how to address. Realizing the need for improvement, I decided to start over and focus on adjusting responsiveness after completing each section. I took it step by step, addressing issues as I progressed through the sections. Along the way, I added elements not present in the initial prototype, such as photos from a world tour, and made adjustments to certain layouts. In the end, the website became responsive and met my satisfaction. I'm thrilled with the result!
Observations
I've observed that creating a responsive website is indeed a challenging task, requiring meticulous attention to fixing each bug. I incorporated overlay and scroll elements into my website to add visual interest and prevent it from appearing dull with flat content. I realized that certain features, such as making the navigation active, require the use of JavaScript. This prompted me to search for online examples to reference, and it made me aware that adding interactivity or creating links to other websites often involves the use of JavaScript. As a result, I am looking forward to the day when I can delve into learning JavaScript.
Findings
Comments
Post a Comment