presented above are designs of the mockup i created for the home page of INNO, an up and coming indie artist who has just released their new album about their childhood growing up in los angeles.

to align with their needs and requirements, i chose to use different shades of purple as accent colors throughout the website. since they were also looking for creative typography pairings, i also experimented with some fonts that are not so commonly used in web designs. for the home page, the font i chose to use is newake demo. starting off with a simple sans serif font with a heavier font weight makes the main point easier for users to read and grabs the users’ attention. i replaced the letter “o” with a smiley face i designed to align with the the client’s indie vibe as well as nostalgic visuals. it also spices up the font pair a bit and creates a bit of variation. i chose to create a mesh color grid as the background and implemented two shades of purple that look like two rectangles overlapping but also cohesively joining together, signifying that the music by the artist can be listened to by audiences of different, yet similar, identities. the pop of purple in the back also aligns with what the client requested. i then chose to add a bit of texture to the page. the folding texture aligns with the client’s nostalgic ideals, but also appeals to young adults and gen z.

for the second section of the homepage, i chose to display the tour dates and location. i named the tour “growing pains” because the artist’s album is about their childhood and what growing up in la was like. the title not only gives “indie vibes,” in my humble opinion, but also appeals to gen z and young adults. the font i chose to display the tour name in is fino regular, a serif font that is easy to read and also fits well with other sans serif and serif fonts. i then once again used newake demo as the font to display “tour dates” in for a cohesive typography pairing that also features easily readability.

tour locations and dates are then displayed directly below, with the date, location, and venue clearly marked out. these are displayed using the fino regular font which matches with the font already used in the same section of the page. i then put a purple gradient around the “purchase tickets” button to show that it is something the users can click on. i have the gradient alternating with each line to increase contrast, making it easier for users to differentiate between the different buttons and thus creating a better user experience while addressing accessibility concerns. these gradients can also be changed to create different effects. an example being a darker gradient signifying more seats left over and vice versa.

for the third section, i chose to display the letters “INNO” in a staggered way. the font i chose is chee variable. this is a font which allows the designers to play around with the font weight as well as how the letters “sit.” it is a less common font used less by designers, but i felt that it fits the indie and nostalgic vibe while creating an interesting typography pairing. the first section, under the “I,” is meant to be a short paragraph about the artist. i put “los angeles” as the placeholder of the title to show that this section is meant for where the artist is from. i chose to use a film photo i took of downtown los angeles. in the actual website, i would also choose to use film photographs to create a more nostalgic feel and carry out the indie vibe. the sections spanning the two “N”s would be for their album story. i have the title “growing pains” written in fino regular font for synchronicity from the section above, to show that the font is a part of what the album/tour is and thus the stylization of the title should be taken into concern. the last section, above the “O,” is meant to be about their upcoming tour. for the section titles and the paragraphs, i chose to use newake demo as my font choice as it is a simple sans serif font that provides for easily readability. i used hints of different shades of purple in the background which aligns with the artist’s color of choice. i have the opacity of the background color turned a bit lower to ensure the contrast between the black text and the background colors are clearly made, addressing accessibility concerns when it comes to readability. while the chee variable font might be a little harder to read, i felt like it would be okay to still employ as the four letters are placed with a heavy font weight and larger font size. the font choice would stylize the text and add to font pairings.

feel free to click into each image for an enlarged view of each section.