kitschmagik.org
A website for the Kitsch Magik Collective
UI Design,
Front-end Development
Role
Platform
Web
Timeline
Tools
Figma, Balsamiq,
Atom, GitHub
6 Weeks
About
KMC
Kitsch Magik Collective is a small artist collective formed in 2015 as a label for releasing noise and experimental sounds. They needed a website to serve as a main hub for updates and open calls, and as a directory for their multiple projects spread over several platforms, such as BandCamp, Youtube and Facebook. As the collective plans for the upcoming year, kitschmagik.org will be used to apply for artist grants so the members can host events and performances, as well as extend their reach to other potential collaborators.
As an artist, I was excited to take on this unique project to help out the collective in their mission to combine fine art with experimental sounds, while building upon my front-end development skills.
“Kitsch Magik Collective aims to uplift, support and collaborate with otherwise underrepresented artists in the realm of the experimental”
Key Features
• Landing page with KMC description
• Intro section for members and links to individual artist and social media
About
Projects
• Project archive for performances, sounds, compilations, and videos - linked to project platforms (i.e. Youtube, Bandcamp, etc.)
Open Calls
• Page for current calls for artists AND archive for past open calls
• A way to apply and/or contact
Contact
• Contact info for KMC
• Email newsletter Subscription option
Designing from a mobile-first perspective, I mapped out the screens based on the agreed-upon flow. I translated these into mid-fidelity wireframes and brainstormed the aesthetic of the website with some of the members by creating a mood board.
I applied the style guide to the screens and built the mobile prototype to share with the collective for their feedback.
Minor Revisions
Initially, I designed a button to play the track from the website, but we decided to use a large button which links to the platform on which the media is hosted because there are many different media types and platforms (i.e. sounds, videos, art on YouTube, Bandcamp, Instagram etc.) and also to keep the design more simple and consistent.
I changed the social media icons in the footer to have one style that matches the overall aesthetic.
In addition to these minor design edits, I revised some of the artist descriptions with missing information or spelling errors, as well as added the appropriate copy to replace whatever placeholder text remained.
Front-end Development
With the collective’s approval of the general mobile design and information, I started to build the website. The design for kitschmagik.org is relatively simple and doesn’t require any complicated features for interactivity, so I began to develop it as a static website using HTML, CSS and JavaScript in Atom. Due to the collective’s budget, I decided to host the website with GitHub pages since it’s free- they just had to buy the domain. I agreed to maintain the site with any updates as the collective adds new projects and members. I saw this project as both an opportunity to help out a small artist collective and to add to my GitHub portfolio.
Challenges
I set up my code editor and was building out the website, intended to be responsive, but I got ahead of myself and forgot a very important factor while coding: design for mobile first! Luckily, I didn’t get too far before I realized I needed to start with the smallest breakpoint and expand from there, but it was certainly an avoidable hiccup which taught me an important lesson. I decided to just start over and set up a new HTML file altogether.
Another challenge I faced was setting up the email subscription in the footer. The issue was figuring out a way for the members to collect emails of visitors to the website if they chose to subscribe for updates. Instead of setting up a PHP (which was outside of the timeframe, budget and my area of expertise), I opted to connect Google Sheets to the email subscription form and the collective’s Gmail inbox, using these instructions, along with some troubleshooting.
Currently, I’m working on updating the website so that it loads a little faster. Some of the images and features load a bit slower than what is ideal. This could be due to image size and excessive CSS styling, so I’m reformatting some elements to follow best practices. (Check back for updates!)
Takeaways
Don’t forget about “mobile first”!
As a UI Designer, I always create the visual elements for wireframes at multiple breakpoints if necessary, but when it came to coding, I forgot about that important factor. This project reminded me of the importance of implementing my design from a mobile-first approach. Lesson learned!
Check your code hygiene!
I’m excited to add front-end development to my designer toolbox because it will help me to understand my designs a little more thoroughly from the developers’ perspective, and can also help to bridge the gap between design and implementation. I really enjoy coding with HTML, CSS and JavaScript, and I’m looking forward to improving my code, both with this project and otherwise.
Keep clients in the loop!
Involving the members of Kitsch Magik Collective in my process allowed for each person to have a say in what information should be displayed and how. I wanted to make sure the website matched their aesthetic but also had a more “professional” presentation. Generally, keeping the client aware of what’s going on is important for building trust.
