Industrial Project Presentation by Payal Vats

DIPLOMA PROJECT JURY

Graphical User Experience for Colour Quarterly- Asian Paints Sponsor: DSYN Social Media Agency Student: Payal Vats Programme: Graduate Diploma Programme Guide: Rupesh Vyas Communication Design Faculty (Graphic Design)

INTRODUCTION Brand Personality- Asian Paints Project Synopsis Colour Quarterly Scope of Work Introduction to User Interface & Experience Multiple Screen Resolution GUI & Information Architecture

Brand Personality Vibrant And Enthusiastic Young And Energetic

Constant Growth

Innovative Spirit

Colour focused For Decorative and Industrial Usage

Consumer Focus

Leading Paint Company Forbes Recognition

Project Synopsis

High end on information & design

Promote Brand Promote Asian Paints as Design Intellectuals

Quarterly Publication Reach out to different Audience Colour Quarterly is Asian Paints effort to connect to the colour enthusiast, the designer, the architect and the painter.

Shares ideas, insights & information on colour

Better Availability Colour full & Vibrant Required Global Presence

Colour Quarterly Publication

07 ISSUE

NOVEMBER 2011

08 ISSUE

FEBRUARY 2012

During my analysis and research I also studied the structure and content for the CQ published recently. There are 9 issues till recently being the 09 July issue. The first issue was published in November 2009. The content is generated for each issue by the design studio. The main aim is to of Asian Paints through CQ is to showcase themselves as colour intellectuals globally. To create awareness and establish them as more than just a paint brand. I studied the recently published issues to understand the information, content and the way it’s been projected.

DOlMaBahçE PalacE 02 EMPORIO PU 08 MagIc wIth MEtallIcS 14 aNIMatINg SPacES wIth ShaPE & cOlOUR 22 cOlOUR SPEctRa FaNDEcK 26

COLOUR NEXT 02 GREECE SUNSHINE & BLUE 08 EXTERIOR TEXTURES 14 COLOUR COMPASS 20 THE POWER OF COLOUR 24 SKYLINE 28

Publication Analysis Design element- Visuals from the article.

NEW BEGINNINGS, BRIGHT HOPES

Brief introduction page which talks about the interesting stories covered in that issue very briefly. Also the entire publication is heavily colour coded for each issue.

Another year has flashed past and we head into a new one with a sense of renewal and hope. For our first issue of Colour Quarterly in 2012 we've put Purple on the cover, a colour we picked as much for its fascinating symbolism as its current popularity in the worlds of design and fashion. As a combination of red and blue, purple is an intriguing amalgam of the stimulating and restful properties of these respective colours. It's a shade particularly favoured by creative minds for its uplifting, yet wonderfully serene qualities. Purple's association with royalty since ancient times is well known. In this edition of Colour Quarterly, FARM FRESH brings you a feature on exterior textures with the spotlight on Apex Duracast, Asian Paints' versatile range of products for exteriors and outdoor spaces. Explore fresh themes and colour palettes with us in the ninth edition of our colour forecast, COLOURNEXT. OUT OF THE BLUE whisks you off to Greece, a land of pristine, beautiful colours and enduring architectural traditions. OPEN RANGE offers readers an updated colour guide for exteriors. In OVER CAPUCCINO, we interviewed Guy Zucker, founder of New York based Z-A Studio, whose passion for innovative architecture and â&#x20AC;&#x153;exposing the unexpected in the mundaneâ&#x20AC;? makes for truly inspirational reading. We wish you a fulfilling year ahead. Do share your thoughts by writing to us at cq@asianpaints.com Asian Paints COLOUR MARKETING TEAM www.asianpaints.com/cq

Each issue is colour coded and all the design elements are represented in that particular colour.

TIE AND DYE The art of tie & dye goes far back in time. It allows endless, unique variations, and many styles have emerged in different cultures. The Indian tie & dye technique called Bandhani (Bandhni/Bandhej) is the oldest tie & dye tradition, and is still widely practiced in Gujarat & Rajasthan. The technique involves tying many small points on a cloth with thread before immersing it into a dye. This lends itself into a characteristic dot/stripe pattern surrounded by bright colours. Tie & dye fabrics are particularly attractive because of their colour combinations that look refreshing in the sweltering heat of the summer sun.

Colour Quarterly 08 1

Talking about the technique- tie and dyeone of the cover story.

Full page visuals: Images are very strong and power full. A place so beautiful, the gods made it their home—that's Greece and her archipelago, blessed with golden sunshine, fertile earth and a history and culture that became the template for western civilisation. Blue and white are famously the predominant colours of this southern European nation. The azure brilliance of sea and sky cannot be described, only experienced. Against this backdrop, the stark simplicity of white walled traditional architecture stands out as elemental and compelling, celebrated by artists and photographers worldwide. Seen from the air, the cerulean waters of the Aegean and Ionian Seas around mainland Greece are scattered with thousands of islands, many of them little more than rocky, volcanic outcrops. Of the 6,000 islands, only 227 are inhabited. The larger

islands boast of varied landscapes; some have been settled since prehistoric times. There's a lively modern buzz about Athens, the national capital and Europe's oldest city, filled with coffee bars, trendy boutiques and incessant traffic. Its celebrated past though, is omnipresent. In an inspired stroke, Athens' town planners banished cars from its ancient city centre, creating an enormous, strikingly beautiful promenade for families, strollers and tourists to walk around, hang out and simply enjoy the gloriously imposing architecture of ancient Greece. The Plaka in central Athens consists of winding, cobbled

streets crammed with restaurants, souvenir shops and boutiques—no cars allowed here too! Street musicians and flower sellers add to the atmosphere, as do the very persuasive Greek café owners. All around the Plaka are archaeological sites from ancient Greek, Roman and Ottoman Turkish times, each with its own story to tell. At the Plaka's other end stands the great Acropolis looking out over Athens from atop its sacred hill, Athens' most recognisable historic landmark and forever a symbol of beauty and perfection.

oranGe crown–7974 r255 G163 B72

Imaginatively coloured buildings greet the visitor everywhere in Greece 10 Colour Quarterly 08

Main article heading.

deep pool–9206 r21 G71 B114

Top, top-right, bottom-right Bright, but soothing, blue & white are predominant colours in Greek landscape

Body text in three columns.

Colour swatches with colour information available in that article.

Colour Quarterly 08 11

Image source displayed along with usage of colour coding.

Narrow, brick walled back lanes covered with deep pink profusions of bougainvillea look much the same as they did a century ago.

Away in the Greek archipelago, life moves to slower rhythms. In the Cyclades islands, the low, simple lines—in pristine white—of homes, churches and other buildings are highlighted by roofs, window-frames and wooden gates in bright, deep blues clustered against hillsides rich in olive groves. Delos, Tinos and Kea are just some of the Cyclades, each one soaked in legend and history. Mykonos and Santorini are equally known for their resorts and nightlife today. It doesn't take much though to slip away from the present. Narrow, brick walled back lanes covered with deep pink profusions of bougainvillea look much the same as they did a century ago. Between buildings, the blue sea sparkles and beckons. In mythology, Crete, the largest island in the Greek archipelago was the birthplace of Zeus, father of the gods, and his love nest for Europa. Crete's imposing archaeological treasure is Knossos, palace of Minos, the founder of the Minoan civilisation. Heraklion, the island's largest city, offers a host of fascinating architectural styles in its monuments—the 16th century Venetian Loggia, the 17th century Agios Titos church and Turkish and Venetian fountains scattered across the city.

Bursts of pink bougainvillea add energy to the sombre architecture

soothinG sapphire–7326 r41 G123 B193

Paragraph highlighted from the article on the image for achieving the visual interaction and break monotony.

swan winG–l101 r245 G242 B230

Body text- article paragraph in one column.

Images used in the article.

Top, top-right, bottom-right Green renders itself into Greek landscape, architecture accents, as well as food

Blue Bay–7329 r142 G193 B233

Food is best had at leisure in Greece

tons of sun–7895 r251 G220 B117

rich tomato–9405 r142 G69 B73

fresh olive–7725 r119 G151 B58

There's more to Greece than mythology and monuments. Green is an important colour in its palette, with olive groves and vineyards an inescapable part of the fertile, rural landscape. Traditional Greek cuisine is about simple, hearty fare—olive oil, wheat, wine, seafood and little red meat. A Greek salad pleases the eye as well as the palate, emphasizing colour and freshness—strips of tomato, cucumber, red onion, green bell peppers and olives dotted with white feta cheese. Adding flavour and aroma to Greek dishes are a range of herbs—oregano, garlic, mint and dill leaves. Thyme even finds mention in Homer's Odyssey. Vegetables commonly used include aubergine, okra, green beans and potato. Many lip-smacking dishes—tzatziki, moussaka and boureki—were introduced by the Ottoman Turks.

Colour swatches with colour information available in that article.

Few places in the world combine history, modernity and a leisurely lifestyle with so much élan as Greece. Another glass of ouzo, anyone?

Design element Ag. Theodori church, Santorini gives cues for creating a lively colour palette for homes 12 Colour Quarterly 08

All shades are printed representations and may vary slightly from actual colours. Please refer to the Asian Paints Colour Spectra for exact shade reference.

PLEASE SHARE YOUR FEEDBACk BY WRITING TO US ON cq@asianpaints.com Colour Quarterly 08 13

Displaying the image source.

white, gold and Red dominate the vast interior spaces, brilliantly illuminated by enormous crystal chandeliers suspended from gold-leaf covered ceilings The Crystal Staircase—a 4.5 tonne confection of Baccarat & Bohemian Crystal

PURE RED-8093 R207 G37 B43

TRUE OCHRE-7925 R210 G156 B49

Sumptuous feast of reds and gold in the palace interiors

PUPPY LOVE-3203 R238 G228 B204

GLORIOUS SUNSET-X111 R248 G144 B38

INK BLUE SKY-9165 R40 G74 B122

The double horseshoe-shaped Crystal Staircase, made of Baccarat crystal, mahogany and brass, with a blood-red carpet snaking down its steps, is the probable inspiration behind many a Hollywood oldies. Queen Victoria’s gift—the world’s largest crystal chandelier—hangs in the central hall, a 4.5 tonne confection of Baccarat and Bohemian Crystal. In the public halls, furniture upholstery and draperies made from Hereke fabric are in red, the royal shade of the sultans. In keeping with Turkish architectural traditions, there are separate living areas for the sexes—the Mabeyn-i Hümâyûn for men and the Harem-i Hümâyûn for the ruling sultan’s female relatives, wives and concubines. Hidden passages were designed for royal ladies to observe events in the public halls without being seen.Behind the palace, landscaped gardens spread out, In the garden of the Dolmabahçe Palace 6 colour Quarterly 07

RICH TAN-7965 R203 G129 B53

elaborate, colourful and varied, though not in any specific style. One part overlooks the Bosphorus, its velvet-green lawns offsetting the brilliant blue of the water. Spruce, cedar and palm trees, rose beds and pretty lily ponds with tinkling fountains conjure up an atmosphere of intimacy and serenity. The Dolmabahçe Palace can be approached from the Bosphorus. Arriving at the landing stage, its imposing, monumental beauty would undoubtedly have stunned many a royal visitor down the centuries. For hundreds of visitors today, the palace brings alive the stuff of dreams and tales from afar.

PlEaSE ShaRE yOUR FEEDBacK By wRItINg tO US ON cq@asianpaints.com All shades are printed representations and may vary slightly from actual colours. Please refer to the Asian Paints Colour Spectra for exact shade reference.

colour Quarterly 07 7

More examples of the spreads from the CQ issue. During my initial brainstorming I have kept in mind the design language across the issues.

IN VOgUE MagIc wIth MEtallIcS

today’s metallic paints continue the traditional association of metals with a luxurious lifestyle. Metallic paints are waterbased; their light refracting property adds richness and variety to walls. Matched appropriately with other shades, furnishings and accessories, they impart a silk-smooth, luxurious effect to interiors. let’s take an in-depth look at how they work.

ankind and metal have a historical association going back to primitive times. Gold and copper were the first metals to be used extensively. During the Stone Age, humans discovered the malleability of gold and used it to fashion jewellery. Copper had wider uses as tools and weapons. Besides these two, metals like silver, lead, tin, smelted iron and mercury were known to the ancient civilisations of Mesopotamia, Egypt, Greece and Rome. In India, metallurgy may have begun during 2 B.C. High quality wootz steel was produced in South India from

about 300 B.C. and was widely exported. The Charaka Samhita refers to the use of zinc for medicinal purposes. The fabulous bronze statues commissioned by the Chola kings were cast using five metals—copper, zinc, tin, gold and silver. The gold and silver plated domes of temples and palaces of southern India are the stuff of legend. Many indigenous textile traditions use dyes that can be fixed only with mordants or metal compounds while zari or gold thread was historically used in making fabric for affluent, blue-blooded families.

BRAND: ROYALE PLAY SAFARI BASECOAT: ORANGE SPARK-7951 TOP COAT: HELIOS-M310

14 colour Quarterly 07

colour Quarterly 07 15

More examples of the spreads from the CQ issue. During my initial brainstorming I have kept in mind the design language across the issues.

Scope of Work & Methodology

I. Understanding the system/model and working towards the unique user interface. II. Working towards all possible iterations and combinations to achieve Highly Unique User Experience. III. Understanding the domain of my work through various case studies, existing applications and research methods.

PHASE 1

PHASE 2

PHASE 3

PHASE 4

PHASE 5

I. Understanding the graphical user experience and interface. II. Understanding the various perspectives of UI domain and user groups.

I. Making myself familiar with the parallel working models in the domain and analyzing those models. II. Understanding the information content and its engagement for the users.

I. Brain storming and discussions on initial start up. II. Making flowcharts, basic wire frames & understanding the information flow. III. Making models for UI.

Working on visual mock-ups, testing with developers and design iterations which may involve the feedback and suggestions from the client.

Working towards final execution of screens. Also focusing on the details and iterations for the final working prototype.

Exposure to Digital Media Windows 8 Metro User Experience iOS Devices Study

Navigation Systems Android Platform

User Interface

Interface Elements

Work Flows & Information Architecture

iPad Phenomenon

Touch Gestures & Screen Display Resolutions

Information Architecture?

Information architecture is the work that goes into creating intuitive navigation schemes for software. Information architecture generally applies to websites, but can also apply to web applications, mobile applications, and social media software.

Global Navigations

Local Navigations

Ideally, a website or applicationâ&#x20AC;&#x2122;s navigation scheme makes it easy for users to find desired information or functionality.

Navigation Systems & Work Flows

Wire Frames

Design Iterations

Visual Mock-ups Prototypes

Graphical User Interface

A GUI represents the information and actions available to a user through graphical icons and visual indicators such as secondary notation, as opposed to text-based interfaces, typed command labels or text navigation. The actions are usually performed through direct manipulation of the graphical elements.

* Allows user to interact * Represents informations and actions * Uses graphical icons and visual indicators * Provides visual feedback * Increases flexibility * Direct manipulation of graphical elements

Analysis & Research Inspirational Working ModelsFlipboard The Verge Fastcodesign Stylus Social Media Integration CQ Experience? Colour Quarterly Publication

Inspirational Working Models- Websites

Matrix Chosen To Analyze The Websites And Online Resources

Engagement

How much does the website keep the users engaged in its content. Social Media engagement has been awarded extra points.

Information & Visuals

How much content / information is there in the website. How is the information represented in the website. Is there more and better visual information?

Navigation & Reach

How easily can the user reach all the important parts of the website. How easily is all the content accessible. How easily can the user share these things on social media.

Aesthetic Appeal

The overall look and feel of the website along with the various design elements used. Is the website appeal to the user when he or she lands on the home page?

The Verge The Verge is an American technology news and media network operated by Vox Media with offices in Manhattan, New York. The network's team publishes news items, long form feature stories, product reviews, podcasts, and an entertainment show. Its goal is not only to report on current technology news, but also on how technology affects society and popular culture. Editor in chief and co founder is Joshua Topolsky.

Engagement

Information & Visuals Navigation & Reach

Aesthetic Appeal

Fastcodesign Inspiring stories about innovation and business, seen through the lens of design. Fast Company is a full-color business magazine that releases 10 issues per year and focuses on technology, business, and design. FastCompany.com operates as a network of sites with Inc.com. It comprises four sites: Co.Design, Co.Exist, Co.Create and Co.Lead. Co.Design covers business, innovation and design.

Engagement

Information & Visuals

Navigation & Reach Aesthetic Appeal

Stylus Stylus inspires you to develop innovative products and campaigns. Stylus provides inspirational and informative research and relates it to prevailing consumer trends, acting as a catalyst to push the design industries to new levels. How companies apply this to their brands and product categories will change the game forever.

Engagement

Information & Visuals Navigation & Reach

Aesthetic Appeal

Social Media Integration The Social Media Integration has been judged on basis on access to Social Media accounts of the website. Also the ability to post different news, blogs, latest stories from the website directly to userâ&#x20AC;&#x2122;s social media accounts.

The Verge

www.theverge.com

Fastcodesign

wwwfastcodesign.com

Stylus

www.stylus.com

Colour Quarterly Experience?

Reach

Navigation

In terms of interaction

Aesthetic Appeal

Engagement

Information + Visuals

Content

In context of information & Design

Inspirational Working Model- Flipboard

Flipboard is a social-network aggregation, magazine-format application software for Android and iOS.

Social Magazine for iPad, iPhone & Android.

The application's user interface is designed for intuitive flipping through content.

Originally designed specifically for the iPad, in December 2010, the application was updated to add support for the iPhone and iPad Touch. On May 5, 2012, it was announced that Flipboard would be released for select Android phones.

It collects the content of social media and other websites and presents it in magazine format and allows users to "flip" through their social networking feeds and feeds from websites that have partnered with the company.

Home Page Iterative Design Process- I Home Page- Brain Storming Wire frames Visual Iterations & Mock-ups Feed Back & Category Preface Final Prototype

Home Screen Brain Storming

The discussions were aimed towards cracking the navigation, reducing the number of clicks from one element to another. During the discussions I was very clear towards my final design outcome. The main aim was to achieve a transparency in the design and the output so that the user is able to appreciate its use and enjoy the experience.

Home Screen Wire Frames

First we understood the information structure and then worked for the visual iterations and wire frames. The feedbacks and comments from Asian Paints were at constant. The brief was also modified and understood and were worked accordingly. The wire frames with very basic elements were updated before starting with the visual iterations with other design elements. The design template has to very vibrant, clean and should reflect the brand â&#x20AC;&#x153;Asian Paintsâ&#x20AC;?. Also studied and analyzed various user interfaces and understood that the design approach for any final product is very different and it has to satisfy and justify its need and the experience of the user for that particular product.

The above shown wire frame is for the screen resolution of 768px by 1024px

Asian Paints logo Colour Quarterly logo

Lorem Ipsum Lorem Ipsum Lorem

Search bar

Lorem ipsum Lorem

Navigation bar with links

Cover image of the issue along with the issue number, month and introduction.

The tile represents the quarterly issues and the user can click on the tile to view the article contents for that month and issue.

Asian Paints logo

The above shown wire frame is for the screen resolution of 980px-1024px by 600px-700px (web page landing screen)

Cover image of the issue along with the issue number, month and introduction.

Colour Quarterly logo

Navigation bar with links

Search bar

Lorem orem Ipsum sum Lorem orem Ipsum sum Lorem ore

Lorem ipsum Lorem

Issue number and month

Home Screen Visual Mock-ups

4. Usage of basic information architecture for each issue.

1. Highlighting the cover picture because each issue has a unique cover display picture.

Following points were kept in mind during the initial design discussions and concepts

2. Strong colour coding as per the issue.

3. Minimalistic yet flashy design to enhance the user experience.

The mast head contains the name of the magazine which can be colour coded as per the issue colour.

In the second design, the tiles are in gary scale but on hover or click the paricular tile will be displayed in colour.

Displays the cover image of the issue.

Displays the issue and month or may or may be other specifics.

The Dash board has tiles showcasing the cover image, issue no, month or any other specific. When the user clicks any one of the tile, the sceen with the first article of the issue is displayed.

Colour Quarterly

I. INITIAL EXPLORATIONS FOR DASH BOARD Following points were kept in mind during the initial design dicussions and concepts: I. Highlighting the cover picture because each issue has a unique cover display picture. II. Strong colour coding as per the issue. III. Minimalistic yet flashy design to enhance the user experience. IV. Usage of basic information architecture for each issue.

Colour Quarterly The tiles which represents the single issue are displayed and when the user clicks on a particular tile, he or she can view all the articles in a list. The user is one click away form the second page.

Nov 2009

EXPLORATION: 1.0

Nov 2009

Colour coded masthead for each issue.

Nov 2009

Colour Quarterly

Colour coded masthead for each issue.

Exploring the Mouse-over When the user hovers on one particular tile, the tile changes colour from gray scale to rgb mode. On another click or tap, the user is taken to the particular issue with its articles shown in list Nov 2009

Nov 2009

Colour coded issue number

EXPLORATION: 1.1 Mouse-over Exploration: Working towards interaction

Nov 2009

Clicking on the particular tile, the user can view the list of articles in that particular issue of the month.

an asianpaints initiative

Colour Quarterly

Asian Paints LOGO, provided by the client. Existing Colour Quarterly LOGO

Subscribe | News letter | About Dummy links: Subscribe, About, Contact etc.

Lorem ipsum lorem ipsum lorem ipsum Nov 2009

The bar could contain the other specifics such as search, about, contact, subscribe etc. At the moment we have used dummy copy which can be replaced with final one.

In the previous design, the mast head was supposed to be colour coded but then each issue may have any colour which may or may not appear appealing visually. So, instead of using different colours we used the neutral shade of gray to compliment every time irrespective of the colour of the issue.

an asianpaints initiative an asianpaints initiative

Colour Quarterly Colour Quarterly Subscribe | News letter | About Subscribe | News letter | About

Lorem ipsum lorem ipsum Loremlorem ipsumipsum lorem Nov 2009 ipsum lorem ipsum Nov 2009

01 01

Lorem ipsum lorem ipsum Loremlorem ipsumipsum lorem Nov 2009 ipsum lorem ipsum Nov 2009

02 02

Lorem ipsum lorem ipsum Loremlorem ipsumipsum lorem Nov 2009 ipsum lorem ipsum Nov 2009

Tiles will consist of image cover, issue no, month and other specific for the issue. Basic design elements have been used to follow the visual language of Asian Paints. The user can click on the tiles and can get the articles published in that issue. The user is one click away from the second web page. Lorem ipsum lorem ipsum Loremlorem ipsumipsum lorem

Lorem ipsum lorem ipsum Loremlorem ipsumipsum lorem

03 03

Lorem ipsum lorem ipsum Loremlorem ipsumipsum lorem Nov 2009 ipsum lorem ipsum Nov 2009

Colour coded issue number along with the month and other specifics.

Lorem ipsum lorem ipsum Loremlorem ipsumipsum lorem

04 04

Explorations with the left aligned mast head consisting of logo and dummy links Subscribe

News letter

Search icon bar

About

Celebrate the Greens!

Lorem ipsumi ipsum

EXPLORATION: 3.0 Mast Head Exploration: Exploring the Masthead and its design components.

Cover image is clipped into the issue number

Colour Quarterly

The mast head information and design structure is kept same as previous explorations.

I explored some other alternatives with the cover image and issue number and tried to combine them as one design unit. The cover image is clipped into the issue number and works as a design element.

EXPLORATION: 4.0 Home page Exploration: Exploring the design elements of the tile

Dummy Links and Masthead

Exploring the Mouse-over When the user hovers on one particular tile, the black transparent band moved upwards, covering the 80% of the tile and displays the brief information about the issue.

Subscribe | News letter | About

Celebrate the Greens!

Come July, the subcontinent collectively sighs with relief. Just after summer burs itself out, the skies darken. Plump, dark obscure the glare, rains comes sheeting down, wiping the air of dust and heat....

Celebrate the Greens!

Mouse-over Exploration: When the user hovers over any one tile of the issue, he or she can EXPLORATION: 2.1 view the brief introduction and on a click can view the article list of that month and issue.

Mast head consisting of logo and dummy links DUMMY LINKS

The home screen will have a dynamic image

CELEBRATING THE GREENS

Intoduction of the mag.

COLOUR COMPASS USING COLOUR TO ESTABLISH ORIENTATION INTERVIEW BY J. MICHAEL WELTON Author | Lorem ipsum

Guy Zucker is the principal and founder of Z-A, a New York based studio for architectural.

Space for disclaimer

On mouse hover on a particular thumbnail, the enlarged view with the more detailed information about the article with the snap shot appears and on the click the user is taken to the particular article.

Article thumbnails with snap shot Previous issues

EXPLORATION: 5.0 Home page Exploration

After exploring the tile structure, I explored other iterations with a fresh design approach and started working on the wire framing.

Feed Back & Suggestions for Home Screen Asian Paints then decided to introduce the concept of categories instead of monthly issues. Thus making it interesting and contemporary.

In the coming times, Asian Paints wanted to only focus on the online resource rather than quarterly issue.

Feed back, Changes and Suggestions from Asian Paints

One suggestion which came was to combine the categories and issues together, keeping categories as primary focus

The screen for web with resolution 980-1024pixles by 600-700 pixels were supposed to be worked on.

Also during this feedback, we were supposed to work for only web screen and ipad was on hold.

The 5 categories are India Connect, In Focus, Innovation, Insight, and Inspiration. These categories will have separate articles in them and will be updated as per Asian paints.

Exploring the basic structure to work ahead. The structure is which I am aim for has to flexible and very clean. The main focus should be the articles and its images. I do not want to introduce any foreign element because it would work as a distraction for the reader. Instead I have used the existing elements to play around and achieve the look and structure.

Subscribe | News letter | About

Introduction of categories: There were 5 categories including the recent category (will contain all the recently uploaded from all the categories.) These categories will have n number of articles listed in them. The number of articles may vary. Previously I have explored a few wire frames for home page and decided to combine the tile structure of issues with category wire frame.

Lorem ipsum lorem ipsum lorem ipsum Nov 2009

I can combine the two above explorations to achieve something which will incorporate both the design visuals. The previous issues can be shown below when the user scrolls down. He or she can read the articles listed in these issues.

Lorem ipsum lorem ipsum lorem ipsum Nov 2009

Asian Paints logo

Navigation links

Asain Paints

Search bar

CATEGORY

Category listing

Heading of the Article

CATEGORY

Lorem ipsum lorem ipsum lorem ipsum lorem......

Heading of the Article

CATEGORY

Heading of the Article Lorem ipsum lorem ipsum lorem ipsum lorem......

Thumbnails of recently uploaded articles from any category with snap shot and brief introduction.

Lorem ipsum lorem ipsum lorem ipsum lorem......

CATEGORY

Heading of the Article

Cover highlight story with opening image and brief introduction.

Lorem ipsum lorem ipsum lorem ipsum lorem......

Colour Quarterly Issues Previous Issue

Previous Issue

User can access the previous issue by clicking on particular tile with the cover image and can view the list of articles.

Click to view more issues from previous months.

Colour Quarterly More Issues

EXPLORATION: 6.2 Home page-wire frame

INSPIRATION

INNOVATION

Colour Map

Experiential ColourJourneys

A graphic map of evocative ideas and emotions inspired by the issue colour.

INSIGHT

Mosaics In The Classical Style A rich colour story rooted in the Burgundy region of France.

A rich colour story rooted in the Burgundy region of France.

Categories showing the recent uploads or by default. It displays the snap shot along with the article heading and brief introduction. The user can directly click on the thumbnail to view the detailed article. Also the categories are present on the navigation bar or the header. The user can click on any one category to view the list of the articles in that specific category.

The Main Highlight: The home page will have one cover article as the main highlight from any category with enlarged image with introduction. The cover story can be chosen from any category according to Asian Paints. The cover also acts as a design element on the home page to give it a different look and avoid monotony.

Brief introduction about the article

The home page will have one cover article as the main highlight from any category with enlarged image with introduction.

INSPIRATION

Colour Map A graphic map of evocative ideas and emotions inspired by the issue colour.

INNOVATION

Experiential ColourJourneys A rich colour story rooted in the Burgundy region of France.

INSIGHT

Mosaics In The Classical Style A rich colour story rooted in the Burgundy region of France.

COLOUR QUARTERLY ISSUES

Shades Of Burgundy

Colour For Commercial Spaces

Mosaics In The Classical Style

COLOR QUARTERLY MORE ISSUES

The previous issues details are given along with the snapshot such as month, cover article brief, issue no.

Converting the initial exploration into visual iteration. The structure is very flexible to accommodate the varying number of tiles or categories if required but for the moment the number of tiles will remain fixed and can contain articles from vary category.

▒ EXPERT HELP

▒

IDEAS & MAKEOVERS

▒

A WORLD OF COLOURS

▒

PRODUCTS

▒

DEALER LOCATOR

An initiative by

INSPIRATION

Colour Map

A graphic map of evocative ideas and emotions inspired by the issue colour.

INNOVATION

Experiential ColourJourneys

A rich colour story rooted in the Burgundy region of France.

INSIGHT

Mosaics In The Classical Style

A rich colour story rooted in the Burgundy region of France.

In this visual iteration I have introduced the side panel which contains the article list for recent uploads. This was introduced to increase the interaction in the design but however the side panel did not solve any purpose apart from that because already the thumbnails from recent uploads are shown in the home page. This was the feedback on the exploration. However apart from the side panel the design language was appreciated and I was asked to work ahead on refining the structure to another level.

Search bar | The user can get access to any article or issue in particular demand.

Search articles & issues

Categories | There are 5 categories in the header. The user can click on any specific category to view the articles in that particular section/category.

INSPIRATION

Colour Map

INDIA CONNECT

A graphic map of evocative ideas and emotions inspired by the issue colour.

INSPIRATION

Highlights | There will be articles on the home page from the recent upload and from different categories. The user can view the entire article just by clicking the article thumbnail.

Colour Map A graphic map of evocative ideas and emotions inspired by the issue colour.

INSPIRATION

Lorem Ipsum

INSPIRATION

Lorem Ipsum Dolor Sit

Colour Map

The Colours of Navarasa Introducing a new series on the Indian tradition of emotive colour.

A graphic map of evocative ideas and emotions

COLOUR QUARTERLY ISSUES

Cover Highlight | The home page will contain one cover highlight or the cover story of the month or as per the recent uploads by Asian Paints. The user can view the article by one click. Show All

JULY 2012

APRIL 2012

JANUARY 2012

OCTOBER 2011

Lorem Ipsum Dolor sit Amet

A rich colour story rooted in the Burgundy region of France.

Previous Issues | The home page will contain the thumbnails of the previous publications month vise as per the archives and the user can go through the list by clicking on â&#x20AC;&#x153;Show Allâ&#x20AC;? and can open any issue and view the contents and articles. Issue Details | The previous issues details are given along with the snapshot such as month, cover article brief, issue number etc.

Write your views to Asian Paints. The link will be working after the final prototype testing.

Type, hit and search

Categories listing in the navigation bar Various recently uploaded article. Hit and read. Cover Highlight

The working online recourse. Its been such a long process to work on a single screen but at the end I was able to achieve the design needs.

Home Screen Final Prototype

The following screen displays the prototype of the home page. Search Bar | Hit, type and search

The final working prototype contains all the links and categories in working state.

Search articles & issues

INSPIRATION

Colour Map

INDIA CONNECT

A g raphic map of e vocat ive i de as and emotions inspi by the is s ue colour.

red

INSPIRATION

Colour Map A g raphic map of e vocat ive i de as and emotions inspi by the is s ue colour.

The user can scroll down to view the previous issues and can select any one to view the articles.

red

INSPIRATION

Lorem Ipsum

INSPIRATION

Lorem Ipsum Dolor Sit

Colour Map

COLOUR QUARTERLY ISSUES

A g raphic map of evocat ive i de as and emotions

The Colours of Navarasa Int roducing a new s eries on the Indian t radition of emot ive colour.

Show All

The user can scroll down and can view the pervious issues as well. He or she can hit and read the articles listed in the particular issue.

Article Page Iterative Design Process- II Article Page- Brain Storming Wire frames Visual Iterations & Mock-ups Feed Back & Category Preface Final Prototype A Complete Walk Through

Article Screen Brain Storming

The inside page has the following chunks of information to be displayed: Article Heading Sub- Heading Article Paragraph Images With Colour Details Social Media Integration Related Articles Comments & Tweets Articles List Thumbnails

I started with basic structure and categorized the information chunks. Initially the design elements were scattered but then I started to arrange them in a flow and understood the hierarchy of information. The next couple of pages will display various raw ideas and explorations done during the initial phase for the article screen.

Although I had to work towards one screen but that was the big challenge for me. I had to achieve a design template for article so that it can accommodate n number of articles which may vary in terms of colour information, images and more. So I had to come up with a flexible design or liquid design to maximum accommodation.

Article Screen Wire Frames

Sub-heading for the paragraph

Colour swatches displayed for the particular article. If there is any colour reference given in the images, the colour is displayed in the swatches with rgb value.

Opening heading for the article

Article list displayed as thumbnails with snap shot and brief introduction about the particular article.

Brief introduction about the article.

Images displayed

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur

Article paragraph

Article list displayed as thumbnails with snap shot and brief introduction about the particular article

If there is any colour reference given in the images, the colour is displayed in the swatches with rgb value.

Dynamic image which will keep changing as pre timed. The images will be extracted from the particular issue.

Links | Subscribe, Contact, About, Search, Events etc.

Related articles | with images and introduction.

LIKES | 300

TWEETS | 50

LIKES | 300

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia

Images displayed

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor fgg

Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur

Article paragraph

Social media integration

Comments from readers

Article Screen Visual Mock-ups Snap shot of the opening image from the article is displayed.

Lorem ipsum lorem ipsum lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, s Brief introduction about the article tempor is eiusmod displayed. On one click the userincididunt can view the detailed article. Lorem ipsum dolor sit amet, consectetur

adip eiusmod tempor incididunt ut labore et dolore

Lorem ipsum lorem

Lorem ipsum lorem ipsum lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum lorem ipsum lorem ipsum

Lorem ipsum lorem ipsum lorem ipsum Lorem ipsum lorem ipsum lorem ipsum

Lorem ipsum lorem ipsum lorem ipsum

Lorem ipsum lorem Lorem ipsum lorem ipsum lorem ipsum ipsum lorem ipsum

Lorem ipsum lorem

Colours information is displayed in these swatches with their rgb value.

EXPLORATION: 1.0 Article Page Exploration for web

Lorem ipsum lorem

Lorem ipsum dolor adipisicing elit, sed incididunt ut labore e Ut enim ad minim exercitation ullamco la ea commodo consequ in reprehenderit in vo dolore eu fugiat nulla occaecat cupidatat n culpa qui officia dese laborum.Lorem ipsu consectetur adipisicin tempor incididunt ut l aliqua. Ut enim ad nostrud exercitation aliquip ex ea commod irure dolor in reprehen esse cillum dolore eu Excepteur consequat. reprehenderit in volu dolore eu fugiat nulla

If there is any colour reference given in the images, the colour is displayed in the swatches with rgb value.

Dynamic image which will keep changing as pre timed. The images will be extracted from the particular issue.

Links | Subscribe, Contact, About, Search, Events etc.

R 67 G 89 B 89

Lorem ipsum lorem ipsum lorem ipsum

Article list displayed as thumbnails with snap shot and brief introduction about the particular article

R 67 G 89 B 89

Related articles with images and introduction.

Lorem ipsum lorem ipsum lorem ipsum

LOREM IPSUM

LIKES | 300

TWEETS | 50

LIKES | 300

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation Lorem ipsum lorem ipsum lorem ipsum

Images displayed

EXPLORATION: 1.1 Article Page Exploration for web

Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor fgg COMMENTS Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur

Article paragraph

Comments

Wire frame for the ipad screen of resolution of 768px by 1024px.

Dynamic image which will keep changing as pre timed. The images will be extracted from the particular issue.

Opening heading for the article

LOREM IPSUM

Links | Subscribe, Contact, About, Search, Events etc.

Related articles | with images and introduction. Article list displayed as thumbnails with snap shot and brief introduction about the particular article Sub-heading for the paragraph

The used can scroll up and down the article.

LIKES | 300

TWEETS | 50

LIKES | 300

Morem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor fgg Lorem ipsum dolor sit COMMENTS Lorem ipsum dolor sit consectetur Lorem ipsum dolor sit consectetur dol dolor si Lorem ipsum dolor sit consectetur Lorem ipsum dolor sit consectetur dol dolor si

Comments from readers

Lorem ipsum dolor sit consectetur

The used can scroll up and down the article.

Images displayed

Social media integration Likes and Tweets

Article paragraph

R 67 G 89 B 89

RELATED ARTICLES R 67 G 89 B 89

R 67 G 89 B 89

Dolmabahçe Palace Istanbul

Spread across 45,000 sq m, Dolmabahçe is a monoblock—an eclectic synthesis of Ottoman architecture whose European design elements signal Turkey’s growing fascination for the West. Rococo, Baroque and Neoclassical elements combine to create an impression of royal excess.

LIKES | 300

LIKES | 50

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor fgg Lorem ipsum dolor sit

LIKES | 24

Anywhere in the world, the obvious aim of royal architecture is to awe and impress. Other purposes—to cock a snook at neighbouring kingdoms, ensure a place in history, and simply indulge the royal ego! With its 285 rooms, 46 halls, 6 Turkish baths, 4 grand salons, 68 toilets and lavish gardens, Istanbul’s Dolmabahçe Sarayi is a magnificent throwback to another era, one that can only be described. in superlatives. Nine years in the making from 1856 onwards, this magnificent palace was the brainchild of Sultan Abdulmecid I. Apart from the The opulent interiors of the six sultans who lived here, Anywhere in Dolmabahçe Palace the world, the obvious aim of royal architecture is to awe and impress. Other purposes—to cock a snook at neighbouring kingdoms, ensure a place in history, and simply indulge the royal ego! With its 285 rooms, 46 halls, 6 Turkish baths, 4 grand salons, 68 toilets and lavish gardens, Istanbul’s Dolmabahçe Sarayi is a magnificent throwback to another era, one that can only be described in superlatives. Nine years in the making from 1856 onwards, this magnificent palace was the brainchild of Sultan Abdulmecid I. Apart from the six sultans who lived here, Anywhere in the world, the obvious aim of royal architecture is to aweAnywhere in the world, the obvious aim of royal architecture is to

LIKES | 300

LIKES | 50

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor fgg Lorem ipsum dolor sit

LIKES | 24

COMMENTS or TWEETS

Lorem ipsum dolor si consectetur dolor ipsum

The opulent interiors of the Dolmabahçe Palace

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor fgg Lorem

EXPLORATION: 1.2 Article Page Exploration for iPad screen

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor fgg Lorem

Above explorations are done for the iPad screen with resolution 768px by 1024px. The side right bar is slide in and out. The user can tap once to slide-in to get the article list and slide-out after choosing.

Lorem ipsum lorem ipsum lorem ipsum

The thumbnail panel on the right can slide in and slide out with one touch. The user can scroll through the list of the thumbnails and with another tap can view the detailed article.

Lorem ipsum lorem ipsum lorem ipsum

R 67 G 89 B 89

LOREM IPSUM

R 67 G 89 B 89

Lorem ipsum dolor sit amet, consectetur adipisicing sed Lorem ipsum dolor elit, sit amet, do eiusmod tempor incididunt consectetur adipisicing elit, sed do

The user can flick right and left through the colour swatches.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, eiusmod tempor incididunt Lorem ipsum dolor sit amet, sed do eiusmod tempor incididunt ut labore et dolore consectetur Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do adipisicing elit, magna aliqua. sed do eiusmod tempor eiusmod tempor incididunt ut labore et dolore magna aliqua. fgg Lorem ipsum dolor sit

LIKES | 300

TWEETS | 50

LIKES | 300 Lorem ipsum lorem ipsum lorem ipsum

LIKES | 300

TWEETS | 50ipsum LIKESdolor | 300 Morem

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor fgg Lorem COMMENTS ipsum dolor sit

sit amet, consectetur adipisicing elit, sed do eiusmod ipsum dolor sitCOMMENTS or TWEETS Morem ipsum dolor sit amet, Lorem consectetempor incididunt labore et dolore turutadipisicing elit, sed do consectetur eiusmod magna aliqua. tempor Ut enim ad minim Lorem ipsum dolor si consectetur incididunt ut labore et dolore Lorem ipsum dolor ipsum veniam, quis nostrud exercitation magna aliqua. Ut enim ad minim dolor sit consectetur dol

veniam, quis nostrud exercitation dolor si

Lorem ipsum lorem ipsum lorem ipsum

Lorem ipsum dolor si consectetur Ullamco laboris nisi ut aliquip ex ea dolor ipsum Lorem ipsum dolor sit commodo consequat. Duis autenisi irureut aliquip ex ea Ullamco laboris consectetur dolor in reprehenderit voluptate Duis aute irure commodoinconsequat. Lorem ipsum dolor si consectetur dolor ipsum reprehenderit velit esse cillum dolor doloreineu fugiat nullain voluptate Lorem velit ipsum essesint cillum dolorecupieu fugiat nulla dolorpariasit consectetur dol pariatur. Excepteur occaecat Lorem ipsum dolor si consectetur si tur. Excepteur sint qui occaecat dolor cupidatat datat non proident, sunt in culpa dolor ipsum non proident, sunt in culpa qui officia officia Lorem ipsum dolor sit

Morem ipsum dolor sit amet, consectetur consecte consecte-

Lorem ipsum lorem ipsum lorem ipsum

tur adipisicing adipisicing elit, elit,sed sed do eiusmod Lorem ipsum dolor sit amet, consectetur tempor incididunt ut labore et dolore do eiusmod tempor incididunt ut labore et dolore magna magna exercitation aliqua. Ut enim ad minim aliqua. Ut enim ad minim veniam, quis nostrud veniam, quis nostrud exercitation quis

exercitation Ullamco laboris nisi ut aliquip ex ea nostrud commodo consequat. Duis aute irureipsum dolor dolor in reprehenderit in voluptate velit esse Lorem sit amet, consectetur adipisicing elit, sed do eiuseius cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat mod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation cupidatat non proident, sunt in culpa qui officia Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia

The user can also scroll up and down through the third column of related articles and comments.

Article Screen Navigation & Effects

When the user taps once on any image, the colour swatches are displayed in the above panel, below the link bar. Also, the pop up appears on the image where ever the colour information is available in the image.

r- x g-x b-x r- x g-x b-x

r- x g-x b-x

RGB

If there are any swatches for that particular image, the swatches are displayed in RGB mode along with code.

When the user can swipe from left to right for more swatches.

Dynamic in nature.

DEEP DIVE ARTICLE TEMPLATE

Dynamic swatches of the particular colours used in the article.

We have tried to create a hierarchy in the visual language of the content. The main Title is Bold, colour coded. The other information structure has accordingly been worked upon.

DEEP DIVE ARTICLE TEMPLATE

Currently working on user interactions in the magazine. When the user taps the particular image in the article a pop up appears showing the colour code and name of the swatch.

The header of the article template will conatin the cover image zoomed in and will be dynamic in nature. The images from that particular article will be appearing to enhance interaction.

The bar can contain other specifics such as search, about, contact, subscribe etc. At the moment we have used dummy links which can be replaced.

Thumbnails displaying the other articles along with the image and other specifics of the article.

These are the colour swatch elements and will be displayed at the top of the article. The swatches will contain colours used in that particular article with code and name.

The right column can contain comments, related articles, tweets and other specifics from the article. The text copy and images are dummy and will be replaced.

The following points were kept in mind during the initial design dicussions and concepts: I. Strong grid structure along with the content felxibility to adapt multiple screen resolutions. II. Colour focus in each issue. III. Minimalistic design for the user readability. IV. Proper display of information structure.

DEEP DIVE ARTICLE TEMPLATE For sharing the feed back and displaying contact details

Write your commnets

Showing Comments

For Log in and sign up.

Dynamic display image.

R 67 G 89 B 89

The user can flick right and left through the colour swatches.

Opening heading for the article

Dolmabahçe Palace Istanbul Sub-heading for the paragraph

The opening image from the article is taken as a background and it floats in the back as the user scroll up and down through the article.

Article paragraph

Anywhere in the world, the obvious aim of royal architecture is to awe and impress. Other purposes—to cock a snook at neighbouring kingdoms, ensure a place in history, and simply indulge the royal ego! With its 285 rooms, 46 halls, 6 Turkish baths, 4 grand salons, 68 toilets and lavish gardens, Istanbul’s Dolmabahçe Sarayi is a magnificent throwback to another era, one that can only be described. in superlatives. Nine years in the making from 1856 onwards, this magnificent palace was the brainchild of Sultan Abdulmecid I. Apart from the six sultans who lived here, Anywhere in the world, the obvious aim of royal architecture is to awe and impress. Other purposes—to cock a snook at neighbouring kingdoms, ensure a place in history, and simply indulge the royal ego! With its 285 rooms, 46 halls, 6 Turkish baths, 4 grand salons, 68 toilets and lavish gardens, Istanbul’s Dolmabahçe Sarayi is a magnificent throwback to another era, one that can only be described in superlatives. Nine years in the making from 1856 onwards, this magnificent palace was the brainchild of Sultan Abdulmecid I. Apart from the six sultans who lived here, Anywhere in the world, the obvious aim of royal architecture is to aweAnywhere in the world, the obvious aim of royal architecture is to Anywhere in the world, the obvious aim of royal architecture is to awe and impress. Other purposes—to cock a snook at neighbouring kingdoms, ensure a place in history, and simply indulge the royal ego! With its 285 rooms, 46 halls, 6 Turkish baths, 4 grand salons, 68 toilets and lavish gardens, Istanbul’s Dolmabahçe Sarayi is a magnificent throwback to another era, one that can only be described.

EXPLORATION: 2.0 Article Page Exploration for iPad screen

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor fgg Lorem ipsum dolor sit COMMENTS or TWEETS Lorem ipsum dolor si consectetur dolor ipsum Lorem ipsum dolor si consectetur dolor ipsum Lorem ipsum dolor si consectetur dolor ipsum Lorem ipsum dolor si consectetur dolor ipsum RELATED ARTICLES

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor fgg Lorem

Related articles with images and introduction.

I have tried to play around the masthead and made it left aligned to achieve an overall different visual appeal.

June 2012 I have kept the back ground white unlike the previous iterations to get a more spacious looking design.

Code Red–X120 R 196 G 52 B 45

Colour Compass Using colour to establish orientation Interview by J. Michael Welton Guy Zucker is the principal and founder of Z-A, a New York based studio for architectural innovation, dedicated to exposing the unexpected in the mundane.

Tried to introduce different design elements. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor fgg Lorem ipsum dolor sit

When the user taps once on any image, the pop up appears to display the colour information present in the image and also the swatches can be viewed placed above.

COMMENTS or TWEETS Lorem ipsum dolor si consectetur dolor ipsum Lorem ipsum dolor si consectetur Code Red–X120 R196 G52 B45

dolor ipsum Lorem ipsum dolor si consectetur dolor ipsum Lorem ipsum dolor si consectetur dolor ipsum

I have avoided the bars in the third column to achieve a much lighter feel and look.

A diagramatic approach to the use of colours to establish clear orientation at the 14 Street Y community center

Guy Zucker is the principal and founder of Z-A Studio in New York City. His firm has designed libraries in Stockholm and Prague, a vacation home on the border between Israel and Lebanon, as well as the 14th Street Y Community Center and the Delicatessen women's fashion store in Manhattan.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor fgg Lorem

EXPLORATION: 3.0 Guy Zucker also teaches a design studio at the University of Pennsylvania for

The basic elements of the article page remain the same but I have tried to explore the design iteration.

Feed Back & Suggestions for Article Screen

The designs were appreciated but they wanted a more universal template design for the article display, along with one more screenThe Mouse-over screen.

When the user hovers over the thumbnails, he or she lands on the mouse-over screen which may contain the snap shot of the opening image along with the brief introduction and heading.

The print and online version was worked on parallel lines and designs and feedbacks were shared at a constant pace. The designs were supposed to be in harmony with both the media so provide a overall same harmony for easy recall value for the customer.

The colour swatches were suggested to be removed for the top and instead find another way to accommodate the colour information in the design because the swatches were space consuming and if at all there is no colour information available for the particular article.

Feed back, Changes & Suggestions from Asian Paints

The stated concern was worked upon and was resolved with satisfying navigation system. Thus the designs were re-done and I started with the brain storming keeping the suggestions and changes in mind. This time, I was aiming to achieve a flexible design iteration which would be accommodating to n number of articles. I wanted to keep the design clean, crisp and with minimal distractions.

Article page brain storming: I was working towards more flexibility for the structure.

Column 3: Displays the Comments, Related articles listing, Tweets and other options.

Column 2: Displays the article paragraph along with the visuals.

Column 1: Displays the list of article list from the category or issue.

EXPLORATION: 4.0

Article Screen Final Prototype Article heading Colour swatches with RGB and code information

Asian Paints logo

Related articles with thumbnails and introduction

Asian Paints

Colour Quarterly

Displays the list of article list from the category or issue.

LOREM IPSUM LOREM IPSUM LOREM IPSUM IPSUM LOREM Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem

Lorem ipsum lorem ipsum lorem ipsum lorem ipsum

Comments Lorem ipsum lorem ipsum lorem ipsum lorem ipsum

Highlights the selected article

Lorem ipsum lorem ipsum lorem ipsum lorem ipsum Lorem ipsum lorem ipsum lorem ipsum lorem ipsum

Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem lorem ipsum lorem ipsum lorem

Visuals along with the article paragraph

EXPLORATION: 4.0

Comments and tweets from the readers

Lorem ipsum lorem ipsum lorem ipsum lorem ipsum

Dashboard

An initiative by

Code Red–X120 R196 G52 B45

Table of Contents

300

Code Red–X120 R196 G52 B45

SHADES OF BURGUNDY Welcome to Burgundy, France, whose very name evokes rich colour, warmth, flavour and a sense of well-being. Here, food and drink are as much an art form as the region’s architectural heritage and natural beauty – a feast for the eyes, palate and soul.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor fgg Lorem ipsum dolor sit consectetur adipisicing elit, sed do eiusmod tempor fgg

Author | Lorem ipsum

COMMENTS or TWEETS Lorem ipsum dolor si consectetur dolor consectetur adipisicing Lorem ipsum dolor si consectetur dolor consectetur adipisicing Lorem ipsum dolor si consectetur dolor consectetur adipisicing Lorem ipsum dolor si consectetur dolor consectetur adipisicing

The world knows Burgundy as France’s celebrated wine-producing region. But Bourgogne—its French name—is more than its iconic wines like Chardonnay, Pinot Noir, Chablis, and Sauvignon. Burgundy has a unique history and a regional culture quite distinctive from the rest of France. The province derives its name from the Burgundians, a people of Scandinavian origin who migrated here around the 1st century. Predating the Burgundians were a long line of conquerors and settlers going back twenty thousand years—the Romans, Celtic tribes,

EXPLORATION: 4.0

and

prehistoric

times,

Cro-Magnon

hunters

and

Neanderthals. Unable to withstand military might the Romans, Displays the visual the mock-up forofthe wire frame

on the left page with similar information of the visual elements.

the Burgundians established a feudatory alliance with the imperial power that allowed them to flourish and establish a powerful

kingdom. As Rome’s power declined in the 5th century, the Burgundians gradually gained control over the Saône and Rhone river

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor fgg Lorem ipsum dolor si consectetur dolor consectetur adipisicing

Additionally, Burgundy is home to the Charollais, among the world’s best varieties of beef cattle. À la bourguignonne is the term used for dishes prepared with classic Burgundy sauce—cooked in red wine with strips of bacon, mushrooms, and baby onions. Boeuf bourguignon and Coq au vin, famous worldwide, are traditional Burgundian fare.

Speciality of the Region An initiative by

Dashboard

Table of Contents

300

Chilly winters, warm summers, and plentiful rain—characteristics of a continental climate —have favoured Burgundy’s emergence as one of the world’s foremost wine producers. Interestingly, the wines produced here originate from thousands of small vineyards rather than a few large estates. A winegrower with a tiny patch of land may produce up to a dozen varieties of red and white wines.

The classic Burgundy wines are derived from single varieties of grape. Pinot Noir produces the best red wines while white wines come from Chardonnay grapes.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor fgg Lorem ipsum dolor sit consectetur adipisicing elit, sed do eiusmod tempor fgg

COMMENTS or TWEETS Lorem ipsum dolor si consectetur dolor consectetur adipisicing Lorem ipsum dolor si consectetur dolor consectetur adipisicing

Code Red–X120 R196 G52 B45

Lorem ipsum dolor si consectetur dolor consectetur adipisicing Lorem ipsum dolor si consectetur dolor consectetur adipisicing

Burgundy’s Colours There’s a memorable evening interlude, when dusk drops grey veils over this fertile land—as the sun dips, the serried green valleys with stone houses nestling in their folds are enveloped in a dreamy, honey-gold glow. It’s just another perfect summer day in Burgundy. There’s more to satiate the eyes and heart in the Morvan Forest at the heart of Burgundy, a twenty five million hectare granite outcrop in a predominantly limestone region. Through this green sanctuary, the rivers Cousin, Yonne, and Cure carve valleys that are a wildflower paradise in spring; violets, butter-yellow cowslips, bluebells, and lily-of-the-valley carpet the slopes. Silver streams and waterfalls glitter beneath the greens and browns of beech, oak, fir, and pine. There’s a timeless, distilled grace about Burgundy that is to be savoured like one of its iconic wines.

EXPLORATION: 4.0

Design iteration displaying the pop-ups or highlighted paragraphs from the article.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor fgg Lorem ipsum dolor si consectetur dolor consectetur adipisicing

RELATED ARTICLES Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor fgg Lorem ipsum

Dashboard

500 pixels An initiative by

Code Red–X120 R196 G52 B45

Table of Contents

300

Code Red–X120 R196 G52 B45

SHADES OF BURGUNDY Welcome to Burgundy, France, whose very name evokes rich colour, warmth, flavour and a sense of well-being. Here, food and drink are as much an art form as the region’s

200 pixels

architectural heritage and natural beauty – a feast for the eyes, palate and soul.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor fgg Lorem ipsum dolor sit consectetur adipisicing elit, sed do eiusmod tempor fgg

Author | Lorem ipsum

COMMENTS or TWEETS Lorem ipsum dolor si consectetur dolor consectetur adipisicing

260 pixels

Lorem ipsum dolor si consectetur dolor consectetur adipisicing Lorem ipsum dolor si consectetur dolor consectetur adipisicing Lorem ipsum dolor si consectetur dolor consectetur adipisicing

220 pixels The world knows Burgundy as France’s celebrated wine-producing region. But Bourgogne—its French name—is more than its iconic wines like Chardonnay, Pinot Noir, Chablis, and Sauvignon. Burgundy has a unique history and a regional culture quite distinctive from the rest of France. The province derives its name from the Burgundians, a people of Scandinavian origin who migrated here around the 1st century. Predating the Burgundians were a long line of conquerors and settlers going back twenty thousand years—the Romans, Celtic tribes,

EXPLORATION: 4.0

and

prehistoric

times,

Cro-Magnon

hunters

and

Neanderthals. Unable todisplays withstand the military might ofdetails the Romans, The screen the column for

the the Burgundians established a feudatory alliance with the imperial visual mock-up discussed on the left page. power that allowed them to flourish and establish a powerful kingdom. As Rome’s power declined in the 5th century, the Burgundians gradually gained control over the Saône and Rhone river

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor fgg Lorem ipsum dolor si consectetur dolor consectetur adipisicing

1440 pixels

Dashboard

An initiative by

Asian Paints

Code Red–X120 R196 G52 B45

Table of Contents

300

Code Red–X120 R196 G52 B45

COLOUR COMPASS USING COLOUR TO ESTABLISH ORIENTATION INTERVIEW BY J. MICHAEL WELTON

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor fgg Lorem ipsum dolor sit consectetur adipisicing elit, sed do eiusmod tempor fgg

Guy Zucker is the principal and founder of Z-A, a New York based studio for architectural innovation, dedicated to exposing the unexpected in the mundane.

Code Red–X120 R196 G52 B45

RELATED ARTICLES Code Red–X120 R196 G52 B45

A diagramatic approach to the use of colours to establish clear orientation at the 14 Street Y community center Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor fgg Lorem ipsum dolor si consectetur dolor consectetur adipisicing

RELATED ARTICLES Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor fgg Lorem ipsum

On mouse-over on any image, the user can view the pop-up displaying the colour information, if available for that image.

30px Table of Contents

152px

Dashboard

An initiative by

356px 448px

150px by 60px

300

225px Code Red–X120 R196 G52 B45

Asian Paints

300

Code Red–X120 R196 G52 B45

COLOUR COMPASS USING COLOUR TO ESTABLISH ORIENTATION INTERVIEW BY J. MICHAEL WELTON Guy Zucker is the principal and founder of Z-A, a New York based studio for architectural innovation, dedicated to exposing the unexpected in the mundane.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor fgg Lorem ipsum dolor sit consectetur adipisicing elit, sed do eiusmod tempor fgg

Code Red–X120 R196 G52 B45

RELATED ARTICLES Code Red–X120 R196 G52 B45

RELATED ARTICLES Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor fgg Lorem ipsum

EXPLORATION: 4.1

The screen displays the key information of the pixel details for the visual mock-up on the left page.

38px

Column 1 Floating column can accommodate pop-ups, highlighted paragraphs or visual thumbnails. Column 2 & 3 Can accommodate body text of paragraph along with visuals. Column 1, 2 & 3 Can accommodate visuals

EXPLORATION: 5

The screen displays the key information of the pixel and column details for the visual mock-up discussed in the previous page.

The screen displays the visual mock-up for exploration 5 with similar information in term of design elements.

This is the â&#x20AC;&#x153;floating columnâ&#x20AC;? which contains the social media integration along with the highlighted paragraphs and can also accommodate thumbnails and visuals of necessary.

ASIAN PAINTS HEADER

Search Articles & Products RELATED ARTICLES

09 ISSUE

Colour Map A graphic map of evocative ideas and emotions inspired by the issue colour.

JULY 2012

ARTICLES IN THIS ISSUE

Shades Of Burgundy A rich colour story rooted in the Burgundy region of France.by the issue colour.

TWITTER FEED

Colour Quarterly Article Page Prototype-visual mock-up.

User Clicks and is taken to the dash board

Author Snap shot Highlight LOREM IPSUN......LOREM IPSUM

User Clicks outside for the current issue

EXPLORATION: 1

The screen displays the visual design iteration for the mouse-over effect.

COLOUR COMPASS USING COLOUR TO ESTABLISH ORIENTATION INTERVIEW BY J. MICHAEL WELTON Author | Lorem ipsum

Displays the visual mock-up for the wire frame on the left page with similar information of the visual elements.

Dashboard

An initiative by

Code Red–X120 R196 G52 B45

Table of Contents

300

Code Red–X120 R196 G52 B45

Article heading along with the brief introduction to the article.

SHADES OF BURGUNDY Welcome to Burgundy, France, whose very name evokes rich colour, warmth, flavour and a sense of well-being. Here, food and drink are as much an art form as the region’s

COLOUR COMPASS USING COLOUR TO ESTABLISH ORIENTATION INTERVIEW BY J. MICHAEL WELTON

architectural heritage and natural beauty – a feast for the eyes, palate and soul. Author | Lorem ipsum

Guy Zucker is the principal and founder of Z-A, a New York based studio for architectural. Morem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation Ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia

The world knows Burgundy as France’s celebrated wine-producing region. But Bourgogne—its French name—is more than its iconic

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor fgg Lorem ipsum dolor sit consectetur adipisicing elit, sed do eiusmod tempor fgg

Snap shot or thumbnail for the selected article.

wines like Chardonnay, Pinot Noir, Chablis, and Sauvignon. Burgundy has a unique history and a regional culture quite distinctive from the rest of France. The province derives its name from the Burgundians, a people of Scandinavian origin who migrated here around the 1st century. Predating the Burgundians were a long line of conquerors and settlers going back twenty thousand years—the Romans, Celtic tribes,

EXPLORATION: 2

and

prehistoric

times,

Cro-Magnon

hunters

and

The screen displays the visual design iteration established for the mouse-over effect. the Burgundians a feudatory alliance with the imperial

Neanderthals. Unable to withstand the military might of the Romans, power that allowed them to flourish and establish a powerful kingdom. As Rome’s power declined in the 5th century, the

Lorem ipsum dolor sit amet,

ASIAN PAINTS HEADER

Search Articles & Products RELATED ARTICLES

09 ISSUE

Colour Map A graphic map of evocative ideas and emotions inspired by the issue colour.

JULY 2012

ARTICLES IN THIS ISSUE

Shades Of Burgundy

INDIA CONNECT

The Colours of Navrasa

A rich colour story rooted in the Burgundy region of France.by the issue colour.

TWITTER FEED

Introducing a new series on the ancient Indian theory of emotional essence in the arts, examined through its relationship with colour.

The user can read the article by another click on the thumbnail.

EXPLORATION: 3

The screen displays the final design execution for the hover effect. The user can view the image thumbnail along with the article heading and introduction.

Image displaying the working prototype.

The screen shots displaying the visual prototype for the article page.

Search articles & issues

A INSPIRATION

Colour Map

Step 1 Land on Home page

INDIA CONNECT

A graphic map of evocative ideas and emotions inspired by the issue colour.

INSPIRATION

Colour Map A graphic map of evocative ideas and emotions inspired by the issue colour.

User can click on any category displayed on the header.

B B

User can also select the direct thumbnail displayed

INSPIRATION

Lorem Ipsum

INSPIRATION

Lorem Ipsum Dolor Sit

Colour Map

Can select any previous issue.

User can search any particular article.

Direct go to the Cover Story.

The Colours of Navarasa Introducing a new series on the Indian tradition of emotive colour.

A graphic map of evocative ideas and emotions

COLOUR QUARTERLY ISSUES

Show All

JULY 2012

APRIL 2012

JANUARY 2012

OCTOBER 2011

Lorem Ipsum Dolor sit Amet

A rich colour story rooted in the Burgundy region of France.

Step 2 Browse through.. Select any article to read.

ASIAN PAINTS HEADER

A B

On mouse-over, get the colour information if available by Asian Paints.

User can also browse through other article thumbnails from the left panel.

User can view the Related Articles for current article.

User can view comments and tweets from previous readers and updates from Asian Paints.

Can return to the Home page.

Search Articles & Products RELATED ARTICLES

ISSUE

JULY 2012

User can read the selected article.

ARTICLES IN THIS ISSUE

Colour Map

A graphic map of evocative ideas and emotions inspired by the issue colour.

Shades Of Burgundy A rich colour story rooted in the Burgundy region of France.by the issue colour.

RGB & Code

TWITTER FEED

B E

Step 3 Read & Comment

A B

The user can leave a comment for any article at the end. The user can also get connected to Facebook, Twitter, Google plus and other social media platforms and leave a post for the read article.

A B

Step 4 Social Media Integration

Get connected to various social media platform across and share your comments and feeds among your friends and professionals!

A Complete Walk Through Colour Quarterly

Land

Browse

The screen displays the Home page or Dash Board

Select ASIAN PAINTS HEADER

Search Articles & Products RELATED ARTICLES

09 ISSUE

Colour Map A graphic map of evocative ideas and emotions inspired by the issue colour.

JULY 2012

ARTICLES IN THIS ISSUE

Shades Of Burgundy

INDIA CONNECT

The Colours of Navrasa Introducing a new series on the ancient Indian theory of emotional essence in the arts, examined through its relationship with colour.

The screen displays the Hover-on effect.

A rich colour story rooted in the Burgundy region of France.by the issue colour.

TWITTER FEED

Read ASIAN PAINTS HEADER

Search Articles & Products RELATED ARTICLES

09 ISSUE

Colour Map A graphic map of evocative ideas and emotions inspired by the issue colour.

JULY 2012

ARTICLES IN THIS ISSUE

Shades Of Burgundy A rich colour story rooted in the Burgundy region of France.by the issue colour.

TWITTER FEED

The screen displays the Article page.