3 PROJECT DOCUMENT rd
WEB DESIGN Guided by Rupesh Vyas Develop a system for documentation and representation of work done by Quick Brown Fox, the end deliverable of which will be a web site for the same.
SHANTANU SALGAONKAR Graphic Design | Semester 7 National Institute of Design 2011
CONTENTS
PROJECT BRIEF - 06 RESEARCH - 08 Codesign-10 // DKMD-14 // Koweiden Postma-17 // Paparika-21 // Ray+Keshavan-24 // Synthesis-28 // User Study-29 // Personas-30 // Synthesis-34
NEW BRIEF-35 EXPLORATION-36 Flow Chart-40 // Wireframes-41 // The Grid-42 The First Design-44 // The Second Design-46 // The Third Design-48 // The Final Design-50
CONCLUSION - 56 THANK YOU - 57
THE PROJECT
Brief Develop a system for documentation and representation of work done by Quick Brown Fox, the end deliverable of which will be a web site for the same.
Synopsis My project involved designing a portfolio website for a new graphic design firm, by the name Quick Brown Fox. Apart from designing the website I had to look into ways of documenting all the work they have done and explore representation techniques in a portfolio based website.
Quick Brown Fox Quick Brown Fox is a graphic design firm started by Sujay Sanan and Hanumant Khanna, who have studied Graphic Design / Visual Communication from the National Institute of Design. Sujay and Hanumant convocated from NID in 2008 & 2007 respectively. Later they worked for Codesign under Rajesh Dahiya. Sujay quit Codesign in 2009 and Hanumant in 2010 and started freelancing and collaborating with other designers on various projects untill they decided to start a firm of their own by the name of Quick Brown Fox, named after the famous panagram used by type designers to test characters in a sentence. 6
The Quick Brown Fox masthead
7
RESEARCH
To begin the User Research, I started by looking at websites of Graphic Design firms, which are similar in scale and infrastructure to QBF. I also studied websites that were similar to what QBF see themselves to be in the near future. 8
Web Site Analysis
9
Codesign
The Landing page talks about the firm’s fresh approach towards design. And stays on till you use the close tab on top right.
The home page has the 9 best projects showcased.
10
They also have a Client list which is very rare for firms of small size like Codesign.
Apart from the About us, the website has Media, Team and Contact Us link to talk about the firm.
11
They have a dedicated Contact Us page, which has a map to describe the location of the studio, with separate mail IDs for solutions and careers.
The Team page talks about the individuals behind the firm with wit and humor.
12
The portfolio page is categorized into various tags, like branding, print etc, under which the projects are sorted. The project list drops down into their respective category. And the image space takes up majority of the screen, adapting according to the resolution.
13
DKMD
The website dose not have a Landing page, infect the Home page talks about the firm’s process and mission statement.
In the Team page the core team members are represented by icons and gives a brief bio along with their aspirations.
14
The Contact Us page gives away just the basic details and address.
The portfolio page has projects in alphabetical order and are represented by color coded icons to represent what category they fall into.
15
When a project is selected, the image run through is fascinated by numbered tags on the top.
16
Koweiden Postma
The Home page has a full bleed picture that expands the entire resolution irrespective of the screen size. This language has been used in all the pages as a visual language.
The profile tag gives a drop down to links for company profile, news and job openings. The profile page talks about the company mission statement, along with a brief description of the team members.
17
The Archive section talks about the company’s older project and is presented in a similar layout as that of the Project page.
The firm has a dedicated section called Because which documents the firms contribution to the social causes sector.
18
The Case study section explains in detail the process of selected projects to help design students understand the work ethics of the firm.
The Work tag is again a drop down for Portfolio, Client List, Cases and Archive section. The portfolio link again gives a list of categories the company specializes in. Every category gives you a list of thumbnails which lead you to the particular project.
19
The Project page gives a very precise presentation of the work done for the particular project with the right balance between images and text.
20
Paparika
The Home page is condensed to the bare minimum, with just the required tags on it.
The About us page and the Contact page are also minimalistic using only text.
21
Similar to DKMD, only the required details are given.
The Portfolio link is an loop scroll which can be used by cursor direction.
22
The Projects page loads images one at a time, next image loads by clicking on the current image.
23
R+K
The home page is very interactive and is designed in such a way that the links themselves give a hint about how the company works.
The company gives a lot of emphasis on describing themselves. They also explain what sets them apart from the rest of the studios.
24
A client has a special section for client testimonials. A blog is also maintained to keep followers updated about new projects and processes involved.
The Contact section has been interestingly named ‘Start a Conversation’. Which leads the viewer to the contact section.
25
The ‘Start a Conversation’ section gives links for different pourposes. Making the communication flow easier.
The projects are classified into various categories like Industry, Client, etc.
26
Under every category the Projects are listed alphabetically aiding the easier navigation.
Each project is treated like a client presentation, where the projects are explained in detail, with process and scope of work.
27
SYNTHESIS Codesign:
The problems I sensed in the Codesign website were the Contact page and the method used to code the website. I did not see a need for a map in the Contact page, since I have been to Delhi and worked for Codesign during my internship, I have realized the important landmarks which you give as address to someone searching for the firm, i.e; The Signature Towers and The Courtyard Mariott are missing in the map. The website is coded in Flash, which is not supported by devices like iPads or iPhones which is staple for a lot of corporates who are always on the move. I also talked to Abhishek Ghate, who designed the website for Codesign in 2003, he told me about the various problems that occur while updating the website due to the complex coding.
DKMD:
The design is very simplistic. The Contact and About Us links load easily. But when it comes to viewing projects, it becomes a bit of a problem, since the only way you can see the next image in a project is by clicking on the small numbered links on top. The scroll list along with the scattered iconography makes it very difficult to search for something you are searching in particular.
Koweiden Postma:
The website has a different image loading in the background for every new link. Although the images get saved in the cache to facilitate faster loading, the website does have problems while loading. The separate sections like Archive, Because and Cases are very helpful to students looking at the firms work and the process followed.
Paparika:
The design is very minimalistic. The Project view is very fluid but a lot of images have been allotted per project which makes looking at each project monotonous. The Portfolio scroll is also a bit confusing.
R+K:
The R+K website has the best navigation as far as I can see. The only problem occurring for them is the Flash based website which is not supported by a lot of hand held devices like iPads, Androids etc. 28
USER STUDY Before designing the user experience, it is important to understand the user and his/her dynamics. There are many reasons to pursue user studies. User Study can be used to evaluate the strengths and weaknesses of different visualization techniques. A more fundamental goal of conducting user studies is to seek insight into why a particular technique is effective. This can guide future efforts to improve existing techniques. We want to understand for what types of tasks, and under what conditions, a particular method will give high quality results. This knowledge is critical, since different analysis tasks may be best served by different visualization techniques. Hence I started researching on various users of the website. I did this by narrowing down the target audience and categorizing them according to what they would be looking for. It is also important to understand which audience QBF is trying to target. This helps a lot while narrowing down typical users.
I started by interviewing people and trying to figure out who would be the target audience of this website. I then categorized them as different profiles. This process helped me understand the website from the user’s perspective. 29
Personas Dipankar Sengupta Studied Graphic Design at National Institute of Design • Born 25th May 1990 • Lives in Ahmedabad • Born in Pune, Maharashtra Dipankar Sengupta is at the end of his 3rd year and is looking for an internship. He is looking for a firm where he would learn more about branding which is something he has not done before.
HOME
He has all the time in the world to go through the website. He has heard about this firm from his seniors and is thinking of giving it a look himself.
ABOUT US
He would then check the company profile / background. Who owns the company, what services does it offer and what process it follows.
WORK
It would really help him to get a clear idea of the distinction between various services provided by the firm. This would help his learning a lot.
BRANDING
It would help him to look at more about the type of work he is looking for. A case study would also help.
MISC CONTACT
30
He would want to see the other work as well.
To get in touch / send in a resume or a portfolio.
Geetika Kejriwal Worked at DKMD • Studied Graphic Design at National Institute of Design • Born 19th June 1986 • Lives in New Delhi • Born in Mumbai, Maharashtra Geetika Kejriwal is looking for job as a full time designer in a new firm where she has ample space to grow. Hence she is looking at firms with interesting work she can connect with.
HOME
She has heard about this firm in various conventions and magazine articles and is thinking of giving it a look herself.
ABOUT US
She wouldwant to know how the company functions and who all are working in the firm.
BRANDING
She is looking for interesting projects.
MISC CONTACT
It would help her to look at more about the type of work she is looking for.
To get in touch / send in a resume or a portfolio.
31
Rudro Bhandary • CEO at Durba Ltd • Studied BA at Indian Institute of Management • Born 4th July 1960 • Lives in London, England • Born in New Delhi, India Rudro has started a new business and has been advised to approach a graphic design firm for the branding. He is new to this concept and is looking at the firms website to learn how it can help his buisness.
HOME ABOUT US
He is looking for pointers that would help him through the website, since he is new to the concept.
Since he has no idea whatsoever, he wants to know what the company does, or what services they provide.
WORK After looking at the work he would have a clear idea of what the firm does and what it could do for him.
BRANDING
32
Surabhi Gangrade Director at Domus Academy • Studied Industrial Design at Royal Collage of Arts • Born 15th August 1980 • Lives in Milan, Italy • Born in Mumbai, Maharashtra Domus academy has an interesting project breif and a lot of firms and individual designers have sent in their portfolios for the same. She is tired, has very little time and has a lot of portfolios to go through.
HOME
She has very little time.
WORK
She has to get to the point.
BRANDING MISC CONTACT
She knows what she is looking for.
She might take some time and look at other work as well.
Will get in touch if interested.
33
SYNTHESIS Having a case study is a very good addition to a graphic design firm’s portfolio website. It helps student learn a lot about various practices and processes carried out by firms, in the industry, to approach end result. Although it is a good nice addition, only a few firms practice it. Only firms who have been in the industry for a long time can afford to have a case studies section. For a new firm like QBF it is important to prioritize their target audience. Top priority given to prospective clients.
Hence, It was decided to do away with the case study section. Most of the viewers would be looking for a specific sought of work done by the firm. Here it is importaant to look at the scale of the firm. A firm like R+K or Pentagram can afford to experiment and have unconventional sort for their work. More than the work, what they more prominently project is their client list. But for firms like Codesign, DKMD or QBF it is important to showcase the work and give it more promience. Also a client approaching R+K would be already aware of the services provided by the firm unlike the case of QBF where a prospective client would have no idea whatsoever about the services provided.
So it is important to sort the portfolio and give it more prominence. Although students would take their time going through the website, not all would share the same patience. Some prospective clients will be looking for just what they want and nothing else. In such a situation it is very important to narrow down and help the viewer find what he/she wants as quickly as possible. Hence functionality was a top priority here. It is important to understand how much time someone would spend on a portfolio website.
In such situations it is important to make the navigation simple. 34
New Brief
On the basis of the research and user study I redefined my brief and narrowed down my objectives to be achieved with this website.
The brief was now, to create a website that is to the point, shares maximum information in minimum amount of time and is user friendly where no link is more than two clicks away. 35
EXPLORATION CONCEPT ONE The first concept revolved around a blog like approach where all the information was on the home page. In this way the user could access all the information at any point of time. Although this was consistent with the brief the layout would be really crowded and monotonous since the user wont move to any other page. Also, everytime the user scrolls down to view the project, a lot of the information is lost on the top of the page.
QBF logo + Contact details
About QBF / / /
About the two founders
/ / /
/ /
/ / /
/ /
Project list. Each project is seperated by a backslash
Individual project synopsis
36
CONCEPT TWO This concept revolved around the idea of having thumbnails of each project on the homepage making the page more colorful. But then the website would get lost in the many cargo collective and Behance custom websites. Also the interface for the project page would take you to another page altogether contradicting the revised brief.
QUICK BROWN FOX About us | Contact
Masthead Project thumbnails
37
CONCEPT THREE
This was similar to the second concept, but here the projects were represented in rectangular blocks. The difference here is that it would help in having a rectangular layout. But again just like the second concept, it was getting lost in all the custom portfolio websites. Also just like the first concept it was losing the wordmark.
QUICK BROWN FOX About us | Contact Tags that would appear on roll over
38
CONCEPT FOUR
The forth content was a very simple layout which would be built using something called as a sticky function. The links would be constant throughout the page, while the different pages would load in the centre. The portfolio would extend throughout and there would be a sort function to highlight the various projects under the various categories. Although this layout did have some problems, we decided to go forward with this layout and work on the layout and resolve the various issues.
QBF logo About Us, Contact, etc Sort Tags Project List
Project Description Project image
39
Flow Chart HOME ABOUT US
PORTFOLIO
SORT: Branding / Print / Web / Space
CONTACT
After the concept was selected it was important to create a flow chart to understand the site map before going ahead with the wire frames. The flow chart would explain where the various links would take you and how you could navigate through the site. The flow chart would also help resolving navigation issues. 40
WIREFRAMES WIREFRAMING About Us
Contact
Selected projects
About Us
Contact
Selected projects
•Audio Ashram •Chimes •CMYK •Crayon •Doon •Dr Reddy’s •Eto •Formula •Heritage Walk •HSD •Jim’s Retreat
About Us
Contact
ABOUT QBF
cts cts io Ashram mes io Ashram YK mes yon YK n yon Reddy’s n Reddy’s mula tage Walk mula Dtage Walk Ds Retreat s Retreat
About Us About Us
cts cts io Ashram mes io Ashram YK mes yon YK n yon Reddy’s n Reddy’s mula tage Walk mula Dtage Walk Ds Retreat s Retreat
About Us About Us
Contact Contact
Contact Contact
Selected projects •Audio Ashram •Chimes •CMYK •Crayon •Doon •Dr Reddy’s •Eto •Formula •Heritage Walk •HSD •Jim’s Retreat
Selected projects Selected projects •Audio Ashram •Chimes •Audio Ashram •CMYK •Chimes •Crayon •CMYK •Doon •Crayon •Dr Reddy’s •Doon •EtoReddy’s •Dr •Formula •Eto •Heritage Walk •Formula •HSD •Heritage Walk •Jim’s Retreat •HSD •Jim’s Retreat
Selected projects Selected projects •Audio Ashram •Chimes •Audio Ashram •CMYK •Chimes •Crayon •CMYK •Doon •Crayon •Dr Reddy’s •Doon •Eto •Dr Reddy’s •Formula •Eto •Heritage Walk •Formula •HSD •Heritage Walk •Jim’s Retreat •HSD •Jim’s Retreat
•Audio Ashram •Chimes •CMYK •Crayon •Doon •Dr Reddy’s •Eto •Formula •Heritage Walk •HSD •Jim’s Retreat
About Us
Contact
Selected projects •Audio Ashram •Chimes •CMYK •Crayon •Doon •Dr Reddy’s •Eto Contact Selected •Formula •Heritage Walk •HSD •Jim’s Retreat
WIREFRAMING About Us
About Us
Contact
ABOUT QBF
projects
About Us
C
About Us
C
•Audio Ashram •Chimes •CMYK •Crayon •Doon •Dr Reddy’s •Eto •Formula •Heritage Walk •HSD •Jim’s Retreat
Selected projects •Audio Ashram •Chimes •CMYK •Crayon •Doon •Dr Reddy’s •Eto •Formula •Heritage Walk •HSD •Jim’s Retreat
41
Once the wireframing was done, I got down to designing the website on illustrator. Keeping the basic design and sitemap in mind I started adding interaction elements to the website. 42
THE GRID After consulting with the programmer, I started designing the website on the smallest size i.e 960x700 px. After doing so, I would start designing how the website would react in for the various resolutions. For which I listed most probable resoulutions for Personal computers and Macs. The typical resolutions were: 1024x768 1280x800 1344x1008 1600x1000 1920x1200 2560x1600 It is important to decide the grid before you start designing. After talking to the programmer and Abhishek Ghate I decided to go with a grid that would help the design and is fluid at the same time. Taking 960 X 768 as the basic browser resolution, the grid is divided into 160px wide coloums and 24px gutter. As the width of the browser increases, the number of coloums also increases, although the width remains constant throughout.
160px 24px
160px 24px
160px 24px
160px
43
The First Design
This is what the first layout looked like. Although I tried to fit it in a grid. It looked very clumsy without them 44
Top left: About Us page Top right: Contact page Left: Project page Bottom left: Selected projects page
SUJAY AND HANUMANT’S FEEDBACK The About Us page and Contact page, although following a grid, were using a lot of space for no reason whatsoever. The black and red visual language was very loud for the website and was making the website look very tacky. The project description in the project page was right aligned whereas the QBF wordmark is left aligned.
45
The Second Design
46
Based on the feedback I tried to resolve the layout. I tried to make it not so hard on the eyes by using more white. The tags were made prominent, The project page now had the project description left aligned. The Contact page and the About Us page were resolved by creating the layout to accomodate the content.
SUJAY AND HANUMANT’S FEEDBACK Although the this one was designed keeping in mind the previous feedback, there still were lingering problems like the project list. If the list of projects/ clients were to grow in the future (which it would) how would it be accomodated? Giving a new page to projects altogether went against the new brief. The tags were still jarring and there was no definate link language designed. 47
The Third Design
48
The next design was kept simple by introducing a system of tabs, giving the look and feel of folder lockers. The link language was toned down. and even the masthead render was changed.
SUJAY AND HANUMANT’S FEEDBACK The tab system, although looked organized and clean, was not following the layout. It was also causing use of unecessary space similar to the case of the first design. Although I was given freedom to play around with the masthead it was later decided to go against it and go for the standard masthead which was earlier decided upon. 49
The Final Design 12px
160px
24px Total space: 251px 12px
Masthead size: 172x72
Height: 12px
Distance from top edge: 84px
Home Pa 16px 30px
This is an example fo 960x700. This is the placement of the link The grid is the same the placement of the and the top edge.
Note: The image use
30px
Taking into accout all the feedback given in the past few days, over the previous explorations, I came up with the final design of the website which was consistent with the new brief and objectives I had set for myself. 50
Typo 12pt
12pt
The websit bold and Fe the body te
10pt
For further www.typot Also www.t Fedra bold Fedra med
10pt
ABCDEF NOPQR abcdefg nopqrs 1234567
Fedra S
ABCDEF NOPQR abcdefg nopqrst 1234567
Fedra S
The typography used for the website was Fedra Sans.
51
Typical Project Page 24px 12px 12px
24px
Sub sections in a project are seperated by a 0.75 black stroke. The divider between images is a 0.25 dotted black line.
The typical project page will have landscape images of 504px width, with varying heights, as represented here by brown rectangles.
8px wide, height of the scroll may vary.
24px
24px 24px
This is an example of the project page at 900x768. It will differ, in higher resolutions, only by th placement of the project box (This is explained on page 6).
1px X 1px
24px 24px
24px
the arrow is located exactly in the centre of the 24 px square formed by the project box border. 5
Typograp
Fedra bold has been u Fedra medium has be Arial regular has been
14pt
10pt
10pt
ABCDEFGHIJKL NOPQRSTUVW abcdefghijklm nopqrstuvwxy 1234567890
Fedra Sans Bo
ABCDEFGHIJKL NOPQRSTUVW abcdefghijklm nopqrstuvwxy 1234567890
Fedra Sans Me
ABCDEFGHIJKL NOPQRSTUVW abcdefghijklm nopqrstuvwxyz 1234567890 Arial Regular
52
Post
The poster comes to im this section
All posters divider bet
The typical poster project page will not only have landscape images of 504px width, but also portrait format images of the posters of 320px with varying heights. The portrait format image of the poster will be followed by landscape format closeup image/s of the poster.
24px
This image
24px 24px
Landing Page When the user loads the website on an empty cache memory, this page will appear just once. The page will carry a quote in the centre.
24px
This is the limit for coloumn width for the quote.
The quote starts form the second column and is aligned to the centre of the page wrt the top and bottom edge of the page. The text size is 36pt with 43.2pt leading. The text is given a 3D effect by copying the same text in the same size with a darker shade at the back as shown above. The color values of both the texts are as follows. For the text on top: R-249 G-157 B-28 For the text below: R-148 G-94 B-4
9
53
About U 12px
The about us page ta pany’s profile and abo founders.
The about us box will aligned 12px away fro the browser resolutio
32px Fedra Bold 21pt
21px
Arial regular 12pt 84px 160x238 Fedra Bold 10pt
Arial regular 10pt
24px 392x479
24px
24px
24px
Fedra Bold 10pt
Arial regular 10pt
The about Us column.
54
Cont
The contac 12px away browser re
24px
24px
24px
Arial regular 14pt
24px 208x215
The Contact Page
55
CONCLUSION
Designing the website was a very good experience in terms of learning, it was the first project I dealt with which wasn’t print. It is a great help in understanding layouts outside print and publication and learning how to organise content and figuring information architecture. 56
In every project it is important to understand the background and the context. Hence research is a very important process in learning. While designing the website it was very important to understand the competition and the current trends relating to portfolio websites. Going through the websites helped me understand what the company is looking for and what it could be. It is also very important to understand the user psyche and his needs. It is very helpful when you are designing a website that would cater to the user and give him/her a hassle free experience in navigating a website. The user study helped me understand the user’s perspective of a web experience.
57
REFERENCES
Stationary Now! by Tashen (2010) 79 Short Essays on Design by Bierut, Michael. (2007). http://www.alancooper.com http://www.flickr.com/photos/paulhughes/ http://forum.howdesign.com/tt.aspx?forumid=3 http://www.graphicdesignforums.co.uk/ http://www.tjkdesign.com/liquidlayouts http://www.maxdesign.com/liquid-layout-the-easy-way
Thank you
Thank you Sujay Sanan and Hanumant Khanna for giving me this opportunity, Kriti Monga for being an angel. Rajesh Dahiya and Mohor Ray Dahiya for helping the lonely kid in the big city and Rupesh Vyas for guiding me through this project. This project would not have been possible without Brajendu Bhaskar and Somdutt Sarkar, for being a good friend that he is, Tenzin Yeshi, Dipankar Sengupta, Arjun Singh, Neha Agarwal, Kishori Desai, Bhagyesh Nadkarni, Prashant Coakley, Arka Gupta, for the last minute selfless running around, Krishnarjun Bhattacharya, Ratul Bhowmick and Rudro Bhandary. Mom, Dad and Siddhu for believing in me. Thank you all.
59