Interactive Design - Final Project: Creating a Single Page Website for Your Favourite Artist
30.10.2023 - 1.12.2023/Week 8-Week 14
Low Li Vern/ 0362678
Interactive Design / Bachelor of Design (Honours) in Creative Media
Final Project: Creating a Single Page Website for Your Favourite Artist
Interactive Design / Bachelor of Design (Honours) in Creative Media
Final Project: Creating a Single Page Website for Your Favourite Artist
LECTURES
WEEK 4 : Project 1: Prototype Design
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.
Introduction
Background:
Alan Walker, born August 24, 1997, in Northampton, England, has
become a luminary in electronic music. The breakout success of "Faded" in
2015 propelled him to international acclaim, marking the beginning of a
meteoric rise. His subsequent hits, including "Sing Me to Sleep" and
"Alone," showcased his versatility and solidified his presence in the EDM
scene. Beyond his musical talent, Walker's distinctive look—a hoodie and
face mask—adds a futuristic allure to his persona. Actively engaging with
fans and collaborating across genres, Walker stands as a dynamic force,
leaving an indelible mark on contemporary music as both a musician and
cultural icon.
Why I like Alan Walker :
I am drawn to Alan Walker for several compelling reasons. Firstly, his
music possesses a unique blend of electronic and melodic elements that
resonates with my musical taste. The rhythmic beats and captivating
melodies create an immersive experience that I find truly enjoyable.
Moreover, Alan Walker's commitment to his craft and innovation in the
electronic music scene is inspiring. His ability to experiment with
different sounds and consistently deliver high-quality productions
showcases his dedication and passion for music. Beyond his musical
prowess, I admire Alan Walker's down-to-earth persona and his engagement
with fans. He comes across as genuine and relatable, fostering a strong
connection with his audience.
Visual References
Some Existing Alan walker's website / article of reference:
Fig 1.1 Visual Reference (16.10.2023-Week 8)
Fig 1.2 Visual Reference (16.10.2023-Week 8)
Sketches:
Fig 1.3 Sketches (23.10.2023-Week 9)
Mood Board
Progress in FIGMA :
Fig 1.4 Final Project Prototype (6.10.2023-Week 11)
Colour Palette :
Fig 1.5 Colour hunt(6.10.2023-Week 11)
Font
The font that I choose :
Main text : font-family: 'Courier New', monospace;font font-size: 70px;
Heading : font-family: 'Courier New', monospace;
font font-size: 48px;
Paragraph : font-family: 'Courier New', monospace;
font font-size: 20px;
Progress in Dreamweawer
SECTION A- HOME
1. Add navigation
2. Add Logo
3. Add Background Photo
Fig 2.1 Section A - HOME (19.11.2023-Week 13)
HTML :
<body>
<div
class="container">
<div class="main">
<header>
<nav>
<ul class="nav-bar">
<li
class="logo"><a href="./empty.html"><img
src="./img/logo.png" alt="" width="50" height="40"
/></a></li>
<input
type="checkbox" id="check" />
<span
class="menu">
<li><a
href="./empty.html">ABOUT</a></li>
<li><a
href="./empty.html">SHOP</a></li>
<li><a
href="./empty.html">SUBSCRIBE</a></li>
<li><a
href="./empty.html">RELEASES</a></li>
<label
for="check" class="close-menu"><i class="fas
fa-times"></i></label>
</span>
<label for="check"
class="open-menu"><i class="fas
fa-bars"></i></label>
</ul>
</nav>
<script>
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
</script>
CSS :
.container{
background-color: black;
}
.header h2{
padding-right: 100px;
}
body {
width: 100%;
}
.main {
display:block;
flex-direction:
column;
align-items: center;
justify-content:
space-between;
width: 100%;
min-height: 680px;
background:
url(./img/aa.jpg) no-repeat;
background-size: 100%
100%;
}
4. Add Main text
Fig 2.2 Section A - main text (19.11.2023-Week 13)
HTML :
</header>
<div class="main_text">
<div>ALAN WALKER</div>
<div class="main_text_but"><a href="./empty.html">FOR THE WALKERS</a></div>
</div>
</div>
CSS :
.main_text {
display: flex;
flex-direction: column;
align-items: center;
font-size: 70px;
color: #fff;
padding-top: 240px;
margin-left: 120px;
}
.main_text div {
margin-right: 100px;
}
.main_text_but {
font-family: 'Courier New',
monospace;
background-color: aquamarine;
padding: 10px 15px;
letter-spacing: 0.1em;
border-radius: 2px;
font-size: 16px;
}
.main_text_but a {
text-decoration: none;
color: white;
}
SECTION B- ABOUT
Fig 3.1 Section B - ABOUT (19.11.2023-Week 13)
Fig 4.1 SECTION C- WALKERs SHOP (19.11.2023-Week 13)
SECTION D- SLIDES
I drew inspiration from the W3Schools website while creating this slide,
employing HTML, CSS, and JavaScript. The process of coding the slide was
intriguing, and I am pleased with the final result.
Fig 5.1 SECTION D- SLIDES (19.11.2023-Week 13)
SECTION E - WHY I ADMIRE ALAN WALKER
Fig 6.1 SECTION E - WHY I ADMIRE ALAN WALKER (19.11.2023-Week 13)
SECTION F - NEWS
Fig 7.1 SECTION F - NEWS (19.11.2023-Week 13)
SECTION G - FOOTER
I opted to incorporate the song "Faded" by Alan Walker for website users to
enjoy and enhance their interest. I made multiple attempts to ensure that
the button functions properly for user interaction.
Fig 8.1 SECTION G - FOOTER (19.11.2023-Week 13)
HTML :
<div class="last">
<div>Dance through the faded
echoes</div>
<div
class="right_col">
<p>click here to
listen</p>
<div
class="rightimg"><img src="img/play-button.png" width="60"
height="60" id="icon"/></div></div>
</div>
<audio id="mySong">
<source
src="img/Faded(musicdownload.cc).mp3" type="audio/mp3">
</audio>
<script>
var mySong =
document.getElementById("mySong");
var icon =
document.getElementById("icon");
icon.onclick = function(){
if(mySong.paused){
mySong.play();
icon.src = "img/pause.png";
}else{
mySong.pause();
icon.src = "img/play-button.png";
}
}
</script>
CSS :
.last {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
max-width: 100%;
min-height: 860px;
background: url(./img/back.jpg)
no-repeat;
background-size: 100% 100%;
margin-top: 100px;
}
.last div {
font-size: 30px;
font-weight: normal;
font-family: 'Courier New',
monospace;
margin: 20px 0;
letter-spacing: 0.1em;
color: #fff;
padding-bottom:0px;
}
.right_col p {
font-size: 25px;
}
.rightimg {
padding-left: 150px;
}
#icon {
width: 60px;
cursor: pointer;
}
SECTION H - CONTACT
Fig 9.1 SECTION H - CONTACT (19.11.2023-Week 13)
SECTION I - MEDIA QUERY
I've fine-tuned the media max width settings to accommodate various device
sizes, ensuring responsive design at 610px, 1024px, 820px, 500px, and
375px.
Netlify Website Link : https://final-project-livern.netlify.app/
Fig 10.1 Responsive in Iphone 14 pro max (1.12.2023-Week 14)
REFLECTIONS
Experience
Creating a single-page website for my favorite artist has been a rewarding and educational experience. This project allowed me to delve into the world of HTML and web development, offering practical insights into the creation of a cohesive and visually appealing online presence. Through this project, I gained a newfound appreciation for the importance of layout and design in web development. Balancing visual appeal with functionality became a key consideration, and I discovered how small details in coding can significantly impact the user experience.
Observations
This experience underscored the importance of responsiveness in web design. Ensuring that the website is accessible and visually appealing across various devices became a crucial aspect of the project, contributing to a more user-friendly experience. Building a website from scratch allowed me to apply theoretical knowledge in a practical context, reinforcing my understanding of HTML and web development.
Findings
I look forward to expanding my skills in web development and exploring additional technologies to enhance the functionality and interactivity of future projects. This single-page website project served as a stepping stone in my journey to becoming a more proficient and creative web developer.
THE END
Comments
Post a Comment