creation and implementation of a pictographic system
RACHEL HERMAN DESIGN 3103 | ROBIN REED
DEPARTMENT OF DESIGN THE OHIO STATE UNIVERSITY AUTUMN 2014
TABLE OF
CONTENTS
1
PART
2
PART
Part I, Creation .....3 Objective & Background .....4 Project Proposal .....6 Inspiration & Research .....8 Icon Development Process .....10 Audience Testing & Information Graphics .....14 Color Application .....16 Final Icon System .....18
Part 2, Implementation .....20 Objective & Background .....22 Project Proposal .....24 Inspiration & Research .....26 Brand Identity & Typography .....28 Print Application .....30 Web & Mobile Application .....32 Environmental Graphic Application .....38 Wayfinding Application .....40 Special Thanks .....42
1
2
1
PART
3
YOU MIGHT BE WONDERING...
OBJECTIVE & BACKGROUND The objective of this project was to choose a concept and/or organization for which to develop a comprehensive iconic system. The creation process included a series of steps that encompassed research, planning and objective setting, conceptualizing, audience testing, and form making.
4
...Buckeye-what? BuckeyeThon is a 24-hour, no sleeping, no sitting Dance Marathon that raises money to support the kids who are treated on the Hematology/Oncology/BMT Department at Nationwide Children’s Hospital. Over 4,000 dancers, consisitng of BuckeyeThon organization members, Ohio State students, faculty/staff, and the community of Columbus, come out every year to both monetarily and emotionally support this cause. It is this organization, that I am proud to be an active, and passionate, member of.
5
THEREFORE,
PROJECT PROPOSAL The focus of this system is directed at all persons attending the Dance Marathon, with the purpose to spread knowledge of locations within the Dance Marathon itself and within the event space, The Ohio Union.
Due to the change in the location of activities and procedures from year to year, this system will attempt to integrate familiar and unfamiliar, young and old, guests easily and effectively. The end goal is to provide users with a system to become familiar with to attain a more comfortable and successful event experience.
6
THEREFORE, SO THEN...
7
8
...I investigated
INSPIRATION & RESEARCH I looked at various reference icons and exisiting Dance Marathon identities. From these, I decided that it was necassary to hit three key parameters in designing my icons. My icons needed to be: simple in their forms, leaving as much unnecessary detail out as possible, having the ability to be understood by all ages heavily contrasted, creating positive and negative forms to be able to be seen from far away in a large event space and fun, expressing a young, kid-like feel in the context of the event All images shown in this spread were found online and are not mine.
9
AND GOT DOWN TO BUSINESS
ICON DEVELOPMENT PROCESS In beginning my process, a big first step was initial sketching. I began trying out different visual symbols and word associations for each icon. I visualized different curves, angles and views to develop a style.
10
11
Icon Survey Example
For clarification, an example of an outlier would be an extraneous answer that has nothing to do with the event. Jokes or non-serious answers were excluded from my data.
Percentage of Correctness of each Icon
100 75 92 2
%
%
%
%
12
100 100 92 100 75 S S 50 83 83 92 83 100 100 92 83 50 100 %
%
%
%
%
%
%
%
%
%
%
%
S
%
%
%
% I calculated which icons were guessed most cor-
rect and most incorrect. From this information I was able to tell which icons needed further refinement. Most of the basic building directionals were guessed right everytime like the stairs and elevator. Hair cutting perfomed the worst overall, with only 2 out of 12 guessing correctly.
the . t m o fr rrec ple 0 co o pe /2 e, t 16 g a go er av tion n O niza a org
0 2 /
6 1 11/20 On average, people who had never been to the event before got 11/20 correct.
Let’s TRY IT Out
AUDIENCE TESTING & INFO GRAPICS In order to ensure that my icons made sense to people unfamiliar with the project, I showed all 20 of them to 12 people and had them guess what they might represent in the context of BuckeyeThon. I tested people within the organization as well as people that had never been to the event before. Overall, the testing went well and with a few outliers, most of the participants guessed correctly. I drew upon their feedback whilst developing the rest of the system.
13
Throughout this process, I reevaluated my icons several times. I explored different ways the objects or actions could be expressed. For example, for donations, I tried the currency symbol standing alone as well as it interaciting with a donation box. It occured to me that adding the donation box was unnecessary because when talking about money in the context of this event, it is obvious that it is a donation. It could also be misleading because there are no actual donation boxes at the event. I ended up bracktracking and sticking with my initial intention to eliminate as much unnecessary detail as possible. I chose a standalone abstract dollar to stand for donations.
14
As far as style, I worked through a variety of phases. In the end, I found a very distinct approach. I chose a simple, cleancut, bold line style that is very readable. I added curved detailing and enclosed the icons in a circle to create a fun, kid friendly, far from serious feel.
back to the drawing board
ICON evolution
Donation Icon Evolution
$ S Final Style
15
Put on those finishing touches...
Color application I chose to stick with a traditional OSU color palette of red, grays, white and green.
Yet, with a more modern, brighter and playful feel for the nature of the event. I also decided to use color to signify the category of the icon being indentified (displayed on the following spread).
16
17
The Ohio Union Directionals Event Procedures Event Activities
S S
18
S
TA-DA!
FINAL ICON SYSTEM Starting from top left and going across: 1. Stairs 2. Elevator 3. Information 4. First Aid 5. Emergency Exit
11. Bag Check 12. Letter Writing 13. Stage/Performances 14. Food 15. Pictures
6. Bathroom 7. Donations 8. Merchandise 9. ID tag/Register 10. Money raised/Reveal
16. DJ 17. Hair Cutting 18. Games and Activities 19. Crafts 20. Kids
19
20
2
PART 21
Let’s Talk about...
OBJECTIVE & BACKGROUND The objective of this project was to create demonstration applications of the previously created icon program used in print, environmental, and digital media. The implementation process included research to fully understand contexts of use and decision-making and problem-solving skills to construct appropriate applications of the icon program.
22
The ohio union The Ohio Union is a 318,000 square foot premier venue. Most rooms can be set up in banquet, theater or classroom style. All events held at the Ohio Union are subject to the Ohio Union Building Policies and Procedures.
23
Just a reminder!
PROJECT PROPOSAL The focus of this system is directed at all persons attending the dance marathon, with the purpose to spread knowledge of locations within the dance marathon itself and within the event space, The Ohio Union.
Due to the change in the location of activities and procedures from year to year, this system will attempt to integrate familiar and unfamiliar, young and old, guests easily and effectively. The end goal is to provide users with a system to become familiar with to attain a more comfortable and successful event experience.
24
THEREFORE, now LEt’s GET STARTED
25
26
AND LET’s GET CReative
INSPIRATION & RESEARCH With my prior knowledge of The Ohio Union event space and newly found research on different types of creative applications and materials, I decided that it was necassary to hit three key parameters. My applications need to be:
mobile, physical applications need to be able to be moved and/ or removed easily at various times throughtout the year clear and concise, with a typical, busy college student target audience, applications with information need to be spotted out quick and easy and again fun, a young, kid-like feel for the context of the event All images shown in this spread were found online and are not mine.
27
BUT WAIT FOR IT...
BRAND IDENTITY & TYpography A little outside of the project lines, I redid the BuckeyeThon logo to better coordinate with my color palette and system feel. I believe my final rendering is brighter, more fun and noticable.
28
For typography, I chose Minion Pro for the logo text as it is close to the original serif typeface of the previous logo. Serifs are recognized as dependable, notable and reputable. This logo would not only stand for the Dance Marathon but the organization as well which raised over 760,000 dollars for the kids in 2014. BuckeyeThon is a well accomplished, well recognized organization on campus, very much emodying these textual attributes. For the accompanying, subheading text, used in application, I chose the sans serif Bebas, a clear, easy to read typeface. Resonating with my icon set, Bebas will bring a more modern, fun and exciting edge. Minion Pro will also reappear for any body text.
Logo Progression
Original
BUCKEYETH N First Concept
BUCKEYETH N Final Rendering
Typography
Minion Pro
Logotype Body Text
BEBAS
Subheading
29
Event Activities Event Procedures Event Space Directionals
BUCKEYETH N 30
Proposed Site Map
OH LA LA
For the print application, I decided to recreate The Union site map and incorporate my icon system. The current map is very, very structurely detailed. This causes locational information to become overwhelming and unclear. I decided to “dumb� it down and structure it with basic shapes to be readble by all ages, especially young children. I chose to keep the map base grayscale and add color through my icons as to make them stand out. I also scaled areas of importance larger, while places, such as the bathroom, where there are multiple of, are scaled smaller to create a heirarchy and sense of depth within the map. I made a legend to translate the color coding of categories of icons. Addtionally, I added the logo at the bottom to give it a personalized feel. This map could be applied to I.D. tags, a brochure, website, or printed out very large for a sign at the event. Ohio Union Site Map
31
Let’s get digital This is what would display if the user logged onto the BuckeyeThon website. My goal was to create a simple yet tasteful website within the means of Ohio State Student Life. I wanted it to be very clear where to click and only have one way of getting somewhere to avoid confusion and backtracking.
WEB
All links are shown clearly on the left side underneath the search bar. The green Buckeye leaf indicates links of importance/most frequently used.
32
The whole page background will be a slideshow of event photos and the BuckeyeThon logo will dominate the bottom right corner.
home about us register get involved fundraising Donate Events sponsors store blog
BUCKEYETH N FOR THE KIDS
Proposed Website Homepage
33
This is what the website would display if the user clicked on the “Donate” tab.
MORE
WEB home about us register get involved fundraising Donate Events sponsors store blog
When hovering over the tab, it will turn green and display the relative icon. Then, when actually taken to the “Donate” page, the tab stays green, along with the image of the icon, to show what has been clicked. All links will remain shown on the left side for consistency and ease of use. The whole page will have been replaced with a solid green for legibility and the big welcome logo would shrink down to a small logotype in BEBAS to become less distracting. In this case, that page consists of instructions on how to donate with links to the correct resources. The link “Donate Here” would take you the main donating resource known as Donor Drive.
we have raised over 17,502 dollars!
S
Ed quas militempedis aut elessus ipsamenias sum facesed quiam faccatatem quat. Cus di quas volorio officiduci volupta musandi orpori iusaesti omniaturRaturitio modior sit, omnissi tionsercit ut omnis ma veles reptatem voluptat eum harumquo volupiscit, est ommodi vendiciis maximin es alit mos et, ad quatquam aut porepedi nos erist eos quam ation DONATE HERE
buckeyethon | FOR THE KIDS
Proposed Webpage
34
This is what the website would display if the user clicked on the “Register” tab. Similar to the previous page, when hovering over the tab, it will turn red and display the relative icon. When actually taken to the “Register” page, the tab stays red, along with the image of the icon, to show what has been clicked. All links will remain shown on the left side for consistency and ease of use. The whole page will have been replaced with a solid red for legibility and the big welcome logo would shrink down to a small logotype in BEBAS to become less distracting. In this case, that page consists of instructions on how to register with links to the correct resources. The link “Register Here” would take you to forums to begin registering.
home about us register get involved fundraising Donate Events sponsors store blog
3,456 have registered and counting! Ed quas militempedis aut elessus ipsamenias sum facesed quiam faccatatem quat. Cus di quas volorio officiduci volupta musandi orpori iusaesti omniaturRaturitio modior sit, omnissi tionsercit ut omnis ma veles reptatem voluptat eum harumquo volupiscit, est ommodi vendiciis maximin es alit mos et, ad quatquam aut porepedi nos erist eos quam ation
REGISter here
buckeyethon | FOR THE KIDS
Proposed Webpage
35
kids these days
Since almost everyone, especially college students, has a cell phone these days I decided it would useful to have a mobile application as well. Mobile’s accessibility makes for a convenient application within the context of the
MOBILE
event. Shown below are the visual mark for BuckeyeThon transferred into a visual icon for the application, it used within the context of the homepage of an iPhone and the typical screen of the organization logo when loading the application.
Proposed App Icon
Proposed App in Context
36
BUCKEYETH N
Proposed Loading Screen
Shown are various pages that would direct you within the application. The main home screen is simple, with just three large links to choose from. From clicking on a link, the app will direct you to a page of choices of places/things within the category of the link. This page with show relative icons as buttons to click on to recieve information about that place/ thing. For example, if you clicked on the “first aid” button under “important places”, the app would display information about first aid such as where to find it on a map. If you clicked on the “food” button under the “activities” category, information such as dinner times would show. Notifications will also be used for catergories like food to alert you when it is time to eat.
Event Activities Event Procedures Event Space Directionals
important places
ACTIVITIES procedures important places
1
important places glass lounge
ACTIVITIES 1
ACTIVITIES 1
dinner is ready Agnimus quamus
Agnimus quamus
elevator
first aid
food
photo booth
food
photo booth
information
bathrooms
performances
dj
performances
dj
BUCKEYETH N
Mobile App Wireframes
37
BUCKEYETH N
38
THE 2015 get loose AT
athoDU/nBT dance marGO.O SU.E
ETH N BUCKEY tem conlos,
Vere nius nentius aude
For the environmental graphic, I had a wide range of ideas for the implementation. I looked at surfaces around The Union that could make for good locations for large, noticeable graphics. I worked with fabric, hanging banners within the great hall of The Union, which is pretty typical of a student life organization. I also created event awareness signs modeled after a stylized person in my icon set.
wow!
For the final, I decided on an application of various activity icons on a large scale graphic on the front of the building. This is where a lot of studens enter the Dance Marathon and can catch a glimpse of what’s going on inside while also creating visual interest. These icons would be printed on a large vinyl banner and then hung over the brick of the building.
environmental graphics
For the environmental graphi number of ideas for the imple was looking at surfaces aroun that could make for good loca large, noticeable graphics and ideas. Yet, sticking realisticly w Union’s strict policies, it woul impossible to do anything of v scale. I decided to apply event space adhesives over exisiting worked with banners and eve signs. I wanted the viewer to b the icon and understand the p the location better because of
39
It is important to note that the arrow is a style already composed in the icon set. The arrows works well because of its soft edges and curves that relay in my icons. Arrows with sharp angles diminish that harmony and create too much contrast that could visually distract the user.
last but not least
wayfinding 40
For the way finding application, I decided that it should be posted largely on walls for people to orient themselves while on their way to their destinations. I also found it really important that these signs could be easily moved and removed because of the changes in location from year to year. The sign would be similiar to an adhesive poster that could cover exisiting wall space.
41
that’s all, folks! that’s all folks! Special thanks to Robin Reed for all of her help during the development of this process. Special thanks to Robin Reed for all of her help throughout the development of this process.
42
THEREFORE,
43