Behind the Scenes of MAX Madness with Adobe XD
Designed by Codify Design Studio
Delivering an optimized mobile web experience can really resonate with your users. Learn how Codify Design Studio used Adobe XD to strategize, design, and prototype the user experience of a mobile-optimized web experience for conference attendees.
Getting the right “feel” for the design
The first thing we did was gather imagery and samples that matched the theme of the event — which was “a circus of mad max.” This included researching characters, posters, and other collateral relating to the movie franchise, and other post-apocalyptic imagery.
Russell then tapped designer Gilbert Gomez for a main event image, and photographer Helen Montez-Carr for some Nevada-inspired grit and grunge photos. The results helped inspire the UX design and development of the final product.
Artboards, styles, and symbols
Armed with a story and imagery, we fired up Adobe XD and started to design the story. Inspired by a gear-powered window mirror, we thought it would be cool to have a gear-powered navigation menu. We also liked the idea of using screws for buttons and the truck radiator supports for photo frames.
We used artboards in Adobe XD to design the key pages of the experience and explain how the design would indicate the user’s progress throughout the experience. One artboard in particular even depicted the opened state of the gear-driven menu.
Since there are design elements that need to be repeated on each artboard, we used symbols to link and control these common elements. Symbols give us the ability to move, scale, and adjust design elements across a range of artboards.
And finally, defining Character Styles allowed us to quickly experiment with various font sizes, font-faces, colors, and spacing options across our entire design. This made design experiments and revisions a breeze.
Make it interactive
Once we were happy with the design, we were ready to build a working prototype to show our client — but that’s a story for another blog post (click the link below).
Learn to make an interactive prototype from your Adobe XD document.
Watch these features in action
Join Chris Converse in the recorded webinar and get a behind-the-scenes look at the design process for the MAX Madness mobile event website — unveiled at the Adobe MAX Creativity Conference in Las Vegas.
Learn how Codify Design Studio used Adobe XD to strategize, design, and prototype a mobile web experience for this theme-based design event.
In this session you’ll learn to:
- Work with artboards.
- Create styles for colors and text.
- Define and reuse symbols.
- Produce an interactive prototype (without code).
For more, check out the Adobe Creative Cloud e-learning series: