Inkstory
Visual Design

Role
Visual Design
Duration
6 Weeks
Tools
Figma, After Effects
Topics
UI Design, Branding

The Story behind

Dive into the world of Tattoos and get motivated
InkStory is a Publication which post various stories about tattoos and how they impact people's lives. Perfect platform for motivation and also inspiration to get your own tatoo.

Context

Overview
To create a web design for a publication who post 4-6 stories per week about various tattoo events, tattoo workshops and also blogs about different tattoo stories. The goal is the to create one “long form” story every week and a cms template for stories everyday.
My Role
As the sole designer, I was responsible for designing the UI, UX, rendering layouts, and creating amazing experiences. I had the opportunity to work with our supervisor Anton Repponen, who guided us by giving valuable feedback. I created frameworks and prototypes to share the vision, design principles, and content strategy. This helped to conceptualize ideas, gain alignment, and drive decision making.
Timeline
Over the six week timeline, we had four creative reviews where our supervisor gave me feedback and critiques on the entire project. I roughly had two weeks of total design time, then total of 3 weeks to apply the feedback and then finally last week was my final presentation.

Project Brief

What was asked?
To create a web design for a publication who post 4-6 stories per week about various tattoo events, tattoo workshops and also blogs about different tattoo stories. The goal is the to create one “long form” story every week and a cms template for stories everyday.
The Challenge: To apply an interactive element throughout the whole     experience and also to keep everything responsive.
Who are your readers?
  • Our readers are mostly between 25-40
  • Desktop (48%) and mobile (42%) traffic split evenly, not much tablet traffic (10%)
  • Most of our traffic is referral (Instagram, Twitter, Facebook etc)
    Most of our traffic is in the morning (before work), some during lunch and another large
  • Most of our traffic is referral (Instagram, Twitter, Facebook etc)
    Most of our traffic is in the morning (before work), some during lunch and another large

Design

Working with the Design System
For this specific project, I constructed a set of atoms and molecules to follow a specific design language throughout the whole process, keeping everything super consistent.

Typography

Classic combo of Monument and Avenir Next
Since the art direction of the website was to add modern and playful flow through the website monumental extended is perfect for this publications paired with Avenir Next font family.

Monument Extended

Google Fonts

Name

Font Size

Heading 1

56 px

Heading 2

48 px

Heading 3

40 px

Avenir Next

Google Fonts

Name

Font Size

Large Text Bold

20 px

Large Text Regular

Medium Text Bold

18 px

Large Text Regular

Normal Text Bold

16 px

Normal Text Regular

Small Text Bold

14 px

Small Text Regular

Logo Design

Classic combo of Monument and Avenir Next
Tattoo’s were originally given meaning first time in Japan which is why the logo is a representation of a Japanese cloud which basically adds the  meaning as peace.

Inkstory

Inkstory

Created Simple Layouts
Simple Layout was created especially for blogs to keep them consistent throughout the whole experience. These layouts helped form a Tier 1 design which is the kind of a layout which is applied as a CMS page.
Tier 1 Design
Tier 1 Design is category of Pages which maintain the same design and layout through the website which is called a CMS. The publication can post multiple stories everyday with having the hassle to design the layout each time and keeping it super simple.

Responsive Design
Creating responsive designs across various breaking points makes the experience much simple for designers since there are about 100s of different sized that people use and it makes the whole process much easier.

Tier 2 Design
A specially curated design for a blog post which is unique.
Tier 2 Design is category of Pages which do not maintain the same design and layout through the website for a more customized experience. They're generally long and contain detailed information based on a specific topic.

Result

A Super Responsive Publications
After many rounds of reviews and iterations, I came up with a page designed with a sense of clarity and purpose which is responsive across desktop, tablet, and mobile and other screen sizes.
A Simple Navigation
A simple navigation that allows users to jump between sections of the page efficiently which helps to generate an overall amazing experience.

Take away

  • Try to narrow down your scope sooner than later.
  • Focus on the MVP (minimum viable product) as your end result.
  • Working with design systems helps keep everything consistent throughout the projects.
  • Implementing feedback given by the supervisors help a ton while saving a lot of time and effort.
Next Project
Branding/
Art Direction

JFC Branding Experience

KUNAL BELAMKAR