sign g d e s h o n - iiitdm jdesign.iiitdmj.ac.in/portfolio/bipratim saha_portfolio_iiitdmj.pdf ·...

41
D E S G N PORTFOLIO APP DESIGN PACKAGING PACKAGING SKETCH SKETCH UI DESIGN USER EXPERIENCE ILLUSTRATIONS ILLUSTRATIONS WEBSITE DESIGN WEBSITE DESIGN USER RESEARCH USER RESEA TYPOGRAPHY TYPOGRAPHY

Upload: dinhlien

Post on 30-Jul-2018

212 views

Category:

Documents


0 download

TRANSCRIPT

DE

S

GN

POR

T FO

L I O

APP D

ESIG

N

PACKAGING

PAC

KAG

ING

SKETCH

SKETCHUI D

ESIG

N

U S E R E X P E R I E NC E

ILLU

STRATIO

NS

I L LU S T R AT I ON

S

WEB

SITE D

ESIGN

WEBSITE DESIGN

USER

RESEA

RC

H

USER RESEARCH

TYPOG

RA

PHY

TYPOGRAPHY

Bipratim SahaU I & V i s u a l D e s i g n e [email protected] +91-94 34 431 960

Study of a system level architec-ture in a complex space taking IIITDMJ campus as a reference model about the navigation process and target of achieving a new information architecture with visualization of interac-tive map exploiting Augmented Reality technology

Achieved 1st position in inter-school quiz competition in 2006-07

Achieved 1st position in painting at state level in 2000-01

Finalist in iINNOVATE Student Design Challenge ‘13 on ’Traffic Congestion Issues’ organized by usabilitymatters.org

Pursuing M.Des (Sem IV) from IIITDMJ, Jabalpur

Interned at 32bytes.net, Kolkata as a visual and UI designer

B.Tech in IT (2007-11) from JIS College of Engineering, WBUT

USER RESEARCH

AUGMENTED REALITY

IDENTITY DESIGN & BRANDING

VISUAL COMMUNICATION

TYPOGRAPHY

USER INTERFACE DESIGN

COUNTER STRIKE

PORTRAIT SKETCH

PHYSICS

ACADEMICS

ACHIEVEMENTS

M.DES THESIS

INFORMALS

INCLINATION

N-Queen is a puzzle and the problem of placing eight chess queens on an n×n chessboard so that no two queens attack each other. A solution requires that no two queens share the same row, column, or diagonal. The eight queens puzzle is an example of the more general n-queens problem of placing n queens on an n×n chessboard, where solutions exist for all natural numbers n with the exception of n=2 and n=3

Project 1

UI Design

Play

87654

Back

Game Info

Launch N-Queen

N-Queen is the extended version of clas-

sical 8-Queen problem wherein you have

to place the 8 queens in such a way that

no one attacks the other.

It was proposed by German mathemati-

cian Gauss C.F

Here you cannot place a queen against

the other along the same row or column

or diagonally. You will be asked to place

different number of queens on a 8*8

chessboard starting with minimum of 4

queens.

Enter the number of queens to place

Screen shot showing Game info and instructions

Option for different level of difficulties starting with mini-mum of 4 queens

1.1

UI Design

Attacking positions of the queens high-lighted to mark error made by the player

Every cell is tapable.Tap any and queens get placed

1.2

UI Design

Player wins the level and can play next level or can go back to home to choose a level of his want

Last level where one has to place 8 queens (highest level of difficulty)

1.3

UI Design

Project 2

It is basically a tourist guide application to help the tour-ists with real-time informa-tion to assist them pre-plan or plan their transport/trav-el activities during the trip, while being on the move. Also it shows the list of points of interest (POIs) according to the users ex-perience like ‘outdoor’ or mountain hiker etc.

UI Design

UI DESIGN

2.1

Get the location of a Point of Interest overlayed on the map

Get a thumbnail list of preloaded guides

Overview of a particular place with places of attraction, shopping places, resturants, hotels, etc on a single page

UI Design

2.2

Get your attraction list to your choice and experience, through smart filters and add a place of visit (if you want to)

Add / Delete places exploiting the feature of Trip Planner

Get shortest distance between places and details of time of visit for each

Get the info of a particular POI with detail about opening and closing hours that helps you to plan your visit

UI Design

2.3

Also the trip planner asks for the entry point to a particular place like railway st., bus stand,airport. The reason for this aspect is to aid the tourists to select a nearest Point of Interest to a particular entry point.

The Smart Trip Planner suggests list of places according to the distance of the POI from the entry point and also con-sidering the opening time of that place

Screenshots showing the walkthrough if a person chooses entry point to the city as Railway Station

UI Design

Project 3

Webpage design for Fronix Tech-nology, which is an electronics company based out of Kolkata & Pune. Its moto is bring com-puting devices (tables) to Indian common mass.

Find product reviews @ http://www.gogi.in/fronix-star-review-ics-tablet.html

UI Design

Project 4

Webpage design for Duroplast, a company based on uPVC window & Door Systems for the first time in eastern India. It is the largest manufactureres of different PVC profilesWorked in a team while interning at 32bytes, Kolkata

http://www.duroplast.org/

UI Design

Project 5

UI Design

A responsive website theme design for a corporate business. A Concept to show how different elements get adaptive to different display environments.

The colour theme used is sky blue and gray and is carried across all the pages of the website. Usage of Icons to illustrate several services and touchpoints of the organization and strategic placement of different elements makes the User Inter-face more comprehensive.

Responsive website theme

UI Design

5.1

Screenshot while the menu is drawn out by tapping on the icon

Screenshot showing Partners’ page for iPad or any other tablet displays

UI Design

Project 6

Website design for KANHA VILLAGE ECO RESORT. The different aspects like sustainability, responsible eco-tourism, ethnic dwelling along with the look and feel of village has been depicted. Also the clean UI helps in better navigation and eventually a good experience

Indian cities have become synonymous with congestion, noise, and air pollution. The continuing urban boom will stress an already-pressured urban infrastructure system, especially around transportation and traffic. Tier 1 cities being the most impacted, more so with the planned rapid transit systems and metro rail projects.

Constraint was that no new construction or infrastructure is expected, no new flyovers, or railway lines, or skywalks, or such built forms which would disrupt the daily lives fur-thermore.

Scenario:

Finalist of UMO Student Design Challenge 2013

The Challenge:

Project 7

System Design

7.1

Solution:A mixed bag of technology and strategies keeping in mind primarily the safety of the pedestrians

Traffic signals will be connected to the signages before and after it, on the road, to give information to the com-muters about the status of the congestion/traffic ahead of them.

The Ambulance and the traffic signals will be con-nected through an auditary channel (unique & high frequency) i.e. the traffic signal will have a receiver and it will catch the frequencies of the emergency vehicles and will alert the traffic around it via replicating the siren through the speakers on the signal & light signals sideways.

System Design

Concept of implementing a virtual wall projection to help pedestrians cross roads safely

Encouraging & guiding the pedestrians to use subways more through proper signage system and facelifting of the space. Also this will leave space for bicy-cles on the road.

The road side informal activities by the hawk-ers, footpath sellers etc. can be shifted to the subways through proper law enforcement strategies.

Solution:

7.2

System Design

Rationalizing Typography:Learning by doing

Sunil, the guy in charge of the photocopier shop, having a tough time calculating how much money the customers owe him while making multiple copies of a document, as cost per copy is 0.75 paise.

So, why not help him provide with a calculator? Thing is calculating in mind is faster and to add on to that his hands are busy counting the photocopies.

Scenario:

Project 8

Information Design

A price chart is de-signed. First of all, the overall matrix has been chunked into groups. Bright, unique colors has been imparted to each group to give a different identity. A call-out of range of number of pages is given to reduce the search time across all groups.A darker shade has been applied to the midline to further reduce seek time.

Help Sunil retain his job!Readable and legible

TypefaceA Solution to

calculate on the fly

Sunil is Semi-literate

Poor in calculating fast

Capable of recognizing numbers

Has to count copies with his both hands

Objective:

Data Extracted:

Deliverables:

CONSIDERATIONS

ABC Photocopier - Price Chart

8.1

Information Design

Project Background

The child health record serves at least five functions in the health system:

1. A unique identifier that is intimately connected to the child

2. A source of critical information for health workers about the child’s health and vaccination status, and what the child needs at each point of contact with the health system

3. A source of critical information for families, such as date of next visit for vaccination

4. A source of critical information for household surveys, which many countries and policy-makers rely on to validate the vaccine coverage levels obtained from administrative data systems

5. An educational tool for families to learn more about health interventions

RECORDS FOR LIFE

Project 9

Information Design

There is no place on the record to indicate date of next vaccina-tion, so health worker may write it in the ‘date of vaccination’ column, so that health workers later on might think the child actually had the vaccine.

If cooking oil, wa-ter, mud or any-thing else spills on the cardboard record, then it is no longer legible and the informa-tion on it is lost

Important issues like scalability, comprehensiveness, way of translating the record to computer are considered with prop-er brainstorming

The text on the health record is incomprehensible to the illiterate mother; the imag-es depict various activities such as breastfeeding but do not help the mother re-member duration, benefits, and other key facts

Health worker grabs a new child health record to fill in re-cent BCG, HBV and Polio vac-cinations of a newborn, uses public health information on the record to illustrate to the mother how to care for her baby during the first 48 hours of life, and confirms with mother the next date of vaccination.

S C E N A R I O S

B a c k g r o u n d S t u d y

9.1

Information Design

9.2

Use of bar code to give unique identi-fication code to each child along with their parents Also plastic coating will help it from not getting inked/ tam-pered

Child Health Card

Prototype

Concept of time-line and chunking according to dosage period. Star shapes to give parents a feel of achievement

OMR concept added to easily transfer data into computer

Use of icons as per vaccines with color coding

Information Design

What the packet contains, is not understood from a distance

Proper illustration is missing about the product’s function

The various visual elements are not properly alligned

Grouping of icons by similar activites is required.

Link between Composition & Content is missing and chances of misreading is high.

The logo should ideally be rotated by 180° anticlockwise

Based on the observations and feedback of the users, information is to chunked & positioned according to its importance, relevance and conveying a message.

Considering results from above approach redesign / improvement can be initiated.

Analysis started considering the product journey from where it ispacked, stacked, displayed, its usage, storage and disposal,asking relevant user and also introducing the same packet to person who never used to have a brief about their perception of the product,Understanding information to be conveyed by the design and what it is currently conveying.

Issues:

Study of Insecticide Packet from Visual Ergonomic Perspective

Project 10

Packaging Design

Background Study:

Product ChannelVisual Ergonomics Considerations

Parameters considered for layout, icons, symbols

10.1

Packaging Design

FINAL OUTPUT

At the back of the packet, linking of composition and contents was done

Use of warm colors so as to make it visible during different ambient illuminations

The logo is at the top of the front is rotated 180 degree anticlockwise to help shopkeepers easily identify when stacked in racks

Similar icons depicting which things to wear were grouped

10.2

Basic layoutPhotoshop rendered

Packaging Design

Project 11

The tablets i.e, Star, Nova, Aurora II was live in the market

Packaging Design for Star, a Fronix Technology product

It is an electronics company based out of Kolkata & Pune. Its moto is bring computing devices (tables) to the Indian common mass.

The packaging graphic was made for different products like Aurora II, Nova

Packaging Design

Project 12

‘Raleway’ typeface is used across the brochure

Cov

er P

age

Brochure design for the placement of IIITDM Jabalpur

Softwares used are Photoshop and Indesign CS6

Print Media

Placement Brochure Design

12.1

The continuing contents across two pages is shown interlinked with rectangular patches with alternate colors

A particular theme was followed keeping a color for the left page and the right one, black through out

A visualization of different recruiters who have visited the campus

Print Media

Project 13

Brochure Design for MiniDEW Workshop, 2013 held on IIITDM Jabalpur

The workshop was on sustainability and nature inspired design.The elements and colours were used according to the theme

Print Media

Project 14

3-fold brochure design for Micamafco.

MICA MANUFACTURING COMPANY was founded in 1885 for the purpose of Mining & Processing of Mica & Mica Products.

It was designed during internship at 32bytes with a team of 2 members

Print Media

Project 15

Invitation card design for Temple Inauguration at Purti Flowers

It was designed while interning at 32bytes, Kolkata

Print Media

Project 16

Floor plans rendered for Sri Ganges, a real-estate firm using Photoshop and Illustrator

Project done during internship at 32bytes, Kolkata

GROUND FLOOR PLAN

TYPICAL FLOOR PLAN

Print Media

Project 13Project 17

Logo Design

Project 18

These projects were done during TYPODAY, 2013 at IIT Guwahati on Expressive Typography

Expressive Typography

Final Output after exporting as .otf or .ttf

Mapping corresponding letter into font creating software

Exporting each character as SVG file formatDesigning type on paper & tracing on AI

Practising Signature to bring out character

Start of journey-Practising calligraphic strokes

Project 19

Typeface Design

19.1

Typeface Design

Project 20

ILLUSTRATIONS

20.1

ILLUSTRATIONS

Team: Bipratim Saha, Aman Bhadauria, Piu Sarkar, Prasad R. Padase & Rohit Sight

We would like to thank to Dr. Jayesh Pillai for consistent guidance through out the making of the video.

The claymation animation was done with the purpose of a promotional video for the Student Design Challenge, a part of the In-ternational Conference MiniDew 2013. The workshop’s theme was on Sustainable de-sign and Nature Inspired Design. Examine how waste disposal is carried out in nature and apply these lessons to a waste disposal problem in your locality. The solution must consist of a technology, product, service, or process and should emulate a natural proc-ess, pattern or system.

Project 21

Objective:

Watch it out onhttps://www.youtube.comwatch?v=EcUFkcSc1aI

Clay Animation

+91-9434 431 960

[email protected]

Bipratim Saha

for your time and consideration

Thank You