For the ‘Soft Prototyping’ module, as part of an introduction to physical computing, I worked on a very small Arduino based project called “Dustbinator”. The project is a very small scale project which is aimed to give an overall introduction on how Arduino works and how can we leverage it’s capabilities using a wide range of sensors.

The Dustbinator project uses an Arduino and an IR sensor to indicate trash level in a dustbin.

The Arduino Codes are provided below.

The following is the first crude version of the shade card.

The first version of the shade card

Considering the semantics & the functionality aspect of the Shade Card, a couple of issues accompany this design.

• The color swatch should be separated to remove false perception dues to contextual visuals (Color context: http://goo.gl/bR9Ap).
• Appropriate chunking of colors is missing. This results in forcing more cognitive load which results in a longer time searching for a specific color.

The second version of the Shade Card looks like this:

Second Version

The second version has several advantages over the previous one like

• The colors are separated by their properties making it easier for users to understand and point out the different colors at a glance.
• New colors as well as colors available in extra 1Kg tubes are highlighted more prominently.
• It partially solved the scalable factor of the shade card.

However, the version still has a couple of disadvantages yet again.

• Wastage of space: Standard paper size is 120mmX140mm. While there is a limited space the arrangement waste lots of real estate. It will make it worst when there are more colors thereby affecting the scalability issue.
• The number system makes it easier for phone-order however when a new shade pops-in, somewhere in the middle, all the numbers for the shade card changes from there afterwards. If a user is ordering from home referring to an old card, the purpose of the shade card could be defeated as it leaves room for ambiguity.
• If a new color is introduced which is also available in 1kg tubes, according to the current structure, there will be two strips at the bottom right, one which reads ‘New’ and the second reads ’1 kg’. That will lead to a visual disorder and possibly ask more cognitive processing to the users.

The third version of the shade card is below:

Version 3

Version 3 has several improvements over the prior versions. For instance

• Scalability: As new shades are introduced, it will be added according to it’s shade as arranged and it’ll only increase the height of the card which can then be folded.
• The grid structure makes it convenient for anyone to search the properties of the color quickly without the need for an explanation of the chart.
• New colors are highlighted as required and are more easier for users to identify.
• The color names or codes are written outside the color swatch. Therefore, one need not manually set the a high contrasting color for the texts to make it visible.

The final version is below:

Final Version

After couple of subtle alterations and changes, the final Shade Card looks like the one above.

The major changes which improves the usability are

• Properties (like Transparent, opaque etc.) written above the columns are slanted for easier reading.
• The color codes are brought on the right of the color swatch in accordance to the reading flow of left-to-right. Searching for a color visually rather than the color codes is much faster. Apart from that, there were whitespaces in between the color swatch & the code as the longest code dictates the horizontal width of the column.
• Apparently, the relation between the horizontal elements is stronger than the vertical elements. As a result, the vertical grouping incur by the alternate column-wise grey shading is being replaced by alternate horizontal grey shading. The column wise separation is replaced with Gestalts proximity grouping as such two columns of the properties are placed closer while the right most column for the tube size 1kg is separated with a much wider gap. This will make it convenient for vertical reference and set a proper eye-path even without the alternate grey shading.

Over several in-between iterations, basically reduced upto 4 versions, the final version solves all the core issues.

The presentation below is the result after going through several research papers on the area. 

Adele

Bob Marley

Morgan Freeman

Yao Ming meme

William Shakespeare

Bruce Lee

Rihanna

Charlie Sheen

Robert De Niro

Amy Winehouse

Artist:
Pablo Lobato,

Pablo Lobato in Flickr
Pablo Lobato at Facebook
Pablog Lobato at Twitter

]]> http://12bubbles.com/2012/04/20/inspirations-illustrations-by-pablo-lobato/feed/ 0 http://12bubbles.com/2012/04/06/how-i-get-in-at-the-industrial-design-centre-iit-bombay/ http://12bubbles.com/2012/04/06/how-i-get-in-at-the-industrial-design-centre-iit-bombay/#comments Fri, 06 Apr 2012 23:09:37 +0000 Pritam Pebam http://12bubbles.com/?p=432 Doing myself a favor as well as hoping to help some of the design enthusiasts out there, I am sharing a few thoughts about getting in at one of India’s best Design school. Honestly, I decided to write this post in the hope of saving myself  from a lot of troubles of repeatedly telling each and every individual who asks me on ‘how to prepare’ for the examinations, the design aptitude tests and the interview. By the levels I’ve witnessed who reached out seeking for help, it seems many of the students are still new to the whole concept of ‘design’ and being a ‘designer’, well at least as far as I can understand. I’ve the modesty to say this because I think I’ve gained quite a considerable amount of knowledge as a designer in the past 1 and half year of my career. This fall I will be joining the Master in Design Program at the Industrial Design Centre, IIT Bombay and although I still have not joined yet, I believe this post will give a foothold to the aspirants; at the same time, when someone asks me the ‘how to question’, I could just share this link. Most probably, I would keep this post updated as I walk through the experience once classes starts, but until then, here we are.

Notice the two circular markings at the end of the toothpick. They are not only for decorative purposes. One is where a person breaks off the toothpick after it has been used to signify that it's a 'used' one. The second mark is to use as a peg to put the used pick on a flat surface so as that the tip doesn't touch the surface. Photo via Cosmic Thought

Design, as a matter of fact is subjective and some people may disagree with what I’m going to tell you here but nevertheless I believe you will gain some insights on the whole idea about it anyway. With saying this, it would rather be the wrong approach if you are looking for a crash-course or something of the kind hoping to get through design examinations and to become a good designer. Although towards the end of this post I’ve shared a couple of  ’Quick notes‘ which you can go through if you are looking for a quick reference but let me remind you no amount of study materials I share or anyone else for that matter will cover the design substance a great designer needs. I would prefer if you would understand the approach, the attitude and the mentality of what makes a designer from within!

One thing for sure with any design aptitude examination (like the CEED or NID entrance tests) is, it doesn’t work like many other examinations prevailing in India or elsewhere. Usually you’ve an option to sit down for 3 months locked in your room with a pile of books and prepare for them. For design examinations you learn wherever you go or whatever you do. The world is your help book. You learn from the surroundings and the buildings, you learn from the people, you learn from street signs and traffic symbols, you learn it from personal experiences or so on, and the key to learning almost everything ‘design’ is – observation.

Next time you visit a mall or a movie theater, observe the ‘Men’s Room Signage’. Try identifying the font face used. What shape is the men’s and women’s glyph in it? Can you sketch out the glyph to depict ‘for disabled’ on the same line of design? Or when you make a payment at the counter in the mall, observe how the cashier handles the payment. Is the monitor stand a little too high for the cashier who’s a short person? How would you solve the issue so that both a tall and short person can handle the experience with ease? Would you redesign the table, or would you redesign the monitor stand or would you use a standing platform for the cashier?

Ever wondered why the 'Start Button', the 'Show desktop button', the 'close button' are all at the corner of the screen? Because it is the easiest to access in the whole screen area as two of the axes from the 4 possible directions are eliminated. For example, if you want to click on the start button even when you've your eyes closed, drag the mouse far left, then far down, you'll end up on top of the start button!

Everywhere you go, there’re a lot of questions you can ask yourself. Learn to frame the right questions and try to solve those issues or simply redesign them to make the existing system or product better. Learn to question the convention about anything you see or use everyday; it could be a logo, an object, a vehicle, an interaction or experience and so on. Start questioning why is your pen shaped that way? Why is the button on the right instead of on the left? Is it even required?

There’re a couple of things you need to be habituated yourself to. As a designer, some people even believe that having a certain level of Obsessive-Compulsive Personality Disorder (OCPD) is essential and it’s indeed acceptable. Are you someone who cleans up your desktop icons regularly? How do you categorize and manage your files? Do you have that urge to change the orientation of the money note which appears upside down in the bundle?

With this post or in fact anyone’s, the most it can do is inspire you or motivate you, or at least give you a leadway. If the urge doesn’t come from within, it’s going to be tough for you to set yourself with a designer’s mindset. Let me share you some materials with which you can hone yourself for the examinations but trust me if you get the gist from the few paras above, that will help you a lot more in the long run. With the exception of quite a few points mentioned below, the information I’ve provided here is not about any design test or examination in particular. It’s more about making a better designer out of you. The test or examination comes later and let me remind you, not getting in at a design school does not mean you are not a good designer.

Quick notes:

• First, start preparing your portfolio at once.
• Select a few examples of your best works. Even if you’ve dozens and dozens of works, try to minimize it to only some 10 or 15 pieces. Include one each from a different media or subject. For instance, try to avoid creating a portfolio which consists of only sketches just because you’ve lots of them. Choose a couple of the best ones and put them and try to create one which shows variety of interests and skills.
• Specific to CEED, while giving my interview at IDC, I’ve noticed some people bringing dozens of sketches, photographs or art works during the interview (and I’ve witnessed they are excellent), but do not let those intimidate you. The interviewers will have time to review only a handful. So instead of carrying dozens of your work, show your 2 or 3 best works. In most cases, you will probably be asked about things you’ve written or sketched on the written examination and not from your portfolio. The point is, it’s you who matters, not the number of leafs in your portfolio. If you’ve something to share with the interviewers, start talking first. Do not wait for them to start asking questions, instead tell them you’ve something to show and show it.
• Again specific to CEED, check out the old questions papers available at the CEED site at http://www.iitb.ac.in/~pge/2k12/ceed/ (link changes form year to year).
• Do not just eye surf them all at once. It may look easy but just try solving one first and find out where you stand.  Check out the pattern from 2 or 3 previous year questions and keep the remaining with you. Learn all the stuffs mentioned in this post and come back to the rest of the question papers later and see if you’ve learned anything at all.
• The timing and the examination pattern has changed starting this year (2012) so make sure you are aware of the proper format & time schedule. Multiple choice questions and negative marks have also been introduced.
• Do not bother to carry water colors at all. Instead get yourself with a simple and cheap mini pencil or crayon color set. Trust me it’s a lot light and a lot less clumsy than carrying water colors, managing the brushes and the water or so on. You would instead be wasting time in the examination hall. Imagine using the water colors – pick the color, put water (which you’ve brought in a small bottle from home), mix it then paint it then wash the brush, take out another color, mix it again, now wait for the paint to dry and then paint again. You are not giving an art examination. Express your ideas – that is what’s important, not your ability to paint.
• Start observing famous logos & graphic designs
• Logos are one of the most essential entity that makes up the design scene in the world. Collect your own logo designs (for CEED most importantly of the Indian logo designs). Observe their shape, proportion, contours, white-space, color or so on. Keep the habit of observing the designs that comes on the newspapers or television or on billboards etc.
• Learn about the famous mascots and fictional characters
• Character design is another important aspect of design. If you choose to become and ‘animation designer’, it’s the integral part of it. So try to understand these characters, what do they represent or so on. Try creating your own mascots for say the  Indian National Games or the IPL for example. You can find some Indian mascots at the D’Source website.
• Learn some light object sketching.
• Focus on perspective & proportions. You do not have to be a genius on your sketching abilities. Many students seem to be afraid of this but just keep in mind, the perspective, the way of presentation and the proportions are more important than the overall looks of the object you are sketching.
• Read the color theory.
•  The color theory will help you understand color as an entity. Learn the physics on what is RGB model and how is it different from the CMYK modeletc.  The color theory will also help you identify which color or shade you need to use to depict a certain spirit of warmness or coolness.
  

  Image - IloveTypography

• Learn the basics of Typography.
• Make sure you do not find terms like ‘ligature’, ‘ascender’ or ‘descender’ foreign to you. Once you get accustomed to the typographic elements, you will be able to identify type faces which is a whole world in itself. Trust me, to an untrained eye, it’s as difficult as some alien language but to someone who have the basic typography knowledge, a serif is more than enough to identify the difference.
• Study the Principles of Interaction Design.
• Learn the Principles of interaction design, Basic Interaction Design Principle (pdf). You’ll come through a couple of general principles and laws such as Fitt’s Law, Hicks Law, Gestalt’s Principle etc. Understanding these principles and laws will help you in taking better design decisions.
• Join creative networking platforms.
• Join sites like Coroflot, Behance, Dribbblr or Forrst. Follow artists, check out their portfolios, observe what they are doing. As you get to learn more about the existing trends or what the world is talking about design, your interest will grow and that helps.
• Keep updated about the latest design media.
• Design in India is one specific place where you can learn a lot about the design scene in India. The internet has made it all possible that you are updated with the latest design news, ideas or innovations. Join sites like twitter and start following professional designers. Listen to what they say, you will find a lot of substances or useful materials that will enhance your design skills.
• Discover, read and learn
• Use a feed reader like Google reader or feedly. Start following some design related blogs like Core77, FastCoDesign, Yanko Design, 99percent, A list Apart, Adaptive Path, Noupe Design blog, Design Taxi etc. Once you add up these sites, Google Reader will automatically keep suggesting relevant other design sites. Keep adding them and follow them. You will gain a lot of insights from the articles from these sites. Take your time reading them. It pays.
• Watch design videos, shows and documentaries
• Watch the design related TED talks. Make sure you check out my list of 10 TED talks for Designers and Creative artists.
• Also check out these documentaries: 12 Art & Design Documentaries. You may have to buy them though.
• Try reading inspiring books
• Some of the best known design books are worth a read. Design of Everyday things, Helvetica: Homage to a typeface, Lateral Thinking by Edward De Bono etc are some books you can add to your library.
• Watch and observe cartoons and read comic books
• Animated cartoons and comic books are a great source of learning storyboarding, understanding basic human expressions and movements (pdf), character design and sequential graphics etc.

The links I have shared will definitely guide you through to gain much of the design knowledge to make you a better designer. I certainly hope this article will help but in any case if you have any inputs you want to add or share, please do so in the comments.

1) Amy Tan on Creativity

2) David McCandless: The beauty of data visualization

3) Don Norman on 3 ways good design makes you happy

4) Elizabeth Gilbert on nurturing creativity

5) Gary Flake: is Pivot a turning point for web exploration?

6) John Maeda on the simple life

7) John Underkoffler points to the future of UI

8 ) Pranav Mistry: The thrilling potential of SixthSense technology

9) Tim Brown urges designers to think big

10) Tim Brown on creativity and play

Designers' Handbook of the Manipuri Script - The Mayek Project

The Mayek Design Project’s mission in their Facebook Page reads

To promote awareness and importance of the Manipuri Script in the present world and to make sense of our genuine existence in the culturally rich state otherwise having a poor show of script design which has been kept dominated by borrowed Bengalee script for the last 282 years.

The script as used today, as per my speculation seems to lack the typographic design edge following the adoption of digital devices. As such the various types existing today are a mixture of personal designs or improvisations.

Meitei Mayek as used in present days

The Mayek Design Project has brought out some creative forms of the Meitei Mayek typeface that gives a new perspective to the script design.

Type designs at Mayek Design Project (Facebook page).

Mayek Design Project

Mayek Design Project

Mayek Design Project

Neelakash Kshetrimayum, a Communication Design Graduate from the National Institute of Design (NID) has created a detailed presentation on the story behind the Meitei Mayek type, from ancient inscriptions to the digital typefaces. It was presented on Typography Day 2011 organized at NID. The presentation entitled “A Comparative Study of Meetei Mayek” is the first detailed study towards the script I’ve known and it gives you insights on how the script has evolved through times.

A Comparative Study of Meetei Mayek (Download Original pdf)

The script has been in active use for the last decade. You can see them in websites like www.e-pao.net, one of the most popular e-platform from Manipur. Although Meitei Mayek has become a Unicode 5 standard (pdf) after the proposal for encoding the script (pdf) at the UC Berkeley Script Encoding Initiative, it hasn’t been included in the default font distribution as such you cannot use it without having the font’s installed on your system (please rectify me on this regard). Sites like E-pao had also been using it’s own Epaomayek font which you need to install to read the articles until the recent adoption of the @font-face CSS3 specification possibly after readers’ discussion on the same. Since then, it has also released a Meitei Mayek webfont using the same @font-face specification to allow webmasters to embed the font on their sites.

Meitei Mayek as a Unicode standard

I believe with prominent designers like Neelakash Kshetrimayum coming up from the state, who has also designed typfaces like Pakhangba and Sanamahi for Meitei Mayek, the typography scene of the present day Manipur will be in highlight soon.

Links:

• Learn Meitei Mayek: http://e-pao.net/eyek/tamba/
• Install Meitei Mayek Unicode Font: http://tabish.freeshell.org/eeyek/download.html
• Research Notes: http://unicode.org/~rscook/Meitei/
• Resources: http://e-pao.net/channel.asp?what=meiteimayek
• Manipuri Firefox, Typing tool, Unicode font etc from Ministry of Communication & Information Technology, Govt. of India.

In the talk, Bret shows a ‘live coding prototype’ in which results and feedback are shown and reflected directly as you code.

Anyway, there has been enough posts and reposts on this video on various blogs and if you do a google, you’ll find several discussions or opinions from various people. What’s interesting about the prototype Bret showed is that, it is now becoming real!

Gabriel Florit has created a live demo based on Bret’s talk at http://gabrielflor.it/water and it’s called ‘Water‘.

Water is a visual live coding tool. Unlike the usual tools we use to code today, water reflects the changes as you type the codes instantly allowing coders to visually comprehend, understand and adjust the codes as you are write.

This is a big step towards achieving what Inventing on Principle is all about. Check water out or maybe you should watch or fork it at github.

Downpour

The Catch

A night in December

Artist: Pascal Campion
Facebook : Pascal Campion Art