Post on 30-May-2018
8/14/2019 Prathap Raj .S Portfolio
http://slidepdf.com/reader/full/prathap-raj-s-portfolio 1/27
Visual communication and DesignBFA - College of Fine Arts
User Interface DesignPGDPD - National Institute of Design
Mobile :09381812461eMail :spratap_raj9@yahoo.com
prathap_r@nid.edunenidian@gmail.com
Design Portfolio
User I n t e r f a c
e D e s
i g n
V i s u a l C o m m
u n i c a
t i o n
a n
d D
e s
i g n U
I . U X
D e s i g n
I n n o
v a t i o n
D e s i g n
S t r
a t e g y
U s a
b i l i t y
P r o d u c t I d e
a s
I n t e r a c t i o
n D
e s i g n
U s e r E
x p
e r i e
n c e
My View:
“When you take technology and mix it with art, youalways come up with something innovative.”
E r g o n o m i c s
P h o t o g r a p
h y
P a i n t i n g s A n i m a t i o n
S.Prathap RajConsider the Users
P r o d u c t d e v e l o p m e n t
U C D
8/14/2019 Prathap Raj .S Portfolio
http://slidepdf.com/reader/full/prathap-raj-s-portfolio 2/27
User Interface DesignDiploma Project at IITM( Indian Institute of Technology)
1.Gathering Information
-Requirement study -Understanding user and tasks-Understanding user environ-
ment
2.Analysis-Task analysis-Dene use cases-Dene task scenario-Develop story board
3.Conceptual DesignLow delity prototypes-Dene views and operations
based on usage patterns, type of object and view content-Alternate for organization of functionality and navigationparadigms
4.Detailed designHigh delity prototype-Prototype for screen design Interac-tion components and help system-Visual design of graphical screens and
views-UI specication documents and inter-active demos using Flash or HTML forcommunicating design details
5.Develop-Develop visual resources like icon,splash screens, installation graphicetc.-followed standard develop for:-Desktop application-Web based user interface
-Accessibility compliance
6.Usability Testing-Real Users
-Real Scenarios
Feedback & Iteration
Elangadu
Kancheepuram
Cuddalore
BasicLayer
OverLayer
District
Village
Resources
QueryMap
Upload
Search
DistanceTools NavigateMeasureLine MeasurePolygonMeasureCircle
SignOutIn ProgressHelpHi,Vysakhi
SearchthisPlace
Thiruvallur
Agaram
MapSatelliteHybrid
Doyouwantknow
Whatishappeningnow?Clickhere whatisNew?
Fireservice
Hospital
Watershed
PoliceStation Airpor t
Petrolbunk
Church
Design Methodology
ResponsibilitiesUsability study of existing assetsFlows and Navigation MapsUser Scenarios
PersonaSite Maps and Content analysis
WireframesPrototypes
Written specicationsGraphic mockupsInformation architecture,
Visual designs,Usability testing
About the Project:
This GIS project is done under the guid-ance of the leading
Prof.Ashok Jhunjhunwala,Electrical Engineering Dept, IIT Madras
The goal is be to suggest methods and tech-nologies for enhancement of local capaci-ties for eventual micro watershed manage-ment and planning.
At IITM had given me the responsibility toredesign the whole Product of UI with userfriendly - web based GIS application
I had redesign the whole product with userfriendly, and proposed different way of data visualization .The important of this success of this UIdesign which can be interact by all stageof age groups. This product basically for
watershed management people who haveminimum education level.
An existing UI Design
8/14/2019 Prathap Raj .S Portfolio
http://slidepdf.com/reader/full/prathap-raj-s-portfolio 3/27
ElangaduKancheepuram
Cuddalore
Basic Layer
Over Layer
District
Village
Resources
Query Map
Upload
Search
Distance Tools Navigate Measure Line Measure Polygon Measure Circle
Sign Out In Progress HelpHi,Vysakhi
Search this Place
Thiruvallur
Agaram
Map Satellite Hybrid
Do you want know
What is happening now?
Click here what is New?
Elangadu
Kancheepuram
Cuddalore
Basic Layer
Over Layer
District
Village
Resources
Query Map
Upload
Search
Distance Tools Navigate Measure Line Measure Polygon Measure Circle
Sign Out In Progress HelpHi,Vysakhi
Search this Place
Thiruvallur
Agaram
Map Satellite Hybrid
Do you want know
What is happening now?
Click here what is New?
Elangadu
Kancheepuram
Cuddalore
Basic Layer
Over Layer
District
Village
Resources
Query Map
Upload
Search
Distance Tools Navigate Measure Line Measure Polygon Measure Circle
Sign Out In Progress HelpHi,Vysakhi
Search this Place
Thiruvallur
Agaram
Map Satellite Hybrid
Do you want know
What is happening now?
Click here what is New?
Fireservice
Hospital
Watershed
PoliceStation Airport
Petrolbunk
Church
Elangadu
Kancheepuram
Cuddalore
Basic Layer
Over Layer
District
Village
Resources
Query Map
Upload
Search
Distance Tools Navigate Measure Line Measure Polygon Measure Circle
Sign Out In Progress HelpHi,Vysakhi
Search this Place
Thiruvallur
Agaram
Map Satellite Hybrid
Do you want know
What is happening now?
Click here what is New?
Spatial data Non-Spatial data
Search Go ViewFullscreen
Close xWatershed
Watershed
Home page UI Design Map Navigation UI Design
Menu interaction Design Spatial & Non Spatial dat a navigation
8/14/2019 Prathap Raj .S Portfolio
http://slidepdf.com/reader/full/prathap-raj-s-portfolio 4/27
Elangadu
Kancheepuram
Cuddalore
Thiruvallur
Agaram
Fire service
Hospital
Watershed
Police Station Airport
Petrol bunk
Church
Usability Testing followed by Web usability principles
An Existing of data visualization design, which is very complicated to user to nish their task...
An analysis of an other products of data visualization, stilluser not feel user friendly ,so I triggered my brain to bring very user friendly UI design which can be use by all agegroups
at IITM I had been proposed a different way of interaction design mappingthe information ,its very easy to control ,and nish their task,
8/14/2019 Prathap Raj .S Portfolio
http://slidepdf.com/reader/full/prathap-raj-s-portfolio 5/27
4 Km
Spencer Plaza
You Here !
Thousand Light
1 Km
Anand Theater Find:Car parking
Petrol bunk -4 Km
Hospital
Bank
Hotel
School
4Km
S pencer P laza
You Here !
T housa nd L ight
1 Km
Anand T hea ter F ind:
Ca r parking
Petro lbunk
Hospi tal
Bank
Hotel
Sc hool
Set voice Guide
Show the Route
User Interface Design
About the Project:The project involves to proposed a new
way of User interface , interaction designon Road Map application on Mobile plat-form.
Design Methodology:Research, Brain storming, Creative De-
sign Proposed, Paper prototype, Usability Testing, UI Design development, Usabili-ty Testing, Technology Feasibility, Imple-mentation.
Classroom Project
Responsibilities:Interaction , New way of Interactive De-sign proposed, Story telling for product,Graphics, Icons.
4Km
SpencerPlaza
YouHere!
ThousandLight
1Km
AnandTheater Find:
Carparking
Petrolbunk-4Km
Hospital
Bank
Hotel
School
SetvoiceGuide
ShowtheRoute
Story Telling
Scenario & Personas
I feel very comfortable to find the place. i could easilyinteract with this map and
finding the place where wewant to go , its awesome...
Normal data visualization UIProposed data visualizationUI
Trafc place at Chennai India
8/14/2019 Prathap Raj .S Portfolio
http://slidepdf.com/reader/full/prathap-raj-s-portfolio 6/27
Instructional Designe-Learning Module
About the Project:This was an instructional design project.Robert Gagnes principles are used in de-signing its content and the presentation.The design was to provide interest to chil-dren to nd information about the climate,food, people, culture of India. The contentand visualization was researched from
various story telling books and the topic was “Narrative style of data visualization”
The Dick and Carey Systems ApproachModel[20] . The model was originally pub-lished in 1978 by Walter Dick and Lou Car-
ey in their book entitled The SystematicDesign of Instruction.
Classroom Project
Responsibilities: As a UI designer, had the responsibility of User interface design, Logo design, infor-mation architecture ,Icon Design, 2D Ani-mation, content development and imple-mentation.
Sign up page
Home Page
8/14/2019 Prathap Raj .S Portfolio
http://slidepdf.com/reader/full/prathap-raj-s-portfolio 7/27
LogOutSearchFriendHome welcome raj
A
d
v
er
t
is
e
me
n
t
Goo
g
l
e
Design
User Experience DesignWeb based UI application
Hi !I need career guidance,I need to interact with others schools teachers& studentsI need Economic HelpI need to know what ishappening in the Global
I want to know about Internet
What is the way ?
Statement of PurposeUser-centered design project involves
bringing new application design ideas andsimplifying the structure of tasks, makingthings visible, getting the mapping right,exploiting the powers of constraint, de-signing for error and designing for users.
Design Methodology Research, Brain storming, contextual
enquiry, information architecture, wireframe, prototype, usability testing, Designimplementation
Classroom Project
Responsibilities: Visual designInterface designNavigation designInformation designInteraction designInformation architectureFunctional specicationContent requirementsUser needsSite objectiveConcept visualization.Personas
DevelopmentWireframePlanning, IA analysis
8/14/2019 Prathap Raj .S Portfolio
http://slidepdf.com/reader/full/prathap-raj-s-portfolio 8/27
Introducing New Design ServiceOn i-phone mobile New Design of Contacts Ui Interaction Design
10.10 AM
BestFriends Relations Colleagues Professional
All ContactsAshik
Abhinaya
Chevlosan
Deepak
Elan
Fobia
Fiksama
Heman
Imekabu
James
George
Imairaj
Jack
10.10 AM
BestFriends Relations Colleagues Professional
Best Friends List
Ashik
Fobia
Heman
George
10.10 AM
Details
Edit
Name :Fobia
:93818
:Web developeratxxxx
:162 sunshine apartment,
Bangalore
Birthday :18/06/1984
EmailID :fobia@gmail.com
Otherevents :
BestFriends Relations Colleagues Professional
10.10 AM
Best Friend details Cancel
B es t Fr i ends R ela ti ons Colleagues Professional
Personas:
My name John 34 years old. I have been doing business.
I have more than 400 Contacts on my mobile,
when I wanted to call my friends or relations ,I am reading the names
and i recall the relationship, some times many of my friends and rela-
tions also have a same name, by mistakenly i called up them and i get
irritating while searching the person to whom i want to talk urgently, i
always search the name and select the person and then i view the details,
then I call them. I feel its wasting my time and putting me in tension.
Design solution:
This way of saving Contact is awesome, I can immediately call, to
whom I like to speak. Its very easy to search, and know about the details
of the specic person..
Statement of PurposeThe project aim to nd and propose anew design service on any mobile phone,I have chosen i- Phone and narrow downto the contacts Category ,Through the design methodology I havefound a easy way to save the contacts andsearch the contacts
Classroom Project
8/14/2019 Prathap Raj .S Portfolio
http://slidepdf.com/reader/full/prathap-raj-s-portfolio 9/27
BombSquaddiuse the RDXbomb
information has
sentto police
Public
BombSquad
bombsquaddressedup.andnearing to diuse the bomb
Our Duty
Bullet-Proof
helmet
Manipulator
Carbon blanketinside breast
pouchCarbon ber
jacket
Groinprotection
plate
Carbon ber
trouser
Rubber
boots
Carbon Kevlerprotection plate
(bulletproof)
Wool&cotton
pillowforshock
resistance
Police
Terroristsend threaten mailto police
itsalways ourduty to save people
information aboutsuspected person
can save lotsof people life.
HOSPITAL
RELIGIONPLACEDEADLY MATERIAL
PEOPLE
Transporation
TERRORIST
TERROIRST FOCUS
ammonium nitrate/copper/diodesIndia
6
9 38
210
5
RDXBomb
terroristalways focuson
hospital,hotelsand markets.
mostof the bombblast
happenedin religion place
Terroristwere placedbomb where
people crowdedarea.
terroristalways use these material
to make bomb,so beaware when
any one buy them.
terroristalways keepthe bomb
in the transport.in which public
usedto traveleveryday life.
Tin box
Pressure Cooker
DustbinAbadoned Bag
in Delhi. totaly 40 people killed
in bombblast.died,the time bomb
were placedinside of the dustbin.
an abandon bag isplacedin the Busstop.which
contain RDXbomb.bombsquaddiusedthe bomb
the suitcase hasbeen keptin Hospital.which
contain time bomb.bombsquaddiused
the bombsuccessfuly.
Busstop
Suitcase
Cooker
Dustbin
6
9 3
RDX
8
210
5
ABANDONTHINGS
PolicePublic
be aware of abandoned things.
those may contain deadly material
so its ourduty to inform police
very dangerousbomb-RDX
Hospital
Info-graphic Visualization Design
Classroom Project
Responsibilities Analysis existing newspaper info-graph-ics, Concept visualization, Designing lay -out conversion, Content management,Graphics , Color signicance, Story telling
User Needs
Info-Graphics Visualization
Story Telling & Scenario
Design Methodology Research, Brain storming, contextualenquiry, information architecture, wireframe, prototype, usability testing, Designimplementation
Statement of PurposeThe project is focused on to redesign the
information graphics on newspaper.Since the day there are so many newspa-per play with visuals and graphic to con-
vey the information but still there is lack of info-graphic visualization in newspaperspecially if it meant to children.It was an attempt to redesign the existinginfo-graphic as in very easy to understand
by children. Indeed i have narrow downto chosen the topic, which is bomb blastawareness for children and made theHundred of Info-Graphics and taken into
user testing. The success was all the infographic are effectively communicating theinformation to my users.
8/14/2019 Prathap Raj .S Portfolio
http://slidepdf.com/reader/full/prathap-raj-s-portfolio 10/27
Competition Books
Be Aware
EntertainmentCareer supportSports History
Student’s Newspaper AHMEDABAD FRIDAY, AUGUST 23,2008
Achievement
Pages Price RS 2Today Thoughtsyou have to dream before your dreams can
come true
-Abdul kalam
Ofelectric
current,
Anelec
tromagnet in which
magnetismis producedby
anElectric current.
Indianstudent sbag 2ndprizein
NASA’SCompetition.
submit your creativedrawingfor
childrensdaybefore 15.
Steven Paul Jobs (born February 24, 1955) is the co-founder, Chairman, and
CEO of Apple Inc and former CEO of Pixar Animation Studios.
In the late '70s, Jobs, with Apple co-founder Steve Wozniak, made the easy
and affordable (compared to other computers of the time) personal computer
become reality, years before the advent of IBM PC. In the early '80s, still at
Apple, Jobs was among the rst to see the commercial potential of the
mouse-driven GUI (Graphical User Interface).[7] After losing a power strug
gle with the board of directors in 1985, Jobs resigned from Apple and found
ed NeXT, a computer platform development company specializing in the
higher education and business markets. NeXT's subsequent 1997 buyout by Apple Inc. brought Jobs back to the
company he co-founded, and he has served as its
CEO since then. Steve Jobs was listed as Fortune Magazine's Most Powerful Businessman of 2007.[8]
Be Aware of bomb blast in Ahmedabad ,
The2008Summer
OlympicGames,
ofciallyknown as
theGamesofthe
XXIXOlympiad, is
amajor international
multi-sport event
whichis beingheldin Beijing,
People'sRepublicof China, from
August 8(except football, which
startedonAugust 6) to August 24,
2008. Atotal of10,500athletes
areexpectedtocompetein 302
eventsin 28sports, oneevent more
thanwasonthescheduleofthe
2004games.[2]The 2008Beijing
Olympicswill alsomark thethird
timethat Olympicevents will
Stop
Worry-
Areyou confused
tochooseyour
career. hereis
the best eld
youcanget
into.
Design, MBA
Computer Engineering,B.com ,
Electronicsengineering, Visual
communication.
someof thebest collegein india
toset upand start your career
.thoseare National instituteof
design, IndianInstituteof Manage-
Today’s
challenge
Coming
Soon
Showtiming:11,
3 ,6 , 9
Theaters:
Citypulse
Rajshri
Best bookfor student tolearn
about computer basic
Competition
S t u d e n t ’ s
T o d a y
S t e v
e n P a u l
J o b s ( b o r n
F e b r u a r
y 2 4 , 1 9
5 5 )
i s t h e c
o - f o u n d
e r , C h a i r m a
n , a n d C
E O o f A
p p l e I n
c a n d f o
r m e r
C E O
o f P i x a r A
n i m a t i o n
S t u d i o
s . I n t h e l a t e'
7 0 s , J o b
s , w i t h
A p p l e
c o - f o u n
d e r S t e v
e W o z n i a k ,
m a d e t h e e
a s y
a n d a f f o
r d a b l e ( c o m
p a r e d t o
o t h e r
c o m p u t
e r s o f t h e t i
m e ) p e r s o n a
l c o m p
u t e r
b e c o m
e r e a l i t y , y e
a r s b e f o r e
t h e a d v e n t o
f
I B M
P C . I n t h e e
a r l y' 8 0 s , s
t i l l a t A
p p l e , J o
b s w a s a m o
n g t h e f r s t
t o
s e e t
h e c o m m
e r c i a l
p o t e n t i a l o f
t h e
B e
T h e 2 0 0
8
S u m - m e
r
A r e
y o u
c o n -
Interaction DesignPrint Media -Newspaper
About the ProjectIt was the course on interaction design.the objective of the course is to comeup with high interaction design in any medium .as my insight is to bring goodinteraction design where human beinggets struck and bored of monotony of theproduct . which is newspaper graphicsand visual,The project is focused on, how can designa print media very effectively interact withpeople. It was an design project to designa newspaper for school student and makethem to engage and interact with full en-
thusiasm by that way they learn and readthe newspaper. This interaction designproduct design will make children very active and act smart, during the project ihad done Hundred info- graphic Visual-ization.
Classroom Project
ResponsibilitiesConcept visualization, Designing layoutconversion, Content Management, Graph-ics , Prototypes (For interactive or in-the-mind simulation), Graphic mockups (Pre-
cise visual of the expected end result)
Story Telling & Scenario
8/14/2019 Prathap Raj .S Portfolio
http://slidepdf.com/reader/full/prathap-raj-s-portfolio 11/27
User Centered Design
Classroom Project
Design
Approach
Design
Innovation
EconomicDesign
Strategy
User
Desire
Statement of PurposeOld age, being a phase of everyone’s lives
should not be ignored. Its accompanied with physical ailments that make us inneed for additional stability. Effectively, a
walking stick can be used by elderly peopleof sixty ve years and/or above. Serving,society for a noble cause and restructuringthe basic concept of an ordinary walkingstick will gain stronger support for pro-ceeding with the research. Instead of beingan ordinary walking stick, it would havefew frequently used accessories integrated
with it which are vital to daily usage of anold person.Re-designing the stick would considerphysical structure, technology, extent of use and followed-up with a prototype. In-
volving continuous user research and feed - back is core towards an effectively commu -nicated message for the end user.
Brainstorm
User
Communication
User Feedback
Old aged
Physically
challengedInjured
ConceptualFrame work
Raw
material
supplier
Product
Refnement
with product concern
contextual based
logically supported
raw materials needed
r u g g e d & d u r a b l e
innovative & practical maintain easily
use easily
produce easily
demanded spec comparison
feld visits
build prototype
dimension substance
Contextual level diagram
8/14/2019 Prathap Raj .S Portfolio
http://slidepdf.com/reader/full/prathap-raj-s-portfolio 12/27
User Desirability
ResponsibilitiesContextual study Design planningUser Scenarios
PersonaProduct analysisPrototypesTechnology feasibility Usability testing
User Centered Design
Proposed Product design
8/14/2019 Prathap Raj .S Portfolio
http://slidepdf.com/reader/full/prathap-raj-s-portfolio 13/27
Graphic Design
Logo Designs, Brochure designs, Letter pad design, Magazine layout, Windows display
8/14/2019 Prathap Raj .S Portfolio
http://slidepdf.com/reader/full/prathap-raj-s-portfolio 14/27
Illustration
Visual Communication Design
8/14/2019 Prathap Raj .S Portfolio
http://slidepdf.com/reader/full/prathap-raj-s-portfolio 15/27
ahoo OKIA
Visual Communication Design
8/14/2019 Prathap Raj .S Portfolio
http://slidepdf.com/reader/full/prathap-raj-s-portfolio 16/27
Visual Communication Design
I always think to create some thing creative so why not to redesign the Web page of an iPhone online products display, I want to design a web page visual DesignThe visuals should be more interactive ,Interesting, artistically settled. its an attempt to design a display of online products of Apple iPhone products, the aimof this visual communication design is to make user to engage and interact with online products .
The perfect style
8/14/2019 Prathap Raj .S Portfolio
http://slidepdf.com/reader/full/prathap-raj-s-portfolio 17/27
Desktop Design
8/14/2019 Prathap Raj .S Portfolio
http://slidepdf.com/reader/full/prathap-raj-s-portfolio 18/27
Advanced Form & DesignUsability
The project aim was to Redesignedthe form of the answering machine, which was chosen from old martand attempted to redesign the form with out removing the component.The project aim is to redesign theproduct Display with user friendly UI and Ergonomically settled de-sign
This project involves to propose new product idea and design the wholeproduct display panel, mainly con-sidered about human interaction with product
This project aimed to develop rapidprototype design ,so the given task was to design a vehicle with differentform and shapes,
This project aim was to propose aproduct idea and the whole projectinvolved design methodology ,rapidprototyping.
8/14/2019 Prathap Raj .S Portfolio
http://slidepdf.com/reader/full/prathap-raj-s-portfolio 19/27
Product Design :
Aesthetic Interface design
8/14/2019 Prathap Raj .S Portfolio
http://slidepdf.com/reader/full/prathap-raj-s-portfolio 20/27
Paintings
Title: A girlMedium: Water colour
Title: CultureMedium: Collage
Title: FestivalMedium: water colour
8/14/2019 Prathap Raj .S Portfolio
http://slidepdf.com/reader/full/prathap-raj-s-portfolio 21/27
Color & Form Design
8/14/2019 Prathap Raj .S Portfolio
http://slidepdf.com/reader/full/prathap-raj-s-portfolio 22/27
Photography
8/14/2019 Prathap Raj .S Portfolio
http://slidepdf.com/reader/full/prathap-raj-s-portfolio 23/27
Creativity Design
8/14/2019 Prathap Raj .S Portfolio
http://slidepdf.com/reader/full/prathap-raj-s-portfolio 24/27
Awards
Title: My Duty
Painting : National Jury Award,
Gold Medal, India
District level II nd place.
Title: Tomorrow
Photography: II nd prize,
Ashvita art gallery competition
Title : Varanasi
Photography: I prize in inter college
competition
8/14/2019 Prathap Raj .S Portfolio
http://slidepdf.com/reader/full/prathap-raj-s-portfolio 25/27
About Me
Extra Activities: Member in Trust which is helping to school studentsREAD Rural Education Anew Delegation
Sports: National level Hockey Player
Hobbies: Reading Books, Playing Chess, Swimming
I still remember! From my childhood itself , I was thinking about the prod- ucts, designs and who is bringing the ideas.
I started drawing from childhood, I had been in dream to become designer and I wanted to graduate in design
G o v t
c o l l ege o f f n e A r t s
I wanted to become a designer ,so I had cho- sen to study about vi- sual communication design, I joined at Govt
College of Fine Arts.
I graduated in Visual com- munication design , still want to learn more about design.so I want to join at NID. yes NID is tough to get through.I will try..I want to become a designer.
I Post graduate in Software & User Interface design
Now I am looking for a place where I can share my creative design mind to change the World,Challenging design jobs Teams works...
8/14/2019 Prathap Raj .S Portfolio
http://slidepdf.com/reader/full/prathap-raj-s-portfolio 26/27
Prathapraj.S
Software & User Interface DesignNational Institute of DesignPaldi, Ahemdabad, INDIA.
Mobile :09381812461eMail :spratap_raj9@yahoo.com
prathap_r@nid.edunenidian@gmail.com
Contact
T H A N K U