Somesh Yadav Design Portfolio Jan 2019

SOMESH YADAV DESIGN PORTFOLIO

JAN 2019

CONTENTS About me

03

Interaction Design

05

Editorial Design

16

Identity Design

27

Graphic Design & Illustrations

40

Animation & Videos

54

03 ABOUT ME INTRODUCTION Hi, Somesh here.

I am 23 and based out of Mumbai.

I’ve been working in and around design for the last 4 years, with work ranging from editorial design, motion graphics & music videos to UI design, campaign ideas & experience design.

Apart from design, I sketch, lift weights, dance, sing off-key, and read non-ďŹ ction to appear smarter than I really am.

I hope you like my work.

04 ABOUT ME QUALIFICATION & WORK EXPERIENCE B.Tech in Engineering Physics from IIT Bombay (Aug ‘17) Creative Technologist at Leo Burnett India (Oct ‘16 - Jan ’18) Design Consultant for Traansport.com (Feb ‘18 - Jul ’18) Creative Director & Co-Founder at Electus Network (Aug ‘18 - Dec ’18) Design Lead & Co-Founder at Bombay Creatives (Apr ‘15 - Oct ’16) Freelance videographer, interface designer and visual & motion artist (Summer ‘14 - till date)

05 INTERACTION DESIGN The following pages are a collection of some of my user-interface and experience design work, with the components, layout & a brief explanation of the ideation behind.

1. MoneyBee 2. Vault 3. Traansport

1.

06

MONEYBEE MoneyBee is a personal ďŹ nance app, that helps users track their expenses and invest in mutual funds.

The screens of the app were designed to include the new features and to make it look modern and fun and less like a ďŹ nance based app.

Iconography was changed to suit the new and bold brand identity.

07 INFO ARCHITECTURE The user is greeted with his/her account balance at the ďŹ rst glance on the dashboard itself.

The user can swipe right or left to get to the savings and mutual funds options.

All the features of the app are just a click away from the home page. For example, clicking on My Expenses will take you to the expense tracker screen shown alongside.

Expense Tracker screen emphasises the amount left for the budget you’ve set. You can scroll through the graph to see your spending pattern over time with a list of all your expenses.

08 ICONOGRAPHY

The iconography is line-based and duo-tone with occasional colour-ďŹ ll used to declutter the lines.

2.

09

VAULT Vault is an accountable crowdfunding platform that lets the project contributors govern the outow of capital.

The web app was designed keeping the decentralised nature of blockchain in mind, and the user experience was tailored accordingly.

The interactions and animations were designed to keep the user distracted from the high-latency that comes with decentralisation through blockchain technology.

10 LAYOUT & GRID SYSTEM

The pages were very data heavy and needed to be segregated into blocks that could increase in any number in the future.

In order to keep the design scalable in this context, a masonry grid was used.

Tap Increment Current Tap Amount: 550 ETH Increment Approval: 9.23%

11

Exceptional Fund Requests

Tap Poll Contracts Tap increment Unit: 50 ETH

COMPONENTS

XFR Title

Approve

XFR Amount

Description

Logged as 0xb5bo...

Search...

Projects

My Tokens

Publish

Wrong Network

This poll will end in 30 days of publishing

App Redesign

20th Aug 2018

500 ETH

Omisego (OMG)

Level 2 Price 0.017522 ETH

0.009861 ETH (+31.23%) 5.2M Tokens Sold of 200M (Round 2 of 3)

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in

Read our whitepaper Learn more on our website

Buy

Trade

Spend Curve

Spendable

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriudolor in

Spent

Approval Rate: 99.99%

5,400 ETH

Edit

4,700 ETH Tap increased to 550 ETH

3,900 ETH

4th Aug 2018, 8,462 ETH

1,900 ETH

App Redesign

1,000 ETH

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriudolor in

XFR approved 2,000 ETH

Approval Rate: 75%

Token Distribution 20%

Second Token Sale ($3.5M) 17.5M tokens at $0.02

27.5%

1B

Third Token Sale ($11M) 27.5M tokens at $0.04

Vote Histogram

App Redesign

Health Index: 9,521

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriudolor in

20% 17.5% 10%

20th Aug 2018

500 ETH

TOKENS

Foundation

Bounty

Ended on: 23rd Aug 2018

Redeem

5M tokens at $0.01

Team

20th Aug 2018

500 ETH

0 ETH

First Token Sale ($500k)

Ends in: 5D 12H 20M

0.0415%, 8,462

5%

Approval Rate: 75.86% Redeemed on: 24th Aug 2018 0.05%

Ended on: 23rd Aug 2018

3.

12

TRAANSPORT Traansport is an ERP platform for transporters in India, which takes care of everything from booking to accounts.

Designing the interface for both the blue-collar users and data-analysts meant the app had to be very simple to use for base level users, but can provide granular control for superusers.

The web app is complimented with helper mobile applications for the truck drivers, loaders and brokers.

13 USER FLOW Booking the trip Book Trip

Fill the details & enter the number of trucks required

Each truck entry made is called one trip

Enter Truck No. Enter Driver Name

Firozabad

Loader app making new trip with all details ďŹ lled

Incomplete

Patalganga

TN 09 OG 2334 Tr

nsport

Commerce

EsliKumar Adiandhra

Yavatmal

Pali

LR Operations

Truck dispatched by the loader

LR appears on TMS

Edit

Track

Confirm LR

Record delivery

Shift to invoice

14

POD received by driver

Confirm POD

LR Status LR No: 923468 EWB No: 81650662 Firozabad

18-5-2018 22:27 Patalganga

ALERT: Unconfirmed LR

LR No: 923468 EWB No: 81650662 Firozabad

18-5-2018 22:27 Patalganga

Confirmed LR

LR No: 923468 EWB No: 81650662 Firozabad

18-5-2018 22:27 Patalganga

ALERT: POD Received

LR No: 923468 EWB No: 81650662 Firozabad

18-5-2018 22:27 Patalganga

Ready for invoicing

Invoicing

Select all the LRs to be linked

Drag & drop to make new invoice button

Drag & drop to existing Invoice

Select Customer & Contract for Invoice

Unlinked LRs

LR No: 923468 EWB No: 81650662 Firozabad

LR No: 923468 EWB No: 81650662 Firozabad

LR No: 923468 EWB No: 81650662 Firozabad

18-5-2018 22:27 Patalganga

18-5-2018 22:27 Patalganga

18-5-2018 22:27 Patalganga

LR No: 923468 EWB No: 81650662 Firozabad

LR No: 923468 EWB No: 81650662 Firozabad

LR No: 923468 EWB No: 81650662 Firozabad

Invoices

18-5-2018 22:27

Make New Invoice

Patalganga

18-5-2018 22:27 Patalganga

18-5-2018 22:27 Patalganga

Inv. no: 6512846 Relaince Industries Contract no: 258

Inv. no: 6512846 Relaince Industries Contract no: 258

18-5-2018

Rs. 3.87 Cr

18-5-2018

Rs. 3.87 Cr

15

16 EDITORIAL DESIGN Next few pages will take you through my work in designing graphics and layouts for editorials.

1. Electus Whitepaper 2. Insight Newsletter 18.3 3. GPC India brochure

1.

17

ELECTUS WHITEPAPER Electus was built upon months of hardship from a team of world-class developers. The whitepaper is the medium through which they can reach the world of other developers and investors before the product is ďŹ nished.

It is essential for the whitepaper to be eye-catching for the casual ICO investor as well as the group of developers around the world who would like to contribute to its open-source nature.

Click here to view the full whitepaper.

18 TYPOGRAPHY

1.

DISRUP TING DEMOC RACY

Use of disproportionately large type size & blending modes on numbering to elevate them from just being functional pointers to beautiful motifs that serve aesthetic value too.

3.

getVoteTally

This function helps to read from the poll, how much vote a certain proposal has accrued. /// /// /// ///

@notice gets the vote weight of the proposalId @dev returns the current cumulative vote weight of a proposal @param _proposalId the index of the proposal in the proposals array @return the cumulative vote weight of the specified proposal function getVoteTally(uint _proposalId) external view returns (uint);

Distinctive use of source code typeface for the code as well as the comments meant to be read by developers skimping throught the whitepaper. The color scheme used is similar to the ones used in code editors.

19 IMAGERY Images are used in conjunction with simple shapes with cross-through borders. Giving the people and objects in the whitepaper a more real-to-life feeling than something distant in the papers.

ID ISSUANCE

ANTI-PIRACY IN GAMING

2.

20

INSIGHT NEWSLETTER 18.3 Insight is the student media body of IIT Bombay, that covers various issues plaguing the student life from academics to infrastructure.

This particular issue was designed on letter page format rather than the traditional A3 size, to make it more portable and easier to handle while reading.

Click here to view the full issue.

21 LAYOUT & GRID The layout in use is the standard triple-grid. With images and data visualisations taking 2 to 3 collumns depending upon the context.

22 DATA & GRAPHICS

3.

23

GPC INDIA BROCHURE GPC is the annual meet-up of the creative minds of Publicis Groupe across the globe to judge each other’s work and evaluate progress & upcoming talents. It was Mumbai office’s turn to host it for the year 2017.

The brochure is a fun vistor’s guide around Mumbai city with details of the 4-day event as well as other things they can do around.

It also had a guide to and translation for Indian slangs to be used for the heated debates that advertising meet-ups are known for.

24 DESIGN LANGUGAE The brochure was targetted to a primarily english-speaking crowd who were probably on their ďŹ rst tour to India. So the imagery and graphic style was very Indian, with traditional motifs and contemporary styling.

25 TYPOPGRAPHY FOR MOTIFS Devnagari script was used in conjunction with roman to make the guide look more traditional and Indian, despite the users not knowing the language or script written.

The fonts used for both the scripts have traditional Indian feel with western contemporary style.

26 ILLUSTRATIONS FOR DROP PINS To show speciďŹ c places in Mumbai to visit, shop & eat at, illustrations were used as drop pins at a stylised map of Mumbai.

The motifs complement the typography along with the illustration style.

27 IDENTITY DESIGN The upcoming pages have two of my recent brand identity design works, followed by a montage of logos made for ad campaign ideas.

1. Traansport 2. Electus 3. Logofolio from Advertsing Campaigns

1.

28

TRAANSPORT Traansport’s brand name, though being very apt and catchy, has an unconventional spelling. And being a website, it is important for users to get it right.

Traansport prides itself in making the transporter’s life much easier by fast tracking its operational and commercial pipeline.

The logoform was made in this way to capture the essence of speed and fast-tracking while making the ‘double As’ in the name very prominent which helps in remembering the brand name.

29 LOGOFORM & COLOURS

Fastforward sign tilted at the angle of font’s italicisation to signify speed and fast tracking.

Tr

nsport

Montserrat Extrabold Italic. Extrabold weight used to balance the long name.

Italicisation used to further the case of speed.

App Icon

Favicon

Colours

#4961E1

#4F4F4F

#FFFFFF

30 TYPOGRAPHY & ILLUSTRATIONS Display Font

Mobile App Font

Copy Font

Montserrat Extrabold Italic

Varela Round

Open Sans Italic

Aa Bb 123 !@#

Aa Bb 123 !@#

Aa Bb 123 !@# Open Sans Bold Italic

Icons & Illustrations

Aa Bb 123 !@#

2.

31

ELECTUS Electus is a governance protocol based on ethereum blockchain, that enables membership and voting.

The branding had to be scalable for the complementary dapps based on Electus protocol to feel different yet connected.

32 LOGOFORM & COLOURS Verification of identity of people over the public blockchain by the protocol is what inspired the fingerprint nature of the logo.

Colours

#4CA9FC

ELECTUS EVOLUTION OF GOVERNANCE

<< open framework for governance systems on the blockchain >>

#3D3D3D

#FFFFFF

Entity’s name and the subtitle are sized in order to take the same horizontal space. And their combined height is centered to the logoform.

The description of the product, although not part of the logo, is often used with it and its placement and form is thus standardised.

33 TYPOGRAPHY & ASSOCIATED LOGOS Display Font

Copy Font

Code Font

Montserrat Bold

Lato Regular

Aa Bb 123 !@#

Aa Bb 123 !@#

Source Code Variable

Associated Dapps & Infrastructure

Aa Bb 123 !@#

3.

34

LOGOFOLIO FROM AD CAMPAIGNS The following are a few logos that I made for campaign & product ideas during my stint at advertising at Leo Burnett.

35 HINDUSTAN PETROLEUM OILNET

OilNet is a device made of a special material with density higher than crude oil but lower than that of seawater, so that it ďŹ&#x201A;oats between them.

OilNet is used to seperate the oil form the marine biosphere till it is cleaned up. The logoform is supposed to mimic suction and accumulation. The colours are chosen to look best on a dark background similar to its branding.

36 ACC BIOCONCRETE

BioConcrete is a special kind of cement that helps the growth of vegetation over itself by providing appropriate nutrients, meant to be used in urban settings to promote greenery.

The form is partly geometric and grey and partly organic & green. This is done to show the blend of urbanisation and vegetation, that bio-concrete aims to bring.

37 PILLSBURY HEALTHY TREATS

Healthy Treats are simple variations to the recipes of Pillsbury products to make them healthier for kids who love desserts but not healthy food as much.

The colours and fonts are playful with the form showing the addition of healthy substitutes to traditionally not so healthy desserts.

38 AMAZON SAHELI

Amazon Saheli was a campaign idea for woman only delivery services that can be opted by women to feel safer about a stranger ringing their doorbell.

The form is simple and homely and uses a feminine face adjoined to the â&#x20AC;&#x2DC;Sâ&#x20AC;&#x2122; that itself is bent to look like long luscious hair.

39 MOBITEL BUZZING FENCE

A few Sri Lankan villages have a rampant human vs. elephant border conflict. Studies have shown that elephant’s are really scared of bee sounds. The buzzing fence is a device installed at the perimeter of these villages to fend off the elephants.

The colour of the logo is inspired by the bees and the negative space in the letter ‘G’ is used to make the form of an elephant’s head.

40 GRAPHIC DESIGN & ILLUSTRATIONS The following pages are a montage of my work in graphic design, art direction & illustrations.

1. Presentation Slides 2. Digital Daily 3. Miscellaneous

1.

41

PRESENTATION SLIDES I personally consider presentation design as one of my strengths in graphic designing and art direction.

The following pages contain some of the slides from decks I have designed over the years.

42 BLOCKCHAINED INDIA

43 MONEYBEE PITCH DECK

44 UBER PITCH DECK

2.

45

DIGITAL DAILY I made a sketch everyday resolution for myself for 2017, and by the end of that that year I had more than 365 sketches.

So, for 2018 I made a resolution to make one piece of digital art everyday, including graphic art, illustrations and animated GIFs. The few of the former two are showcased in the following pages.

Although I was not able to keep up the resolution for the whole year, I made 95 digital artworks before quitting. You can check the entire project on www.instagram.com/someshyv

46

47

48

49

3.

MISCELLANEOUS Over the years, I have made a lot of posters, digital paintings and graphic art for various purposes.

The next few pages are a montage of those works.

50

51

52

53

54 ANIMATION & VIDEOS The following pages are a collection of some of my recent works in motion graphics, animation & live-action video. All live-action videos were both shot and edited by me.

1. Vault Product Demo 2. Eurotrip 2017 3. Digital Daily Animations 4. Traditional Marathi Wedding

55

1.

VAULT EXPLAINER VIDEO The animated video was made completely in After Effects without any 3rd party plugins.

Click here or at the thumbnail to watch the video.

56

2.

EUROTRIP 2017 This video was made with clips that were shot on a roadtrip across Western Europe.

The video has elements of stop motion and music aided editing.

Click here or at the thumbnail to watch the video.

57

3.

DIGITAL DAILY ANIMATIONS The Digital Daily 2018 project also had a lot of 2D & 3D animated videos/GIFs. Click on the following images to watch the video, including the one on the left.

58

59

60

4.

WEDDING MUSIC VIDEO The video was shot in Yavatmal, Maharashtra.

All the shots are documented live at scene and not planned beforehand.

Click here or on the thumbnail to watch the video.

THANK YOU SOMESHYV@GMAIL.COM

LINKEDIN.COM/SOMESHYV

INSTAGRAM.COM/SOMESHYV

FACEBOOK.COM/SOMESHYV