Marvel.com

Design | UX | Art Direction

The Backstory

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

Screen-Shot-2020-06-22-at-10.53.00-AM
Screen-Shot-2020-06-22-at-10.55.24-AM
Screen-Shot-2020-06-22-at-10.57.31-AM

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>

marvel_slide5_modal

MOODBOARD EXAMPLE A

Screen-Shot-2020-06-22-at-2.28.48-PM

MOODBOARD EXAMPLE B

Screen-Shot-2020-06-22-at-2.28.37-PM

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.

Screen-Shot-2020-06-22-at-2.38.07-PM

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

1-NEWS-detail-v4-Full

Character Detail Page

02a-characters-character_detail-v3

< SLIDE TO REVEAL BEFORE & AFTER >

Comic Event Page

11-Comic-Events_Crossovers-5-hover

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.

Screen-Shot-2020-06-22-at-2.21.37-PM-2
Screen-Shot-2020-06-22-at-2.14.08-PM
Screen-Shot-2020-06-22-at-2.15.53-PM
Screen-Shot-2020-06-22-at-3.08.56-PM

Contact Me!

© MattVandrick 2020