doc elective2 7 2
Post on 06-Apr-2016
264 Views
Preview:
DESCRIPTION
TRANSCRIPT
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.
Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘093
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
Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘094
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
Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘095
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.
Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘096
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!”
Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘097
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
Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘098
Explorations
Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘099
Explorations
Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘0910
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
Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘0911
width/ height
ratio of seal
5: 12
C: 7, M: 89, Y: 75, K: 1
R: 211, G:43, B: 54
Hexcode: # d32b36
Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘0912
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
Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘0913
Project Proposal
Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘0914
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.
Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘0915
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:
Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘0916
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.
Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘0917
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
Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘0918
About the film The story process
PixarStory of the process
About single project
The characters The world
PixarStory of the process
About single project
Movie insights Sound
PixarStory of the process
About single project
Movie insights Sound
PixarStory of the process
About single project
Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘0919
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
Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘0920
HeadlessHome page
Colour theme to suite the kind of work done
HeadlessPortfolio page
Single window to see a series of differenrt works
HeadlessLogin page
Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘0921
PsyopHome page
Interesting name for blog
Home page
Paths of Hate
Process
Paths of Hate
Vimeo page
Eeksaurus
Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘0922
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/
Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘0923
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/
Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘0924
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
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
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
http://boxesandarrows.com/where-the-wireframes-are-special-deliverable-3/
Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘0925
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
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
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...
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
A small river named / 2012 A small river named / 2012 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 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/
Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘0926
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
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.
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...
0:00 / 4:59
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
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.
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...
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.
Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘0927
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
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.
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...
Googlehttp://fishybone.com
fishybone animation film design
Terms of Use | Privacy Policy | ™ & R Fishy Bones 2012 - 2022 f
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/
Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘0928
Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘0929
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.
Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘0930
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/
Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘0931
• 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?
Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘0932
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/
Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘0933
•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?
Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘0934
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/
Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘0935
Stacey - in use examples
jiouhe.com
chaseandgallery.com aestheticallyloyal.com
Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘0936
oslodavis.com edessaos.com
Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘0937
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.
Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘0938
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.
Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘0939
Home page and project page demo of the template 2 from the stacey developers.
Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘0940
Home page and project page demo of the template 3 from the staceydevelopers.
Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘0941
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/
Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘0942
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/
Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘0943
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.
Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘0944
Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘0945
Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘0946
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
Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘0947
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
Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘0948
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.
Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘0949
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.
Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘0950
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#
Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘0951
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?
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.
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.
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.
Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘0952
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.
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.
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.
Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘0953
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.
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.
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.
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.
Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘0954
Libre Baskerville
Meanmullu
design: Impallari Type
Weights/styles: 3(.otf)
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
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.
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.
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.
Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘0955
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
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.
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.
Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘0956
Ubuntu
Meanmullu
design: Dalton Maag Ltd
Weights/styles: 8(.otf)
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.
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.
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.
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.
Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘0957
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
Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘0958
Conclusion
Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘0959
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.
Elective 2 Documentation/ Fazal Thanveer V/ Graphic Design ‘0960
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/
top related