INTERACTIVE DESIGN/ Final Project
Week 10-Week 14
LIM CHAEHWAN (0363792)
Interactive Design / Bachelor of Design (Hons) in Creative Media/ Taylor's University
INTERACTIVE DESIGN/ Final Project
INTRODUCTIONS
PROCESS
Final Project- Creating a Single-Page Website for Your Favorite Artist
Artist Selection
For this web design project, I have chosen to create a single-page website dedicated to my favorite artist, Jungkook of BTS. This selection reflects my genuine passion for their work and will serve as a platform to showcase both my admiration for the artist and my skills in web design and development.
Content
Header: Artist's name and a concise tagline.
Introduction: Provides a brief overview of the artist's background and the reasons for my admiration.
Gallery: Showcases a collection of the artist's works through images, videos, or other multimedia elements.
Biography: Presents a brief biography or description of the artist's life and career.
Contact Information: Includes relevant contact details or links to the artist's social media profiles, if applicable.
Design Elements: The website will feature a visually appealing and cohesive design that reflects the artist's style.
Use of a clean and intuitive navigation structure for a seamless user experience.
Responsive design to ensure accessibility across various devices.
Visual Reference
Fig 1.0 Visual Reference #1
Fig 1.1 Visual Reference #2
Fig 1.2 Visual Reference #3
Sketch
Fig 1.1 Five Sketch for a Web page ( First attempt)
I sketched it at first, but I got feedback to understand the Key Principles of Usability more simply and easier for the user to understand.
So, there are five key principles of Usability1. Consistency2. Simplicity3. Visibility4. Feedback5. Error Prevention I made a second sketch with more consideration about this.
Fig 1.1 Five Sketch for a Web Page ( Second attempt)
MoodBoard
Fig 2.0 MoodBoard
The overall design of the webpage will refer to the design of Jungkook's recently released album Golden. I will also use JK's golden logo.
Color Pallet
Fig 3.0 Color pallet
Fig 1.0 Visual Reference #1
Fig 1.1 Visual Reference #2
Fig 1.2 Visual Reference #3
Sketch
Fig 1.1 Five Sketch for a Web page ( First attempt)
I sketched it at first, but I got feedback to understand the Key Principles of Usability more simply and easier for the user to understand.
So, there are five key principles of Usability
1. Consistency
2. Simplicity
3. Visibility
4. Feedback
5. Error Prevention
I made a second sketch with more consideration about this.
MoodBoard
Fig 3.0 Color pallet
Font Choice
Fig 4.0 Jomhuria Font from goolgle font
Figma & illustrator Process
Fig 5.0 Discography icon design (illustrator)
Fig 5.0 Discography icon design (illustrator)
Fig 5.1 Webpage background image (Photoshop)
Fig 5.2 Webpage Logo image (Photoshop)
Fig 5.1 Webpage background image (Photoshop)
Fig 5.3 First version Figma prototype design
Personally, I want the artist's photo to be the background photo, and through feedback, I changed it to a more comfortable layout for people to see.
Fig 5.4 Final version Figma prototype design
Dreamweaver Process
Fig 6.1 Nav hover design
Fig 6.1 Nav hover design
Fig 6.2 Insert Music video
Fig 6.3 Insert carousel gallery
Fig 6.4 tab menu
Fig 6.5 Chrome dev tools
Fig 6.2 Insert Music video
Fig 6.3 Insert carousel gallery
Fig 6.4 tab menu
Fig 6.5 Chrome dev toolsFinal result
I organized the content into separate sections based on the key requirements of the project. The header came with a concise introduction to Jungkook and a short tagline containing his signature word, Golden. The introduction section took a closer look at his background and why he is a source of inspiration. The discography provides an introduction and link to his first single album and also allows you to view the music video. The gallery contains photos related to his solo album. Lastly, we included contact information and links to social media profiles to ensure a seamless connection between the audience and the artist.
Fig 7.1 Introduction
Fig 7.2 Discography
Fig 7.3 Music Video
Fig 7.4 Gallery
Fig 7.5 Contact
Fig 7.1 Introduction
Fig 7.2 Discography
Fig 7.3 Music Video
Fig 7.4 Gallery
Fig 7.5 Contact
Fig 7.6 Final website section (PDF)
Final Website: https://goldenjungkook.netlify.app/
FEEDBACK
Week 12: The layout is not too concise and difficult to recognize. Remember the five key principles of Usability again and be a good player
REFLECTION
Experience: Undertaking the task of creating a single-page website dedicated to my favorite artist has been a rewarding journey in honing my web design and development skills. The chosen artist for this project was Jungkook from BTS, a musician whose artistry has greatly influenced me.Selecting Jungkook as the focal point of the website was a natural choice given my genuine admiration for his musical talent and artistic expression. This passion played a crucial role in fueling my dedication to creating a website that not only showcases his work but also reflects the essence of his artistry.The project not only allowed me to showcase my passion for his artistry but also served as a practical exercise in translating admiration into a digital medium. The process involved a deep exploration of content organization, design elements, and interactive features.
Observation: Selecting an appropriate color scheme and fonts played a crucial role in reflecting both Jungkook's style and my personal taste. The visual layout aimed for balance, employing a harmonious blend of text and multimedia elements. The challenge of creating a responsive design that adapts to various screen sizes was met by implementing a mobile-friendly approach, ensuring a consistent and enjoyable user experience across devices.To enhance user experience, smooth scrolling navigation was implemented, allowing users to seamlessly traverse different sections of the webpage. Interactive elements such as image sliders, hover effects, and lightboxes were strategically incorporated to elevate the engagement level. These features not only served a functional purpose but also added a layer of dynamism, aligning with the vibrant energy of Jungkook's artistic persona.
Findings: The project's findings were multi-faceted. Firstly, the importance of genuine passion for the chosen artist became evident, as it fueled dedication and attention to detail. In terms of design, the realization of a responsive layout underscored the significance of adaptability across various screen sizes for a seamless user experience. The incorporation of interactive elements, such as image sliders and hover effects, not only added aesthetic appeal but also contributed to user engagement.This project served as a practical exercise in translating admiration for an artist into a digital space. It deepened my understanding of the intricate relationship between content, design elements, and user experience. Navigating the challenges of creating a cohesive and visually appealing website reinforced the importance of meticulous planning, design choices, and attention to detail.
In conclusion, the web design project has been a valuable opportunity to merge passion with skill development. It has significantly contributed to my growth in the realm of web design, fostering a greater appreciation for the intersection of technology and artistic expression.
Experience: Undertaking the task of creating a single-page website dedicated to my favorite artist has been a rewarding journey in honing my web design and development skills. The chosen artist for this project was Jungkook from BTS, a musician whose artistry has greatly influenced me.
Selecting Jungkook as the focal point of the website was a natural choice given my genuine admiration for his musical talent and artistic expression. This passion played a crucial role in fueling my dedication to creating a website that not only showcases his work but also reflects the essence of his artistry.
The project not only allowed me to showcase my passion for his artistry but also served as a practical exercise in translating admiration into a digital medium. The process involved a deep exploration of content organization, design elements, and interactive features.
Observation: Selecting an appropriate color scheme and fonts played a crucial role in reflecting both Jungkook's style and my personal taste. The visual layout aimed for balance, employing a harmonious blend of text and multimedia elements. The challenge of creating a responsive design that adapts to various screen sizes was met by implementing a mobile-friendly approach, ensuring a consistent and enjoyable user experience across devices.
To enhance user experience, smooth scrolling navigation was implemented, allowing users to seamlessly traverse different sections of the webpage. Interactive elements such as image sliders, hover effects, and lightboxes were strategically incorporated to elevate the engagement level. These features not only served a functional purpose but also added a layer of dynamism, aligning with the vibrant energy of Jungkook's artistic persona.
Findings: The project's findings were multi-faceted. Firstly, the importance of genuine passion for the chosen artist became evident, as it fueled dedication and attention to detail. In terms of design, the realization of a responsive layout underscored the significance of adaptability across various screen sizes for a seamless user experience. The incorporation of interactive elements, such as image sliders and hover effects, not only added aesthetic appeal but also contributed to user engagement.
This project served as a practical exercise in translating admiration for an artist into a digital space. It deepened my understanding of the intricate relationship between content, design elements, and user experience. Navigating the challenges of creating a cohesive and visually appealing website reinforced the importance of meticulous planning, design choices, and attention to detail.
In conclusion, the web design project has been a valuable opportunity to merge passion with skill development. It has significantly contributed to my growth in the realm of web design, fostering a greater appreciation for the intersection of technology and artistic expression.
Comments
Post a Comment