Newwave.Blue Website
Being passionate about music, my team and I decided to create a website that would help spotlight lesser-known artists for a semester-long class project. Using HTML and CSS, my team and I built our website to showcase artists from six different genres.
Spotlight
As a designer and programmer, I used sketches provided to help build the website with HTML/CSS, created the contact form, registered the domain name, and created a server for files and website to be hosted on
How I helped
Starting the design process
Pitching our website
My team and I presented our idea of our music website showcasing lesser-known artists to our professor and class. After getting their feedback, we moved ahead with our idea.
Getting started on research
We researched other music streaming platforms to investigate their uses and design trends.
We wanted ours to be stand out more, and have a website that can fulfill our purpose and the needs of users.
My team and I brainstormed the overall look and feel for the website. We decided to do a cool color scheme, with “modern” fonts to appeal to our target audience (college-age students). Other decisions behind a cool color scheme came from analyzing the design of other music applications and the connations behind colors.
Combining our ideas and creating sketches
After settling on the color scheme, we made paper sketches of a simple layout for the website. We each contributed our thoughts on the layout and what pages would be on our website.
We created sketches for a home page, and for subpages. Each subpage would be dedicated for one genre, while our homepage featured artists and contact information.
Creating the server and building web pages
I created the server so that our files could be hosted. We also acquired a domain name. Having these live, we were able to start and building the pages.
Members were assigned certain pages to be created. Once the HTML was done, the CSS was added. Each member had their work checked to ensure there was consistency and cohesiveness throughout the pages.
Making it go live
After all the pages were completed, I put them on the server. Our website was now live and ready to use.
Once the website was live, we checked for errors once again that could have occurred.
Some team members and I worked on fixing all errors.
Final Website
Homepage
The homepage was constructed with a navigation bar that the user could click through to switch between genres. In addition, we included a section in which more known-artists were listed. If a user were to click on one of the artists, it would redirect them to the respective genre page. We also include a top artist for each genre that we wanted to spotlight on the homepage. Finally, we included a contact form and contact information at the bottom of the page.
Subpage
Our subpages included the navigation bar for the user to be able to switch through the pages with no issues. We included a banner image as well as embedded Spotify previews of the artists.
To get the most exposure for all of the artists shown, we included links to their social media for users to follow them on.
Header Images
I created the header images for all of the subpages using Adobe Photoshop. Here is a couple of them…
Project Reflection
Working on this project was an enjoyable experience from start to finish. A large part of why this project was such a great experience was due to my team members. We all shared an equal weight of making the website come together. We also made sure to include everybody’s opinion on everything, from the site colors to the programming phase of the project. I am glad to have been a part of such a great team!
Individually, I gained a lot of technical skills throughout the duration of this project. I was able to learn how to set up a private server and strengthen my knowledge of HTML and CSS. Soft skills, such as communication and teamwork, were also strengthened. The project was lengthy, and without a doubt, sometimes a bit stressful. However, working with such a good team made the process easier.
The process of building the website confirmed my interest in pursuing web design and programming in the future.