Heroes in CinemaConcept Design

Tools:

Sketch, Photoshop, Illustrator, HTML, SCSS, Javascript, Contentful

Heroes in Cinema was a concept I had to create a better wiki for comic-book movie fans. The idea was to show how characters, objects, universes, and concepts within comic book movies were connected to their original source material and the greater connected movie canon that you see developing now with properties such as the Marvel cinematic universe.

Heroes In Cinema Logo

I wanted the logo to feel like it was bold and jumping off the page. I also wanted to include a superhero mask somewhere which would also double as the logo mark for areas such as social media and the website favicon.

I envisioned the homepage being a mix of both spotlight on new internal site content and featuring snippets of news that would link to offsite publications. I didn't want Heroes in Cinema to be a blog / news site. I wanted to include news on some level but the main focus was building out the site as a wiki and focus resources in that space as it was where I felt the most opportunity and interest would be from new visitors.

Heroes In Cinema Homepage Design

The only original content the Heroes in Cinema team would provide would be a podcast and written movie reviews. I wanted to offer this content to give the site a voice which in turn would build a following and build brand authority in the space. I believe giving your brand a voice is essential to its growth, especially when trying to grow a community.

Designing The Wiki

The wiki page was a place that really had to set itself a part from all the other wiki templates out on the internet. I have yet to see a live wiki site that doesn't feel like it hasn't evolved in design past the late 1990s. I get it. It's a lot of information to control structurally. With Heroes in Cinema however, our focus topic offers a limited range of content (relatively speaking) to structure the wiki design around. I took this opportunity to design a media heavy (but not obtrusive to the content) wiki that would feel akin to the modern media apps you are seeing on devices like AppleTV or Chromecast.

Video Cover Hero Concept

Wiki Template

Heroes In Cinema Hub Page

The wiki hub for each movie would include basically any noun you could attribute major or minor significance to -- characters, cast, teams, objects, weapons, locations, and more. If it had a purpose in the movie or is connected to the source material in any way, we would include it.

All the content on the page would also link to its own individual page, which would show other instances of it appearing across other movies. As an example, if the user were to click “Chris Evans” while on the movie hub page, they'd be sent to Chris Evan's actor profile page where they could see that he also played a major role in other superhero movies outside of the Marvel cinematic universe.

The news page would offer snippets of out-linked articles or link directly to original content on the site. New media such as trailers and image galleries would be posted in the news section to give the users a heads up about new content, but the content itself would also be drawn from the movie hub, utilizing the movie hub as a sort of media drawer.

News Index

News Template

Unfortunately, after a lot of time spent designing and developing a solid chunk of the site, more pressing and promising opportunities came to the attention of the team and the project was left in a state of limbo.

I am not optimistic the project will ever be seen through to completion. It would certainly be nice to get it up and running and build a community to support it, but for the foreseeable future it will remain a learning experience. The project was my first time working with a headless CMS (Contentful) and it was a blast to play with. I am also rather proud of the design work I did for the homepage and movie hub and enjoy being able to display them in my portfolio as a sort of momento of where I was at in my life when I was working on this project.