Which conducting some research for Coffee Culture's web brief, I found this lovely UI and UX demonstration for Engage Prague on Dribble from JaromÃr Kavan. You can see the live version here.
I'm treating this project as a small case study, into how this website has been designed and presented, as it is only a mocked up version – which is exactly what I'm doing for this project. Below is a GIF animation, which shows the UX journey and the entirety of the micosite.
Using a circle, to show the mount pointer, the clickable items, the roll overs and how the website scrolls down the page. How the mouse circle pulses to show a click, disappears briefly to display the content, when the mount would be still. It's a lovely bit of design in itself.
The homepage has a compressed hidden menu, disguised behind a hamburger. Which opens up to show the menu.
You can see the roll over for the hamburger menu, which uses the neon green/blue which can be seen all over the website, little details like this really tie in the website as one consistent piece of design.
You can see how the menu which exposed appears on the page, overlaying the content. The main items have been dulled out, with a reduced contrast of tone. Which helps make the cross and the current page stand out more on the menu in comparison. Which both have a greater tonal contrast to the background.
The navigation of the website when the menu has been collapsed is very interesting. As the website is a vertically scrolling microsite, a vertical button navigation has been added, to show the sections of the website. Not only showing you how far down the page you are, but also a quick navigation to the individual sections.
Each section of the website is responsive, which makes it fill the full size of the screen – edge to edge, both vertically and horizontally. A quick scroll with the mouse acts as a full power scroll, transitioning you to the next section automatically. It's wonderful, and so easy to use.
Leave your comment