Concept
Masked – Comic Book Reader
Project type
UX, UI, Concept
Platform
Universal Windows App
Mask off
Back when Windows Phone seemed to take off a little bit and Microsoft introduced the concept of universal Windows apps, we began working on a few ideas for possible new apps.
One of them was a comic book reader app for phones, tablets and desktop users. The reader would have a clean and modern look with a seamless experience when the user reads a comic book on any of the devices.
Logo & the visual appearance
Naming the comic reader wasn’t easy at first. Eventually we settled on “Masked” with a simple and stylized facemask as the logo and icon reminiscing and paying a bit of homage to the old school superheroes. The main color palette would be a darker one consisting of dark red and dark grays making it easier on the eyes. To make some small information or labels pop a brighter orange was added that compliments the darker colors nicely.
I wanted to make the whole interface and elements as unobtrusive as possible so only flat and minimal styles were used instead of gradients or skeuomorphism.
Comic Selection Screen
Selecting a comic is pretty easy since everything is ordered in a nice grid (or a list as an option) that’s horizontaly swipeable. If a book has a series of issues or different story arcs that needs more organization I added folders for that. So when a user clicks on a folder it would go one level deeper to display the books from that story arc.
There are also read-statuses whenever a book is opened, so it’s easier to track what issues I already have read and where I’m at right now.
You can also get more information off a book (release date, short summary etc) via the info button.
Search Screen
Search is one of the most important features if you’re one of the users with a lot of comic books. So finding a book shouldn’t be a hassle. Almost every screen has the search icon at the top right corner. Clicking the button brings up a full screen search input window with a field to type any word to search for.
Also a neat feature for search would be an auto-suggestion and live-search where you get the book cover as soon as you type any letter into the searchbar.
Reading mode
Reading a book or a comic book for that matter should be something relaxing with no distractions. So we would display only a page or the content of the book without any buttons or user interface elements. All interactions can be achieved with swipes and taps. If a user taps anywhere on the screen once, a small UI pops up with the most important interactions such as search or the ability to jump to a certain page.
Mobile mode
Since we were aiming for a Universal Windows App the mobile counterpart would’ve been exactly the same feature and functionwise. The only difference would’ve been the app layout and how all the elements were displayed on a smaller screen.
So if you were reading a comic book at home before work you could just continue reading the same book on the same page where you left it on a train, on the way to work… Wherever. Seamless sync and experience.
By the way. Fortunately there are some folks out there who have the time and devpower to develop just about the same comic book app for Windows as we were planning it. If you’re a Comic book enthusiast on Windows and need the best currently available reader for the platform, I’d recommend you check out Cover by FrenchFry. This is a really great app that I’m using whenever I use a Windows tablet or phone.
