Interactive Design : Final Project - Creating a Single-Page Website
Week 10 - Week 14 / 19.6.2024 - 29.6.2024
Angel Tan Xin Kei / 0356117
Interactive Design / Bachelor of Design (Hons) in Creative Media
Project 2 / Working Web Page
⋆ ˚｡⋆୨୧˚ Index ˚୨୧⋆ ˚｡⋆
Visual Reference
Ideation of Theme & Layout
Figma Interface Design
Final Webpage
⋆ ˚｡⋆୨୧˚ Instruction ˚୨୧⋆ ˚｡⋆
Project Overview:
In this web design project, we will create a single-page website dedicated
to your favorite topic. This project will help you develop your web design
and development skills while allowing you to showcase passion for the
topic of our choice.
Project Requirements:
Artist Selection: Choose your favorite topic as the subject of your
website. Ensure you are genuinely interested in the topic, as this will
help you create a more engaging website. Decide the site's goal to ensure
that the site has clear content.
Content:
Content should have at least 5 sections that explain the topic of
interest. It should engaging and significant to the topic. You should also
include one CTA button that reflects the content.
Design Elements:
Choose a color scheme and fonts that reflect the artist's style or your
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.
⋆ ˚｡⋆୨୧˚ Practical ˚୨୧⋆ ˚｡⋆
A. Visual Reference:
I've explored WSS Winner and Pinterest to seek inspiration for website
design. These platforms offer a wealth of creative ideas, showcasing diverse
styles and innovative solutions. By analyzing top designers' work, I've
collected few that I found quite appealing for me the design approach and I
observed continuously pushing the boundaries of my creativity.
|
| Figure 1.1 Inspiration from Pinterest |
| Figure 1.2 Inspiration from WSS Winner |
B.Ideation of Theme & Layout
After looking at all the designs, I decided to create fan webpage for my idol, IU from Korea. I collected all her information and pictures and roughly drew out a layout wireframe of the webpage, inputting everything from the header to the footer. The navigation includes sections for merchandise collections, her songs, her drama appearances, and a subscribe contact form, ensuring a comprehensive and engaging experience for fans.
Header : IU
Navigation Bar:
- About Her
- Album
- Drama
- Collections
- Contact
About Her Section:
- Birth Name: Lee Ji Eun (이지은)
- Nickname: Nation’s Little Sister; Nation’s Sweetheart
- Birthday: May 16, 1993
- MBTI : INFJ (Her previous result was INFP)
Album Section:
The Winning
6th Mini Album
- Release Date: February 20, 2024
- Shopper
- 홀씨
- Shh (ft. HYEIN, 조원선)
- Love wins all
- 관객이 될게 (I Stan U)
Lilac
5th Full Album
- Release Date: March 25, 2021
- LILAC
- Flu
- Coin
- Hi spring Bye
- Celebrity
Love Poem
7th Mini Album
- Release Date: November 18, 2019
- Unlucky
- The Visitior
- Blueming
- Above The Time
- Lullaby
- Love Poem
Featured Song
- Strawberry Moon
- BBIBBI
- Eight
- Love wins all
- Lilac
- Blueming
- Celebrity
- People Pt.2 (feat. IU)
Drama
Hotel Del Luna (2019)
Genre: Fantasy, Romance, Drama
Plot: The story revolves around a mystical hotel, Hotel Del Luna,
that caters exclusively to ghosts. The hotel is run by Jang Man-wol
(played by IU), a beautiful but moody woman who has been cursed to
manage the hotel for eternity due to a sin she committed a millennium
ago. The plot thickens when Gu Chan-sung (played by Yeo Jin-goo), a
meticulous and kind-hearted young man, becomes the hotel's new manager
and helps Man-wol resolve her past grudges, leading to unexpected
romance and emotional healing.
My Mister (2018)
Genre: Drama, Slice of Life, Healing
Plot: This drama tells the story of three middle-aged brothers, with
a focus on the eldest, Park Dong-hoon (played by Lee Sun-kyun), who is
enduring a challenging life. He encounters Lee Ji-an (played by IU), a
young woman burdened by debt and hardships. Despite their starkly
different backgrounds and ages, they form an unexpected bond, helping
each other navigate their struggles and find solace. The drama is
lauded for its deep exploration of human relationships, emotional
resilience, and the healing process.
Moon Lovers: Scarlet Heart Ryeo (2016)
Genre: Historical, Romance, Fantasy
Plot: This drama is set during the Goryeo Dynasty and follows the
story of Go Ha-jin (played by IU), a 21st-century woman who
time-travels back to the Goryeo era after a near-drowning incident.
She wakes up in the body of Hae Soo, a noble lady. As she navigates
her new life, she becomes entangled with the royal princes of the Wang
family, particularly forming complex and tragic relationships with the
4th Prince Wang So (played by Lee Joon-gi) and other princes. The
drama explores themes of love, betrayal, and political intrigue,
highlighting the struggles and sacrifices of the characters.
Collection Section
- iu merchandise.jpg
- iu merchandise.jpg
- iu merchandise.jpg
- iu merchandise.jpg
- iu merchandise.jpg
- iu merchandise.jpg
Contact Section
Welcome to Subscribe our newsletter ! ( Email Input )
 |
| Figure 2.1 WireFrame of my Websites |
My chosen color theme includes pastel blue, purple, and yellow. After seeing the Webby Awards winner's website, I realized that minimalist designs are very effective. These colors are very representative of IU because of her hair color and the albums she has released.
|
| Figure 2.2 Colour Theme Selection |
C.Figma Interface Design
After my wireframe design was approved by Mr. Shamsul, I started to set up the website into a prototype in Figma that can showcase my idea realistically.
Figma Link:
https://www.figma.com/design/jTCD74UboZkf5m1tdwMAML/IU?node-id=0-1&t=Ire1aHpC9QZajj4Y-1
D.Process of Dreamveawer Coding
For the header IU and Navigation Bar part, I have re-fine the code from my previous digital resume to make it stick at position and make sure it leads to every section smoothly according to scroll-behavioral. Besides,The navigation bar is responsive towards narrower devices like mobile phone or iPad by turning into a drop-down hamburger menu at the top-right corner of the webpage.I utilized the "menu-toggle" "menu-icon" and "@media" function in css.
Header : IU
Navigation Bar:
- About Her
- Album
- Drama
- Collections
- Contact
|
|
|
|
| Figure 3.1.2 Nav Bar html |
|
|
|
|
|
|
About Her Section:
I have added a hidden link at the IG:Username to straight away link to
IU official IG account as I feel like it is a very convenient Call To
Action Button that we can directly click and view the instagram page.
|
|
|
|
|
Figure 3.2.2 About her Description html |
|
|
Figure 3.2.3 About her Webpage |
Album Section:
|
|
Figure 3.3.1 Album Section Html Code |
|
|
|
|
|
|
|
|
|
Featured Song Section:
|
|
|
|
| Figure 3.4.2 Javascript for Audio Setting on Webpage |
Collection Section:
I have implemented a new tricks I learnt from W3schools is the blurry image
when cursor is on the image by adjusting the opacity and will appear the
merchandise items name.
|
|
|
|
| Figure 3.5.2 Collection Items Name |
Contact Section:
The contact form as usual is for the visitor to drop down their
information for further subscriptions or contact. I did not input the icon
contact together as I feel like it would be better for users to straight
away press on the Call To Action Button directly on the respective
section.
|
|
|
|
| Figure 3.5.2 Contact Form |
I observed that actually in wss website, the webpage mostly very smooth and
having animation of fade in and out. In order to achieve that, I have added
some javascript <script> in the bottom of html and link ith css for
fade-in and fade-out timing.Also added most of the id="fade-in" and
"fade-out" at the section class to ensure everything has the animation when
scroll until the particular section.
|
|
|
|
|
|
My Website in JPG:
My Website in PDF:
Presentation of My Websites:
⋆ ˚｡⋆୨୧˚ Reflection ˚୨୧⋆ ˚｡⋆
Observation
Learning to create a single web page using Figma for prototyping and then bringing it to life with Adobe Dreamweaver, HTML, CSS, and JavaScript was an insightful journey. I observed that Figma provides an excellent platform for designing and iterating on prototypes, allowing for a clear visual representation before any coding begins. It was interesting to see how design elements in Figma translated into actual code, and how these initial designs set the foundation for the web development process. Additionally, the integration of HTML, CSS, and JavaScript revealed the intricate interplay between structure, styling, and functionality in web development.
Experience
The experience of designing and developing a webpage for my favorite idol, IU, was both challenging and rewarding. Using Figma, I was able to creatively experiment with various layouts, color schemes, and interactive elements, ensuring the design was both aesthetically pleasing and user-friendly. Transitioning to Adobe Dreamweaver, I applied HTML and CSS to structure and style the webpage according to the prototype. Learning and implementing JavaScript added dynamic functionality, enhancing the user experience. This hands-on experience highlighted the importance of planning, organization, and adaptability in web design and development.
Findings
Throughout this learning process, I found that effective web development requires a balance of design creativity and technical proficiency. Figma proved invaluable for visualizing the final product and making iterative improvements before coding. Working with HTML and CSS underscored the necessity of clean, organized code for maintaining design integrity and responsiveness. JavaScript, though initially challenging, demonstrated its power in creating interactive and engaging web elements. Ultimately, this experience underscored that a successful web page is the result of thoughtful design, meticulous coding, and continuous refinement, leading to a seamless and enjoyable user experience.
Comments
Post a Comment