DIPLOMA PROJECT DOCUMENTATION
Alagu Chockalingam VCD 2012 Srishti School of Art, Design & Technology.
Contents
Book One
Introduction
Book Two
Research/ early sketches
Book Three
Visualising the website
Book One
Introduction
the client
T
he Blue Mountains School in the Nilgiris is a residential and coeducational institution that endeavours to base its life and learning on a process of self-discovery. It was established in 1961, by F.G.Pearce and turned 50 years old in 2011. It was shut down in 2001 and was restarted in 2005 by the efforts of alumni of the school, today it has begun to make people notice it again as an extraordinary method of schooling. The school’s over-all ethos distinguishes it radically from other residential schools. A mandate of the trust requires that the total strength of the school is kept to a 100 students, currently the school has 45 students enrolled.
the project brief To design a website for The Blue Mountains School that would reflect what the school is as well as inform the user of its facilities, principles and values.’
O
n a visit to the school to see my brother Vishnu, the Director asked me if I would be interested in redesigning the website. I jumped a the oppurtunity. The Blue Mountains School inspires me - it is that school I had dreams of, and to be involved with it was an exciting prospect. Reflecting the school’s Philosophy and their distinctive approach to learning would be my primary concern when designing the site.
website etisbew website etisbew
the developer
T
he developers for this project are Redstart, a Bangalore based, e-commerce company that is dedicated to creating and maintaining websites and web stores. In their own words “We started Redstart because we needed to work differently. We like working with people who know what they are doing, and do it well. We wanted to work on things that are beautiful, or daring, or difficult. Along the way, we hope to earn some good karma by helping people do good things for the planet and its inhabitants.�
the proposal
T
he proposal for the project — shown in the following pages — covers the general aspects of what I was undertaking with this project, explains what I would learn and why I chose to do this work. It is categorised under the following headings: Areas of exploration and study Why this? Why me? Research Questions Design Plan Timeline Resources Expected Learning Outcomes
areas of exploration & study I have split this into two categories, Skills and Understanding the subject Skills need to understand and explore the possibilities and the limitations a web page presents. Observe and then apply what makes a page easy to use, easy to navigate – what the natural tendencies of web users are etc. Further understanding to what extent it is possible, the target group (i.e; parents) and their skill/use of the web.
I
Understanding the school: n attempt to understand The Blue Mountains School in its entirety. This research is paramount in understanding how and what to use/ highlight in creating the actual design. Knowing how it functions, how the students live within it – how it makes that difference in their school lives etc and decoding this to simple and clear touch points for the design to stand on and evolve from.
A
why this? why me?
I
had three conditions for choosing a project – One – the project I chose must be something outside of my comfort zone but not outside of my capability, Two – that it have scope for creating original and exciting work and Three – that I must enjoy working on it. The Blue Mountains School provides me the opportunity to do just that kind of project. The reason for that is the school itself, it is my imagination of what a school should be, and it is real. It is the ideal canvas for original and exciting work. Working with the web is not my first instinct – it will be a challenge to create relevant, meaningful and functional design that showcases the complex growing organism that the school is. From my visits to school on earlier occasions – I know definitely, that I will enjoy working with them and this to me is important
the design plan
I
n order to create a website that is everything The Blue Mountains School is I compiled a list of what I think are relevant approaches. Interviews with the key players of the school, namely the Students, Teachers, The Principal & Trustees to gauge the schools character and what it means to each of them. Deciding on a stylistic approach to the website and testing this with the users — parents who have school going children as well as students (between classes VI-XII)themselves. Parallel to all this, explorations of other schools’ websites and other communication to gather various perspective in approaching the design.
Timeline PHASE I : RESEARCH ooking at other schools websites understanding what the rest of the field is like, looking at various formats of websites and navigation. Sorting through content given by the client – creating the information hierarchy. Working closely with the client – to understand the mandatory information that needs to go onto the site.
L
PHASE 1 A – OOTY n site research. Going to the school at the beginning of term (Aug 1) meeting parents come to drop their children off – teachers and the students themselves. Spending time at the school interacting and drawing inspiration for the style of the website.
O
PHASE 2 - INITIAL WIREFRAMES he beginning of the site design. Pages and content to be fixed in this stage Testing of style in-house – using feedback to improve the look and feel.
T
PHASE 2A : FINAL DESIGNS inal designs finished, approval form the client and changes based on feedback to be implemented. Content to be proofed and finalised.
F
PHASE 3 : DEVELOPING THE SITE orking with the developer implementing changes in the navigation if required – adjusting the design to work as a website. Testing website with target group and in-house.
W
PHASE 4 : BUFFER weeping for bugs in the design, final changes, proofing content - working closely with the developer to have the site live by deadline.
S
The launch of the website.
resources Developers of web sites (for coding and technical backing) The Blue Mountains School , Ootacamund Books on design and the internet – The art of looking sideways (my go to book for inspiration) http://www.mightymeta.co.uk (an article on responsive web design sketch sheets) http://www.webpagesthatsuck.com/ (primer to what not to do on the web and why) http://mikekus.com/ (for inspiration and learning by observation) http://sixrevisions.com/web_design/the-960-grid-systemmade-easy/ and https://gridsetapp.com/specs/marber. php?gridset=show ( understanding grids for the web ) http://www.webdesigndev.com and http://www.fonts.com (understanding web fonts and web safe fonts)
expected learning outcomes To know the in’s and out’s of designing a website. To be able to clarify vast amounts of observation and content into simple and clear communication that appeals to the user. Exploration of other web based tools and media to support the main website. A knowledge of how boarding schools function. An understanding of alternative schooling practice.
Book Two
Research / early concepts
research
R
esearch was a very critical phase in the project as it helped understand what I was dealing with. It gave me a base to stand on and helped decide the approach to the design. Initially as I began digging up information, and exploring the very many avenues available and the million possibilities the web offers - I ended up with too many open ended possibilities with no real focused conclusions to further the design of the website. Taking some time to just re-organise what I had turned up and reworking that into the following categories helped me go forward with the design process. Research categories the school the user group the market web design
the school
I
visited The Blue Mountains School and spent time on the campus interacting with students
and faculty. More importantly I observed the school day in progress, the interactions between - the students, the students and their teachers/ principal and this helped understand how the school functioned and the kind of approach it had towards learning and living. Parallel to the above I took many photographs, (some of which I would later use on the site in the gallery) but hugely for my reference - to keep the visual aspect of the school vivid even when I had left Ooty. This photographic record proved handy when I began conceptualising the site.
*Illustration: a view of The Blue Mountains School from the top field.
Clockwise from the top: A view of The Blue Mountains School from the front, The TT area, The stairs to the dorm, The classrooms in the annexe.
Above: The students of the school in the assembly room.
Above: The red dorm. (Prev. page)Clockwise form the top: Students reading in the Library, The piano in the assembly room, An elementary school student using the abacus, The assembly room, The library.
the user group
O
n the first of August, I met with the parents who had come to drop off their children for the new term at school, I spoke to Parents whose children had been in the school for a while and to parents whose children had been enrolled in the school starting that term. What I got from these conversations was that the final decision to enrol their children in the Blue Mountains School came down to the school’s distinctive approach to learning and it’s philosophy. They all went through the current website and searched for information on the web before visiting the school.
did not look online
parents
looked for web presence
0
5
10
15
Other Parents
Wikipedia Facebook Google
0
5
10
15
Above : Bar graphs of data collected during the survey into the user groups browsing habits.
A
small survey into their browsing habits revealed that the majority of them used a search engine like Google to find what they were looking for - and did not frequent too many websites. They used the internet mainly to search for information, a lot of them used wikipedia - this seemed to stem from helping their children with projects. More recently they have been using, social networking sites like facebook to connect with friends online.
the doon school/hebron inernational/st.hildas school/lawrence school, lovedale/ lawrence school, sanawar/welham girls school/woodstock school/mayo college/ rishi valley.
the market
T
his aspect of the research was done primarily to understand the market and the entity that is a residential school. It involved checking the web presence of well known boarding schools, and what they were saying. I learnt that most other schools had identified their infrastructure, Location or History as their USP. A similarity in layout and approach to their websites (except for a few) was noticeable. These points helped me identify that The Blue Mountains School’s USP was its ‘Philosophy’, this helped make a decision about how to approach the design.
screenshots of the websites of other residential schools.
web design
T
he aim was to understand and expose myself to the technicalities of website design. This required reading a lot of literature online and viewing different kinds of websites, analysing them to understand what had been done and why, and how it helped the design of a site. I gained an understanding of grids used for the web and key points to keep in mind when creating the design - this helped me greatly when I began creating the template for the site.
good web design blends in – it is not noticed
screenshots of what google throws up if you search for the school
current web presence
A
nother smaller aspect of my research was to check what the school’s existing web presence was. The result was a little misleading as there are three different sites about the school and then very many more that are nothing to do with the school.
initial sketches
B
ased on my research and observations - I came up with two very different approaches to the look and feel of the site. CONCEPT I he first approach, was illustration based - it was inspired by the almost storybook like charm and quality the school exudes. The Location of the school - Ooty, Tamilnadu also contributed to choosing this style.
T
CONCEPT II he second approach, was a take on ‘experimental schooling’ - inspired by schools unconventional teaching methods. It used a modular grid, bold colours and styling like a periodic table.
T
the chosen one
T
he first concept was chosen after gauging reactions to the sketches inhouse and discussions with the client. It was generally felt that this represented the school best and captured its various qualities.
Book Three
Visualising the website
photographs of sketches made while working out the template.
template
T
o arrive at the template i started by working out the layout on paper - juggling the elements, working out the navigation and creating a hierarchy. Doing this before taking it to the computer - saved me a lot of time.
T
he Initial sketches (see next spread) for the template, envisioned more on a page and had many levels and a more complex hierarchy. this evolved into a cleaner and simpler layout as clarity on content helped decide what was absolutely neccesary on the page.
initial sketch of the template
DA R
E T O BE F R E E
estd. 1961
T HE
B LU E MO
SC H O O L
U N TAI N S
about us
academics admissions people events and news alumni support us contact us
our founwho we are philo- ding today sophy story Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam varius arcu vitae tortor scelerisque aliquam at ultricies turpis. Maecenas accumsan, tellus et suscipit condimentum, orci lorem tristique sem, ac dapibus massa est a mauris. Morbi quis risus metus. Nullam congue tristique diam, at molestie nibh bibendum a. Mauris id leo est, et elementum mi. Morbi lacinia mattis ante, at facilisis urna gravida pretium. Sed tincidunt nisl in massa lobortis tempor. Vestibulum dapibus, nisl lacinia semper tinciE M O UN TA IN S eu congue leo risus nec dunt, risus orci elementumBLUtellus, magna. E DAR
TH E
TO B E FRE E
estd. 1961
S CH O O L
Vestibulum pulvinar ultricies eros, ultrices luctus magna pharetra a. Maecenas sed pharetra velit. Aliquam sed nunc augue, in hendrerit elit. Pellentesque ultrices magna at erat fermentum eu ultrices turpis pharetra. Sed vitae vulputate ipsum. Suspendisse ac est in nibh ullamcorper scelerisque. Fusce consectetur hen-
drerit sem et pellentesque. Sed lacus turpis, congue eget porttitor vitae, aliquet eu nulla. Vivamus mattis porttitor nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque consequat lorem id dui sagittis eu mollis lacus scelerisque. Nullam convallis odio massa. Nunc porttitor metus sed orci feugiat blandit. Praesent vehicula, nibh eget semper congue, ligula nibh semper odio, ultrices pellentesque eros odio in lacus. Sed scelerisque accumsan interdum. Duis sed eros nibh. Maecenas urna tortor, molestie quis tincidunt vel, posuere non ligula. Curabitur non convallis leo. Nulla nec eros eget massa tristique semper vitae sed nunc. Morbi diam dolor, viverra id euismod in, facilisis et eros. Donec quam ipsum, auctor vitae interdum id, hendrerit nec odio.
ruo -nuof ohw gnid -olihp era ew yrots yhpos yadot
EE R
LOO
H CS
F E B O T E R AD
1691 .dtse
S N IAT N
EH T
U OM E UL B
su tuoba
scimedaca snoissimda elpoep swen dna stneve inmula su troppus su tcatnoc F E B OT E RAD E ER
1691 .dtse
L OO H CS
S NI AT
E HT
NU O M E UL B
initial sketch of the template
final template
final template
T
he final template arrived at - used a simple and minimal layout - with the illustration as an important part of the page, often vital to the communication of content on the page. This was used as a base and variations on this were created for pages that required it, levels and a more complex hierarchy.
The Blue Mountains School BACK TO SCHOOL
T O B E FR E
ABOUT US
PEOPLE
EVENTS AND NEWS ACADEMICS ADMISSION
E DA R
THE
ALUMNI SUPPORT US CONTACT US GALLERY
E
estd. 1961
SC H O OL
M O U N T A IN S
The Blue Mountains School HOME
ABOUT US
ACADEMICS
ADMISSION
EVENTS & NEWS
SUPPORT US
GALLERY
CONTACT US
The Blue Mountains School HOME
ABOUT US
ACADEMICS
ADMISSION
EVENTS & NEWS
SUPPORT US
OVERVIEW CURRICULUM CO-CURRICULAR
THE FIRST STEP ELEMENTARY SCHOOL MIDDLE SCHOOL HIGH SCHOOL
Top: Initial main menu Middle: main menu after changes were made to the information architecture. Bottom: Menu with open drop down menu and sub menu.
GALLERY
CONTACT US
T O B E FR E E
estd. 1961
SC
BLU E M
O U N TAI N S
navigation
O
ne main menu was created to appear in the header throughout the site, with dropdown menus to navigate to every page from wherever you are on the site.
T
he main menu, initially contained too many links - this did not contribute to the navigations efficiency or the visual balance of the page. Therefore I re-looked at the information hierarchy and nested the pages people and alumni under about us. This was a significant step in the navigation for the site.
initial button style with vector background and stroke.
buttons with simplified icons and hand drawn stroke
final style used for the buttons used on the site.
(Above) Detail of buttons in use on a page.
B
uttons were added at the bottom of the page for navigation within the section. They also provide the user with a visual cue.
I
nitial iterations of the buttons used vector backgrounds and a stroke - this was felt to be clashing with the aesthetic of the rest of the site decided to use a completely hand drawn button with simplified icons. This solution while capturing the aesthetic lacked finesse.
T
he final buttons solved this by applying a watercolour wash for the circle in yellow and blue as the background and having the icons/ image in the button rendered with more detail.
stages in creating an illustration
illustration
T
he style of the illustrations was inspired by the school itself and in some part by Ooty (The Nilgiris) where it is located.
I
nitial style exploration (shown overleaf) experimented with the detail and precision of the line and the choice of pencil or watercolour for the medium. PROCESS n order to create illustrations that were reminiscent of and unique to the school - I took many photographs of the school campus, its students, and the school day in progress to use as references while illustrating. I used watercolours and ink pen and finished each illustration with post processing on photoshop. (facing page)
I
The final illustration were consciously made without backgrounds and edited such that they would not appear boxy or drawn inside a frame.
initial style exploration for the illustrations
to know
to do
to be
to live togeth er
final illustrations for the website.
final illustration for the website.
Pages and content PAGES AND CONTENT reaking the content down helped finalise on what to put on a page - this process also helped clarify the information architecture of the site.
B
THE DECISION BOARD reating a decision board helped me understand exactly what I was dealing with and how it could be shown, for instance categorising the content as fixed and changing - if it was fixed - could it be visualised as the illustration? Or could the illustration aid the content in any way? This helped simplify the process as I went through all the pages of the site.
C
VARYING THE TEMPLATE hen a page needed more elements to be added, in order to communicate content more effectively, the template was extended by using the colours (blue/brown) and simple forms (rectangles).
W
an option for the home page
final homepage design
final page design
final page design
final page design
open event page design
final page design
final gallery page design
Final website http://dev.redstart.in/bms/index.html