The Haldi Project

Studio 2 Haldi ProjectSponSor Turmeric Design Pvt. Ltd. New Delhi

Student Reuben DSilva

programme/year Undergraduate Graphic Design2009–2010

project co-ordinator & guide Rupesh VyasCo-ordinator, Graphic DesignHead, 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.

2 STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

Thank YouKriti 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.

Rupesh Vyas, co-ordinator of graphic design at nid, served as my project co-ordinator and guide for the project.

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.

05 ProposalpurpoSe

Solution

proceSS outline

06 AnalysisquicK Recon 06

State of flux

BuSineSS viSion

Style & culture

DiScoVeRinG TuRMeRic 08

bRAnD MoDel 10

introduction

caSe Study

THe TuRMeRic MoDel 12

14 WebsiteuSeR PeRSonAS 15

profile

requirementS

roleS

cASe STuDieS 16

deSign prioritieS

caSe StudieS

WiRefRAMe 20

what iS a

Sitemap

low fidelity

ADVAnceD WiRefRAMe 22

MoRe WiRefRAMeS 26

eVen MoRe WiRefRAMeS 30

Selected wireframeS

38 Responsivityconcept of

deviceS

reSponSive wireframe+grid

‘frameleSS’

explorationS

48 DesignTYPoGRAPHY 49

type optionS

hinting

taking a pick

lAYouT 62

ViSuAl lAnGuAGe 67

DeSiGn feATuReS 71

adaptationS

aBout page

contact page

team page

client page

preSS page

Shop page

SAMPle WAlKTHRouGH 86

developer noteS

—

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

this icon has been used to compile a contextual bibli-ography through the course of the document. it points to links and useful references

4 STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012 5STUDIO TWO : HALDI PROJECT / REUBEN DSILVA / 2012

ProposalPuRPoSe

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.

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.

PRoceSS ouTline

¶ Phase 1: Digging in

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.

¶ Phase 3: Final Design and Execution

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 comple-tion 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 frame-work within which one can define a problem space and possible solution.

“ 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

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

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

A STYle

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 func-tional, clean and organised, but elegant and fitting for a design studio.

WoRK culTuRe

key words that define the turmeric brand value: imagination, joy/ happiness, mean-ing, action/ energy/ enthusiasm, soul.


Quick ReconA 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

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 contri-bution to the project. clients from hospi-tality and boutique brands are popular.

—Turmeric’s brand language should not be defined by my (Kriti’s) work or current time, but contain it.

Image credit: Turmeric Design Facebook page


Discovering TurmericTHe 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 percep-tion of turmeric, it’s interaction and work style,ambitions and present scenario.

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

—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 col-laborative effort on projects that extended to working closely with professionals ranging from architects, chefs, film makers and managers. I think this ope-ness was refreshing as well as inspiring for any design studio.

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.


zARA: A cASe STuDY

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.

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-actualisa-tion (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.

—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.

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

PHYSique the external physical image

PeRSonAliTY company’s percep-tion of itself

culTuRevalues that affect behaviour

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

ReflecTionour idealised customer

RelATionSHiP interaction with customer

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

funcTion what defines the organisation

DiffeRenceS what makes you different

PeRSonAliTY what other’s see in your organisation

culTuReinternal values that affect behaviour


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.

1. http://www.slideshare.net/nitin59/kapferer-model-brand-identity-prism-presentation

2. http://culturalfuel.net/tag/brand-planning/

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

Brand ModelinTRoDucTion

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.


The Turmeric ModelWoRDPlAY

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.

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.

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.

brand new

—Alongside are screenshots from the video clip pro-duced that illustrate the process. It was a spontaneous ex-ercise and welcome experimentation in stop motion using After Effects


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.


WebsiteTill 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

What exactly do we wish to say?

turmeric design, so far, did not possess an official website. a couple of months into my project, they did post a single-page 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.

WebSiTe AS STRATeGY

How does it connect things?

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.

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

User Personasthrough 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 oppor-tunity 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.

DeSiGn PRioRiTY

What is important to it’s functioning?

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.

THe lAzY clicKeR

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 uninter-rupted viewing experience.

priority

need

message

response

clients

1

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

BUSINESS ADVISORWe mean business and bring together function, emotive involvement and craft to make your business more effective

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

collaborators

2

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

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

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

To-be-employee

3

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

COOL BOSS We’re energetic, exciting and open to work with We love side projects and food/travel excursions. We’re not only an illustra-tion studio.

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

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


Case studiesThere’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.

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

bRoWSinG opens with featured work images of a thumbnail gallery. view the project upon clicking by vertically scrolling 4-5 images per project.

lAYouTfour column, mixed

TReATMenT use of neutral shades namely greys, some amount of texture, watermark image on each project, projct descriptions are very uninviting

TecHnoloGYBuilt using .php

nAViGATion primary between project categories Secondary between work, thoughts, resources, about and shop

inTeRAcTion thumbnail enlargement upon hover, simple orange highlight over text, subtle

bRoWSinG opens a scroll, thumbnail gallery, tightly cropped feature images, social media sharing

lAYouTStrong grid/ two-column

TReATMenT customisable schemes– teen girl, swiss, regular, well written person-alized copy

TecHnoloGYBuilt in html5, responsive design

cASe STuDY 1 | www.deSignStack.comcASe STuDY 2 | www.jeSSicahiSche.iS

—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


cASe STuDY 3 | www.moxieSoZo.comcASe STuDY 4 | www.wemakedeSign.com

lAYouTheader bar, Single column viewing

nAViGATion interesting but confusing horizontal-vertical cross between two navigations

inTeRAcTion high-end work reduced to image thumbnails, 5 per row, persistent naviga-tion bar

bRoWSinG long grid, click thumbnails to view project images, preachful opening type and long paragraph block

TReATMenT dark scheme with serifs on black back-ground make for hard reading, square-cropped images, image to text ratio is very low

TecHnoloGYBuilt in php, unresponsive design

—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-it-or-leave-it project displays. Very powerful, high profile work but don’t seem too interested in sharing process

lAYouTheader+three colum distribution

nAViGATion Single primary navigation, exhaustive client list in right column

inTeRAcTion accent colour hover, opacity roll-over 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 Super white minimalistic, restrained use of type, singular iconographic feature images fit in a 4-column grid

TecHnoloGYno resolution adaptability

—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–

pentagramdavid-aireydoylepartnerSBrucemaudeSign


WireframeWireframing 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.

SiTeMAP

the sitemap describes the organisa-tion 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 typogra-phy. more specifically– identity & branding, print & packaging, editorial & books, spaces, interactive, commis-sioned art

3.About team + Social media links + contact + press/ recommendations + Select client list

4.blog

5.Store


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.

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

loW fiDeliTY WiRefRAMeS

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 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 af-ter I had submitted the proposal


SeT 01wireframe 002

SeT 01wireframe 003

SeT 01 wireframe 001Advanced WireframeHiGH fiDeliTY

these are more developed wireframes in two respects– 1. they take into considera-tion 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 specifica-tions 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-wire-framing-resources/

http://uxdesign.smashingmagazine.com/2012/08/29/beyond-wirefram-ing-real-life-ux-design-process/

lAYouTcollage structure, mason grid, full width

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

inTeRAcTion roll-over reveals alternate thumbnail images for each project

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

TecHnoloGYBuilt using a .js script called isotope (isotope.metafizzy.co) it allows a number of configurations for fluid grid layout with slick animations

lAYouT960px adjustable width, full screen imagery

nAViGATion header provides category naviga-tion, alternately project thumbnails take viewer straight to project page, secondary navigation strongly de-emphasised

inTeRAcTion roll-over reveals project name, .js slideshow

bRoWSinG home> category/project > next project

lAYouT960px adjustable width

nAViGATion conventional tab-based navigation for secondary navigation, Sub-tabs for work categories

inTeRAcTion custom scroller, browse projects one after the other

bRoWSinG home> project > next project

WHAT WORKS

Use of page width

Visual approach

Bold and upfront

WHAT dOeSn’T

No direct access to work

Strong focus on work categories

WHAT WORKS

Adaptable width within LESS framework

Simple, conventional interaction

WHAT dOeSn’T

Limited image space

Custom scroll


SeT 01 wireframe 006SeT 01wireframe 004

SeT 01wireframe 005

PRoceSS Tool

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.

http://www.balsamiq.com/

lAYouThorizontal scroll similar to pentagram.com

nAViGATion drop-down menus, scroll hori-zontally through image gallery to choose a project, custom scroll

inTeRAcTion Scroll momentum, fade in/out navigation

bRoWSinG home> work category> project

lAYouTtwo-column

nAViGATion listed categories, carousel supported by project thumbnails below, mixed content

inTeRAcTion roll-over, accent hover

bRoWSinG category> project

WHAT WORKS

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 navi-gation may be slightly confusing

lAYouTexperimental 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

TecHnoloGYusing a .js script for navigation, html5

WHAT WORKS

Playful

Clear

WHAT dOeSn’T

Uunconventional navigation

Multiple steps to view a project


More WireframesOne 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.

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

SeT 02 wireframe 001



lAYouTflexible, golden-ratio

nAViGATion top header, sitemap display, category by column


bRoWSinG directly to select project> next project

KeY SuGGeSTionS AnD focuS PoinTS

+more viSual

+over-arching focuS on work and proceSS

+continuity in BrowSing experience

+guide the viewer By creating fewer affordanceS

lAYouT3 column

nAViGATion left column, project listing


bRoWSinG directly to select project> next project

lAYouT3 column

nAViGATion left column, project listing (tried to suggest a two column approach for listing to accomodate work catego-ries above the page fold

inTeRAcTion roll-over reveals project name, .js project slider

bRoWSinG project > next project

WHAT WORKS

Direct to work

Optimised real estate

Easy browsing. ref. lazy clicker

WHAT dOeSn’T

Adaptability of width

Access to work categories

WHAT WORKS

As mentioned for 002

WHAT dOeSn’T

As mentioned for 002

WHAT WORKS

Use of page width

Priority to image

WHAT dOeSn’T

Focus on work categories

Grid variations




lAYouT3 column

nAViGATion accordion, thumbnails for featured projects with twitter feed

inTeRAcTion open/close accordion

bRoWSinG home> Select project home> open navigation> select category project

lAYouT2 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

Conventional

Landing page functionality

WHAT dOeSn’T

Multiple affordances, clutter

No concrete direction to projects

WHAT WORKS

Strong grid

Fixed frame

WHAT dOeSn’T

Navigation format

Multiple touchpoints


lAYouT3 column

nAViGATion left column accordion


bRoWSinG project> scroll> read caption > scroll

WHAT WORKS

Use of page width

Priority to image

WHAT dOeSn’T

Display work categories

DeSiGninG foR A DeSiGn STuDio

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 categori-cally 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.

—A screenshot from one of our Skype calls


Even more Wireframes

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


SPliT nAViGATionSince 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 iMAGethe 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 TexTthe project text requires to have a certain voice that can communci-ate 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

set 03 wireframe 002

HOME pagE

prOjEct pagE

aBOUt pagE

qUick infoSmall icons that provide instant contact information

doMinant visUalDedicated central column to work and splash images

split navigationSince there was a clear distinction in hierarchy of the navigation, i decided to split it

project overviewa short paragraph providing a asummary of the project and necessary credits

drop-downBy concealing the category listing within a drop-down menu, we assure that a viewer does not have immediate access to browsing choice projects

contextUal infoCaptions that provide support the image/provide aditional information with image tags/labels

twitter feedUpdates tweets from Turmeric Design

introdUctiona hero text box providing a short introduction to the studio

stUdio locatora small integrated map to display the location

sUb-articlesText groups for opportunities, recogni-tion and clients


set 03 wireframe 001


HOME pagE

prOjEct pagE

BLOg pagE

split navigationSince there was a clear distinction in hierarchy of the navigation, i decided to split it

drop-downBy concealing the category listing within a drop-down menu, we assure that a viewer does not have immediate access to browsing choice projects

doMinant visUalDedicated central column to work and splash images

qUick infoSmall icons that provide instant contact information

lazy clickingThe ‘Next project’ button provides larger affordance to cater to viewers who aren’t looking for any work in particular but just browsing through

project seqUencingThe list in this left column displays selected projecta and shifts vertically downward as viewer moves to the next project

contextUal infoCaptions that provide support the image/provide aditional information with image tags/labels

label listTo sort through posts, labels can be very useful

live twitter feedUpdates tweets from Turmeric Design

blog textThe blog contentwill appear in this column. The big drawback to this is a limit on wordcount.

social Media linksit allows a certain image to be shared on Pinterest or a project to be shared on facebook or Tweeted about



coMbineDlY SePARATe nAViGATionhere 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 ViSuAlhere the image takes even more space than it has done so far in previous wireframes. i.e: close to 1000px

HoRizonTAl THuMbnAil GuiDehere i translated the earlier iterated vertical project list to thumbnails along the bottom of the page in a horizontal format. it leaves image-text content undisturbed as well as allows a synchronisation between the ‘next project’ action and the project slide animation in the list

nAViGATion AnD conTenTin 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.

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

Wireframe selectionAfter 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 WiRefRAmeSmAde THe cuT?

Prioiritised image width

Clear project listing

Concealed project categories

Dynamic wordmark

Distinction between content and navigation


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.



Responsivity“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.”

–Ethan MarcottE, a List apart

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

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 accom-modate for resolution, image size and scripting abilities. in other words, the website should have the technology to automatically respond to the user’s prefer-ences. this would eliminate the need for a different design and development phase for each new gadget on the market.


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.

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.

http://coding.smashingmagazine.com/2011/01/12/guidelines-for-re-sponsive-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


iMac

Screen reSolution in px.

1920 x 1080

pixel denSity in ppi.

102

aSpect ratio

16:9

Macbook Pro


1440 x 900


110

aSpect ratio

16:10

iPad


1024 x 768 landscape

768 x 1024 portrait


132

aSpect ratio

4:3

iPhone 4S


960 x 640 landscape

640 x 960 portrait


326

aSpect ratio

3:2

DevicesIf 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.

no. of PixelS bY PixelS PeR incH iS equAl To no. of incHeS

Responsive Wireframes and GridsJust 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-vs-responsive-website-development-questions

http://www.alistapart.com/articles/switchymclayout

liquiD VS.ReSPonSiVe

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 tiny-screened 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

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 screen-reader, their experience should be as fully featured and functional as possible.


‘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 oneMAKe A ReGulAR fixeD- WiDTH GRiDchoose a column width and a gutter width, disregard the number of columns. a smaller column width gives you more flexibility.

STeP oneMAKe iT RePeAT infiniTelYadd columns on either side so that no matter how wide you make your viewport , columns are visible.

STeP onecenTRe iT in YouR VieWPoRTalign 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.

STeP oneuSe YouR GRiDSet a number of columns for each breakpoint at which your layout adapts. and use those columsn only.

—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. Desktop2. Default3. Tablet4. Mobile

they referred to the two selected wire-frames 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/the-use-of-grids-in-website-design-6639


Calculating & Creating a Custom GridAfter 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.

cAlculATinG

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

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

—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

coluMn WiDTH = 36Px

GuTTeR WiDTH= 16Px

VeRTicAl bASeline SPAcinG= 16Px


DefAulT

reSolution1440 x 900 Px

columnS 28

deviceSdesktopslaptops

fouRTH bReAK


columnS 14

deviceSdesktops laptopsipad (portrait)tablets

fifTH bReAK


columnS 3

deviceSdesktops laptopsipad/tablets iphone

SeconD bReAK


columnS 20

deviceSdesktops laptopsipad (landscape)

THiRD bReAK


columnS 15

deviceSdesktops laptopsipad (portrait)

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.


Visual designIt 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.

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.’

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.

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.

—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.

—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

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

TypographyType 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.

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.

TYPoGRAPHY iS THe founDATion of Web 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?”

–Paul Scrivens

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

http://www.smashingmagazine.com/2012/05/21/how-to-choose-the-right-face-for-a-beautiful-body/

THe cHAllenGe WAS To cReATe A ViSuAl lAnGuAGe THAT AliGneD WiTH THe bRAnD iDeA AnD Voice of TuRMeRic DeSiGn


Turmericburger

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.

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.

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.

@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 “font-weight” (not needed for normal, but required by everything else, bold, thin etc).

http://blogs.adobe.com/typblogra-phy/2010/09/opentype-features-come-to-the-web.html

http://ie.microsoft.com/testdrive/graphics/opentype/opentype-fontbu-reau/index.html

Implementing @font-face

@font-face {

font-family: DeliciousRoman;

src:url(http://www.font-face.com/fonts/delicious/TimesNew-Roman.otf);

font-weight:400;

}

..then use it like any other

p {font-family: TimesNewRoman, Helvet-ica, Arial, sans-serif;}

Bree SerifDeSiGneR

type together

SouRce

www.typetogether.com

WeiGHTS/STYleS : 1

Bree Serif Regular

GooGle AnAlYTicS

no. of views 345,456,567percentage views 345,456,567

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.

— Bree Serif Regular 16/24pt

At Turmeric, we live and breathe design. Our sweet spot is a balance between bottomline-raising logic, en-dearing 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 crafts-manship and care, we like to create art that addresses the soul through small joys, surprise, optimism and sensory delight.

— Bree Serif Regular 10/12pt

—Bree Serif Regular 60pt

Assertive

Charming

Cute

x-HeiGHT 30PT SeRif


SignikaDeSiGneR

anna gedryś

SouRce

www.font-squirrel.com

WeiGHTS/STYleS : 4 (.oTf)

Signika LightSignika RegularSignika SemiboldSignika Bold

GooGle AnAlYTicS

no. of views 677,147,830percentage views 3942%

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.— Signika 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. We look out for brands as well as their custom-ers. 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 Regular 10/12pt

Turmericburger—Bree Serif Regular 60pt

Soft

Flexible

Romantic

x-HeiGHT 30PT SAnS-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.

— Signika Small Caps 10/12pt

LatoDeSiGneR

Łukasz dziedzic

SouRce



Lato HairlineLato Hairline ItalicLato LightLato Light ItalicLato RegularLato ItalicLato BoldLato Bold ItalicLato BlackLato Black Italic

GooGle AnAlYTicS

no. of views 4,217,616,431percentage views 582%

Contemporary

Stable

Serious

At Turmeric, we live and

breathe design. Our sweet

spot is a balance between

bottomline-raising logic, en-

dearing details and a consist-

ent voice across touchpoints.

We bring both our brains and

hearts to work.

— Lato 16/24pt


— Lato Light 9/12pt

We look out for brands as well as their custom-ers. 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

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

Turmericburger—Lato Regular 60pt

x-HeiGHT 25PT SeRif


RosarioDeSiGneR

omnibus type

SouRce



Rosario RegularRosario ItalicRosario BoldRosario Bold Italic

GooGle AnAlYTicS

no. of views 267,654,179percentage views -9%

At Turmeric, we live and breathe design. Our sweet


bottomline-raising logic,

endearing details and a

consistent voice across

touchpoints.

— Rosario 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. We look out for brands as well as their custom-ers. With our love for craftsmanship and care, we like to create art that addresses the soul through small joys, surprise, optimism and sensory delight.

— Rosario Regular 10/12pt

Turmericburger— Rosario Bold 60pt

Elegant

Balanced

Subtlex-HeiGHT 30PT SAnS-SeRif

At tu r m e r i c, w e l i v e A n d b r e At h e d es i g n. Ou 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 ts. We bring both our brains and hearts to Work, making sure our solutions not only fit, but also create deeper lasting engagements.

— Rosario Small Caps 10/12pt

Droid SerifDeSiGneR

Steve matteson

SouRce


WeiGHTS/STYleS : 4 (.0Tf)

Droid Serif RegularDroid Serif ItalicDroid Serif Bolddroid Serif Bold italic

GooGle AnAlYTicS


Crafty

Respectable

Trusted

At Turmeric, we live and breathe design. Our sweet spot is a bal-ance between bottom-line-raising logic, en-dearing 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 bot-tomline-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 craftsman-ship 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 craftsman-ship 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

x-HeiGHT 25PT SeRif


UbuntuDeSiGneR

dalton maag

SouRce


WeiGHTS/STYleS : 8 (.TTf)

Ubuntu LightUbuntu Light ItalicUbuntu RegularUbuntu ItalicUbuntu MediumUbuntu Medium ItalicUbuntu BoldUbuntu Bold Italic

GooGle AnAlYTicS


Formal

Economical

Classy

At Turmeric, we live

and breathe design. Our

sweet spot is a balance

between bottomline-rais-

ing logic, endearing de-

tails and a consistent voice

across touchpoints. We

bring both our brains and

hearts to work.

— Ubuntu 16/24pt


— Ubuntu Light 9/12pt

We look out for brands as well as their cus-tomers. 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

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

Turmericburger—Ubuntu Medium 60pt

x-HeiGHT 25PT SAnS SeRif

NeutonDeSiGneR

Brian Zick

SouRce


WeiGHTS/STYleS : 6 (.TTf)

Neuton ExtraLightNeuton LightNeuton RegularNeuton ItalicNeuton BoldNeuton ExtraBold

GooGle AnAlYTicS


Formal

Economical

Classy

At Turmeric, we live and

breathe design. Our sweet


bottomline-raising logic,

endearing details and a con-

sistent voice across touch-

points. 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 bottomline-raising logic, endearing details and a consist-ent 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 craftsman-ship 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, opti-mism and sensory delight.— Neuton Regular 13/12pt

Turmericburger—Neuton Regular 60pt

x-HeiGHT 25PT SeRif


droid SansDeSiGneR

Steve matteson

SouRce


WeiGHTS/STYleS : 2 (.0Tf)

droid Sans regularDroid Sans bold

GooGle AnAlYTicS


Factual

Consistent

Restrained

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.— 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 engage-ments. —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 address-es the soul through small joys, surprise, optimism and sensory delight.— Droid Sans Bold 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 Small Caps 11/12pt

turmericburger—Droid Sans Regular 60pt

x-HeiGHT 25PT SAnS SeRif

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

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.

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

lATo

neuTon

ubunTu

DRoiD SeRif

DRoiD SAnS

All the above have been set in 30px, Regular weight with default tracking. One can see the comparative character widths and and line lengths.


As Soloren Imoditaquis

Duo conse eossimpore deliquias es ea nonsequas eos molluptatem quuntur estrum il esti a volore a core dolori ab-orepella volupta estrum fugit mo int et harions entium quam, imenis consequi-am re maior re quae volorrorest, autam alitiati si bero vollaut acipsum int videl moditictatur, volorit ero conecat parianist.

cr ed it s videl moditin ctatur, volorit ero conecat parianist.


Duo conse eossimpore deliquias es ea nonsequas eos molluptatem quuntur estrum il esti a volore a core dolori ab-orepella volupta estrum fugit mo int et harions entium quam, imenis con-sequiam re maior re quae volorrorest, autam alitiati si bero vollaut acipsum.

credits videl moditin ctatur, esti a volor esti a volore a core dolori aborepella volupta entium

Ulles magniminum namQuo 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 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 ab-

orepella 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.

Credits exces eumqui dolupta turessit,

dit, se deles aceaqui squunt adi.

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.

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


Quo conse eossimpore deliquias es ea nonsequas eos molluptatem quuntur estrum il esti a volore a core dolori ab-orepella 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.

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 volor-rorest, autam alitiati si bero vollaut acipsum int videl moditin ctatur, volorit ero conecat parianist, et repuda vo-luptibus samenda aut preptin.

HeadingRosario Bold 16ptTracking 10100% black

BodyDroid Serif 12ptTracking 580% black

SubheadRosario Bold 14ptSmall caps100% black

HeadingLato Bold 16ptTracking 10100% black

BodyLato regular 12ptTracking 1580% black

SubheadLato Bold 14ptSmall caps100% black

HeadingSignika S.Bold 18ptTracking 0100% black

BodySignika Reg 14ptTracking 580% black

HeadingDroid Serif Reg 14ptTracking 080% black

BodyDroid Sans Reg 12ptTracking 080% black

HeadingUbuntu Med 16ptTracking Optical100% black

BodyUbuntu Reg 12ptTracking Optical100% black

SubheadUbuntu Bold 12pt100% black

HeadingUbuntu Lt 16pt All CapsTracking 0100% black

BodyFjord 13ptTracking 0100% black

SubheadUbuntu Med 13pt100% black

HeadingFjord 18ptTracking Optical100% black

BodyRosario Reg 14ptTracking Optical80% black

HeadingDroid Sans 16ptTracking Optical100% black

BodyDroid Serif Reg 12ptTracking 080% black


Taking a pickDeciding 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 respect-able 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

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.

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.

SoMe GuiDelineS on TYPe SelecTion

1. leGibiliTY a typeface with conven-tional 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

3. inTenT/MooD assocaite attributes to the typeface to validate appropriateness

4. HieRARcHY test how the typeface can work on sample style sheets to establish good hierarachy

Shttp://www.smashingmaga-zine.com/2012/05/21/how-to-choose-the-right-face-for-a-beautiful-body/

fluid

RooTeD

s a v v y

cultured

informed

Arty

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 pro-portion and overall design complement its companion droid Sans. primarily designed for comfortable screen reading.

—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.

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.


LayoutThis 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.

244 Px 5 col 296 Px 6 col 868 Px 17 col

column 1nAViGATion

column 2 TexT

column 3 iMAGe

1440 Px 28 col

148 Px3 col

494 Px9 col

642 Px 12 col

3 col

4 col

—NOTE These diagrams are not to scale


192 px4 col

816 px16 col

1024 px 20 col

192 px4 col

556 px11 col

768 px 15 col

244 px 5 col 296 px 6 col 868 px 17 col

1920 px 40 col


Delhi StintAs the project was nearing completion, Kriti and I both felt the need for a face-to-face 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.


Visual languageI 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.


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.

—Overlapping text, images and background

Liberal use of colour

Rectangular shapes

—Heavy colour

Highlighted sections

Colourful, expressive

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

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.

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.


— TOP LEFT

Over minimal design

Storytelling method

Image dominant

— LEFT

Solid header to establish width

Navigation to description to image

— ABOVE

Use of typographic paragraph rules

Bold type

Subtle grey background

— TOP LEFT

Bright header

Navigation to description to image

Breathing space

— LEFT

Use of neutral greys

Less colour

Very bold type

Vertcial rhythm

— ABOVE

Headline type

Hand-done logo image

Project ticker

Scroll design

The treatment of the website was something worked upon towards the end of the project. After fleshing out the wire-frames 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 representa-tion. 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.


—ALONGSIDE is the selected design treatment.

flexible lAYouT what this organisa-tion 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 ex-actly as many as that which are essential and demanded by the content’s voice.

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 exist-ing turmeric yellow in the header, the design suggests a complany with multi-dimensional skills and approaches

DYNAMIC WORDMARK

The logo space would be a typographic image that

keeps changing at a desired frequency.

INFO TICKER

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

LISTED NAVIGATION

A simple list that underlines the project that is being presently

viewed

CONTExTUAL TExTBOx

Make the user read just one section at a time

that narrates the process behind a project

IMAGE SCROLL COLUMN

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

HEADER

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

FeaturesmacBook 15”project page


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.

i n t e r i o r d e s i g n

The Busride, Mumbai

p h o t o g r a p h y

The Busride, Mumbai

›

Turmeric Design

Smokehouse Room ›

ALONGSIDE design responsive on 1920x1080px widescreen

LEFT TO RIGHT

_1024x768px on iPad in portrait and landscape orientation

_960x640px on iPhone 4S in portrait and landscape orientation

IMAGES ON THE WEBSITE

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.


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

About page

iMPAcT STATeMenT

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

SHoRT DeScRiPTiVe TexT

this block that follows the opening statement is a short paragraph on turmeric’s appraoch, beliefs and cultural practices.

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.


Contact page

bAnneR iMAGe

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.

coluMn TexT

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

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 Sans 14pt / Reg Small caps

Image width 816px

Max. height 512px

Image width 1128px

Max. height 400px

Droid Serif 12pt / Regular Tracking 10

Icon frame 25x25px

Logo frame Max. 172x80px




Team page

PRofile 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.

nAMe AnD DeScRiPTion

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

linKS

these links may be ‘mail to’s’ or links to twitter/pinterest/facebook/blog account pages.

Profile thumbnail 88x144px

Right-most column clicks to take viewer

to next page on the navigation list

Name Droid Serif 16pt / Bold

Designation Droid Sans 14pt / Reg / SC Tracking 120

DescriptionDroid Serif 11pt / Bold Tracking 10


Client page

coMPAnY THuMbnAil

this image should contain the respec-tive company’s logo or trademark. the image must be tightly cropped as indicated in the examples and main-tained at a rotated angle of 22 degrees.

TiTle AnD DeScRiPTiVe TexT

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.

Droid Sans 14pt / Reg Small caps

Image width 1128px

Max. height 400px

Icon frame 25x25px




Press page

iMPAcT STATeMenT

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

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.


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

Image size 1 494x242px landscape

Image size 2 300x370px

portrait

Image size 296x288px

Droid Serif 24pt / Italic

Tracking -25

Product image with thumbnails

of alternate views


A navigation list of different categories of products

Product details and specification selection + Add to cart button

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

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

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

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

fReSH!


›

Land and browse projects

Categories and social media

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

User views project and clicks on category header in left navigation

aniMation releases the navigation MenU to reveal all categories

User selects a category

navigation refreshes and lists filtered projects belonging to that category

browse project and share via facebook, twitter or pintererst


Typographic StylesThis 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 notesThe development of the website is being handled by an experienced Ux profes-sional 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.

Turmeric Design

Project Title, one that may even flow into two lines

b r a n d i n g s p a c e s i l l u s t r a t i o n p a c k a g i n g p r i n t w e b

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

i n t e r i o r d e s i g n + s p a c e s + p a c k a g i n g + p r i n t + b r a n d i n g

ut occusandae is dolo volutas Soloren imoditaquisqui ium natur, consenon plaut

H1/ DRoiD SeRif/ 24PT/ iTAlic

H2/ DRoiD SeRif/ 16PT/ bolD

H3/ DRoiD SAnS/ 16PT/ bolD/ SMl cPS

H4/ DRoiD SeRif/ 12PT/ ReG

H5/ DRoiD SAnS/ 14PT/ ReG/ SMl cPS

H6/ DRoiD SAnS/ 12PT/ ReG

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

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

Documents

The Haldi Project