Doc elective2 7 2

Elective 2 Documentation

Online Portfolio for Meanmullu Animation Studio

Prgramme/Year: Under Graduate Graphic Design 2009-10 Student: Fazal Thanveer V Guide: Rupesh Vyas National Institute of Design, Ahmedabad

Introduction

2

Elective 2 was an opportunity to do a

because of my limited technical

project on subject of my own choice.

knowledge and time constrains. So I

I am very interested in movies. A

decided to take up another subject for

good movie can ewoke the audience’s

the project. It was during that time

emotions. Movies can open up your

that my friend Ranjitha asked me

mind. Through the screen you enter

whether I would make a website for

a vast landscape of imagination.

her freelance animation team which

The first idea was to create an interactive

consisted of her and Arun Prakash.

story experience for the web inspired

I decided to take up it as a project

from the cinematic narratives. I had

because I had wanted to know about

no doubt that ‘Life of Pi’ would be a

web designing and it interested me.

suitable story for that purpose. The story

They did not had a name or logo for the

had the ocean as the background- the

studio, so I was a part of naming and

canvas. The idea wouldn’t materialize

designing the logo for their studio too.

Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘09

first Idea

Life of Pie

An Interactive Graphic Story for the Web

Life of Pi is a wonderful story.

which Pi Patel, the protagonist had

It connects with everyone in a very

in the story as far as the mediums

personel level. In the novel, the

of digital web could achieve.

protagonist is alone in the middle

I read a review of the novel in school

of infinite ocean and he has to

and read the novel last year, much

fight for survival. He has to fight

before I got to know that a movie

against the submissive self of his

on the same was being made!.

own and the forces of nature.

‘Life of Pi’ book cover

My idea was to create a web page which creates an environment for the audience to experience the same thoughts, loneliness and dreams

3

Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘09

Technology Enabling Seamless Interactive Graphics in Web Browser.

The advent of WebGL and its inclusion in many browsers enabled Javascript programmes running in web browser to access the GPU (Graphic Processing Unit) without a plugin or extention.

High level libraries such as Three.js or GLGE or a number of other libraries now make it possible to author complex 3D computer animations that display in the browser using nothing more than a simple text-editor.

http://www.chromeexperiments.com/webgl

4

Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘09

To construct the kind of web platform I had in mind, it required an in-depth knowledge of Java script and WebGL. With in the time and scope of the project, it was not possible to learn and apply them, for me being having no prior experience in scripting.

5

Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘09

Identity and Website

MeanMullu Animation Design Studio How the Studio came into being and story behind the name.

“Two animators love films and

which literally translates to Fish bone.

Hmmm well its difficult for non-south

wanted to make few of their own. So

How the story stuck in the brain!

Indians to pronounce or remember.

they put up a small studio - Mean

Sometimes when you eat fish, the thorn

So recall value is low. People might

mullu. Travel and Share their

gets stuck between your teeth now this

vandalize the word and call it mean

experience through their films.

is a reminder of good food had at home.

mallu, which is totally different. So

Arun and Ranjitha both hail from the

It all started with a kid exclaiming

there is a possible confusion of brand

southern part of India. Even though

after eating her first fish that the fish

identity. Doesn’t have a ring to it! It

their languages, mannerisms and

is biting her! wthich Arun turned into

sounds so silly! There were many who

work are states apart, their ideas

his diploma film and one thing led to

loved it too. They loved the new sounds.

complemented somewhere and that’s

the other and voila we’ve got a studio.

So the conviction wavered for a little

how the germ of a studio was born.

Even if the studio was born there was

and many other related names came

Arun’s vibrant use of colours and

no name, never gave it a thought.

out: Fish bone, Mean bone, mean films

Ranjitha’s crude brushwork is what

When they sat to think about it they

and Mean films stuck! Even made logos

gives them their indie-dual style. They

realized that mean mullu is mean

for it! But it was not Mean Mullu, there

think from their second brain (which is

mullu in both their languages! And

was no story, nothing, just recall value.

the stomach) and fish is their favorite

also the reason for the conception of

Finally it was Meanmullu!”

food hence the name - Mean mullu,

this studio! So why not Mean Mullu?

Then came the critics: mean mullu?

6

Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘09

The Logo To make a simple single coloured Japanese seal like logo was the aim.

So we drew fish with the bone, with flesh, without the flesh and many many ways. But it didn’t ring the bell at all. Finally, the character of mean mullu came just in 10 strokes of luck.

Eventually the final logo is a red seal.

About Japanese Seals: The Japanese do not use signatures.

Instead, they use seals with the person’s name in kanji. The stamps are called hanko or inkan and are made of wood, ivory, or plastic.

7

Explorations

Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘09

Explorations 8

Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘09

Explorations 9

Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘09

The Logo I had in my mind that the logotype should reflect the duo’s character, which is a mixture of the organic and the structured. A handwritten style would make it too organic and a regular typeface, too structured. Many explorations were made with different mediums, different tools and different techniques. Took printouts of typefaces and wrote over it using hand and scanned them so that it would have both the characters of handwritten and typeface. Finally, an altered version of Helvetica Neue served the purpose. The acute angles of the letters were filled with shapes as if they were vessels which made it look like completely different typeface, ink dripping out from it but the structure of the typeface is intact.

10

Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘09

width/ height ratio of seal 5: 12

C: 7, M: 89, Y: 75, K: 1 R: 211, G:43, B: 54 Hexcode: # d32b36

11

Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘09

Stories About the Logo Character

The logo character has a story to tell. He is desperately trying to swim in the water but alas he got no fins, no flesh. So every day he tries various ways to swim or even float until the day he succeeds (quite similar to his makers condition!)

The website, stationaries of the studio and other places where the identity is going to be visible could have this story as an interesting narrative in different forms like comic strips and small animations.

12

Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘09

Project Proposal

13

Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘09

Digital Promotion for Animation Film Studio Introduction

Objective

We see hundreds of works of art and

– to create a digital ecosystem

5. Ideating with different narratives

design each day in the internet. For

– creating various online platforms

– creating different iterations for the

anyone from any part of the world to get

– creating viral approach for promotion

look and feel

his/her work noticed is not at all difficult today. Thousands of new websites and millions of images and videos get added to the internet each day. To get noticed among this avalange of information is a tricky task. To be followed, it’s necessary to be unique.

Methodology 1. Collection and analysis of data

Possible Outcomes

2. Primary user study

• A website for the studio.

Addressing questions like:

• A custom wordpress blog

– who is the target audience?

template for the studio.

– where is it going to be implemented?

• Ideation for the twitter

3. Secondary study

and facebook pages.

Approach

Studiying similar existing projects and

The studio is in its early stage of growth.

understand their:

This poject would be an exercise to

– structure

learn how much effective will the web

– semiotic aspects

site be for the studio in this stage.

– technology

Critical openion is made about a

4. Synthesising observation and study: Creating information structural

company by the audience after seeing it’s website. Being from the field of

architecture

art and design, it’s important for the

– creating wire frames

studio’s website to be a work of art.

– user testing of wire frames

14

6. coding and uploading

Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘09

• A set of stationary and collaterals.

Research

The project got more clarity after writing the project proposal though it seemed to be ambitious and time consuming.

The primary research consisted of interviewing students, faculty, studios freelance designers and possible clientele for the company like software designers and film producers.

Secondary research was the study of similar projects, websites of animation film makers and studios.

Some slides from the presentation made aduring the research are presented in the following pages:

15

Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘09

PRIMARY USER STUDY Adderssing Questions like

WHO? WHY? WHERE?

TARGET AUDIENCE 1. Potential Clients 2. Designers, Artists

Focus of Communication 3. Students 4. Others

Potential Clients

1. Outsourcing production Companies 2. Non Profit Organisations 3. Institutions

Versatility

Each client look for a certain visual style for their project which differs from client to client and from project to project. The website has to display the stylistic flexibility of the studio.

“Artwork of a Website”

The market place for animation is getting populated more and more on either side. To get noticed, the website has to be unique in terms of interactivity, visual style and critically, content.

Cultural Cues

Being an independent studio, its important that in terms of portraying itself, the identity of the culture where you have your roots is not disappearing, melting into the global chaos of identity.

16

Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘09

SECONDARY STUDY STUDYING SIMILAR PROJECTS

Section Page

Home page

Pixar

Pixar

Catogarization of content in header

Feature Film section

Title page Drop down to see videos

Main display

Begin to go through the

area, Latest work

whole project

Favourite picks

17

Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘09

Select from the projects

Story of the process

Pixar

Story of the process

Pixar

About single project

About the film

About single project

The story process

Story of the process

Pixar

18

Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘09

Sound

Story of the process

Pixar

About single project

The characters

Movie insights

About single project

The world

Movie insights

Sound

Home page

Studio 4˚C

Catogarization of content in header

Artist’s page

Studio 4˚C

Interactive flashwork

Portfolio page

Studio 4˚C

List of artists

Artist’s page

Studio 4˚C

Portfolio display like a space ship control panel

List of artists

19

Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘09

Artist’s profile

Artist’s profile

Home page

Headless

Login page

Headless

Colour theme to

suite the kind of work done

Portfolio page

Headless

Single window to see a series of differenrt works

20

Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘09

Home page

Psyop

Process

Interesting name for blog

Paths of Hate

Home page

Paths of Hate

21

Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘09

Vimeo page

Eeksaurus

The Site Structure The Basic Architecture of The Website.

While developing a content outline the following guidelines were followed: • Writing a list of all the existing content • Brainstorm the content that needs to be created for the website • Review the list of content, trim anything that won’t match the target audience • Take time to think about the future and how the site content might grow • make sure that you leave space for growth

Content Outline

Card Sorting: This is a methode to find the user’s mental model. Finding patterns in how users would expect to find content or functionality.

22

Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘09

http://boxesandarrows.com/card-sorting-adefinitive-guide/

The Site Outline While developing the site diagram, the following guidelines were followed: • What is the information structure?

• How do I visually represent that structure?

• What relationships exist among the webpages?

• How are those page

http://boxesandarrows.com/site-diagramsmapping-an-information-space/

relationships represented?

Site outline and tree structure of the website

23

Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘09

Wireframes A wireframe is a simple drawing of the chunks of information and functionality for each page in the site.

fishybone-animation film design http://fishybone.com

Short Films

http://fishybone.com

Google

Short Films

Illustrations

Illustrations

Visual Development

Visual Development

About

About

Contact

Contact

f

Terms of Use | Privacy Policy | ™ & R Fishy Bones 2012 - 2022

http://boxesandarrows.com/where-thewireframes-are-special-deliverable-3/

24

fishybone-animation film design Google

Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘09

A small river named / 2012

A small river named / 2012

A small river named / 2012

A small river named / 2012

A small river named / 2012

A small river named / 2012

A small river named / 2012

A small river named / 2012

A small river named / 2012

A small river named / 2012

A small river named / 2012

A small river named / 2012

f

Terms of Use | Privacy Policy | ™ & R Fishy Bones 2012 - 2022

fishybone-animation film design

fishybone-animation film design

http://fishybone.com

Google

http://fishybone.com

Google

This is the Title of Illustration

Short Films

One morning, when Gregor Samsa woke from troubled dreams, he found himself transform Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.

Short Films

Illustrations

A small river named / 2012

A small river named / 2012

Visual Development

Visual Development

About

About

Contact

Contact

A small river named / 2012

A small river named / 2012

A small river named / 2012

A small river named / 2012

A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.

Illustrations

Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line Commas....

More...

This is the Title of Illustration

One morning, when Gregor Samsa woke from troubled dreams, he found himself transform Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of More...

f

A small river named / 2012

Terms of Use | Privacy Policy | ™ & R Fishy Bones 2012 - 2022

The wireframes were designed in Omnigraffile. http://www.omnigroup.com/products/ omnigraffle/

25

Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘09

f

A small river named / 2012

A small river named / 2012

Terms of Use | Privacy Policy | ™ & R Fishy Bones 2012 - 2022

A small river named / 2012

fishybone-animation film design http://fishybone.com

fishybone-animation film design Google

http://fishybone.com

Google

This is the Title of the Project

This is the Title of the Video

One morning, when Gregor Samsa woke from troubled dreams, he found himself transform Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.

Short Films Illustrations

16:9

A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.

Visual Development

Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line Commas.... More...

About Contact

One morning, when Gregor Samsa woke from troubled dreams, he found himself transform Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.

Short Films Illustrations

A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.

Visual Development

Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line Commas.... More...

About Contact

0:00 / 4:59

f

Terms of Use | Privacy Policy | ™ & R Fishy Bones 2012 - 2022

Importance of structuring the site: Structuring the site on paper before starting visual design is a critical step toward effective presentation of content to your intented audience.

26

Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘09

f

Terms of Use | Privacy Policy | ™ & R Fishy Bones 2012 - 2022

fishybone-animation film design http://fishybone.com

Google

fishybone animation film design http://fishybone.com

Google

Short Films

Illustrations

Visual Development

About

blog

Short Films Illustrations Visual Development

Illustration 1

About Contact About Us

One morning, when Gregor Samsa woke from troubled dreams, he found himself transform Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts.

Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.

A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.

Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line Commas.... More...

Illustration 1

f

Illustration 3

Terms of Use | Privacy Policy | ™ & R Fishy Bones 2012 - 2022

“Designers are not mind readers or magicians.

Good design is dependent on good site structure and solid project definition.” http://www.utexas.edu/learn/designprocess/

27

Illustration 2

Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘09

f

Terms of Use | Privacy Policy | ™ & R Fishy Bones 2012 - 2022

Illustration 4

Contact

28

Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘09

CMS (Content Management System) A Content Management System (CMS)

to manage workflow in a collaborative

is a computer program that allows

environment.These procedures can be

publishing, editing and modifying

manual steps or an automated cascade.

content as well as maintenance from

There are hundreds of different CMS

a central interface. Such systems of

providers in the web and the right

content management provide procedures

one should be carefully selected.

Wordpress

Contao 29

joomla

Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘09

Drupal

Why a CMS for this Website?

Things to consider while selecting CMS

• A CMS provides fast and streamlined workflow

• Core Functioanlity:

• Easy solution for content editors who are not so

Not all CMSs, for example, allow the owner to manage and

familiar with coding. No programming skills needed

organize pages in a tree hierarchy. Instead, individual “posts”

• Easy for the content providers to upload new content

are automatically organized by such criteria as date and

• You dont have to rely on any third party developers

category. In some cases, this is perfectly adequate. In fact, this

or companies to keep the website up-to-date

limitation in functionality keeps the interface simple and easy

• Reduced costs and increased productivity

to understand. However, in other circumstances, the limitation

http://coding.smashingmagazine. com/2009/03/05/10-things-to-considerwhen-choosing-the-perfect-cms/

can be frustrating.

• The Editor: The editor is the interface through which content is added and amended. Traditionally, it has also allowed the content provider to apply basic formatting, such as font and color.

The danger of traditional CMS editors is two-fold. First, content providers are given too much control over the design. They are able to customize the appearance of a page so much that they undermine the consistency of the design and branding. Secondly, in order to achieve this level of design control, the CMS mixes design and content.

The new generation of editors takes a different approach. Content providers use the editor to mark up headings, lists, links and other elements, without specifying how they should appear.

30

Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘09

• Management of media files:

_Ranking:

Management of images and files is badly handled in some

how does the search engine determine the ranking of results?

CMS’. Badly designed systems can frustrate users with poor

Can this be customized by either the website owner or user?

accessibility and usability. Ensure that the CMS you choose

_Customization:

forces content providers to add <alt> attribute to images.

can you control how results are displayed and customize the design?

• Search Functionality: Search is an important aspect of any website. Approximately

• Customization:

half of all users start with search when looking for content.

Content presentation should not be dictated by technology.

Here are a few things to look for when

CMS designs should be based on best practices and shouldn’t

assessing search functionality:

create horrondous amounts of code. this puts unreasonable

_Freshness:

constrains on the design and seriously impacts accessibility.

how often does the search engine index your website? This

A content system that allows flexibility in the way

is especially important if your website changes regularly.

content is retrieved and presented is needed.

_Thoroughness: does it index the entire content of each page?

• User Interaction:

What about attached files, such as PDFs and

If you intent to gather user feedback, your CMS must provide

Word, Excel and PowerPoint documents?

that functionality or allow a third party plug-in to provide it.

_Speed:

At minimum you will need to be able to

some search engines can take ages to return results.

post forms and collect responses

This is especially common on large websites.

Also ask what tools exist to communicate with

_Scope:

the customers. Can you send e-mail newsletters?,

can you limit the scope of the search function to a particular

what about news feeds and RSS?

section of the website or refine search results once returned?

31

Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘09

Things To Consider While Designing For CMS • Beware of the user: The ideal situation for a designer is where the user has limited ability to enter their own mark-up and the CMS uses blocks of structured content to guide them into adding content in the right way that can then be marked up correctly by the templates.

• Consistancy: However flexible your CMS is, it is important to consider the consistency in your design templates. Training content editors is far easier if the elements that they have to work with are consistent across all pages of the site.

• Do not assume content length or height of blocks: On the web it is never a good idea to assume you know how tall something will be — as even where you have control of the content, text resizing can blow your assumed heights right out of the water and cause overlaps or text running off background images. http://coding.smashingmagazine. com/2010/11/22/designing-for-contentmanagement-systems/

• Avoid using image replacement for text: It is possible to generate images on the server side using PHP and other languages, however your CMS is unlikely to offer

32

Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘09

this capability as a standard feature. Therefore you should

•Test with real content:

consider how any non-standard fonts will be included in

Once your design has been developed into (X)HTML and CSS,

your designs if that text needs to be managed by the CMS.

test your assumptions in terms of how the content will behave.

• Consider the CMS when designing navigation:

•Help content editors to maintain the design:

_How many levels of navigation will be

• Remove functionality from

displayed? Is this configurable?

the editor

_Can content editors add to or change

• Add CSS to the editor

the main top-level navigation?

• Create a style guide that also includes semantics

_Can you highlight the current page or section? _Does the CMS offer breadcrumb style navigation? _ What mark-up will the CMS output for the navigation? Can we change it or add classes?

•Assume HTML elements can be stacked in any order: • Does the design still hold together well with stacked headings? Is there appropriate spacing between them?

• What happens if a heading is used inside a list item?

• What happens if different list types are nested? Is the spacing correct at the bottom of each list?

• If the user can insert and align an image, what will then happen to the text around that image? Will there be a margin or will the text run right up against it? What happens if they put an image inside a list item?

33

Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘09

Stacey

Stacey is a lightweight php CMS developed by Anthony Kolber. Unlike most CMS’s there’s no database involved, no admin interface, just a small collection of php files. Put the application folder onto a php server and you’re good to go.

http://www.staceyapp.com/

34

Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘09

Stacey - in use examples

jiouhe.com

chaseandgallery.com 35

Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design â&#x20AC;&#x2DC;09

aestheticallyloyal.com

oslodavis.com 36

Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design â&#x20AC;&#x2DC;09

edessaos.com

Stacey Running on OSX

Minimalist CMS

It is much easier (and quicker) to edit

Stacey is a very minimalist CMS.

“markdown” of templating, cutting

files on your local system using stacey.

Stacey stays away from PHP using

down on the need to use PHP tags,

So, I got a local copy up and running.

its own language for templating.

cutting down on much clutter.

The Mac OSX 10.5 & higher comes with

The template files, thus, are .html

Stacey stores content in the form of

both PHP & Apache pre-installed.

based and parsed by Stacey.

directories and text files. For each entry

Stacey have a “partials” section that

(be it blog post, portfolio, tutorial,

can be called for just about anywhere,

whatever) you add a folder, within that

and both allow having common header

you place an accompanying text file,

files and footer files, making the work

plus any other extras you may want.

much easier and taking advantage of

Stacey trawls the folders and generates

the dynamic part in the simple CMS.

a front end just like any other CMS.

Stacey definitely has a very friendly

Stacey is very focused. There’s also

templating language. Stacey’s

an extra element of security as

templating language is the

stacey has no database to hack.

Code in stacey is straight-forward and clutter free.

37

Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘09

Choosing a Template Stacey has only a limited number

template had to be chosen so that it

of templates to choose from. All

going to be edited and customized

three of their available templates

to suit the needs of the project.

are very minimalistic. The right

Home page and project page demo of the template 1 from the stacey developers.

38

Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design â&#x20AC;&#x2DC;09

Home page and project page demo of the template 2 from the stacey developers.

39

Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design â&#x20AC;&#x2DC;09

Home page and project page demo of the template 3 from the staceydevelopers.

40

Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design â&#x20AC;&#x2DC;09

Assemblage Assemblage is a template for Stacey with emphasis on client side scripting and fluid-layout built by Yiannis Chatzikonstantinou.

41

Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design â&#x20AC;&#x2DC;09

http://www.yconst.com/web/assemblage/

Assemblage produces an arrangement of project and/ or category snapshots on screen, essentially generating a composition that uniquely identifies the index page. Apart from the aesthetic uniqueness, the functional benefit of the approach is that screen estate is used optimally and the layout may adapt to various browser widths, which makes it compatible with a wide range of devices.

Navigation relies on the concept of filtering.

When the index page loads, all projects are visible as preview boxes. Sliding the navigation panel and selecting a category or sub-category hides all preview boxes except the ones belonging to the selected category. Clicking on a category will show all of it’s items as well as those of all of it’s subcategories.

The page template follows a completely different, clean approach that focuses first and foremost on bringing the content forward. Navigation is there at the end of the project pages. The project template also features a nice and clean print style so your content shows best in print as well as on screen. http://www.yconst.com/web/assemblage/

42

Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘09

Visual language Arun and Ranjita wanted the website to have a simple and minimal look and feel. ‘organic’, ‘tactile’ and ‘handdone’ were some other keywords based on which explorations were made.

Being simple and clean by itself the Assemblage template provided a good foundation to build upon.

43

Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘09

44

Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design â&#x20AC;&#x2DC;09

45

Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design â&#x20AC;&#x2DC;09

Layout and Navigation The layout is designed keeping in mind clarity in hierarchy and navigation. The logo is placed in the right top cornerthe most active area of a web page in the home page. The layout had to be balanced to an extend of serenity.

The project page template is designed in such a way that the viewer has to scroll down to see all the content because a slideshow would make the viewer idle to an extend.

Home Page Only the main four categorization of the projects are placed in the home page. When you are using Stacey, it is very simple to update the

The Home page

thumbnails also. You just need to put the image in the respective folders.

46

Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design â&#x20AC;&#x2DC;09

The Project Page The layout is such that the description of the project is placed on the right side of the gallery so that the reader reads about it first and then scrolls down through the whole content.

For the project pages which have video as media content, the videos will be dispalyed first and then the images.

Project page with image in the gallery

47

Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design â&#x20AC;&#x2DC;09

Above: Screen shot of the project page with video first in the gallery Right: One project page. The viewer has to scroll down to view all the content.

48

Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design â&#x20AC;&#x2DC;09

The Flexible Logo The logo could be broken down into different parts, keeping the identity intact. This flexibility was used in the project pages, for a comfortable display of the gallery as placing a vertical logo was creating a large empty space in the top of the page.

49

Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design â&#x20AC;&#x2DC;09

Typography

To prevent issues of font purchase and licensing, the font selection was constrained to google web fonts. This meant that fonts would not be embedded, but read off googleâ&#x20AC;&#x2122;s collection on the fly. This is done by including CSS that refers to google collection. It is done with very less loading time and with great browser compatibility. http://www.google.com/fonts#

50

Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design â&#x20AC;&#x2DC;09

Droid serif design: Google Android

Weights/styles: 4 (.otf)

Droid Serif Regular Droid Serif Italic Droid Serif Bold Droid Serif Bold Italic

Sometimes when you eat fish, the thorn gets stuck between your teeth now this is a reminder of good food had at home.

16/24 pt.

Meanmullu Regular 60 pt.

51

Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design â&#x20AC;&#x2DC;09

Then came the critics, mean mullu?

Hmmm well its difficult for non-south Indians to pronounce or remember.

So recall value is low. People might vandalize the word and call it mean mallu, which is totally different.

Regular 8/12 pt.

Then came the critics, mean mullu?

Hmmm well its difficult for non-south Indians to pronounce or remember.

So recall value is low. People might vandalize the word and call it mean mallu, which is totally different.

Bold 8/12 pt.

Then came the critics, mean mullu?

Hmmm well its difficult for non-south Indians to pronounce or remember.

So recall value is low. People might vandalize the word and call it mean mallu, which is totally different.

Italics 9/12 pt.

Nuton design: Brian Zick

Weights/styles: 7 (.otf)

Neuton ExtraLight Neuton Light Neuton Regular

Sometimes when you eat fish, the thorn gets stuck between your teeth now t his is a reminder of good food had at home.

16/24 pt.

Neuton Italic Neuton Bold Neuton ExtraBold

Meanmullu Regular 60 pt.

52

Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design â&#x20AC;&#x2DC;09

Then came the critics, mean mullu? Hmmm well its difficult for non-south Indians to pronounce or remember. So recall value is low. People might vandalize the word and call it mean mallu, which is totally different.

Regular 8/12 pt.

Then came the critics, mean mullu? Hmmm well its difficult for non-south Indians to pronounce or remember. So recall value is low. People might vandalize the word and call it mean mallu, which is totally different.

Bold 8/12 pt.

Then came t he critics, mean mullu?

Hmmm well its difficult for non-sout h Indians to pronounce or remember.

So recall value is low. People might vandalize t he word and call it mean mallu, which is totally different.

Italics 9/12 pt.

DejaVu serif design: DejaVu Fonts

Weights/styles: 8(.otf)

DejaVu Serif Book

DejaVu Serif Italic

DejaVu Serif Bold

DejaVu Serif Bold Italic

DejaVu Serif Condensed Book

Sometimes when you eat fish, the thorn gets stuck between your teeth now this is a reminder of good food had at home.

16/24 pt.

DejaVu Serif Condensed Bold

DejaVu Serif Condensed Bold Italic

Meanmullu Regular 60 pt.

53

Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design â&#x20AC;&#x2DC;09

Then came the critics, mean mullu?

Hmmm well its difficult for non-south Indians to pronounce or remember.

So recall value is low. People might vandalize the word and call it mean mallu, which is totally different.

Regular 8/12 pt.

Then came the critics, mean mullu? Hmmm well its difficult for non-south Indians to pronounce or remember. So recall value is low. People might vandalize the word and call it mean mallu, which is totally different.

Bold 8/12 pt.

Then came the critics, mean mullu? Hmmm well its difficult for non-south Indians to pronounce or remember. So recall value is low. People might vandalize the word and call it mean mallu, which is totally different.

Italics 9/12 pt.

Libre Baskerville design: Impallari Type

Weights/styles: 3(.otf)

Libre Baskerville Regular Libre Baskerville Italic Libre Baskerville Bold

Sometimes when you eat fish, the thorn gets stuck between your teeth now this is a reminder of good food had at home.

16/24 pt.

Meanmullu Regular 58 pt.

54

Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design â&#x20AC;&#x2DC;09

Then came the critics, mean mullu?

Hmmm well its difficult for non-south Indians to pronounce or remember.

So recall value is low. People might vandalize the word and call it mean mallu, which is totally different.

Regular 8/12 pt.

Then came the critics, mean mullu?

Hmmm well its difficult for non-south Indians to pronounce or remember.

So recall value is low. People might vandalize the word and call it mean mallu, which is totally different.

Bold 8/12 pt.

Then came the critics, mean mullu?

Hmmm well its difficult for non-south Indians to pronounce or remember.

So recall value is low. People might vandalize the word and call it mean mallu, which is totally different.

Italics 9/12 pt.

Bree serif design: TypeTogether

Weights/styles: 1t(.otf)

Bree Serif Regular

Sometimes when you eat fish, the thorn gets stuck between your teeth now this is a reminder of good food had at home.

16/24 pt.

Meanmullu Regular 60 pt.

55

Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design â&#x20AC;&#x2DC;09

Then came the critics, mean mullu? Hmmm well its difficult for non-south Indians to pronounce or remember. So recall value is low. People might vandalize the word and call it mean mallu, which is totally different.

Regular 8/12 pt.

Then came the critics, mean mullu? Hmmm well its difficult for non-south Indians to pronounce or remember. So recall value is low. People might vandalize the word and call it mean mallu, which is totally different.

Bold 8/12 pt.

Ubuntu design: Dalton Maag Ltd

Weights/styles: 8(.otf)

Ubuntu Light Ubuntu Light Italic Ubuntu Regular

Sometimes when you eat fish, the thorn gets stuck between your teeth now this is a reminder of good food had at home.

Ubuntu italic Ubuntu Medium

16/24 pt.

Ubuntu medium italic Ubuntu Bold Ubuntu Bold Italic

Meanmullu Regular 60 pt.

56

Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design â&#x20AC;&#x2DC;09

Then came the critics, mean mullu? Hmmm well its difficult for non-south Indians to pronounce or remember. So recall value is low. People might vandalize the word and call it mean mallu, which is totally different.

Regular 8/12 pt.

Then came the critics, mean mullu? Hmmm well its difficult for non-south Indians to pronounce or remember. So recall value is low. People might vandalize the word and call it mean mallu, which is totally different.

Bold 8/12 pt.

Then came the critics, mean mullu?

Hmmm well its difficult for non-south Indians to pronounce or remember.

So recall value is low. People might vandalize the word and call it mean mallu, which is totally different.

Italics 9/12 pt.

Final Selection of typeface The final typeface - Libre Baskerville was chosen on the basis of readability, clarity and its compatibility with the characteristics of the logotype and visual identity.

Libre Baskerville is a web font optimized for body text (typically 16px.) It is based on the American Type Founderâ&#x20AC;&#x2122;s Baskerville from 1941, but it has a taller x-height, wider counters http://www.fontsquirrel.com/fonts/libre-basker ville?q[term]=baskerville&q[search_check]=Y

57

and a little less contrast, that allow it to work well for reading on-screen.

Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design â&#x20AC;&#x2DC;09

Conclusion

58

Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design â&#x20AC;&#x2DC;09

What did I learn from the project?

control to the user. They can change the

designer has to art direct and try to tell

font size, they can break our carefully

stories with the designs and interfaces.

When I think of it, the answer will

constructed layout. the considered

include many things, from solving

white space goes out of the window as

The web moves fast, convensions

interaction design issues through

they move the browser window. They

come and go. Best practices change

tweeking the CSS to bringing out

can choose the colour, even upload

every six month. to do good graphic

the brand identity through design.

style sheets of their own. Designing

design for the web, you have to

I understood that the modern web

for the web means your crafted

passionately embrace the medium

design is a discipline that spans a

design might be viewd differently.

and keep learning constantly.

huge range of skills. The medium

Graphic design for the web is much

is ever evolving. But the basic

more than how something looks.

understanding of graphic design,

Typographic design in particular

about colour, image, type, illustrations

pays attention to how language is

and layout is still the requisite for

structured, chunked up, listed and

web designing, to tell the story for

tabulated, not just the typeface choice.

the client to the customers. Research is neede to inform our decisions.

I understood that web design is beyond layout, fonts and colours, browser quirks,

The fundamental change when the

and the latest javascript library, but it

medium changes from paper to the

is embracing the true roots of graphic

modern web is that designers donâ&#x20AC;&#x2122;t

design practice - the communication of

control the content, users do. Designers

information. the designer has to work

spend a long time getting the content

closely with information architects,

just right and the web gives all the

writers, developers and clients. The

59

Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design â&#x20AC;&#x2DC;09

Bibliography 1. Five Simple Steps by Mark boulton featured in http://designingfortheweb.co.uk 2. ABookApart.The.Elements.of.Content.Strategy.2010 by Erin kissane 3. ABookApart.CSS3.For.Web.Designers.2010 by Dan Cederholm 4. ABookApart.Responsive.Web.Design.2011 by Ethan marcotte 5. http://boxesandarrows.com/ 6. http://www.smashingmagazine.com/

60

Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design â&#x20AC;&#x2DC;09