KRIA Semester Documentation
Pranava Tandra
2/KRIA/Pranava Tandra
3 Acknowledgement 7 Typography 23 Digital Imaging and Photography 35 Design Methods 48 Creative arts courses 54 Fortia - Project II 68 IITH News App 72 Conclusion Dear reader, KRIA is a humble attempt to comprehensively log all my design thoughts and conceptualised ideas through my semester II of M.Des at IIT Hyderabad. I appreciate your curiosity to go through KRIA. Regards,
Pranava Tandra/KRIA/3
This document would not have been possible without the guidance and the help of several individuals who in one way or another contributed and extended their valuable assistance in the preparation and completion of my courses and projects.
First and foremost, my utmost appreciations to Dr. Deepak John Mathew, HOD and Mr. Neel, Associate Professor, Department of Design who gave ample guidance with the semester courses. I would like to extend great amount of gratitude to Mr. Nevin John and Mr. Santhosh Kshirsagar who took special interest in teaching typography. I would like to thank Dr.Prasad Onkar who gave me an opportunity to do the ‘Fortia’ project and would like to thank him for his professional guidance and valuable support.
I’m also thankful to selected classmates and friends for their help in building ideas. I would like to express also my
Epilogue: “Rumination”/Self portrait - Digital Imaging & Photography
special thanks of gratitude to my family who supported me morally and financially.
Pranava Tandra UX Designer
Action Drawing
Digital imaging & Photography Techniques
The course was a departmental elective which encouraged students to draw paint different patterns through the rhythemic
Typography/Calligraphy
movemts of hands and legs. More
The Typography courses
like, an unconventional of painting.
conducted duly by two different faculties were different by techniques but similar by approach.The first workshop had
The course was carefully defined
class was more about how
to help students understand the
perception of a subject can be
various aspects of lighting, com-
increased visually by adding
positions, rule of thirds, golden
elements that are commonly not
ratios, vantage points, vantage
possible on the camera.
lines; primarily visual perception by the use of these basics.
more emphasis on expressive typography and the second on the nuances of Devanagiri script.
SUMMARY www.be.net/pranavatandra
The digital imaging techniques
Creative Arts Courses IIT Hyderabad News App • Understanding Hyderabad Design Methods
The design methods class dealt with undersyandong the core of
and its Heritage • Singing Kabir with Sri Prahlad
After the print publishing of
Tipaniya
the Equinox magazine (monthly
people’s problems and several
The creative courses gave me
ways that a problem cab ne
an oppurtunity to destress and
solved. The design process that
breathe. It was exhilarating to be
was inclsuive of the orimary
a part of these courses as each of
and secondary research paved
them were distinct and energising.
in for an- effective module of
More about it on page 18>>
understanding and solving user centric issues.
(ongoing)
periodical), It took me a couple of months to conceptualise the IIT Hyderabad News Magazine. The UI is minimal and the news application is set to be launched in the beta version after which the User Experience will be tested and the further versions are set to be launched.
Pranava Tandra/KRIA/5
www.be.net/pranavatandra
Pranava Tandra/KRIA/7
TYPOGRAPHY
Guides Nevin John & Santhosh Kshirsagar Brief • To design and develop a geometric typeface using the grid in the graph paper. • Designing the convocation invite. • Expressive Typography. • Redesigning the cover of the book ‘The agony and the ecstasy’ Software Hand skills, Illustrator, Photoshop Date February & March 2016
Designing a typeface can certainly be tricky, but it doesn’t have to be a totally mind numbing experience. Thinking geometric, working with a grid and developing some simple rules helped me create a nice looking typeface. The experience is always insightful, and offers many opportunities to grow as a graphic designer. Geometric typefaces are mostly used as headings or forexhibition set ups. This is further a mockup of how the annual convocation invite would look like. (just in case).
www.be.net/pranavatandra
Pranava Tandra/KRIA/9
‘Convocation Invite’ Size: 5.8 x 8.3 in
www.be.net/pranavatandra
Pranava Tandra/KRIA/11
Typeface: Sqaure Cuts Download link: http://fontstruct.com/fontstructions/show/1245219/square-cuts
By looking at the mockups, you should get a good idea of how the final product will look and a rough idea of how it might function. Mock-ups can be considered a high-profile visual design draft.
Expressive typography is an art form where text is highly visual; actually, type becomes an image there. Letters are not just abstract notions, carriers of meaning; they are also real, physical shapes. Paying attention to those shapes, and using them as a visual element in graphic design, is an essential part of the art of typography. There is no single style associated with this approach to type; it’s a matter of seeing the graphic elements on the page, and arranging them in a way that seems logical and natural for your purpose. It is a designer’s job to determine the best way to communicate a certain message. Physically manipulating type is one of the easiest and most obvious ways of adding expression.
www.be.net/pranavatandra
Pranava Tandra/KRIA/13
Book cover redesign Size: 10.5 X 14.3 cm
Though the cover we all grew up with is undeniably great, it’s great to attempt and raised the conceptual bar once in a while. Here is an attempt to redesign the famous book ‘The agony and the Ecstasy’ by Irving Stone which is a biography of Michaelangelo. I’ve attempted to use elements of expressive typography for the title.
www.be.net/pranavatandra
Pranava Tandra/KRIA/15
www.be.net/pranavatandra
Pranava Tandra/KRIA/17
Calligraphy This part of Typography course aimed at understanding the nuances of Devanagiri script through calligraphy. Letters are used for communication and documentation. Calligraphy means the art of beautiful Handwriting. Letter has an aesthetic functional Value and Expression. Handwritings can be classified as good handwriting and personal handwriting.The consistency in height, weight, familiarity, thickness and space of the letter sums upto as good handwriting. This consistency is shape and structural consistency.
6 times the nib width of a calligraphy pen becomes the x-height of a letter
TOOLS Hindi is normally spoken using a combination of around 52 sounds, ten vowels, 40 consonants, nasalisation and a kind of aspiration. These sounds are represented in the Devanagari script by 13 characters traditionally regarded as vowels and 40 consonants. In addition there are four common conjunct consonants. Learnt that the thickness of the pen tip into 6 times will give the x height of a calligraphic letter in Devanagari script. Based on this rule, the thickness of the letter is also consciously lettered. So, a grid of 2.5 cms into 2.5 cms was drawn where my first strokes were practised. Several patterns were put in repeats. Experimenting with the size of grid based on the size of the tools and the mediums. Jet Black ink mixed with fountain paint ink formed the medium that helped create interesting calligraphic forms. Experimenting with different mediums and tools and the outcome of such tools was explored in the five days of the workshop.
www.be.net/pranavatandra
Pranava Tandra/KRIA/19
Brief The form ‘Ka’ In kannada was attempted in various styles. A huge sheet cut into square 24 X 24 inches was used and five variations of the same letter in calligraphic writing were attempted. Medium Brush and Ink Date 22nd March 2016
www.be.net/pranavatandra
Pranava Tandra/KRIA/21
Brief Designing and developing a new kannada typeface. Medium Brush and Ink, Further Rendered on Adobe Illustrator Date 23nd March 2016
Printing ‘Design IIT Hyderabad’ in 13 languages
www.be.net/pranavatandra
Pranava Tandra/KRIA/23
D I G I TA L I M A G I N G & PHOTOGRAPHY
Guide Deepak John Mathew Brief To comprehensively understand Digital Imaging and Photography Techniques. Hardware Canon 70D, StroBeam Lights, Light meter, Stands, Tripod Software Lightroom, photoshop Location Hyderabad Date March 2016
Brief Observing Human emotions Hardware Canon 70D Software Lightroom, photoshop Location isnapur, Hyderabad Date 2016
www.be.net/pranavatandra
At the Market Understanding Framing. Following rule of thirds and different Vantage point. Objects near and far. People at work. Chaos. Fruits, vegetables, Flowers, Clothes, Eateries. So many emotions. So many transactions. Movement. Rhythm. Balance. Contrast. Too many colours. The challenge is to be able to frame all of this cohenrently. The shoot was at a busy marke in Isnapur, Hyderabad. Date: 2nd march, 2016. ISO maintained at 100.
Pranava Tandra/KRIA/25
26/KRIA/Pranava Tandra
Pranava Tandra/KRIA/27
EXERCISE • Tracking Monents • Lighting and Shadows • Sihoeuttes and Shapes • High Shutter speeds • Panaroma • Multiple Exposure
28/KRIA/Pranava Tandra
Pranava Tandra/KRIA/29
Four images of a running or jumping figure using fast shutter speeds (faster than 1/250 second). Vary the direction of travel in relation to the camera and attempt to fill the frame with the figure. Examine the image for any movement blur and discuss the focusing technique used. Using shutter speeds between 1/15 and 1/125 second. Pan the camera to follow the movement. The primary subject fills the frame. The visual effect of each image is evident.
30/KRIA/Pranava Tandra
Pranava Tandra/KRIA/31
Brief WHO AM I? Hardware canon 70D Software Lightroom, photoshop Location Hyderabad Date 2016
SELF PORTRAIT ‘ R U M I N AT I O N ’ Usually composed, calm & collective. I’m someone who doesn’t express much, is secretive, observative and an introvert.
32/KRIA/Pranava Tandra
ANGER HAPPINESS
Pranava Tandra/KRIA/33
MAGICAL REALISTIC MOMENT
The woman acts as a metaphor. Before the trees are set on fire, the woman is placid. And there’s pain once the trees are set on fire. The woman’s emotions correspond to the image within.
34/KRIA/Pranava Tandra
DESIGN METHODS
Guide Prasad Onkar Team Raj Narayanan and Pranava Tandra Brief To design and develop a system where people can wait(under shade) for buses near the main academic block/hostel and also access information related to the bus timings. Location IIT Hyderabad, kandi campus
Pranava Tandra/KRIA/35
Food
Health
Academics
Campus related
Transportation/ Commutation
Shelter/Hostel rooms
Transportation
Parking Space Issues-dust/space constraints/bad terrain
Bus Timings
Waiting for the buses
No proper waiting space
Lack of shelter
(W)HERE IS THE PROBLEM.
36/KRIA/Pranava Tandra
Design methods is a course that ran throughout the semester. This dealt with a formal way of handling a design problem. Its about breaking away from the usual disorganised way into a more organised and more accountable way. In this we learn certain principles that they generally use in marketing and using it to the designers advantage. There are also methods in which we get to push our limits.
To explain the principles we learned. I would say it is a multiple perspective approach. One we look at a product from the user’s end. That is where we find the requirement of a product. We live in the user and see what all things the end user or the costumer may need in a product. Design Methods! Yes , we do surveys and statistical analysis in various algorithms. To find out the priority order of changes tht has to be made.
Meanwhile making it appealing to the end user, we are also responsible for the investors security. So we need to learn to be inside our constrains .For this we needed a good understand- ing of the behaviour of a product with respect to money in a market with the basic being the product life cycle.
The third one is our own perspective- the designers perspective. We learned to push our limits by working in groups by using methods like different kinds of brainstorming and also alone by using the methods like problem re-framing. As a part of the course we were running a group project .
Myself along with Raj started of thinking about the problems inside the campus, and concurred at the requirement of a shade near the bus-stop. We did surveys among the potential stake holders and listed down the priorities and found out more that anything else we consid- ered in the solution, it was an efficient shade and drinking water that they required as compared to the things like information kiosk.
• Every time, students ask security personnel for the bus timings. • Students have no place to sit. • There is no shade in the premises. • Persistent dust problem • People become thirsty, irritated.
Pranava Tandra/KRIA/37
So, Raj and I sent out google forms to a sample of students from different departmenets to understand their needs related to transport issues.
We hope to solve bare minimum issues you have during commutation between Kandi and ODF. We hope to find how comfortable you are during your waiting time and boarding time for the bus. how many days in a week do you shuttle between Kandi and ODF?
How many round trips do you make per day? *
Number of trips
Do you check your phones for schedule before you board a bus? *
Do you feel the need to ask the security officer about the bus timings even after you have looked into your phone?
Do you find the need to have a bus stand closer to the academic block? *
Are you happy with the bus timings & support you receive from the transport dept. of IITH? *
Do you have to wait a lot for buses before you finally board them? *
What are the difficulties you face before you finally board the bus from Kandi to ODF?
Rate your commutation experience on a scale of 5 *
38/KRIA/Pranava Tandra
Our sample size was 21; we consciously chose students from all departements and tried to understand the commutation pattern of the sample size and asked for their needs. We recorded and analysed their responses.
Pranava Tandra/KRIA/39
40/KRIA/Pranava Tandra
Pranava Tandra/KRIA/41
“ T E M P O R A R Y P R O B L E M S M U S T H AV E T E M P O R A R Y SOLUTIONS TOO” Sitting area that has shade
A stationery bus
Waiting area
How do you see? Zero fatigue area
Something you can carry yourself
R E S TAT E M E N T O F T H E P R O B L E M
Design a ‘temporary’ bus-stand To design specific waiting areas under shade where there is an information kiosk or display near the main academic block/hostel.
I NEED WATER
I NEED A PLACE TO SIT
A PLACE WHERE I GET INFORMED MORE EASILY
S TA K E H O L D E R S N E E D S TAT E M E N T S
42/KRIA/Pranava Tandra
The design of a breathing shade was made taking inspiration from the traditional architecture of Kerala, which is supposed to circulate the air well and also have some conditioning effect on the hot summer air.
Pranava Tandra/KRIA/43
Additonally a cool water dispenser is planned along with a sign board or display LCD of various timings of the bus.
Co-incidentally two foreign excahnge students working in the campus expressed their interest to initiate the project and we found loads of help fronm them to realise this structure we can visualised and conceptualised.
44/KRIA/Pranava Tandra
Pranava Tandra/KRIA/45
46/KRIA/Pranava Tandra
Pranava Tandra/KRIA/47
A lot of features can be added to improvise this structure in the future. However, we remain grateful to our classmates Rini, Chhaya, Amol, Soham, Ambreesh for helping Lukas, Joe and us in building this makeshift structure that has started to be beneficial to everyone who’s looking for shade and water. We also thank Prasad Onkar sir for anchoring us through the project. Thank you.
48/KRIA/Pranava Tandra
C R E AT I V E A R T S
A C T I O N D R AW I N G
Guide Deepak John and Neel Brief The course was a departmental elective which encouraged students to draw paint different patterns through the rhythemic movemts of hands and legs. More like, an unconventional of painting. Location IIT Hyderabad Date 2016
Pranava Tandra/KRIA/49
50/KRIA/Pranava Tandra
C R E AT I V E A R T S
U N D E R S TA N D I N G H Y D E R A B A D A N D I T S H E R I TA G E
Conducted by Anuradha Naik And Anuradha Reddy Co-ordinated by Haripriya and Neel Brief The course was aimed at understanding Hyderabad and its cultural nuances in this city. Location Hyderabad - Chowmahalla Palace and Nizam’s Museum Date 2016
Pranava Tandra/KRIA/51
52/KRIA/Pranava Tandra
C R E AT I V E A R T S
SINGING KABIR WITH PRAHLAD T I P P A N I YA
Conducted by Padmasri Prahlab Tipaniya Brief The course was aimed at understanding the philosophical opinions and notions of Kabir and being able to sing these pearls of wisdom. Singing these poems created a light and joyous feeling to the students. Location IIT Hyderabad Date 2016
Pranava Tandra/KRIA/53
Zara halke gaadi haanko Saakhi : Dheere-dheere re manaa, dheere sab kuch haaye Maali seenche sau ghada, ritu aave phal hoye
Ekai saadhe sab sadhe, sab saadhe ek jaaye Maali seenche mool ko, phole phale aghaa.
Chorus : Zara halke gaadi haanko, mere Ram gaadi waale Zara dheere-dheere gaadi haanko, mere Ram gaadi waala. Antara : 1. Gaadi mhaari rang rangeeli, pahiyaan hai laal gulaal Haakan waali chel chabeeli, bhai baithan waala Ram 2. Gaadi atki ret mai, majal padi hai door, Dharmi-dharmi paar utar gaya, paapi chaknachoor 3. Desh-desh kaa vaidya bulaaya, laaya jadi aur booti, Jadi-booti tere kaam na aayi, jab Ram ke ghar ki tooti 4. Char janaa milee mato banaayo, baandhi kaatH kee ghodi Le jaakar marghat pe rakhiyaa, phoonk deeni jaise holi. 5. Bilakh-bilakh kar tiriya rove, bichad gayi meri jodi, Kahe Kabir suno bhai sadho, jin jodee un todee.
54/KRIA/Pranava Tandra
Pranava Tandra/KRIA/55
SEMESTER PROJECT
FORTIA
Guide Dr.Prasad Onkar Brief To design and develop an interface for an Interactive Design App for phone/tablet that can help a user draw sketches, further converting them into motion sketches. Date 2016
56/KRIA/Pranava Tandra
To enable to user to create finished vector illustrations with easy and intuitive touch controls. Create free-hand drawings with smooth, scalable strokes that help user to predict motion imaging of the same.
• To make the development of mechanical systems with moving parts easier with the use of this interface. • A mobile engineering app for simulating design concepts in the field, in the office or in the classroom. • This purpose built tool allows users to develop functional moving mechanical systems right on their mobile devices. • Able to predict equations for design options. Able to simulate and make engineering design options quickly and easily. This simulated design options will vitalize the user during the concept phase to determine the viability of a design.
Pranava Tandra/KRIA/57
• Print, email, or view a results report on any HTML-enabled browser or mobile device. • Easy—Intuitive interaction for drawing, constraining, and simulating concepts. Simple tap objects to select, and then move, rotate, and scale. • The app should be able to predict for developing mechanical systems with moving parts upfront in the in the design process.
Popular Motion analysis apps on the app market
Analysis: Most of the apps available on the app store are very subject centric. They can either be used by a mechanical engineer or an animator or a designer separately. They aren’t used much and some are paid.
58/KRIA/Pranava Tandra
DESIGN PROCESS
First things first, let’s have a clear understanding of what UI really is. “Interface” can be a complicated term, so we’ll take a moment to wrap our heads around what it entails. See it as a collection of jobs. Such with a beginning, a middle, and an end.
• LOGO • TYPEFACE COLOURS INTERFACE • USER EXPERIENCE
Making of the logo Based on the principles of material design
Pranava Tandra/KRIA/59
60/KRIA/Pranava Tandra
Pranava Tandra/KRIA/61
62/KRIA/Pranava Tandra
Pranava Tandra/KRIA/63
Defining Functions
64/KRIA/Pranava Tandra
Pranava Tandra/KRIA/65
66/KRIA/Pranava Tandra
Pranava Tandra/KRIA/67
PROJECT EXPERIENCE An Interface is more than pretty visuals — it is a medium through which users can accomplish their goals on your website. Done properly, input controls can add fun and interaction to a normally boring process. Navigation should be shaped around content, like a pleasant boulevard guiding users to their destination. Animations add life to the interface, and guided actions and default settings help read the user’s mind without feeling invasive. Finally, and perhaps most importantly, the UI Principle ensures clarity by serving as a gutcheck on your interface.
68/KRIA/Pranava Tandra
IIT HYDERABAD
NEWS APP
TEAM Pranava Sthitha, Ambreesh, Rishikesh, Phaneendra and Vasant Reddy Brief A news app to keep the campus community updated with all the news buzz. Location IIT Hyderabad Date 2016
Pranava Tandra/KRIA/69
ELEMENTS
WIREFRAMES
Splash Screen
Landing Screen
70/KRIA/Pranava Tandra
Progress Bars
NavBar Settings
Content page/ Story
Pranava Tandra/KRIA/71
72/KRIA/Pranava Tandra
Conclusion
Pranava Tandra/KRIA/73
The semester was a rejuvenating experience for most of us who wanted to try different mediums. It was important to study and combine various elements and principles of user experience and interface in our learning.
Thank you,
74/KRIA/Pranava Tandra