Doc elective2 7 2

Elective 2 Documentation

Online Portfolio for Meanmullu Animation Studio

Prgramme/Year: Under Graduate Graphic Design 2009-10Student: Fazal Thanveer VGuide: Rupesh VyasNational Institute of Design, Ahmedabad

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

Elective 2 was an opportunity to do a

project on subject of my own choice.

I am very interested in movies. A

good movie can ewoke the audience’s

emotions. Movies can open up your

mind. Through the screen you enter

a vast landscape of imagination.

The first idea was to create an interactive

story experience for the web inspired

from the cinematic narratives. I had

no doubt that ‘Life of Pi’ would be a

suitable story for that purpose. The story

had the ocean as the background- the

canvas. The idea wouldn’t materialize

Introduction

because of my limited technical

knowledge and time constrains. So I

decided to take up another subject for

the project. It was during that time

that my friend Ranjitha asked me

whether I would make a website for

her freelance animation team which

consisted of her and Arun Prakash.

I decided to take up it as a project

because I had wanted to know about

web designing and it interested me.

They did not had a name or logo for the

studio, so I was a part of naming and

designing the logo for their studio too.


Life of Pi is a wonderful story.

It connects with everyone in a very

personel level. In the novel, the

protagonist is alone in the middle

of infinite ocean and he has to

fight for survival. He has to fight

against the submissive self of his

own and the forces of nature.

My idea was to create a web page

which creates an environment for

the audience to experience the same

thoughts, loneliness and dreams

Life of Pie

first Idea

An Interactive Graphic Story for the Web

which Pi Patel, the protagonist had

in the story as far as the mediums

of digital web could achieve.

I read a review of the novel in school

and read the novel last year, much

before I got to know that a movie

on the same was being made!.

‘Life of Pi’ book cover


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.

Technology Enabling Seamless Interactive Graphics in Web Browser.

http://www.chromeexperiments.com/webgl


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.


MeanMulluAnimation Design Studio

Identity and Website

How the Studio came into being and story behind the name.

“Two animators love films and

wanted to make few of their own. So

they put up a small studio - Mean

mullu. Travel and Share their

experience through their films.

Arun and Ranjitha both hail from the

southern part of India. Even though

their languages, mannerisms and

work are states apart, their ideas

complemented somewhere and that’s

how the germ of a studio was born.

Arun’s vibrant use of colours and

Ranjitha’s crude brushwork is what

gives them their indie-dual style. They

think from their second brain (which is

the stomach) and fish is their favorite

food hence the name - Mean mullu,

which literally translates to Fish bone.

How the story stuck in the brain!

Sometimes when you eat fish, the thorn

gets stuck between your teeth now this

is a reminder of good food had at home.

It all started with a kid exclaiming

after eating her first fish that the fish

is biting her! wthich Arun turned into

his diploma film and one thing led to

the other and voila we’ve got a studio.

Even if the studio was born there was

no name, never gave it a thought.

When they sat to think about it they

realized that mean mullu is mean

mullu in both their languages! And

also the reason for the conception of

this studio! So why not Mean Mullu?

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

there is a possible confusion of brand

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

sounds so silly! There were many who

loved it too. They loved the new sounds.

So the conviction wavered for a little

and many other related names came

out: Fish bone, Mean bone, mean films

and Mean films stuck! Even made logos

for it! But it was not Mean Mullu, there

was no story, nothing, just recall value.

Finally it was Meanmullu!”


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


Explorations


Explorations


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.

The Logo


width/ height

ratio of seal

5: 12

C: 7, M: 89, Y: 75, K: 1

R: 211, G:43, B: 54

Hexcode: # d32b36


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.

Stories About the Logo Character


Project Proposal


Digital Promotion for Animation Film Studio

Introduction

Approach

Objective

We see hundreds of works of art and

design each day in the internet. For

anyone from any part of the world to get

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.

The studio is in its early stage of growth.

This poject would be an exercise to

learn how much effective will the web

site be for the studio in this stage.

Critical openion is made about a

company by the audience after seeing

it’s website. Being from the field of

art and design, it’s important for the

studio’s website to be a work of art.

– to create a digital ecosystem

– creating various online platforms

– creating viral approach for promotion

Methodology

1. Collection and analysis of data

2. Primary user study

Addressing questions like:

– who is the target audience?

– where is it going to be implemented?

3. Secondary study

Studiying similar existing projects and

understand their:

– structure

– semiotic aspects

– technology

4. Synthesising observation and study:

Creating information structural

architecture

– creating wire frames

– user testing of wire frames

5. Ideating with different narratives

– creating different iterations for the

look and feel

6. coding and uploading

Possible Outcomes

• A website for the studio.

• A custom wordpress blog

template for the studio.

• Ideation for the twitter

and facebook pages.

• 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:


PRIMARY USER STUDYWHO? WHY? WHERE?Adderssing

Questions like

TARGET AUDIENCE

Potential Clients

1. Potential Clients2. Designers, Artists

1. Outsourcing production Companies2. Non Profit Organisations3. Institutions

3. Students4. Others

Focus of Communication

Versatility

“Artwork of a Website”

Cultural Cues

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.

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.

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.


SECONDARY STUDYSTUDYING SIMILAR PROJECTS

PixarHome page

Catogarization of content in header

Favourite picks

Main display area, Latest work

PixarSection Page

Feature Film section Title page

Select from the projects

Begin to go through the whole project

Drop down to see videos


About the film The story process

PixarStory of the process

About single project

The characters The world



Movie insights Sound



Movie insights Sound




Studio 4˚CHome page

Catogarization of content in header

Interactive flashwork

Studio 4˚CPortfolio page

Portfolio display like a space ship control panel

List of artists Artist’s profile

Artist’s page

Studio 4˚C

List of artists Artist’s profile

Artist’s page

Studio 4˚C


HeadlessHome page

Colour theme to suite the kind of work done

HeadlessPortfolio page

Single window to see a series of differenrt works

HeadlessLogin page


PsyopHome page

Interesting name for blog

Home page

Paths of Hate

Process

Paths of Hate

Vimeo page

Eeksaurus


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

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.

Content Outline

The Site Structure

The Basic Architecture of The Website.

http://boxesandarrows.com/card-sorting-a-definitive-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

relationships represented?

Site outline and tree structure of the website

http://boxesandarrows.com/site-diagrams-mapping-an-information-space/


Wireframes

A wireframe is a simple drawing

of the chunks of information and

functionality for each page in the site.

Googlehttp://fishybone.com

fishybone-animation film design

Short Films

Illustrations

Visual Development

About

Contact

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



Short Films

Illustrations

Visual Development

About

Contact


A small river named / 2012 A small river named / 2012 A small river named / 2012 A small river named / 2012



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




Short Films

Illustrations

Visual Development

About

Contact


A small river named / 2012 A small river named / 2012



This is the Title of IllustrationOne 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...



Short Films

Illustrations

Visual Development

About

Contact



This is the Title of IllustrationOne 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...

The wireframes were designed in Omnigraffile.

http://www.omnigroup.com/products/omnigraffle/




Short Films

Illustrations

Visual Development

About

Contact


16:9

This is the Title of the VideoOne 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.



0:00 / 4:59



Short Films

Illustrations

Visual Development

About

Contact


This is the Title of the ProjectOne 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.



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.




Short Films

Illustrations

Visual Development

About

Contact


About UsOne 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.




fishybone animation film design


blogShort Films AboutIllustrations Visual Development Contact

Illustration 1

Illustration 1 Illustration 2 Illustration 3 Illustration 4

“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/



CMS (Content Management System)

A Content Management System (CMS)

is a computer program that allows

publishing, editing and modifying

content as well as maintenance from

a central interface. Such systems of

content management provide procedures

Contao joomla Drupal

Wordpress

to manage workflow in a collaborative

environment.These procedures can be

manual steps or an automated cascade.

There are hundreds of different CMS

providers in the web and the right

one should be carefully selected.


Why a CMS for this Website?

• A CMS provides fast and streamlined workflow

• Easy solution for content editors who are not so

familiar with coding. No programming skills needed

• Easy for the content providers to upload new content

• You dont have to rely on any third party developers

or companies to keep the website up-to-date

• Reduced costs and increased productivity

Things to consider while selecting CMS

• Core Functioanlity:

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

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

are automatically organized by such criteria as date and

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

limitation in functionality keeps the interface simple and easy

to understand. However, in other circumstances, the limitation

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.

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


• Management of media files:

Management of images and files is badly handled in some

CMS’. Badly designed systems can frustrate users with poor

accessibility and usability. Ensure that the CMS you choose

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

• Search Functionality:

Search is an important aspect of any website. Approximately

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

Here are a few things to look for when

assessing search functionality:

_Freshness:

how often does the search engine index your website? This

is especially important if your website changes regularly.

_Thoroughness:

does it index the entire content of each page?

What about attached files, such as PDFs and

Word, Excel and PowerPoint documents?

_Speed:

some search engines can take ages to return results.

This is especially common on large websites.

_Scope:

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

section of the website or refine search results once returned?

_Ranking:

how does the search engine determine the ranking of results?

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

_Customization:

can you control how results are displayed and customize

the design?

• Customization:

Content presentation should not be dictated by technology.

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

create horrondous amounts of code. this puts unreasonable

constrains on the design and seriously impacts accessibility.

A content system that allows flexibility in the way

content is retrieved and presented is needed.

• User Interaction:

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

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

At minimum you will need to be able to

post forms and collect responses

Also ask what tools exist to communicate with

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

what about news feeds and RSS?


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.

• 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

http://coding.smashingmagazine.com/2010/11/22/designing-for-content-management-systems/


•Test with real content:

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

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

•Help content editors to maintain the design:

• Remove functionality from

the editor

• Add CSS to the editor

• Create a style guide that also includes semantics

this capability as a standard feature. Therefore you should

consider how any non-standard fonts will be included in

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

• Consider the CMS when designing navigation:

_How many levels of navigation will be

displayed? Is this configurable?

_Can content editors add to or change

the main top-level navigation?

_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?


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/


Stacey - in use examples

jiouhe.com

chaseandgallery.com aestheticallyloyal.com


oslodavis.com edessaos.com


Stacey Running on OSX Minimalist CMS

It is much easier (and quicker) to edit

files on your local system using stacey.

So, I got a local copy up and running.

The Mac OSX 10.5 & higher comes with

both PHP & Apache pre-installed.

Stacey is a very minimalist CMS.

Stacey stays away from PHP using

its own language for templating.

The template files, thus, are .html

based and parsed by Stacey.

Stacey have a “partials” section that

can be called for just about anywhere,

and both allow having common header

files and footer files, making the work

much easier and taking advantage of

the dynamic part in the simple CMS.

Stacey definitely has a very friendly

templating language. Stacey’s

templating language is the

Code in stacey is straight-forward and clutter free.

“markdown” of templating, cutting

down on the need to use PHP tags,

cutting down on much clutter.

Stacey stores content in the form of

directories and text files. For each entry

(be it blog post, portfolio, tutorial,

whatever) you add a folder, within that

you place an accompanying text file,

plus any other extras you may want.

Stacey trawls the folders and generates

a front end just like any other CMS.

Stacey is very focused. There’s also

an extra element of security as

stacey has no database to hack.


Choosing a Template

Stacey has only a limited number

of templates to choose from. All

three of their available templates

are very minimalistic. The right

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

template had to be chosen so that it

going to be edited and customized

to suit the needs of the project.


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


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


Assemblage

Assemblage is a template for Stacey with emphasis on

client side scripting and fluid-layout built by Yiannis

Chatzikonstantinou.

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 sub-

categories.

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/


Visual language

Arun and Ranjita wanted the website

to have a simple and minimal look and

feel. ‘organic’, ‘tactile’ and ‘hand-

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




Layout and Navigation

Home Page

The layout is designed keeping in mind

clarity in hierarchy and navigation. The

logo is placed in the right top corner-

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

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

thumbnails also. You just need to put

the image in the respective folders.

The Home page


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


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


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.


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


Droid serif

Meanmullu

design: Google Android

Weights/styles: 4 (.otf)

16/24 pt.

Regular 8/12 pt.

Bold 8/12 pt.

Regular 60 pt.Italics 9/12 pt.

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.

Then came the critics, mean mullu?





mallu, which is totally different.

Then came the critics, mean mullu?





mallu, which is totally different.

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.


Nuton

Meanmullu

design: Brian Zick

Weights/styles: 7 (.otf)

16/24 pt.

Regular 8/12 pt.

Bold 8/12 pt.

Regular 60 pt.

Italics 9/12 pt.

Neuton ExtraLight

Neuton Light

Neuton Regular

Neuton ItalicNeuton Bold

Neuton ExtraBold

Sometimes when you eat

fish, the thorn gets stuck

between your teeth now

this is a reminder of

good food had at home.

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.




low. People might vandalize the word and call

it mean mallu, which is totally different.



DejaVu serif

Meanmullu

design: DejaVu Fonts

Weights/styles: 8(.otf)

16/24 pt.

Regular 8/12 pt.

Bold 8/12 pt.

Regular 60 pt.

Italics 9/12 pt.

DejaVu Serif BookDejaVu Serif ItalicDejaVu Serif BoldDejaVu Serif Bold ItalicDejaVu Serif Condensed BookDejaVu Serif Condensed BoldDejaVu Serif Condensed 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.





Libre Baskerville

Meanmullu

design: Impallari Type


16/24 pt.

Regular 8/12 pt.

Bold 8/12 pt.

Regular 58 pt.

Italics 9/12 pt.

Libre Baskerville Regular

Libre Baskerville Italic

Libre Baskerville Bold






Bree serif

Meanmullu

design: TypeTogether

Weights/styles: 1t(.otf)

16/24 pt.

Regular 8/12 pt.

Bold 8/12 pt.

Regular 60 pt.

Bree Serif Regular





Ubuntu

Meanmullu

design: Dalton Maag Ltd


16/24 pt.

Regular 8/12 pt.

Bold 8/12 pt.

Regular 60 pt.

Italics 9/12 pt.

Ubuntu Light

Ubuntu Light Italic

Ubuntu Regular

Ubuntu italic

Ubuntu Medium

Ubuntu medium italic

Ubuntu Bold

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




low. People might vandalize the word and

call it mean mallu, which is totally different.




low. People might vandalize the word and

call it mean mallu, which is totally different.



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’s Baskerville from 1941, but

it has a taller x-height, wider counters

and a little less contrast, that allow it

to work well for reading on-screen.

http://www.fontsquirrel.com/fonts/libre-baskerville?q[term]=baskerville&q[search_check]=Y


Conclusion


What did I learn from the project?

When I think of it, the answer will

include many things, from solving

interaction design issues through

tweeking the CSS to bringing out

the brand identity through design.

I understood that the modern web

design is a discipline that spans a

huge range of skills. The medium

is ever evolving. But the basic

understanding of graphic design,

about colour, image, type, illustrations

and layout is still the requisite for

web designing, to tell the story for

the client to the customers. Research

is neede to inform our decisions.

The fundamental change when the

medium changes from paper to the

modern web is that designers don’t

control the content, users do. Designers

spend a long time getting the content

just right and the web gives all the

control to the user. They can change the

font size, they can break our carefully

constructed layout. the considered

white space goes out of the window as

they move the browser window. They

can choose the colour, even upload

style sheets of their own. Designing

for the web means your crafted

design might be viewd differently.

Graphic design for the web is much

more than how something looks.

Typographic design in particular

pays attention to how language is

structured, chunked up, listed and

tabulated, not just the typeface choice.

I understood that web design is beyond

layout, fonts and colours, browser quirks,

and the latest javascript library, but it

is embracing the true roots of graphic

design practice - the communication of

information. the designer has to work

closely with information architects,

writers, developers and clients. The

designer has to art direct and try to tell

stories with the designs and interfaces.

The web moves fast, convensions

come and go. Best practices change

every six month. to do good graphic

design for the web, you have to

passionately embrace the medium

and keep learning constantly.


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/

Doc elective2 7 2

Documents

graduate graphic design

web browser

web designing

fazal thanveer vguide

interactive story experience

web page

suitable story

wonderful story