UI UX design for comic book publisher

CJM Development Research UI design UX design UX research +3
Smartphone displaying comic book covers from Top Cow Productions featuring dynamic illustrations and the title Syphon.
Smartphone displaying comic book covers from Top Cow Productions featuring dynamic illustrations and the title Syphon.
 
Client
Top Cow Productions ®
Timeline
5 months

Top Cow Productions is an American comic book publisher, founded in 1992 by Marc Silvestri, a former Marvel Comics artist. Known for its innovative storytelling and iconic characters, Top Cow has become a key player in the comic book industry.

2022
 
 

Colors & typography

We used a high-contrast palette of white, yellow, red-orange, and black to create a bold visual impact. Paired with a modern, geometric sans-serif typeface, the design delivers a clean and contemporary aesthetic.

 
What we did:

Redesigned the site, organized the comics catalog, and enhanced navigation for a smoother user experience

 

Comic book covers

Three comic book covers: Destiny Gate featuring a person entering a portal, Syphon with two characters and swirling colors, and Haunt You to the End showing a spooky building and large skull.

We adjusted the comic book covers to fit the updated interface, optimizing resolution and scaling for consistent display across all devices.

Three comic book covers: Destiny Gate featuring a person entering a portal, Syphon with two characters and swirling colors, and Haunt You to the End showing a spooky building and large skull.
 

Comic book catalog

Users are now able to explore Top Cow’s wide range of titles, delve into their interconnected universe, and access free comics featuring some of their most popular stories and characters.

 

Top Cow Productions

A showcase of Top Cow’s diverse comic book portfolio, featuring titles such as Antarctica, Destiny Gate, and more.

Top Cow Universe

An exploration of Top Cow’s expansive universe, where fans can immerse themselves in stories such as The Darkness and Cyberforce.

Top Cow Free comics

A selection of free-to-read comics, giving readers easy access to some of Top Cow’s standout stories and characters.

 
A laptop displaying a website for the Cyberforce Awakening Complete Collection featuring comic book art. A preview image shows vibrant comic characters. Another screen in the background shows a list of comic issues. A laptop displaying a website for the Cyberforce Awakening Complete Collection featuring comic book art. A preview image shows vibrant comic characters. Another screen in the background shows a list of comic issues.
UI
Main page
 

Sitemap

We structured the comic titles and editions into a clear catalog, streamlining the site’s architecture and reducing unnecessary pages to make it easier for users to navigate and explore content.

Navigation
Events
Catalog
News
 

User interface components

Developed over 100 new user interface components and sections to ensure a consistent experience that keeps the focus on Top Cow’s content.

 
Smartphone displaying a newsletter sign-up page for Top Cow Productions, featuring fields for email entry and a yellow submit button. Smartphone displaying a newsletter sign-up page for Top Cow Productions, featuring fields for email entry and a yellow submit button.
UI
Catalog
Laptop screen displaying a website with a Kickstarter campaign announcement and links to various sections like Talent Hunt, Online Store, and social media. Laptop screen displaying a website with a Kickstarter campaign announcement and links to various sections like Talent Hunt, Online Store, and social media.
UI
Main page
 

Editor dashboard

Created an editor dashboard that allows Top Cow’s team to add new titles, publish blog posts, edit author profiles, and manage website content.

 
Computer screen displaying a dashboard with a list of titles, categories, and status labels. The highlighted row is Cyberforce, marked as published under Top Cow Universe. Computer screen displaying a dashboard with a list of titles, categories, and status labels. The highlighted row is Cyberforce, marked as published under Top Cow Universe.
UI
Editor dashboard
 
Laptop displaying a website interface with comic book covers, text fields, and publishing options on a split screen. Laptop displaying a website interface with comic book covers, text fields, and publishing options on a split screen.
UI
Catalog
UI components mockup featuring buttons, labels, arrows, and action text in a minimalistic design with red accents. UI components mockup featuring buttons, labels, arrows, and action text in a minimalistic design with red accents.
UI
Components
 

Dashboard structure

Navigation
Titles
Creators
Events
News
 

Combining functionality with clean design

 
 

Responsive layout

We created specific layouts for both the site and the editor’s dashboard, ensuring they adapt properly across desktops, tablets, and smartphones for a consistent user experience.

Smartphone displaying comic book covers, including The Complete Darkness: Volume Three, featuring dark and intense artwork.
 
A mobile app displaying comic covers: Blood Stain with two characters and Destiny Gate with a portal. A search bar and list of titles are visible.
Catalog
Mobile screen showing Top Cow Productions website, with text about its mission and vision to inspire change through storytelling and build a diverse comic book community.
About
 
Mobile screen showing a profile for Marc Silvestri, founder and CEO of Top Cow Productions, based in Los Angeles, California.
Authors page
Two mobile screens displaying a book titled Eclipse. The left screen shows a summary with buttons to buy or find a store, and the right screen showcases four paperback editions.
Title page
 

Have a project in mind?
Let’s get in touch

Share your project idea with us! If our partnership isn't the right fit, we're happy to provide valuable insights that could still benefit you.

Get in touch

View our projects

See how we transform businesses with our research-driven and innovative design approach.