Comics App: Personal Project

Role

Design, Wireframes, UI/UX

Overview

Maintaining an extensive comic book library on a tablet is a challenging task. Comic books are not like reading books or tv shows. There are many ways readers can organise their library — by a character, a series, or a story arc.

Comic book readers today are designed as book readers or user-defined folders. As a result, they make maintaining a massive comic book collection very difficult.

My brother — a software engineer, and I are creating a personal comic book reader that can be a better alternative to the ones on the market today.

Challenges
  • Make a system that organises comic books by several methods, not permanent folders.
  • Create a minimal design system that can expand beside evolving features.
Comics App - reader screen
Comics App — library screen

Library

Overview

The library section is a central part of the app. The library enables users to read comic books in their preferred order without making them organise folders in one specific way.

The user can choose in which method to organise his library — by main series, character, or story arc.

Organising the library in different ways can enable the user to read storylines in his preferred order. For example, A Marvel fan would like to follow the complete Avengers' characters timelines and not just Avengers books.

Comic Book Library
Comic Book Library
Category Selection Dropdown
Category Selection Dropdown
Folder — Comic book Stack
Folder — Comic book Stack

Folders

I stylised the folder with large headlines that divide it into sections.

The headlines are created based on related comics and folders — such as anthologies, spin-off, and other relevant content.

Comic book Library — Folder
Comic book Library — Folder
Comic book Library — Folder Scrolled
Comic book Library — Folder Scrolled

Downloads

The download section enables the user to download multiple comic books at the same time.

Download Mode
Download Mode
Selected Comic Book
Selected Comic Book
Unselected Comic Book
Unselected Comic Book

Homepage

The homepage is the hub for the users bookmarked, downloaded, and read comic books.

A black checkmark in the upper-right corner is indicating if the book is available offline, and the circular progress bar is showing the user's position in the book.

Homepage
Homepage
Progress Bar
Progress Bar
available offline
available offline

Comic Reader

I designed the comic book reader with book readers conventions in mind.

The reader changes directions to left-to-right or right-to-left depending on the content. The user can download the comic directly from the reader, and scale and adjust how the pages fit the reader.

Page preview, numbers, and bookmarked pages are available in the bar blow.

Comic Book Reader — overview
Comic Book Reader — overview
Comic Book Reader — Interaction example

Next Project →