Marvel.com is a fully responsive, device agnostic site that serves as the digital hub and spoke for the iconic brand. Serving as the first redesign in over 10 years, the style guide created to support it redefined and informed the visual design of Marvel's digital product offering globally.
The Legacy Site
The legacy version of the marvel.com experience had an infinite amount of room for improvement. It wasn't mobile-first or designed responsively, ran on a custom back-end that made content updates time consuming, and in general didn't convey the spirit and energy the public expects from a powerhouse Brand that Marvel is. All of which became goals for what the new iteration would be.
Marvel.com design before I joined the team
ART DIRECTION
Style Guide
Weeks of moodboarding and exploration lent itself to countless review meetings and collaboration with stakeholders. The visual direction for digital needed to be brought into the modern day while anchoring itself in the Marvel DNA: fun, colorful, larger-than-life while not taking itself too seriously.
The challenge here was doing so on a canvas for many lines of business to exist within. i.e. It couldn't be too comic-art focused as to not allow room for the films in hollywood to co-exist and vice-versa. Where I settled was to sweep it all away and pay homage to the heritage of print in a modern way. The black and white was a nod to the iconic "Talk bubble", the primary device of dialogue in comics; and the pop of red tied to the very recognizable Marvel "Brick" logo.
<Example Styles>
MOODBOARD EXAMPLE A
MOODBOARD EXAMPLE B
These are two examples of early moodboarding. Elements of which ultimately influenced the final approved design direction.
The angles used in the landing page carousels and CTA's were a nod to comic book paneling and nature of comic story telling, the idea that the story never truly ends.
DESIGN
A bold new direction
With the above art direction as the anchor, everything about the site visually and heirarchically was overhauled. An extreme amount of detail was placed on content structure and using the site as a true catch all for all divisions of the business. By scaling back the color within the actual interface, the boldness of the artwork was allowed to shine through.
Article Page
Character Detail Page
< SLIDE TO REVEAL BEFORE & AFTER >
Comic Event Page
Fully Responsive
All templates were designed to render accurately and effectively across devices. Below is an assortment of specs to illustrate what was handed to the dev team for implementation.