Halcyon: tropical band website mockup


snatching the name and theme of a collaborative Spotify playlist i share with a friend, i started moodboarding for a new band named “halcyon”. according to google’s dictionary, “halcyon” denotes a period of time in the past that was idyllically happy and peaceful. with that definition, the soothing 1960s-inspired playlist and my imaginary band’s floridian roots, i went hunting for paradise. paradise morphed into a discovered vintage, grainy palm leaf treasure and the rest grew from there.

i used adobe color cc to pluck a variety of greens from the leaves. i added a muted peach to the palette to hint at those tropical, sunset tones. i designed this particular interface for a web app providing only the information i saw suitable for a mobile device. upon accessing the site, a rich image of the palms and a strong title appear, setting the tone for the rest of the site.

after entering the site, the menu appears taking up the entire view port. its opaque, checkered navigation peeks at the texture of the palm leaves underneath. the mock cursor represents that hovering over an item will display it in the peach accent colour. the large buttons make it obvious to take that initial leap from the homepage and onto another page of the site.

once scrolled past the menu, a sample song appears. this player displays the album cover, title, artist, play button, and playback bar. the sliced pineapple and discarded knife in the album cover represents bliss coming to an abrupt end.

the “who?” section incorporates a large image of the lead singer with the label pasted directly atop his face. this plays at the mystery of who the band really is. the originally black and white photograph has been made opaque allowing the dark green layer to seep through and the title to be a focal point.

recalling a graphic piece advertising the 1968 olympic games seen in the museum of contemporary art chicago, i tracked down this groovy sixties type called mexcellent and paired it with the clean and iconic, futura. mexcellent supplies both a 3D and 2D version. i incorporated the 3D only on the biggest instance of the band’s name seen when the page is initially opened. this adds depth and power to the page. all other uses of mexcellent were used in 2D in the navigation and titles. the 2D version is easier to read which is of utmost importance when used for the navigation.

This symmetrical interface is full of varied textures and depths, but comes together to communicate a calm and cool energy.

go home.

© 2017 eden brackenbury. all rights reserved.