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
 
Webpage displaying a catalog of free comic titles with cover images and descriptions.
Tablet displaying a webpage with contact options: For creators, For retailers, and General inquiries.
Computer monitor displaying the homepage of Destiny Gate, featuring a comic book cover and a button prompting to learn more.
A website page displaying comic book covers. A search filter is on the left, and two covers for Cyberforce Awakening Vol. 1 and Vol. 2 are prominently featured on the right.
A smartphone screen displays a blurred website with a pop-up menu listing options: Catalog, Events, News, About, and Creators. Theres a prominent red Store button below.
Webpage displaying a Kickstarter promotion with a large green K and links to various campaigns, talent hunt, online store, and social media.
A comic book character with green hair and futuristic armor holds a weapon, next to a profile of an author named Stephanie Phillips on a website featuring creative team information.
 

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

 
A dashboard displaying a list of creators with details such as name, role, location, and status. One entry is highlighted in red. The interface includes tabs and filtering options.
Dashboard
Creators
A user interface screen showing a creator editing dashboard with sections for profile picture, social media links, and personal details like name, location, and position.
Dashboard
Creator edit
Dashboard interface with editing options. Features include title, permalink, broad and detailed descriptions, and publish settings. Side menu includes categories, events, and settings.
UI
Title edit
A dashboard interface showing a form for adding a new category, including fields for name, parent category, and description, with options to add an image and a category list on the right.
An event editing interface displaying form fields for event title, category, permalink, description, date, time, location, and options for publishing or canceling changes.
Screenshot of a blog post editing interface with fields for title and description. Options for publishing, categorizing, and scheduling are visible on the right panel.
UI
Edit post
 

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.

Bebbble View project
Looplay View project
Operatif View project
Nuage View project
VIA View project
Dr. David Mok View project

Webgamma is a UI/UX design and branding agency based in Montreal. We specialize in creating digital products, and shaping brand experiences.

Copyright © 2025 Webgamma. All rights reserved.
This site is protected by reCAPTCHA, Google's Privacy Policy and Terms of Service apply.

Fill out the form below

We partner with organizations of all sizes across all sectors.

    Choose a service
    How can we help you?
    Attach a fileAllowed file formats – PDF with a maximum file size of 5MB.
    Contact information
    What’s your budget?
    This site is protected by reCAPTCHA, Google's Privacy Policy and Terms of Service apply.

    Fill out the form below

    If you are looking for an internship, freelance work or a permanent position and believe you are a good fit, please fill out the form below:

      Applying for
      An internship, freelance work or a permanent position?
      Your experience
      How long were you mastering your craft?
      Contact information
      Tell us about yourself
      Attach your CVAllowed file formats – PDF with a maximum file size of 5MB.
      This site is protected by reCAPTCHA, Google's Privacy Policy and Terms of Service apply.