News Section
" i'd say its good to have for people who may want to be up to date on new music, shows, merch, etc. But i'd say newsletters do a good job of that too so people can sign up specifically for them"
-Aditi
"I'd say its good to have for people who may want to be up to date on new music, shows, merch, etc. But I'd say newsletters do a good job of that too so people can sign up specifically for them"
-Aditi
All users emphasized that some sort of update is important.
(2) users expressed the importance of shows and live appearances as an aspect of updates.
Important Features
"examples of music, photo of artist, place to purchase, place to see live"
-Alex
"Examples of music, photo of artist, place to purchase, place to see live"
-Alex
"Tour dates and links to listen to their music"
-Ashley
All users desired tour dates and links to listen to music on a landing page.
Users mostly utilized Apple Music and Spotify to listen to music.
Email list was mentioned less, can be prioritized lower in design.
Auto-play and featured homepage content
"I find auto-playing videos to be good, it will get people's attention right away"
-Dakota
Auto-playing videos was deemed appropriate as long as there is no sound.
Changing the opacity of layers (when not in view) to .3 from 0 percent. This ensures the user can see the page before the animation to bring it to full visibility occurs.
Changing the opacity of layers (when not in view) to .3 from 0 percent. This ensures the user can see the page before the animation to bring it to full visibility occurs.
Fixing responsiveness issues such as this one where album covers went from rows to columns, but did not conform to uniform sizing and padding.
Use the arrow to toggle between the final desktop and mobile site!
I searched through artist websites until I found three that aligned with the general feel of what I had in mind for my site, as well as a high standard of design and minimalism. I compared artist landing pages for Billie Eilish, Tyla, and Lucky Daye.
Scalable branding + artist identity
Scalable branding + artist identity
Responsive musical website
Responsive musical website
I set out to make a responsive landing page for my musical project Tako Tomago as an exercise in creating an official artist website that translates both on desktop and (where it will most likely be seen) phone. To take things further I decided to construct the prototype in Framer, a no-code web developing platform.
Background
Tools
Figma
Framer
Typeform
Photoshop
Illustrator
Competitive Research
Asking the users
Personas
Synthesizing
I gathered four participants between the ages of 28-36 (consistent with much of my listener base) and asked them a variety of questions that would help me prioritize my own landing page.
Question examples:
When you are visiting a website for a recently discovered artist, what do you hope to see?
What streaming service do you utilize to listen to music?
I also asked them to rank various features on a scale of 1-10 such as merch, artist biography, email list and tour schedule.
I gathered four participants between the ages of 28-36 (consistent with much of my listener base) and asked them a variety of questions that would help me prioritize my own landing page.
Question examples:
When you are visiting a website for a recently discovered artist, what do you hope to see?
What streaming service do you utilize to listen to music?
I also asked them to rank various features on a scale of 1-10 such as merch, artist biography, email list and tour schedule.
Links for videos, music, shows, and more in
in addition to social links.
Single page layout
Content in front and center of landing
Four corner navigation on desktop
Extremely minimal approach
Branding/logo/ wordmark focus of site.
Low Fidelity Wireframes
Aesthetic + UI
Initial Visual Exploration
For usability testing, I presented my initial prototype and asked my participants from earlier to navigate it both on computer and mobile.
Buttons could use highlights / color to add to UI and relate to brand.
Not all imagery and content was properly sized on mobile (Responsiveness issue).
When scrolling between layers, scroll animations caused lower sections to be invisible until in view- causing confusion.
All linebreaks should be above the section Title.
Logo with video mask did not translate on mobile. Replace with standard youtube video or other visual resized to fit screen.
Buttons could use highlights / color to add to UI and relate to brand.
Not all imagery and content was properly sized on mobile (Responsiveness issue).
When scrolling between layers, scroll animations caused lower sections to be invisible until in view- causing confusion.
All linebreaks should be above the section Title.
Logo with video mask did not translate on mobile. Replace with standard youtube video or other visual resized to fit screen.
Over 80% of all the music landing pages contained a single scroll layout. Pages are presented as sections in a long scroll rather than isolated tabs, resulting in a simplified and smoother flow.
Media, such as music, visuals, or new content is often featured front and center. If it is not, links are readily available from the landing page to access it.
All the sites were minimal in a UI sense, but conveyed depth, and detail in unique ways.
Over 80% of all the music landing pages contained a single scroll layout. Pages are presented as sections in a long scroll rather than isolated tabs, resulting in a simplified and smoother flow.
Media, such as music, visuals, or new content is often featured front and center. If it is not, links are readily available from the landing page to access it.
All the sites were minimal in a UI sense, but conveyed depth, and detail in unique ways.
Initial Prototype
Conclusion
This was my first project built out in Figma + Framer, and it was empowering to create a website with my own branding and content that scaled responsively. I found that user testing with a project like this that is centered around accessibility is extremely important.
This was my first project built out in Figma + Framer, and it was empowering to create a website with my own branding and content that scaled responsively. I found that user testing with a project like this that is centered around accessibility is extremely important.
To better understand the need of a user using the site, I created two personas utilizing the user research conducted beforehand. Both personas represent a typical use case in which either viewport (mobile or desktop) would be used.
Sitemap
Next, to further structure our prioritized sections, a sitemap was created as a guide to the hierarchy and content included in the site.
My main goal with the overall UI and aesthetic choices were to mirror the colors and design listeners would find in the artwork and branding already existing for Tako Tomago. In order to achieve this, I extracted colors from existing artwork releases
Next I created some 'sandbox' websites in Figma, playing with colors, not so much worrying about sticking within the decided structure. The aim of this was to freely explore how colors/ fonts/ UI elements could be utilized in the site.
After attempting a few color-centric designs, I shifted my focus to a minimal black background, with colors used an as accents (hovers, backgrounds, blurs, CTA). After some feedback and sleep on the matter, I decided to move forward creating the actual website using the decided color scheme.
After attempting a few color-centric designs, I shifted my focus to a minimal black background, with colors used an as accents (hovers, backgrounds, blurs, CTA). After some feedback and sleep on the matter, I decided to move forward creating the actual website using the decided color scheme.
With a site structure in mind, I began drafting low fidelity wireframes of how each page/ section would feel. I made sure to create optimized versions for both desktop and mobile. Once my basic wireframes were set, I set out to design an aesthetic for the site- one that would convey the atmosphere of Tako Tomago and the project's existing visual identity.
Tools
Figma
Framer
Typeform
Photoshop
Illustrator
