Landing page design of a website for showcasing work of a comic book artist

CLIENT: Mentored Learning Project with Quintype
PROJECT TYPE: Wireframing

I created this project as a design assignment, while I was being mentored by the design team at Quintype.
I had to make wireframes for the landing page of a website, for a comic book artist. This project helped me understand, how to make wireframes in Figma and also how to think when designing a website page.

I started by defining my problem and making a list of features to be presented on the page, next I did some secondary research about landing pages and also about subscription models, then I made a mood board by visiting different comic book websites and also other entertainment websites like Netflix, which have a good UX and engaging UI, to get inspiration for my own design.

I had to make a wireframe for the landing page of a website, for a comic book artist who wants to publish their work online, have a subscription plan for their audience online and earn from their work.    

This was my first project and for this I noted down the important information from my research on pen and paper, I have with time realised that google docs or any desktop software is better suited for this purpose and also eliminates the time wasted in writing down all the information instead of copy/pasting and adding helpful links to your document for research. 

MOOD BOARD:
mood board
List of elements to be added to the landing page:

1) Subscription model:

     Plans and subscription model

2) Features:

      Search 

      Filter 

      Sort 

      Latest 

      Featured work

      Read for free 

3) Comic

      Name 

      Rating

4) Logo

5) Menu Button

After some initial ideation, I started wireframing in Figma with help from layout grids. I used a 12 column grid with 200dp margin, common for a desktop website and started arranging the elements using the law of proximity.
Wireframing Phase 1:
image for phase 1
Wireframing Phase 2:
image for phase 2
Wireframing Phase 3:
image for phase 3
Above the fold:
image for phase 4

I added a section called featured work in my wireframe. Small comic book artists might want to have a showcase of their work which is showcased on other platforms to be visible on top of their landing page, as that would be something that they are recognised by and hence could help to draw in the audience.
I also added a read for free section which would work as an incentive to keep a user interested to explore, which might not be the case if they have to pay as soon as they click a comic link . This is a premium subscription model, used by most service providers on the web.

Project Year: 2021
Tool Used: Figma

Let's work together!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
linkedin logoinstagram logo
behance logo
medium logo