This project is for my FED Assignment 1.
The aim of this project is to create a modern, engaging, informative and visually captivating website that serves as the central hub for all things related to Laufey. It caters to 3 groups of people. Firstly, existing Laufey fans seeking updates on her music, tour dates and the latest news. Secondly, music enthusiasts who want to explore and discover Laufey's music. Lastly, individuals interested in learning more about Laufey. This website aims to encourage users to listen to Laufey's music, purchase her merchandise and tour tickets, become active members of the Laufey community and potentially contact her for future collaborations or opportunities.
The website is designed to provide an engaging and comprehensive experience for the general public interested in Laufey's music and persona. The design process aims to cater to user behaviours and needs, especially mobile users who tend to scroll extensively.
1. As a user, I want a quick and easy way to access all parts of the website.
- The homepage is designed to compile different sections, making it easy for users to scroll and discover featured content. Navigation buttons in each section also allow for seamless exploration.
2. As a user, I want a simple and comprehensive navigation bar and footer.
- The navigation bar and footer contain all the essential buttons for easy access to different parts of the website and social media links, ensuring a seamless and straightforward user experience.
3. As a user, I want to see Laufey's new content when I enter the homepage.
- A featured video is positioned at the top of the homepage to promote Laufey's latest music, encouraging users to click on the video or the "Listen Now" button.
4. As a user, I want the homepage to feature concise but meaningful content that is sufficient and crucial for understanding.
- The featured sections contain only the most recent and essential content, providing users with a concise and updated overview of Laufey. For example. the featured merch section presents only 3 products to avoid overwhelming users with choices.
5. As a user, I want to see Laufey's latest music and videos effortlessly.
- An infinite slider is positioned on the homepage allowing users to explore and discover more about Laufey's latest albums and videos.
6. As a user, I want a straightforward method to input my details through a form.
- Both the newsletter form and contact form present a visually appealing yet simple design, allowing users to effortlessly join the Laufey Community or reach out easily, ensuring a hassle-free process.
7. As a user, I want to learn more about Laufey in an engaging and comprehensive manner.
- The About page features insights into Laufey's personal and professional life, including pictures of her Book Club and daily activities. Additionally, a Youtube video of her vlog is featured at the bottom, emphasizing her active sharing and encouraging users to delve deeper and form a stronger connection with her.
8. As a user, I want to explore her released music and details on them.
- The music page showcases her albums, including all the title tracks, allowing users to effortlessly discover and learn more about the different songs and listen to them by just clicking on the "Listen Now" button.
9. As a user, I want to quickly access Laufey's tour dates and related information.
- The tour page is neatly organised with the tour poster at the top to indicate the associated album. The tour details are neatly arranged ensuring that users can effortlessly navigate and locate the specific tour dates they seek. Additionally, featured merch products are positioned at the bottom to encourage users to purchase them.
10. As a user, I want to explore her merch without unnecessary complexity.
- Merch products on the merch page are neatly organised with minimum details. It is split into featured merch and all merch, aiming to encourage users to purchase featured merchandise.
11. As a user, I want a design that aligns with Laufey.
- I chose simple yet aesthetic colors that align with Laufey's latest album colors to make it more visually appealing. Additionally, I added an abundant amount of pictures to ensure that the website is not too plain.
In conclusion, I designed this website to cater to all needs of users by featuring all things Laufey. The website is kept simple, visually appealing and easily navigatable with pictures to enhance it.
1. Responsive Navigation Bar - Provides a visually appealing and accessible navigation bar that transforms into a hamburger menu for smaller screens, ensuring seamless navigation across devices.
2. Newsletter Popup on Homepage - A popup encourages users to join the Laufey community when the homepage loads. Users can fill out a form to join the community. Additionally, another fixed newsletter signup option is available at the bottom of the screen.
3. Automatic Infinite Carousel for Music Albums and Videos - Showcases Laufey's latest music albums and videos on the homepage. Users can hover over the carousel, click on albums or videos, and be redirected to the corresponding content.
4. Contact Form - Users have the option to communicate with Laufey through a contact form by entering their details and message, providing a convenient and user-friendly way to reach out and share feedback.
1. Enhanced Hover Effects for Images
2. Smooth visual transitions between sections and pages
1. HTML
- This project uses HTML as the markup language.
2. CSS
- This project uses CSS for styling and formatting.
3. JavaScript
- This project uses JS to enhance the features of the website.
1. Contact Form
- Go to the "Contact Us" page
- Try to submit the empty form and verify that it will prompt you to fill up the empty inputs
- Try to submit the form with an invalid email address and verify that a relevant error message appears.
- Try to submit the form with all inputs valid and verify that a success message appears.
2. Newsletter Popup
- Go to the "Home" page
- Try to submit the empty form and verify that it will prompt you to fill up the empty inputs
- Try to submit the form with an invalid email address and verify that a relevant error message appears.
- Try to scroll from outside the form and verify that the page cannot be scrolled.
- Try to submit the form with all inputs valid and verify the form gets replaced by a "Welcome to the Laufey Community!" message.
- After the popup disappears, try to scroll the page and verify that it can be scrolled.
3. Newsletter at the Bottom of the homepage
- Go to the bottom of the "Home" page
- Try to submit the empty form and verify that it will prompt you to fill up the empty inputs
- Try to submit the form with an invalid email address and verify that a relevant error message appears.
- Try to submit the form with all inputs valid and verify that a "Welcome to the Laufey Community!" message appears at the bottom of the form.
Responsive Design - Test on Different Browsers
- Verify that the content does not spill out of the page as the screen size decreases.
- Verify that the content shrinks in size, including font size and image size.
- Verify that the content remains visually appealing and all functions continue to work normally as the screen size changes.
- The text for the "About" Page was referenced from Wikipedia Article Laufey and Laufey Official Website
- The photos used in this site were obtained from:
- I received inspiration for this project from: