Separate atmosphere from navigation
Graffiti illustrations and textured backgrounds carry the street-inspired identity. A more restrained sans-serif interface gives labels and navigation a consistent voice.
UI DESIGN / GROUP CONCEPT
Off da Hook 2k40
Street energy.
Clear calls to action.
A hip-hop event website concept for fans and gamers. Graffiti-inspired graphics create the atmosphere; familiar navigation and deliberate button states help visitors find their way.
- CONTRIBUTION
- Buttons, sponsors page & process journal
- FORMAT
- Desktop & mobile Figma concept
- CRAFT
- Figma · Illustrator · UI states
01 / CONTEXT & INTENT
How can a visually expressive event site stay easy to navigate?
The group presentation identifies hip-hop fans and gamers as the intended audience for a fictional event, Off da Hook 2k40. It also acknowledges a tension in graffiti typography: visual personality can come at the cost of readability. The design combines expressive imagery with a more structured interface.
02 / DESIGN REASONING
The thinking behind the interface.
Make button states part of the identity
The button sheet shows normal and hover states for purchase, cancel, navigation, and cart controls. The purchase button gains a dripping-paint treatment on hover while retaining its label.
Document individual contribution
The original work-distribution slide credits Anne with the process journal, button design, and sponsors page. Desktop and mobile UI/UX were assigned to other teammates; this is presented as a group project.
The experience, step by step.
A walkthrough of the documented experience.
- 01
Discover
Understand the event identity.
- 02
Explore
Browse program and artists.
- 03
Choose
Find the ticket action.
- 04
Review
Continue through the prototype.
03 / VISUAL EVIDENCE
A closer look at the work.
Original screens and process material. Select an image to inspect it at full size.
Wireframe to visual design
Original presentation, p. 24: the desktop composition before and after visual styling.
Normal → hover
Original presentation, p. 18: Anne’s documented button-design contribution.
A family of controls
Original presentation, p. 19: quantity controls and normal, hover, and click treatments.
The mobile direction
Original presentation, p. 32: a mobile design exploration by the group.
04 / EXPLORE
Compare the layouts.
Scroll through the original exported layouts. Switch between desktop and mobile to compare the compositions. These are design exports; open the Figma prototype for the original click-through flow.
Scroll inside the frame to explore the full design. Buttons in these exported images are not interactive.
What this work carries forward.
The material documents visual exploration, interface states, and desktop/mobile layouts. It does not include usability-test results or conversion data. The useful next step would be to test whether visitors can locate event information and ticket actions without the expressive graphics competing for attention.