Unique One Page website with off-canvas content areas for Italian band, Was At. Cheers for such comprehensive build notes Dario!
This is my band website!
DESIGN
"Was At" design was born with the idea to use the "triangle" element of the flag, out of the logo.The triangle recalls the geometry, and so we decided to use a very geometric and identity font, called "Vitreous", used for titles. To give much consistency to the elements, all the icons have been created with a style similar to this particular font.
And that's not all! We extended the idea of the "triangle" flag by putting some diagonal elements at the top/bottom of the page.... and at the end we decided to use a polygonal background that blends well with all parts of the project.
UX/UI - Desktop version:
The site is made to keep our music always visible, and to give the possibility to listen and purchase it.All the other info are available by clicking a menu voice, this action open the right column who split the monitor in two.
To the left you can see a change of color, but the elements remain the same, our music, this change of color make easy to understand that something is happened,
and to give more visibility to the right column.
To the right you can navigate all the info about us, the tour dates, the photos etc.
and you can't turning back because... is useless!
UX/UI - Mobile version:
In the mobile version the only difference is that the right column is full screen, and in that case... you can go back :) There's one little bad thing... if you resize a desktop window to force a mobile version... you have to refresh the browser if you want to see
the site correctly, and visa-versa if you return to a desktop view.
DEVELOPMENT
There is nothing incredible with this,
we have used CSS transitions and jQuery to create a nice way to navigate the site by trying to make it -not- annoying!
CONCLUSIONS
Hey, you can also listen the songs... we are a good band! i promise ;)
