The Haldi Project

Studio 2 Haldi Project Sponsor Turmeric Design Pvt. Ltd. New Delhi Student Reuben DSilva Programme/year Undergraduate Graphic Design 2009–2010 Project co-ordinator & Guide Rupesh Vyas Co-ordinator, Graphic Design Head, Information Technology

This document contains a detailed description of the process and learning involved in completing my second studio project at NID. It is a web-based project for the portfolio website of Turmeric Design, a collaborative design studio in New Delhi. My keen interest in digital design applications and desire to experience working with Turmeric Design pushed me to take up this project. It was undertaken over a period of approximately 3 months.

05

— Document set in Droid Serif and Droid Sans designed by Steve Matteson, Type Director of Ascender Corp. for Google Android platform. Vertical stress, sturdy serifs and open forms contribute to the readability of Droid Serif while its proportion and overall design complement its companion Droid Sans. Primarily designed for comfortable screen reading. © National Institute of Design, 2012

Proposal

purpose

design priorities

Thank You

process outline

case studies

Kriti Monga of Turmeric Design for providing me with the opportunity to undertake this project. It was an enriching and enjoyable experience made possible only through your openness, understanding and support throughout.

06

Tarun Deep Girdher, Anil Sinha and Tridha Gajjar who provided feedback on this project at my semester jury.

Yash Misra, Jyotish Sonowal, Payal Vats and Anya Rangaswami for being the supportive seniors they are.

My family, undergraduate graphic design batch 2009 and friends for the encouragement and commentary.

Wireframe

Analysis

quick recon

06

style & culture discovering turmeric

08

brand model

10

case study 12

Profile Requirements Roles

20

taking a pick Layout

62

visual language

67

design features

71

adaptations

advanced Wireframe

22

about page

more Wireframes

26

contact page

even more Wireframes

30

team page

selected wireframes

Responsivity

concept of

49

client page press page shop page sample walkthrough

86

Developer notes

devices responsive wireframe+grid

Website

User personas

Typography

hinting

low fidelity

38

introduction

Design

type options

sitemap

Business vision

the turmeric model

16

what is a

state of flux

14

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

case studies

solution

Rupesh Vyas, Co-ordinator of Graphic Design at NID, served as my project coordinator and guide for the project.

2

48

‘frameless’ 15

explorations

This icon has been used to compile a contextual bibliography through the course of the document. It points to links and useful references

Proposal “ Still thinking your website or online presence is a feature?

We’re no longer in the era of an ‘elevator pitch’. We run to the web to learn more about a company, product, service or idea. We turn to Collaborative Consumption before making trusted decisions. We don’t want to hear your marketing BS. We want real responses and reviews from real people that used your service or bought your product. We want to read your process through your blog. We’ve been in the making of a new Industrial Revolution and I’m scared to see so many still standing still and blaming depreciating profits solely on Washington. I know. I know that you know that “business

purpose

process outline

Turmeric Design, as successful as it has been so far, must now expand it’s horizons and widen it’s field, depth and cone of vision. It is no longer purely a ‘Kriti Monga’ venture but a full-fledged design studio drawing in varied skills, talents, ideas and areas of expertise. We want the work, as fun, happy, enthusiastic and energetic as it is, to be taken seriously whilst leaving the existing approach and culture untouched and unique.

¶ Phase 1: Digging in

solution This juncture provides a crucial as well as an ideal setting to allow the website to speak of this new brand direction. I wish to see it as a brand launch rather than just a website launch.

is changing.” But do you even know what that means? Or are you just jumping on the Twitter and Pinterest bandwagon because your competition is on there? Do you truly understand the real value? ”

brian hoff, the design cubilce.com

4

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

http://www.bidsketch.com/ blog/selling-web-design

¶ Phase 3: Final Design and Execution

To engage you in a process of understand as much as possible about Turmeric-past, present, future.Triggering the discussion with a set of questions for the client to respond to. It involves dialogue and a lot of it. To try and dissect the brand, research intended audience, self-image, goals, and competition. This will give me, as well as the client, greater clarity on what exactly the strategic role of the website is in the larger scheme and Turmeric’s future plans.

Thus, framing a design brief. ¶ Phase 2: Recce & Exploration Review the site content (copy, image, video). It will involve research and sharing links and ideas. To develop an idea of what’s out there, what’s cool, what works and what doesn’t–sitemaps, interactions, content stru cture, e-commerce, layout, visual appeal. What comes where and why. But more importantly identifying what would work for Turmeric. Building wireframes will be a key part of this phase. Exploring ideas of structuring and organizing content by means of layout.

The wireframes will also describe some exchanges with client and interactive capability. Attempt to come up with two to three design concepts and select one direction to be turned into a comprehensive design solution.

After having completed phase 1 and 2, the design will be staring us in the face.

At this stage I will come up with alternate approaches within the chosen direction by designing any one page of each alternate.

The design that we feel has the potential to translate throughout the website will be taken forward and be executed till completion of all pages. At this stage I will re-look at things like final images, design checks, proof reads to try and assure that final files are final. Between phase 2 and 3, I intend to visit the developer to discuss design and development concerns.

— A proposal like this can be framed only after the client states his/her intent behind the project.

It provides a framework within which one can define a problem space and possible solution.

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

5

Quick Recon A state of flux The studio is currently in transition from being a personal i.e.freelance+collaborative practice, to becoming a studio with a wider set of talents and ideas. Over the next few years, it aspires to transform into a space with enthusiastic, energetic bunch of people with their own strengths and approaches, collaborating in teams to come up with completely different solutions every time. Having said that, Turmeric’s current visual language and voice is recognised and sought after for its present character/style.

A business vision

A style

What connects and bridges Turmeric’s present and aspired future image, is it’s approach and culture. Turmeric wants to continue with collaborative design projects which recognize other skills as well as help define it’s own unique contribution to the project. Clients from hospitality and boutique brands are popular.

Although at the face of it, illustration and strong colour seems like an overarching language, it could easily evolve with time, different projects, different people etc. In a nutshell: Turmeric’s brand language should not be defined by it’s work or current time, but contain it. It needs to be quite functional, clean and organised, but elegant and fitting for a design studio. work culture Image credit: Turmeric Design Facebook page — Turmeric’s brand language should not be defined by my (Kriti’s) work or current time, but contain it.

6

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

Key words that define the Turmeric brand value: imagination, joy/ happiness, meaning, action/ energy/ enthusiasm, soul.

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

7

Discovering Turmeric

— The manner in which certain questions were addressed gave me indications of what was important and what wasn’t. There was a clear stress on the perception of Turmeric and making clear the functionality of the website..

the conversation This was a primary outline of the project at the outset for Turmeric Design. I did feel the need however to generate more raw data. This I felt could be done only by means of an actual conversation with the client. To trigger this conversation, based on the primary outline, I compiled a list of questions. Each one had a specific intention placed behind it.

Kriti covered a wide range of details, most of which I covered in my notes. Often digressing from the concerned question but equally insightful. All the responses revolved primarily around the perception of Turmeric, it’s interaction and work style,ambitions and present scenario.

Why was this necessary?

The conversation that the questions triggered was extremely valuable because it produced a lot of instinctive and spontaneous descriptions and opinions from the clients perspective. Candid descriptions and digressive details can be very useful.

8

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

— I was happy to hear of the kind of work that Turmeric Design is a part of first-hand from Kriti.

There seemed to be a lot of collaborative effort on projects that extended to working closely with professionals ranging from architects, chefs, film makers and managers. I think this openess was refreshing as well as inspiring for any design studio.

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

9

Brand Model introduction Every company or organization is driven by some ideals,morals, philosophy or practice. And every such company does their best to communicate these underlying beliefs to their customers in the truest possible manner. It may reflect these attributes in a number of ways– a logo, catch phrase, colour, collateral, a jingle, mascot etc. What a brand model does is present the core ideas and defining attributes in a concrete and relatable form. Upon this, a brand can take any suitable form.

Why was this necessary?

A brand model expresses the most fundamental aspects of an organisation’s personality. By laying this foundation, the job of extending the brand (in the form of the website), has a basis upon which correct decisions can be taken.

It serves as a reference to align all other forms of expressing the orgainsation’s ideals/values.

zara: a case study

— The brand prism describes a brand in terms of six facets.

— Leo Burnett’s model describes a brand in four quadrants.

Physique The external physical image

Self-Image Stakeholder’s perception of his/ her self

Personality Company’s perception of itself

Reflection Our idealised customer

Culture Values that affect behaviour

Relationship Interaction with customer

function What defines the organisation

Personality What other’s see in your organisation

differences What makes you different

Culture Internal values that affect behaviour

A brand that I dug a little deeper into upon mention it is Zara. Based on a report done on Zara.

Research suggests that a brand with accurate positioning and brand values choice, positive brand image and high brand-added value, should become a powerful brand. Brand name, design and advertising have an important influence on this progression. A brand portfolio, brand extension and endorsement strategy can be used to develop brands for entry into other markets. If these strategies are managed well, a brand can also become stronger.

http://edissertations.nottingham. ac.uk/1918/1/Disseration.pdf

— Two key factors that distinguish Zara from other fashion brands are it’s design and speed of launching a new collection. This ‘fast fashion’ approach keeps them ahead of their competitiors.

Two key factors that distinguish Zara from other fashion brands are design (most fashionable) and speed of launching a new collection (fast); these factors make it easier to implement a good brand strategy.

Zara brand managers are more likely to use design and brand name to carry out a brand strategy, and there is almost no advertising involved.

In the fashion industry, the design of Zara plays the most significant role in the success of developing a strong brand. In addition, Zara is positioned in the premium price (price dimension) and impressive approach (intrinsic dimension) by managers, and the material and quality of it is relevant to this price strategy. The chosen values of Zara fulfill not only the material need of consumers (e.g. clothing is for security), but also consumers’ demand for self-actualisation (e.g. wearing Zara, they feel they are

beautiful). Besides these, there is a positive image (which can be obtained from Zara’s fashionable design) and a high brand-added value (which has high perceptions of quality and high brand name awareness) of Zara for consumers. For instance, Zara’s name springs to consumers’ minds when people mention the high street fashion brands.

In summary, Zara chooses premium strategy and impressive approach positioning, and the brand value of Zara is related to need-driven and inner-directed aspiration levels. It has positive and strong images and high brand-added value. Although brand name, design and advertising as an instrument have an important effect in the brand management, not all of them should be employed. It is better to use the most appropriate one, so they chose to employ design and brand name. Zara set up a brand portfolio, Inditex Group, which utilizes an endorsement strategy to exploit more brands. Zara also developed a new extended brand, Zara Home. Based on these factors, Zara has become one of the largest global fashion companies.

1. http://www.slideshare.net/nitin59/kapferer-model-brandidentity-prism-presentation 2. http://culturalfuel.net/tag/brand-planning/

10

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

11

The Turmeric Model

Why was this necessary?

The brand model acts as a map. It can guide any future decision that Turmeric may need to take right from a marketing strategy to the typography on it’s business cards.

It provides a strong foundation upon which the studio can stand.

wordplay The discussion also generated a number of words, mostly adjectives, that were used to describe things in reply to the questions. These I felt were crucial to the modeling of the brand. I played with them and attempted to generate a structure that could be synthesized alongside the Burnett brand model. This process was interesting because it brought up combinations that brought out very varied personalities of Turmeric. I created a short video clip that documented this mix-match process that resulted in the brand model. This activity was something completely unplanned and what seemed to be a manifestation of the discussion that preceded it.

— Alongside are screenshots from the video clip produced that illustrate the process. It was a spontaneous exercise and welcome experimentation in stop motion using After Effects

12

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

The model It is based on a model constructed by Leo Burnett which describes a brand in terms of four aspects: Function, Personality, Difference and Culture. The questions posed were in a direct effort to address this model.

brand new

The lower two quadrants are the internal attributes. These describe things that are intrinsic to the brand which define it’s approach to work, attitude and internal culture. They may not be necessarily visible to anyone outside Turmeric Design but are essential to it’s functioning. The top two quadrants are the external attributes of the brand which is simply the brand image or it’s perceived personality. The four aspects are said to combine bringing out the brand’s essence.

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

13

Website Till this stage, I had not specifically addressed or touched upon anything related to the website in particular. All the work done so far was only to understand Turmeric and fully digest the context in which I would be working to create this website. By satisfactorily concluding this research, I felt confident of moving into the next phase and hopefully so did my client.

website as a message

Design priority

What exactly do we wish to say?

What is important to it’s functioning?

Turmeric Design, so far, did not possess an official website. A couple of months into my project, they did post a singlepage portfolio page that gave a brief overview of the kind of work that the studio undertakes. Portfolio websites maybe perceived as all doing the same thing- displaying work. But there are reasons why some are more memorable and delighting than others. The case studies to follow will provide an insight into what these things might be.

How does it connect things?

the lazy clicker

The simple fact is we weren’t building a website for Turmeric; we’re building it for others. So it has to connect to them. Now Turmeric has an existing online presence through Facebook, twitter, Flickr, dribble and a blog. Using the existing channels helps because we simply direct users to the website from these locations.

A certain phenomenon prevalent amongst most portfolio site visitors is that of the ‘lazy clicker’. It refers to the large majority of your portfolio vistors who don’t really have a clue as to what they want from the visit. The mondset while a portfolio website is not of an information seeker but the laziest of browsers. As a designer we can choose to be overpowered by this indifference or use it to our advantage and create strong guides that give us and our viewer the most out of the visit– a seamless uninterrupted viewing experience.

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

Collaborators

To-be-Employee

Priority

1

2

3

Need

Businesses who have heard of the studio and wants to check work and credentials to judge if Turmeric would be suitable fo his/her business

Peers and independent designers who have specific projects they wish to collbaorate on or draw in specific design expertise for

Looking for work opportunity (internships/ permanent). Want to gauge the kind of work done at Turmeric and whether it seems

Message

Business advisor We mean business and bring together function, emotive involvement and craft to make your business more effective

Creative muscle We’re passionate and actually put our money and effort where our mouth is. We bring the required experience and expertise to lead teams and initiatives

Cool boss We’re energetic, exciting and open to work with We love side projects and food/travel excursions.

We’re not only an illustration studio.

website as strategy

Alot of marketing also happens by word of mouth or via former customers recommendations.

14

Easy and intuitive updatability, with some degree of re-organization of content possible. Clean, clear, easy to go through. Clients are impatient. An extension of the previous point, very professional and ‘meaning-business’ feel and organization structure. A lot of the content is ‘pretty’ and often mistaken for being just that. The copy and website in general must bring out the fact that it also works very well and has helped clients achieve their goals.

Clients

Response

Browse through varied work very easily and contact Turmeric via phone or e-mail

View Turmeric’s process over varied projects and category specific projects as well

View some projects, about page, credentials, blog and e-mail portfolio/application

User Personas Through my previous research and discussion with the client on the target audience, I managed to organise the people groups that this website was targeting. it was broadly three personas: Clients, collaborators/peers and opportunity seekers. Each of them relate to the website in different ways and with different mindsets and objectives. It is essential that the website can meet the needs of each persona.

— Usage of archetypes can be extremely useful to understand personalities and roles of a praticular party in any communication model.

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

15

Case studies

case study 2 | www.jessicahische.is

case study 1 | www.designstack.com

There’s no denying that there’s a lot out there on the web. Some of it is jaw-dropping while some of it isn’t remotely readable.

With a firm objective to design a great website, I felt the need to further familiarise myself with some websites that I felt were interesting case studies raising issues that could guide my decisions ahead.





  

 

 

— Jessica Hische’s website was a big inspiration. It has a very strong responsive grid that holds it together. Elegant type combination and read-worthy copy.

Her work possesses a lot of strong colour and the clean white scheme lends the work much-needed attention while the orange accent adds subtle character





navigation Primary between project categories Secondary between people, work, clients, info interaction No hovers/roll overs for any of the homepage links, fade in fade out’s

16

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

browsing Opens with featured work images of a thumbnail gallery. View the project upon clicking by vertically scrolling 4-5 images per project. layout Four column, mixed

treatment Use of neutral shades namely greys, some amount of texture, watermark image on each project, projct descriptions are very uninviting technology Built using .php

navigation Primary between project categories Secondary between work, thoughts, resources, about and shop

browsing Opens a scroll, thumbnail gallery, tightly cropped feature images, social media sharing

treatment Customisable schemes– teen girl, swiss, regular, well written personalized copy

interaction Thumbnail enlargement upon hover, simple orange highlight over text, subtle

layout Strong grid/ two-column

technology Built in HTML5, responsive design

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

17

case study 3 | www.moxiesozo.com layout Header bar, Single column viewing

case study 4 | www.wemakedesign.com layout

Header+Three colum distribution

navigation Interesting but confusing horizontalvertical cross between two navigations





interaction High-end work reduced to image thumbnails, 5 per row, persistent navigation bar



browsing Long grid, click thumbnails to view project images, preachful opening type and long paragraph block

navigation Single primary navigation, exhaustive client list in right column



 

 



ground make for hard reading, squarecropped images, image to text ratio is very low technology Built in php, unresponsive design

on project thumbnails, Project text preceding image browsing Long grid, Easy to switch through pages but harder to move from one project to another

treatment

Dark scheme with serifs on black back-



interaction

Accent colour hover, opacity roll-over

treatment Super white minimalistic, restrained use of type, singular iconographic feature images fit in a 4-column grid technology No resolution adaptability

 — Moxiesozo clearly has a lot going for them. They’ve added some strong ego-istic artistic flair to their website in the form of the long preachy paragraphs and take-itor-leave-it project displays. Very powerful, high profile work but don’t seem too interested in sharing process

18

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

— The site is clean and refreshing. Easy to read but slightly difficult to navigate. The flow of browsing is affected by the category or client parameter because the user has to keep making a choice as to what project he/she wishes to view next.

other notable portfolio websites– pentagram david-airey doylepartners brucemaudesign

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

19

Wireframe Wireframing is one of the most valuable parts of any web design project. It can save a designer tons of time by hashing out the details of a site’s architecture, functionality, and content prior to actually starting a visual design. It assures the client that the site can achieve functionality and provides the designer with a freehand to explore visual design then on.

low fidelity wireframes

sitemap

Lo-fi wireframes are any quick translation of an layout or content organisation idea that a designer may have in mind. Alongside are some lo-fi wireframes that I generated in the form of pen sketches. At this stage,I was still acquainting myself with the sitemap and content structure so the ideas were very rough.

The sitemap describes the organisation of content on the website, it’s containers and categories.

1.Home page this could even directly open to the portfolio page, or contain a preview + short introduction 2.Portfolio Work spans design, illustration, lettering and typography. More specifically– identity & branding, print & packaging, editorial & books, spaces, interactive, commissioned art 3.About Team + Social media links + Contact + Press/ Recommendations + Select client list 4.Blog 5.Store

Why was this necessary?

Creating wireframes are crucial becasue they kickstart the thinking process. They allow a visual designer to shed all concerns regarding the appearance and allow one to focus purely on function and affordance. It is the skeleton of a webpage.

20

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

http://www.smashingmagazine. com/2011/06/22/following-a-webdesign-process/

— The one on the extreme left were some sketches I did on the back of my train ticket on the way to Kyoorius Designyatra in Goa in September 2012

— The remaining spreads are from my notebook. They were done soon after I had submitted the proposal

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

21

Advanced Wireframe

set 01 wireframe 001

set 01 wireframe 002

navigation Header provides category navigation, alternately project thumbnails take viewer straight to project page, secondary navigation strongly de-emphasised

high fidelity These are more developed wireframes in two respects– 1. They take into consideration proporation and scale. This would mean that some attention is paid to screen size, column distribution, image to text ratio, yet no regard for design specifications or measurement. 2. As a result of the first point, the tools used to create these wireframes maybe digital ones. There are a number of online tools available for creating such digital mock-ups.

http://www.smashingmagazine. com/2009/09/01/35-excellent-wireframing-resources/ http://uxdesign.smashingmagazine. com/2012/08/29/beyond-wireframing-real-life-ux-design-process/

interaction Roll-over reveals project name, .js slideshow

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

 WHAT WORKS Use of page width Visual approach Bold and upfront  WHAT doesn’t No direct access to work Strong focus on work categories

browsing Home> category/project > next project

set 01 wireframe 003

layout Collage structure, mason grid, full width

layout 960px adjustable width

navigation Select category (radio button style), Two navigation groups, thumbnails rearrange based on the category selection

navigation Conventional tab-based navigation for secondary navigation, Sub-tabs for work categories

interaction Roll-over reveals alternate thumbnail images for each project

interaction Custom scroller, browse projects one after the other

browsing Scroll to view more projects, navigation is retained on the project page.

22

layout 960px adjustable width, full screen imagery

technology Built using a .js script called Isotope (isotope.metafizzy.co) It allows a number of configurations for fluid grid layout with slick animations

browsing Home> project > next project

 WHAT WORKS Adaptable width within LESS framework Simple, conventional interaction

 WHAT doesn’t Limited image space Custom scroll

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

23

set 01 wireframe 004

layout Horizontal scroll similar to Pentagram.com navigation Drop-down menus, scroll horizontally through image gallery to choose a project, custom scroll interaction Scroll momentum, fade in/out navigation browsing Home> Work category> Project

set 01 wireframe 005

set 01 wireframe 006

interaction Roll-over, accent hover browsing Category> Project

Use of page width Clean and linear, refreshing  WHAT doesn’t Uunconventional navigation Multiple steps to view a project

 WHAT WORKS Easy to associate Good image width Adaptable grid  WHAT doesn’t Thumbnail images Left-column navigation may be slightly confusing

24

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

To generate the mockups in this document, I’ve used an online tool called Balsamiq. It’s a very handy program with an easy to use, well-designed interface. Simple sketchy elements that are easy to handle and natural in their own way. They also possess element libraries that extend to iPhone UI.

 WHAT WORKS

layout Two-column navigation Listed categories, carousel supported by project thumbnails below, mixed content

process tool

layout Experimental grid based, two-column navigation Each column dedicated to a particular category, scroll vertically along each vertaical band to view image project feature thumbnails interaction .js slide animation with momentum browsing Home> Browse> Project

technology Using a .js script for navigation, HTML5

http://www.balsamiq.com/

 WHAT WORKS Playful Clear  WHAT doesn’t Uunconventional navigation Multiple steps to view a project

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

25

More Wireframes One round of wireframe explorations is rarely sufficient. Upon presenting the first set of wireframes, Kriti and I exchanged thoughts on the work. She provided very vague and very pointed feedback – both extremely useful.

set 02 wireframe 002

key suggestions and focus points

layout 3 column

+more VISUAL +over-arching focus on work and process

navigation Left column, project listing

set 02 wireframe 001

interaction Roll-over, accent hover

+continuity in browsing experience

browsing Directly to select project> Next project

+guide the viewer by creating fewer affordances

Optimised real estate Easy browsing. ref. lazy clicker  WHAT doesn’t Adaptability of width

set 02 wireframe 003 layout 3 column

layout Flexible, Golden-ratio navigation Top header, sitemap display, category by column interaction Roll-over, accent hover browsing Directly to select project> Next project

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

Direct to work

Access to work categories

— On most matters, the client informed the work with practicality and the customer’s perspective on things which was essential.

26

 WHAT WORKS

 WHAT WORKS Use of page width Priority to image  WHAT doesn’t Focus on work categories

navigation Left column, project listing (tried to suggest a two column approach for listing to accomodate work categories above the page fold interaction Roll-over reveals project name, .js project slider

 WHAT WORKS As mentioned for 002  WHAT doesn’t As mentioned for 002

browsing Project > next project

Grid variations

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

27

set 02 wireframe 004

set 02 wireframe 006 layout 3 column navigation Accordion, thumbnails for featured projects with twitter feed interaction Open/close accordion browsing Home> Select project Home> Open navigation> select category project

designing for a design studio

 WHAT WORKS

Kriti would provide feedback on each round of wireframes over Skype calls.

Being a designer, commmunicating our ideas to one another wasn’t such a challenge. Even though she would categorically state my responsibility and driving position in the project, it always felt like a team effort. I was always able to throw fresh ideas at her and they were never easily dismissed but always discussed.

Conventional Landing page functionality  WHAT doesn’t Multiple affordances, clutter No concrete direction to projects

set 02 wireframe 005 layout 2 column navigation Header sitemap form, preference to text in first column interaction Roll-over reveals project name, .js carousel of selected project (no scroll) browsing Project> Write-up > Image scroll> Next

 WHAT WORKS Strong grid Fixed frame  WHAT doesn’t Navigation format Multiple touchpoints

 WHAT WORKS Use of page width Priority to image  WHAT doesn’t Display work categories

28

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

layout 3 column

— A screenshot from one of our Skype calls

navigation Left column accordion interaction Roll-over, accent hover browsing Project> scroll> read caption > scroll

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

29

Even more Wireframes

set 03 wireframe 001

I was determined to stretch the brief to its limit. I needed to exhaust all possible explorations at this stage. One last set of wireframes needed to shortlist potential structures as well as involve all positive ideas from the previous sets.

— LEFT Began pinning up and analysing each wireframe through notes and posts. They also helped visualising how different pages adapt within a structure ALONGSIDE Feedback notes from the client discussions regarding specific wireframes

key recommendations +left navigation with project listing +tagging images with captions and labels +large image width +separate prImary and secondary navigation

30

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

Split navigation Since there was a clear distinction in hierarchy of the navigation, I decided to split it.

isotope gallery (isotope.metafizzy.co) I returned to the idea of displaying projects on the homeoage using the jQuery isotope framework. It was experimental, fun and entertaining but bot what the website really needed.

project image/splash image The image width here has been roughly sclaed to half the page width.

The image therefore always leads the narration. It sets a context or makes a statement.

project text The project text requires to have a certain voice that can communciate the content. Instead of having a summary text followed by images, I came up with the idea of a bit by bit narrative accompanying every image.

It urges the user to read and guides him/her to digest the process.

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

31

set 03 wireframe 002

HOME page

quick info Small icons that provide instant contact information DOMINANT VISUAL Dedicated central column to work and splash images Split navigation Since there was a clear distinction in hierarchy of the navigation, I decided to split it

project page project overview A short paragraph providing a asummary of the project and necessary credits drop-down By concealing the category listing within a drop-down menu, we assure that a viewer does not have immediate access to browsing choice projects contextual info Captions that provide support the image/provide aditional information with image tags/labels

ABOUT page twitter feed Updates tweets from Turmeric Design introduction A hero text box providing a short introduction to the studio STudio locator A small integrated map to display the location sub-articles Text groups for opportunities, recognition and clients

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

set 03 wireframe 001

HOME page

Split navigation Since there was a clear distinction in hierarchy of the navigation, I decided to split it drop-down By concealing the category listing within a drop-down menu, we assure that a viewer does not have immediate access to browsing choice projects DOMINANT VISUAL Dedicated central column to work and splash images quick info Small icons that provide instant contact information

project page lazy clicking The ‘Next project’ button provides larger affordance to cater to viewers who aren’t looking for any work in particular but just browsing through project sequencing The list in this left column displays selected projecta and shifts vertically downward as viewer moves to the next project contextual info Captions that provide support the image/provide aditional information with image tags/labels

BLOG page label list To sort through posts, labels can be very useful live twitter feed Updates tweets from Turmeric Design Blog text The blog contentwill appear in this column. The big drawback to this is a limit on wordcount. social media links It allows a certain image to be shared on Pinterest or a project to be shared on Facebook or Tweeted about

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

set 03 wireframe 001

combinedly separate navigation Here both the primary navigation ahve been treated separately in terms of affordance as well as their interaction but kept in close proximity and similar position relative to the page DOMINant visual Here the image takes even more space than it has done so far in previous wireframes. i.e: close to 1000px

horizontal thumbnail guide Here I translated the earlier iterated vertical project list to thumbnails along the bottom of the page in a horizontal format. It leaves imagetext content undisturbed as well as allows a synchronisation between the ‘next project’ action and the project slide animation in the list navigation and content In this wireframe, I have tried to connect the primary navigation (work navigation) with it’s content (project list) By aligning to the right it may allow for project text and image to be addresses first.

Wireframe selection After three sets of simultaneous exploration and improvements in the wireframes in the course of discussion, we froze upon two wireframes that we wished to take forward.

 WHY these two wireframes made the cut?

Prioiritised image width Clear project listing Concealed project categories Dynamic wordmark Distinction between content and navigation

vertical listing Here the thumbnail listing has been adapted to a vertcial order, definitely easier to browse throught the list.

32

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

33

fleshing out

My graphic sensibilities were growing increasingly impatient and after all those dry gray wireframes, I found myself eager to jump into the visual design. Having a sound research process and functional study made it easier to sit back and let the right brain have a go. I began trying to flesh out the shortlisted wireframes. This commenced my search through type libraries online.

34

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

35

36

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

37

Responsivity

what is responsive design?

Responsive Web design is the approach that suggests that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. The practice consists of a mix of flexible grids and layouts, images and an intelligent use of CSS media queries. As the user switches from their laptop to iPad, the website should automatically switch to accommodate for resolution, image size and scripting abilities. In other words, the website should have the technology to automatically respond to the user’s preferences. This would eliminate the need for a different design and development phase for each new gadget on the market.

“Recently, an emergent discipline called ‘responsive architecture’ has begun asking how physical spaces can respond to the presence of people passing through them.

Through a combination of embedded robotics and tensile materials, architects are experimenting with art installations and wall structures that bend, flex, and expand as crowds approach them. Motion sensors can be paired with climate control systems to adjust a room’s temperature and ambient lighting as it fills with people.

Companies have already produced ‘smart glass technology’ that can automatically become opaque when a room’s occupants reach a certain density threshold, giving them an additional layer of privacy.”

— IMAGE http://uxdesign.smashingmagazine.com/2012/05/30/ design-process-responsive-age/

–Ethan Marcotte, A List Apart responsive Web design is not only about adjustable screen resolutions and automatically resizable images, but rather about a whole new way of thinking about design.

38

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

http://coding.smashingmagazine. com/2011/01/12/guidelines-for-responsive-web-design/ http://coding.smashingmagazine. com/20

— When a website simply scales to accomodate it’s width within a mobile viewport, the website’s usability is severely compromised

Why was this necessary?

If you have encountered a problem similar to what you see in the image alongside, you should be able to understand what responsive design is doing and why it’s so important.

Also, based on the user study a majority of the target audience would be iPad/iPhone users.

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

39

Responsive Wireframes and Grids iMac

Macbook Pro

iPad

iPhone 4S

Screen resolution in px.

Screen resolution in px.

Screen resolution in px.

Screen resolution in px.

1920 x 1080

1440 x 900

1024 x 768 Landscape 768 x 1024 Portrait

960 x 640 Landscape 640 x 960 Portrait

Pixel density in ppi.

Pixel density in ppi.

Pixel density in ppi.

Pixel density in ppi.

102

110

132

326

Aspect ratio

Aspect ratio

Aspect ratio

Aspect ratio

16:9

16:10

4:3

3:2

Just when I thought the wireframing was over, I have to introduce an extended set that tests the shortlisted ones. Whats interesting about this set though is understanding the usability and affordance factors of each device. http://programmers.stackexchange. com/questions/148721/fluid-vsresponsive-website-developmentquestions http://www.alistapart.com/articles/ switchymclayout

Devices If we wish to align a design to devices across platforms, resolutions and sizes, it seems logical that the first step would be to understand these device’s specifications and functioning.

Alongside is a quick reference table to understand the basis of selecting breakpoints.

40

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

no. of pixels by pixels per inch is equal to no. of inches

liquid vs.responsive

Progressive enhancement

If you create a liquid layout optimized for a maximum width of 1024 pixels—limiting maximum line-lengths for your text to maintain readability— gaps will appear on a wider screens, and your carefully balanced layout will break. On a tinyscreened PDA, your text and images will be compressed into a crowded content sandwich. No designer wants that. If vector-based layouts were technically possible on a wide range of browsers, we could use a single generic layout that looked exactly the same on all screen sizes. Since that’s more fictional than feasible, we have to find another way

Progressive enhancement is an approach to web development that aims to deliver the best possible experience to the widest possible audience — whether your users are viewing your sites on an iPhone, a high-end desktop system, a Kindle, or hearing them on a screenreader, their experience should be as fully featured and functional as possible.

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

41

‘frameless’ : a solution If you love responsive design and layouting and despise fluid grids, then Frameless is a good place to start. The basic concept of a Frameless grid is that you adapt column by column instead of pixel by pixel.

It encourages users to only adapt what is relevant and makes sense to the content and not unecessarily fill up useless pixels when they don’t matter.

http://framelessgrid.com http://lessframework.com

step one Make a regular fixedwidth grid Choose a column width and a gutter width, disregard the number of columns. A smaller column width gives you more flexibility.

step one Make it repeat infinitely Add columns on either side so that no matter how wide you make your viewport , columns are visible.

step one centre it in your viewport Align the grid horizontally to the middle of your viewport. I chose an even number of columns so the axis runs through the center of the guttr between the two centermost columns.

— Ethan Marcotte essentially coined the phrase “responsive web design” with his article by that name in A List Apart back in May of 2010. In his article, Ethan laid out both the problem that is facing us as web designers as well as a very specific method for solving it. He called this method “responsive web design,” and it included three specific tools – fluid grid, flexible images and media queries

explorations Based on the device breakpoints, I divided the responsive layouts into 4 parts.

1. Desktop 2. Default 3. Tablet 4. Mobile They referred to the two selected wireframes and carry forward that structure.

I had not designed the exact grid so these were low-fidelity explorations.

http://www.thismanslife. co.uk/projects/lab/ responsivewireframes/#desktop http://www.designer-daily.com/theuse-of-grids-in-website-design-6639

step one use your grid Set a number of columns for each breakpoint at which your layout adapts. and use those columsn only.

42

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

43

Calculating & Creating a Custom Grid

column width = 36px

calculating The aim was to define a column and gutter width that could fit well horizontally into each of the viewport resolutions.

After creating the sketched wireframes of the different viewport layouts, I had a clear idea of what the grid demanded functionally and how I could achieve it. Overviewing device specifications and frameless system madde it possible to get down to a strong specific grid.

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

vertical baseline spacing= 16px

It began with calculating the lowest common denominator of the horizontal pixel resolution of these devices so that it remains a divisor of the viewport width.

— ABOVE AND ALONGSIDE pages from my notebook

44

gutter width= 16px

— The layout below Desktop resolutions will appear even on a desktop when the browser window is reduced to that viewport breakpoint

— The website therefore does not load a different layout based on the agent ID but on viewport resolution

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

45

Viewport Column distribution

setting As a starting point, I took the resolution of my screen (a 15� MBP) 1440x900px as the standard screen size. The standard measure for my baseline grid was equal to the default 16px=1em for web text setting.

default

second break

third break

fourth break

fifth break

resolution 1440 x 900 px

resolution 1024 x 768 px

resolution 768 x 1024 px

resolution 642 x 800 px

resolution 640 x 960 px

columns 28

columns 20

columns 15

columns 14

columns 3

devices Desktops Laptops

devices Desktops Laptops iPad (landscape)

devices Desktops Laptops iPad (portrait)

devices Desktops Laptops iPad (portrait) Tablets

devices Desktops Laptops iPad/Tablets iPhone

46

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

47

Visual design It feels wrong to label just this last phase of the entire website creation process as just ‘design’ so I have consciously added the word ‘visual’.

This last phase deals with application of typical graphic design skills that I have acquired over through courses such as basic graphic design, typography and colour to create a meaningful visual language that can align well with the brand model and the voice of Turmeric Design.

http://www.smashingmagazine. com/2012/03/27/redesigning-withpersonality/

Typography website manual Very often a graphic designer may undertake a website design project for a client that will be complex in nature.

Things that contribute to the complexity of a website. It may have multiple pages, contain a number of microsites within the site, have a large database or CMS, require much user generated data or require customised pages and therefore page design. In most of these cases, a single Photoshop file cannot contain these details; and even if they do make life very difficult for a developer. A tool that helps organise as well as communicate the design of a website for accurate and easy development is a ‘website manual.’

typography is the foundation of web design

What the web manual does is detail out every pixel of the website and what it’s purpose is. It could be compared to a blueprint for a building. Except in this case, what you see is what you get.

— ABOVE This is what complex sitemaps can look like if the website involves e-commerce, product catalogues, user databases etc. They require a systems approach and ccombined efforts from designer and developer from the start.

Being a portfolio website, the sitemap is not complex and CSS is limited to a single style sheet eliminating the need for a website manual. Instead, this section of the document will detail out the design specifics in a similar manner.

the challenge was to create a visual language that aligned with the brand idea and voice of turmeric design

“Of course typography doesn’t mean font selection. With the advent of @font-face and services such as Typekit, Webtype, Fontdeck, and Google Web fonts, your skills in typography won’t improve. You can easily create wonderful designs with one font for the rest of your life if you choose to—they had to do it centuries ago and they didn’t have Photoshop sticking things to guides for them. If anything, more font selection will make things worse for you because creativity and beauty becomes hard to achieve when more options are given to us.

It’s possible to create a wonderful design without the use of images at all. I know that sounds crazy, but it is possible. I’m not saying it should be done, but if we can create elegance simply with typography and white space, then why shouldn’t we be able to create greatness when we start throwing in images, videos and other effects?”

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

The challenge lied in drawing the distinction between choosing a typeface for print and web. To prevent issues of font purchase and licensing, I decided to constrain the selection to Google webfonts. This meant that the font would not be embedded but read off Googles collection on the fly. This is done by including CSS that refers to Googles collection. This it does with surprisingly low load times and is highly browser compatible which makes it a great tool.

–Paul Scrivens

— ABOVE iA’s website is a cited example from teh post that serves as a good display of what type alone can do for a website

48

Type selection for web is as crucial, if not more, as that for print. At some point, I too thought that form and readability was all that mattered but the web builds some additional constraints and opportunities with it for typography.

http://www.smashingmagazine. com/2012/03/27/redesigning-withpersonality/ http://www.smashingmagazine. com/2012/05/21/how-to-choose-theright-face-for-a-beautiful-body/

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

49

bringing typography to the web Google Web Fonts makes it quick and easy for everyone to use web fonts, including professional designers and developers. Anyone can access it and it’s free of charge.

In three steps you can have your site running on a Google webfont.

1. choose

Search or browse hundreds of font families, then add the ones you like to your Collection.

Bree Serif designer Type Together source open source fonts All of the fonts are Open Source. This means that you are free to share your favorites with friends and colleagues.

You can even customize them for your own use, or collaborate with the original designer to improve them. And you can use them in every way you want, privately or commercially — in print, on your computer, or in your websites.

2. review

Compare and refine your Collection, even see the styles in a dynamic sample layout.

2. use

Grab the code we prepare and you’re ready to add the Collection to your website.

50

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

@font-face @font-face is a css rule which allows you to download a particular font from your server to render a webpage if the user hasn’t got that font installed. This means that web designers will no longer have to adhere to a particular set of “web safe” fonts that the user has pre-installed on their computer.

The basics are pretty simple to implement the @font-face rule, but it is possible to add lots of options to extend its features.

Initially you define the rule, “font-family” is what you want to call the font, “src” is where it can be found, include a “fontweight” (not needed for normal, but required by everything else, bold, thin etc).

Implementing @font-face

www.typetogether.com weights/styles : 1

@font-face { font-family: DeliciousRoman; src:url(http://www.font-face.com/ fonts/delicious/TimesNew-Roman.otf); font-weight:400;

Bree Serif Regular google analytics No. of views 345,456,567 Percentage views 345,456,567

}

..then use it like any other p {font-family: TimesNewRoman, Helvetica, Arial, sans-serif;}

x-height 30pt serif http://blogs.adobe.com/typblography/2010/09/opentype-features-cometo-the-web.html http://ie.microsoft.com/testdrive/ graphics/opentype/opentype-fontbureau/index.html

At Turmeric, we live and breathe design. Our sweet spot is a balance between bottomlineraising logic, endearing details and a consistent voice across touchpoints.

At Turmeric, we live and breathe design. Our sweet spot is a balance between bottomline-raising logic, endearing details and a consistent voice across touchpoints. We bring both our brains and hearts to work, making sure our solutions not only fit, but also create deeper lasting engagements.

We look out for brands as well as their customers. With our love for craftsmanship and care, we like to create art that addresses the soul through small joys, surprise, optimism and sensory delight.

— Bree Serif Regular 16/24pt

— Bree Serif Regular 10/12pt

Turmericburger —Bree Serif Regular 60pt

Assertive Charming Cute

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

51

Signika designer Anna Gedryś source www.font-squirrel.com weights/styles : 4 (.otf)

Signika Light Signika Regular Signika Semibold Signika Bold

At Turmeric, we live and breathe design. Our sweet spot is a balance between bottomline-raising logic, endearing details and a consistent voice across touchpoints.

At Turmeric, we live and breathe design.

Our sweet spot is a balance between bottomline-raising logic, endearing details and a consistent voice across touchpoints. We bring both our brains and hearts to work, making sure our solutions not only fit, but also create deeper lasting engagements. We look out for brands as well as their customers. With our love for craftsmanship and care, we like to create art that addresses the soul through small joys, surprise, optimism and sensory delight.

— Signika 16/24pt

— Signika Regular 10/12pt

At Turmeric, we live and breathe design. Our sweet spot is a balance between bottomline-raising logic, endearing details and a consistent voice across touchpoints. We bring both our brains and hearts to work, making sure our solutions not only fit, but also create deeper lasting engagements.

google analytics No. of views 677,147,830 Percentage views 3942%

— Signika Small Caps 10/12pt

x-height 30pt sans-serif

Turmericburger

Lato

At Turmeric, we live and breathe design. Our sweet spot is a balance between bottomline-raising logic, endearing details and a consistent voice across touchpoints.

We bring both our brains and hearts to work.

designer Łukasz Dziedzic source www.font-squirrel.com weights/styles : 10 (.otf)

Lato Hairline Lato Hairline Italic Lato Light Lato Light Italic Lato Regular Lato Italic Lato Bold Lato Bold Italic Lato Black Lato Black Italic

— Lato 16/24pt

Romantic

52

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

We look out for brands as well as their customers. With our love for craftsmanship and care, we like to create art that addresses the soul through small joys, surprise, optimism and sensory delight.

Contemporary Stable Serious

google analytics No. of views 4,217,616,431 Percentage views 582%

x-height 25pt serif

Flexible

We look out for brands as well as their customers. With our love for craftsmanship and care, we like to create art that addresses the soul through small joys, surprise, optimism and sensory delight.

— Lato Bold 9/12pt

— Lato Regular 11/12pt

—Bree Serif Regular 60pt

Soft

At Turmeric, we live and breathe design. Our sweet spot is a balance between bottomline-raising logic, endearing details and a consistent voice across touchpoints. We bring both our brains and hearts to work, making sure our solutions not only fit, but also create deeper lasting engagements.

— Lato Light 9/12pt

Turmericburger —Lato Regular 60pt

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

53

Rosario designer Omnibus Type source www.font-squirrel.com weights/styles : 4 (.otf)

Rosario Regular Rosario Italic Rosario Bold Rosario Bold Italic

No. of views 267,654,179 Percentage views -9%

— Rosario 16/24pt

— Rosario Regular 10/12pt

— Rosario Small Caps 10/12pt

Elegant Subtle

At Turmeric, we live and breathe design.

Our sweet spot is a balance between bottomline-raising logic, endearing details and a consistent voice across touchpoints. We bring both our brains and hearts to work, making sure our solutions not only fit, but also create deeper lasting engagements. We look out for brands as well as their customers. With our love for craftsmanship and care, we like to create art that addresses the soul through small joys, surprise, optimism and sensory delight.

A t T u r m e r i c , w e l i v e a n d b r e at h e d e s i g n . O u r s w e e t s p o t i s a ba l a n c e b e t w e e n b o t t o m l i n e - r a i s i n g l o g i c , e n d e a r i n g d e ta i l s a n d a c o n s i s t e n t v o i c e ac r o s s t o u c h p o i n t s . W e b r i n g b ot h o u r b ra i n s a n d h e a rt s to w o r k , m a k i n g s u r e o u r s o l u t i o n s n ot o n l y f i t , b u t a l s o c r e at e d e e p e r l a s t i n g e n g a g e m e n t s .

google analytics

Balanced

At Turmeric, we live and breathe design. Our sweet spot is a balance between bottomline-raising logic, endearing details and a consistent voice across touchpoints.

x-height 30pt sans-serif

Droid Serif designer Steve Matteson source www.font-squirrel.com weights/styles : 4 (.0tf)

Droid Serif Regular Droid Serif Italic Droid Serif Bold Droid Serif Bold Italic google analytics No. of views 382,384,083 Percentage views 19%

Turmericburger

— Rosario Bold 60pt

Crafty Respectable Trusted

54

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

At Turmeric, we live and breathe design.

Our sweet spot is a balance between bottomline-raising logic, endearing details and a consistent voice across touchpoints. We bring both our brains and hearts to work.

— Neuton 16/24pt

x-height 25pt serif

At Turmeric, we live and breathe design.

Our sweet spot is a balance between bottomline-raising logic, endearing details and a consistent voice across touchpoints. We bring both our brains and hearts to work, making sure our solutions not only fit, but also create deeper lasting engagements.

— Droid Serif Regular 8/12pt We look out for brands as well as their customers. With our love for craftsmanship and care, we like to create art that addresses the soul through small joys, surprise, optimism and sensory delight.

— Droid Serif Bold 8/12pt We look out for brands as well as their customers. With our love for craftsmanship and care, we like to create art that addresses the soul through small joys, surprise, optimism and sensory delight.

— Droid Serif Italic 9/12pt

Turmericburger —Droid Serif Regular 60pt

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

55

Ubuntu x-height 25pt sans serif

designer Dalton Maag

Turmericburger

designer Brian Zick

x-height 25pt serif

source

source www.font-squirrel.com

—Ubuntu Medium 60pt

www.font-squirrel.com

Ubuntu Light Ubuntu Light Italic Ubuntu Regular Ubuntu Italic Ubuntu Medium Ubuntu Medium Italic Ubuntu Bold Ubuntu Bold Italic google analytics No. of views 5,796,696,590 Percentage views 270%

Formal Economical Classy

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

Turmericburger —Neuton Regular 60pt

weights/styles : 6 (.ttf)

weights/styles : 8 (.ttf)

56

Neuton

At Turmeric, we live and breathe design. Our sweet spot is a balance between bottomline-raising logic, endearing details and a consistent voice across touchpoints. We bring both our brains and hearts to work.

— Ubuntu 16/24pt

At Turmeric, we live and breathe design. Our sweet spot is a balance between bottomlineraising logic, endearing details and a consistent voice across touchpoints. We bring both our brains and hearts to work, making sure our solutions not only fit, but also create deeper lasting engagements.

— Ubuntu Light 9/12pt

Neuton ExtraLight Neuton Light Neuton Regular Neuton Italic Neuton Bold Neuton ExtraBold

We look out for brands as well as their customers. With our love for craftsmanship and care, we like to create art that addresses the soul through small joys, surprise, optimism and sensory delight.

— Ubuntu Bold 9/12pt

google analytics

We look out for brands as well as their customers. With our love for craftsmanship and care, we like to create art that addresses the soul through small joys, surprise, optimism and sensory delight.

— Ubuntu Regular 11/12pt

No. of views 382,384,083 Percentage views 19%

Formal Economical Classy

At Turmeric, we live and breathe design. Our sweet spot is a balance between bottomline-raising logic, endearing details and a consistent voice across touchpoints. We bring both our brains and hearts to work.

— Neuton 16/24pt

At Turmeric, we live and breathe design. Our sweet spot is a balance between bottomlineraising logic, endearing details and a consistent voice across touchpoints. We bring both our brains and hearts to work, making sure our solutions not only fit, but also create deeper lasting engagements.

— Neuton Light 10/12pt

We look out for brands as well as their customers. With our love for craftsmanship and care, we like to create art that addresses the soul through small joys, surprise, optimism and sensory delight.

— Neuton Regular 11.5/12pt

We look out for brands as well as their customers. With our love for craftsmanship and care, we like to create art that addresses the soul through small joys, surprise, optimism and sensory delight.

— Neuton Regular 13/12pt

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

57

Droid Sans x-height 25pt sans serif

designer Steve Matteson

Turmericburger

source www.font-squirrel.com

—Droid Sans Regular 60pt

Neuton

Quick word on hinting

Ubuntu

Hinting, or screen optimising, is the process by which fonts are adjusted for maximum readability on computer monitors.

weights/styles : 2 (.0tf)

Droid Sans Regular Droid Sans Bold google analytics No. of views 18,248,639,756 Percentage views 78%

Factual Consistent Restrained

At Turmeric, we live and breathe design. Our sweet spot is a balance between bottomlineraising logic, endearing details and a consistent voice across touchpoints.

We bring both our brains and hearts to work.

— Droid Sans 16/24pt

At Turmeric, we live and breathe design.

Our sweet spot is a balance between bottomline-raising logic, endearing details and a consistent voice across touchpoints.

We bring both our brains and hearts to work, making sure our solutions not only fit, but also create deeper lasting engagements.

The problem is that typical modern fonts are not designed primarily for the 72–96 dpi resolution of computer screens, but for the much higher 1,200+ dpi resolution of print media. The letterforms are designed and stored as outlines, mathematically perfect lines and curves which look great at high resolutions, but can be distorted or even illegible when converted into groups of pixels, the on-or-off dots that make up a computer’s display. And although there has been much discussion about high-definition computer monitors for decades, the fact of the matter is that my 5 year old mobile phone still takes photos with finer detail than my brand new computer can show on its screen.

Droid serif

—Droid Sans 9/12pt We look out for brands as well as their customers. With our love for craftsmanship and care, we like to create art that addresses the soul through small joys, surprise, optimism and sensory delight.

— Droid Sans Bold 9/12pt

Droid sans

we look out for brands as well as

their customers . with our love for craftsmanship and care , we like to create art that addresses the soul

lato

http://www.typotheque.com/ articles/hinting

through small joys , surprise , optimism and sensory delight

.

— Droid Sans Bold Small Caps 11/12pt All the above have been set in 30px, Regular weight with default tracking. One can see the comparative character widths and and line lengths.

58

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

59

As Soloren Imoditaquis Duo conse eossimpore deliquias es ea nonsequas eos molluptatem quuntur estrum il esti a volore a core dolori aborepella volupta estrum fugit mo int et harions entium quam, imenis consequiam re maior re quae volorrorest, autam alitiati si bero vollaut acipsum int videl moditictatur, volorit ero conecat parianist. videl moditin ctatur, volorit ero conecat parianist.

c r ed i t s

Ulles magniminum nam Quo conse eossimpore deliquias es ea nonsequas eos molluptatem quuntur estrum il esti a volore a core dolori aborepella volupta estrum fugit mo int et harions entium quam, imenis consequiam re maior re quae volorrorest, autam alitiati si bero vollaut acipsum int videl moditin ctatur, volorit ero conecat parianist, et repuda voluptibus samenda aut preptin venissitatus ea dolupta volore perio.

Ulles magniminum nam Quo conse eossimpore deliquias es ea nonsequas eos molluptatem quuntur estrum il esti a volore a core dolori aborepella volupta estrum fugit mo int et harions entium quam, imenis consequiam re maior re quae volorrorest, autam alitiati si bero vollaut acipsum int videl moditin ctatur, volorit ero conecat parianist, et repuda voluptibus samenda aut preptin venissitatus ea dolupta volore perio.

Heading Rosario Bold 16pt Tracking 10 100% black Body Droid Serif 12pt Tracking 5 80% black Subhead Rosario Bold 14pt Small caps 100% black

Heading Signika S.Bold 18pt Tracking 0 100% black Body Signika Reg 14pt Tracking 5 80% black

Heading Ubuntu Med 16pt Tracking Optical 100% black Body Ubuntu Reg 12pt Tracking Optical 100% black Subhead Ubuntu Bold 12pt 100% black

Quo conse eossimpore deliquias es ea nonsequas eos molluptatem quuntur estrum il esti a volore a core dolori aborepella volupta estrum fugit mo int et harions entium quam, imenis consequiam re maior re quae volorrorest, autam alitiati si bero vollaut acipsum int videl moditin ctatur, volorit ero conecat parianist, et repuda voluptibus samenda aut preptin venissitatus ea dolupta volore perio.

Duo conse eossimpore deliquias es ea nonsequas eos molluptatem quuntur estrum il esti a volore a core dolori aborepella volupta estrum fugit mo int et harions entium quam, imenis consequiam re maior re quae volorrorest, autam alitiati si bero vollaut acipsum. videl moditin ctatur, esti a volor esti a volore a core dolori aborepella volupta entium

cred it s

Ulles magniminum nam Quo conse eossimpore deliquiases ea nonsequas eos molluptatem quuntur estrum il esti a volore a core dolori aborepella volupta estr um fugitmo int et harions entium quam, imenis consequiam re maior re quae volo rrorest, autam alitiati si bero vollaut acipsum int videl modit in ctatur, volorit ero conecat parianist, repuda voluptibus samenda aut prep tin venissitatus.

Ulles magniminum nam Quo conse eossimpore deliquias es ea nonsequas eos molluptatem quuntur estrum il esti a volore a core dolori aborepella volupta estrum fugit mo int et harions entium quam, imenis consequiam re maior re quae volorrorest, autam alitiati si bero vollaut acipsum int videl moditin ctatur, volorit ero conecat parianist, et repuda voluptibus samenda.

Heading Lato Bold 16pt Tracking 10 100% black Body Lato regular 12pt Tracking 15 80% black Subhead Lato Bold 14pt Small caps 100% black

Heading Droid Serif Reg 14pt Tracking 0 80% black Body Droid Sans Reg 12pt Tracking 0 80% black

Heading Ubuntu Lt 16pt All Caps Tracking 0 100% black Body Fjord 13pt Tracking 0 100% black Subhead Ubuntu Med 13pt 100% black

Credits exces eumqui dolupta tures

Credits exces eumqui dolupta turessit, dit, se deles aceaqui squunt adi.

As Soloren Imoditaquis

As Soloren Imoditaquis

sit, dit, se deles aceaqui squunt adi.

Heading Fjord 18pt Tracking Optical 100% black Body Rosario Reg 14pt Tracking Optical 80% black

As Soloren Imoditaquis Quo conse eossimpore deliquias es ea nonsequas eos molluptatem quuntur estrum il esti a volore a core dolori aborepella volupta estrum fugit mo int et harions entium quam, imenis consequiam re maior re quae volorrorest, autam alitiati si bero vollaut acipsum int videl moditin ctatur, volorit ero conecat parianist, et repuda voluptibus samenda aut preptin.

Heading Droid Sans 16pt Tracking Optical 100% black Body Droid Serif Reg 12pt Tracking 0 80% black

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

Taking a pick Deciding what typeface to pick was not just a question of choosing something that had the ‘look’ , but also extended to functional factors. emotion The form would need to complement the emotion of a business-like and respectable tone yet have a hint of craft to it. It had to hold the business dialogue and yet have something intrinsically astute.

popularity vs. reliability

type in tandem I did not wish to discount the possibilty of having different fonts work in combination.

This can be a very good idea to achieve visual interest. There are a number of ways to make an approporaite selection.

If the voice of your content is very bold and outspoken, I would try to contrast a heavy more decorative title font with a subtle matter-of-fact light body text. Or if the content is more conservative you might pair cousins of a serif/sans family and manipulate weight and style to achieve a nice compositional rhythm.

compatability Since I wanted the website to perform across devices, I need to make sure that the type could adapt and reproduces well on multiple screen resolutions.

When I reviewed the Google Analytics for these fonts, I decided that it was not about identifying and weighing the popular fonts, or fonts that were showing peaking hits.

So as a criteria, I looked out for consistent performing fonts that were supported by larger platforms and operating systems.

flexibility of tone The selected font family would need some amount of versatility to justify the varied voices within your publication. A sufficient number of weights and styles is assuring.

60

S

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

http://www.smashingmagazine.com/2012/05/21/howto-choose-the-right-facefor-a-beautiful-body/

some guidelines on type selection

The Serif typeface extends a formal tone, class and grace to the text it embodies.

The Sans typeface extends factuality, assertiveness and consistency to the text it embodies.

1. legibility A typeface with conventional letterfrorms, generous spacing and tall x-height 2. readability Communication comes before style. Choose a typeface designed specifically for the purpose, left aligned and right ragged paragraphs read well nd avoid rivers, make sure leading is generous

droid family Droid Serif and Droid Sans designed by Steve Matteson, Type Director of Ascender Corp. for Google Android platform. Vertical stress, sturdy serifs and open forms contribute to the readability of Droid Serif while its proportion and overall design complement its companion Droid Sans. Primarily designed for comfortable screen reading.

fluid rooted savvy

cultured

3. intent/mood Assocaite attributes to the typeface to validate appropriateness

Informed

4. hierarchy Test how the typeface can work on sample style sheets to establish good hierarachy — ALONGSIDE Graphs show Webfont analytics for populatity rating of the Droid font family. These two fonts have grown steadily in usage and consistently performed over the past one year.

Arty

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

61

Layout This describes the layout of the website with specific pixel dimensions and distribution of space withing the grid column distribution The distribution of columns changes with each device. I began executing the design files for my screen size i.e: 1440x900 px, laptop screen.

4 col

COLUMN 1 NAVIGATION COLUMN 2 TEXT

3 col

COLUMN 3 IMAGE

244 px 5 col

296 px 6 col

868 px 17 col

148 px 3 col

494 px 9 col 642 px 12 col

1440 px 28 col

62

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

— NOTE These diagrams are not to scale

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

63

244 px 5 col

296 px 6 col

868 px 17 col

1920 px 40 col

192 px 4 col

816 px 16 col

1024 px 20 col 192 px 4 col

556 px 11 col 768 px 15 col

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

Delhi Stint As the project was nearing completion, Kriti and I both felt the need for a face-toface meeting that would help us take content as as well as design-related decisions quickly and more easily. For a period of 5 days, I made a trip to the studio in New Delhi where work was discussed alongside developer meetings and friendly banter. Kriti was nice enough to accomodate me within the studio set-up It was a nice break and intense work wrap-up.

64

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

65

— CLOCKWISE FROM LEFT are images from the work setup at the studio

Visual language

PANEL While exploring different visual treatments, an objective description of each option by weighing it’s pros and cons can help one come to a favourable decision. So I tagged each of the options.

I think this stage of web design is what most clients assume they pay graphic designers for. And I would like to take this opportunity to correct that perception. Creating a strong, flexible layout and a memorable visual language for the website is the most graphic task but they would be meaningless without the decisions that precede this step.

MONGA MADAM Kriti being extremely busy would leave me with brainspace during the day. She would drop by and provide feedback and suggestions on what was done and inform the situation with practicality. We would also use this time to update the schedule and task list.

WORKSPACE I moved to the iMac in the studio. It gave me some much needed breathing room and tested the design on a 1920x1080px screen. I would eat and sleep in the same room.

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

Liberal use of colour Rectangular shapes

— Heavy colour

Why was this necessary?

The key question posed in creating a visual language was ‘what would make the site memorable is the mind of the visitor?’ It needed to be a tool that extended the brand model and spoke as Turmeric would.

66

— Overlapping text, images and background

Highlighted sections Colourful, expressive

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

67

— TOP LEFT

— LEFT

— ABOVE

Bright header

Use of neutral greys

Headline type

Navigation to description to image Breathing space

Less colour

Hand-done logo image

Very bold type

Project ticker

Vertcial rhythm

Scroll design

— TOP LEFT

— LEFT

— ABOVE

Over minimal design

Solid header to establish width

Storytelling method

Navigation to description to image

Use of typographic paragraph rules

Image dominant

Bold type Subtle grey background

The treatment of the website was something worked upon towards the end of the project. After fleshing out the wireframes with respect to typography and layout, I attempted some explorations in use of colour and image. This was to create a visual intricacy and uniqueness in the representation. The brief did specify a minimalistic language so I avoided elaborate layering of meaning. The idea of introducing graphic element was an addition to the overall experience to make it more memorable.

68

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

69

— ALONGSIDE is the selected design treatment. flexible layout What this organisation did was create a content allocation system that could easily adapt in the multiple resolution for devices. typographic style The number of typographic styles used withing the stylesheet are exactly as many as that which are essential and demanded by the content’s voice.

Features

INFO TICKER Bits of information that convey something about the studio and it’s culture

Macbook 15” Project page

DYNAMIC WORDMARK The logo space would be a typographic image that keeps changing at a desired frequency.

HEADER Contains secondary navigation touchpoints like contact, about, shop and social media links

LISTED NAVIGATION A simple list that underlines the project that is being presently viewed

space The design directs a viewer throught the browser space from left to right. The white provides sufficient breathing space for the heavy imagery. symbolism By adding layers within the existing turmeric yellow in the header, the design suggests a complany with multidimensional skills and approaches

70

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

IMAGE SCROLL COLUMN CONTEXTUAL TEXTBOX Make the user read just one section at a time that narrates the process behind a project

A set of right columns dedicated to image that creates a scroll within the browser

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

71

ALONGSIDE design responsive on 1920x1080px widescreen

IMAGES ON THE WEBSITE

LEFT TO RIGHT

All images would be of a fixed width.

When updating the website, one or two images maybe composed within that fixed width only. These images scale in response to device.

_1024x768px on iPad in portrait and landscape orientation _960x640px on iPhone 4S in portrait and landscape orientation

Turmeric Design

Smokehouse Room

›

Smoke House Room is an experimental, innovative fine dining restaurant in New Delhi, featuring cutting edge cooking techniques and ultra contemporary interiors. interior design

The Busride, Mumbai photography

The Busride, Mumbai

Turmeric Design

Smokehouse Room

72

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

›

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

73

d e s i g n f e at u r e s

d e s i g n f e at u r e s

About page

Contact page

impact statement

banner IMAGE

The about page is headed by a hero text that sets a tone to address the viewer.

This image can be anything from around the studio– people, objects, activity images etc. Text of 4-5 words is left aligned over the image.

short descriptive text This block that follows the opening statement is a short paragraph on Turmeric’s appraoch, beliefs and cultural practices.

column text Contact information like postal address, e-mail address, phone/fax no. is set in multiple columns below the banner image.

image This image can be anything from around the studio– people, objects, activity images etc. They must not be typeset or arresting graphics but sober and light.

instant page load Instead of initiating fresh page loads whn clicking on each page within the secondary information, Ajax feature allow us to change content within the main section without refreshing the page while mainytaning a unique page URL. Set in Droid Sans 16pt / Bold Small caps

Droid Serif 24pt / Italic Tracking -25

Droid Serif 12pt / Regular Tracking 10

74

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

Image width 816px

Droid Sans 14pt / Reg Small caps

Max. height 512px

Logo frame Max. 172x80px

Icon frame 25x25px

Image width 1128px Max. height 400px

Droid Serif 12pt / Regular Tracking 10

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

75

d e s i g n f e at u r e s

d e s i g n f e at u r e s

Team page

Client page

profile thumbnail

company thumbnail

The profile thumbnail of the team member can be any image that the individual desires cropped to the mentioned size.

It could be a portrait photograph, edited image, artwork or even abstract imagery.

This image should contain the respective company’s logo or trademark.

The image must be tightly cropped as indicated in the examples and maintained at a rotated angle of 22 degrees.

Name and description

title and descriptive text

The name and designation are stated followed by a short paragraph of 20-25 words on the individual written in third person.

The title is the company’s name folled by a line that indicates the industry/field to which it belongs. eg. Coca-Cola, Food and Beverage.

links These links may be ‘Mail to’s’ or links to Twitter/Pinterest/ Facebook/blog account pages.

Profile thumbnail 88x144px

Name Droid Serif 16pt / Bold Designation Droid Sans 14pt / Reg / SC Tracking 120 Description Droid Serif 11pt / Bold Tracking 10

76

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

Right-most column clicks to take viewer to next page on the navigation list

Droid Sans 14pt / Reg Small caps

Icon frame 25x25px

Image width 1128px Max. height 400px

Droid Serif 12pt / Regular Tracking 10

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

77

d e s i g n f e at u r e s

d e s i g n f e at u r e s

Press page

Shop page

impact statement

This section is to sell merchandise material online. It contains two pages– a gallery page and a product page as shown above.

The recognition or press page is headed by a hero text that sets a tone to address the viewer.

Image size 296x288px

3-column image grid supported by product name, description and price.

short descriptive text This block that follows the opening statement is an overview of the nature of recognition Turmeric has received. 30-40 words in length. image collage The main column is a collage-like-grid of cover images/logo of the press house which gives an idea of the covergae received.

Droid Serif 24pt / Italic Tracking -25

Droid Serif 12pt / Regular Tracking 10

78

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

Image size 1 494x242px landscape Image size 2 300x370px portrait

Upon hover reveal name of publisher and date of publishing. Upon click, viewer is directed to original article

A navigation list of different categories of products

Product image with thumbnails of alternate views

Product details and specification selection + Add to cart button

‘My Cart’ pop out, reveals items in cart to proceed to checkout

H!

S FRE

Indicators on status of product i.e: sale, fast selling, unavailable

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

79

Land and browse projects

  › 







user views image and scrolls or clicks next arrow on extreme right column

reads project title and one or two lines of the summary text



scrolls down. as lower image appears, text box content changes



browses through list of projects on left navigation column

Categories and social media







user views project and clicks on category header in left navigation



animation releases the NAVIGATION MENU TO REVEAL ALL CATEGORIES



USER SELECTS A CATEGORY





browse project and share via facebook, twitter or pintererst

navigation refreshes and lists filtered projects belonging to that category

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

Typographic Styles This describes the heading styles created and used through the website. it serves as a guide for any future content/ design updates that maybe necessary in the future.

Developer notes h1/ droid serif/ 24pt/ italic

Turmeric Design

h2/ droid serif/ 16pt/ bold

Project Title, one that may even flow into two lines

h3/ droid sans/ 16pt/ bold/ sml cps

branding spaces illustration packaging print web

h4/ droid serif/ 12pt/ reg

h5/ droid sans/ 14pt/ reg/ sml cps

Smoke House Room is an experimental, innovative fine dining restaurant in New Delhi, featuring cutting edge cooking techniques and ultra contemporary interiors. Paragraph one.

+spaces +print +branding

interior design

+packaging

The development of the website is being handled by an experienced UX professional named Mr.Chiranjeev Singh. He is based in New Delhi and was introduced to me by Kriti. We met on my trip to Delhi during whick we discussed the designs and charted a course of execution.

responsivity Kriti and I introduced Chiranjeev to our plan of executing a responsive website. He had not previously attempted such a design so I pulled out some articles and blog posts that I referred to inititate an understanding. psd files I was compiling all my designs in Adobe Indesign because of it’s superior utility for layouting and type setting. Photoshop, however, remains a web industry standard. interactions To explain interactions that we were looking for in the design, I quickly created some video clips in Adobe Ae which demonstrated these actions. front-end first Mr. Chiranjeev suggested that we commence the process with front-end development. Once the interactions and visual design is finalised, we can develop the back-end functionality. blog

h6/ droid sans/ 12pt/ reg

80

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

Ut Occusandae Is Dolo Volut As Soloren Imoditaquis Qui Ium Natur, Conse Non Plaut

We did not work on a custom design for the blog. The existing one was fairly consistent with our design and just needed some tweaking. Since Mr. Chiranjeev was already running the Turmeric blog, we decided to allow changes in the CSS sheet rather than re-writing the HTML.

– A sample screenshot of the video clips I created to demonstrate interactions

STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

81