Amnis Music
a platform for small independent artists
Amnis Latin for 'stream'
Amnis Music was an idea I have had for a few years, with the intention of building the business with what free time I could find. This year, my senior project course (GIT 480) has provided me with an excellent opportunity to create a proof of concept. By building this project I utilized the elements of design I have learned, demonstrated my knowledge of front-end web development by creating a responsive site from scratch, as well as demonstrated my growing knowledge of scripting and back-end server communication.
This project was created from scratch using Photoshop, Illustrator, HTML, CSS, Javascript/jQuery, and Postman. As development progressed throughout the semester, I had various versions and stages of the brand and website development. While they were not all continued upon, I think that covering a lot of different approaches and converging on the ones that worked best really helped my final project feel cohesive.
Below are my initial sketches, mockups, and wireframes for the site.
My first stage of development (post-sketching) was creating a logo and color scheme for the site. My initial ideas and prototypes created in illustrator were good ideas, but during the peer review process it was noted that my design resembled Instagram at a glance. The next step in the design process was to change my color theme and simplify my design. The end result of this stage ultimately became my website’s icon, but while styling the website I went back and made another revision to take the logo out of its box container and changed colors to let it ‘pop’ more in the header. At this point I have created my final logo, icon, and main, dark, and light color schemes.
My first edition of the website was lost in a corrupted drive, so I began re-writing the project, this time making backup saves every time I made major changes. My first backup contains the home page, new music page, and browse page - only the home page was really finalized in its structure. At this stage I also had pretty basic styles down but I struggled with a few CSS properties that I had yet to learn in class. My second backup was more robust in the structure each page had, and the styling was more responsive and cohesive. I had changed the layouts slightly and added space for more content since I was having areas where the footer was not even to the bottom of the page.
Before my final website could be completed, I had two very important steps to complete: creating content and writing the data to a mock server the website could call to. I first made the decision to include my own album for the sake of showing what a full length project would look like on the site. Next, I reached out to friends and musicians I know well and got their permission to use their music or files they sent me for the site. Going back to the designs I had created previously, I created some “Amnis Music Exclusive” artwork for the projects that had no cover images. Additionally, I had to source images from the artists for both the covers and profile pictures. The next step was to write a JSON file that held all the information about each project, artist, track list, and pointers to the images I sourced. Once I finalized this file, I created a mock server for the site and wrote an example 200 response that would return the JSON data to the site.
The final stage of this project was ensuring each page had the proper structure, styles, and linking to the jQuery Libraries I needed. From this point, I was finally able to begin writing the scripts for each page using jQuery to populate the pages with data called from the server. Once they were all displaying correctly, I knew my work was completed.
This is a sample of how the home page displays on the real site. The site is responsive and will adjust layout when selecting 1x, 0.5x, or 0.25x!
Please be mindful of some images not showing correctly - this is due to not being able to host them for Codepen. To view the full site, visit the link below!
Amnis Music, https://www.public.asu.edu/~nanutta/GIT480/home.html , is now a complete project, and I’m extremely excited with its current state and where I can take it in the future. Amnis Music is a platform for small independent artists built by a small independent artist. While the platform is still in its infancy, I would be excited to get submissions from more artists who are interested in getting in on the project. While there is still a long road ahead to begin competing with modern streaming platforms, the current stage we are at is a big milestone in showing what Amnis Music stands for and what the platform hopes to achieve.
Updated version for GIT 418 is available at https://www.public.asu.edu/~nanutta/amnismusic/home.html which includes some more advanced features.
The 418 site includes more images on the about/home page which uses a jQuery library to operate like a slideshow on timers. The contact form now stored the data in local storage, and if a user has already visited the site and used the contact form - their name will auto-populate that input.
Here are some additional assets I created for Amnis Music:
Special thanks to Abigail Sandra, Andrew Wimmer, Lenah Lankhaar, and Jason Jarret for allowing me to use their music and images for this project. For additional insight, I have uploaded the source code to GitHub at https://github.com/nanutta/Amnis-Music . The last updates made were 11/27/21 & 12/1/21.
