Visual design
Microsite
After, we moved on from graphic assets to the design of a microsite. This microsite is a scrolling site that includes four main sections (program, artists, moments, tickets) with a sticky navbar for navigation. It also includes a sliding modal contact us page.
Main interactions
Number hover effect
The clickable titles and numbers move on hover and are indicated with the color pink as a symbol of interactivity.
Progress bar
The progress bar denotes system status and visibility for the user. It lets the user know how far along they are in the website.
Sliding Modal
The placement of the arrow from the ‘Contact us’ button and the “Back’ button is kept in the same placement to maintain consistency.
Hover interaction and progress bar (left), sliding modal (right)
Wireframes
After, we moved on from graphic assets to the design of a microsite. This microsite is a scrolling site that includes four main sections (program, artists, moments, tickets) with a sticky navbar for navigation. It also includes a sliding modal contact us page.
Initial wireframes
Final layout
After, we moved on from graphic assets to the design of a microsite. This microsite is a scrolling site that includes four main sections (program, artists, moments, tickets) with a sticky navbar for navigation. It also includes a sliding modal contact us page.
Final microsite design