-
Notifications
You must be signed in to change notification settings - Fork 15
Graphic Design
CV & SK, JANUARY 2012
FONTS, GRAPHICS & COLOURS
1. Header should be replaced with the earlier design, the graphic for which is as below (without the 'RapidSMS' text, SK to do): https://www.dropbox.com/s/9v4zaf39ygm8cul/bessms_header07d.png https://www.dropbox.com/s/19nvxfgbdx15knh/bessms_header07a.png - Center Header Vertically, move image to the right, hide login and tabs 2. Header gradient in background of static image, experiment with range from olive to yellow. Compare with header and gradient red/olive on http://sms.chalobest.in 3. Final definition of colour schema, suggestions (hex codes to be provided by SK): Based on these final colours, we will need to alter the header and other static graphic elements on the page (icons need to be based on this schema) Finalize fonts and font sizes. CV to give final fonts. Links to look for fonts are http://www.google.com/webfonts and http://www.fontsquirrel.com/ 3.1. Primary palette of BEST Red, BEST Olive, Canary Yellow for main elements in header and footer. 3.2. Secondary palette of Black and Dark Green for static text and links. 3.3. Tertiary palette of Silver Grey and Winter Green for list item backgrounds and maybe main background.
CV: I think we will need to work on a few options before we can fix this, depends on what best suits our needs so colour hierarchy can change. Set fonts and font sizes, CV to finalise.
HEADER and FOOTER
4. Login/Register links should be on bottom right corner of header below halo from logo. When logged in this will show user name and logout links (for now they should be hidden as this functionality is still in-works) 4.1. Note that css for login and register pages is broken (ask CK). 5. Tabs should be right justified beginning below the left side of the halo, and need a design and colour scheme. 5.1. Could be dark green, which is like a bus seat. 5.2. Could be silver lined with rounded edges, like a bus window. 6. Footer should be a thinner red bar similar to the header bar, with slight gradient and will contain links and icons. 7. Footer links and pages for "Join Us", "Project Wiki", "About Us", just keep "Contact". 8. Make Twitter and Facebook links larger on right, add Github link with icon to http://github.com/chalobest
- Once layout and schema have been decided, header and footer need to be reworked based on those such that they match both the colour and the layout. Based on the schema we can try variations with gradient, links and icons.
9. Add tabs "Routes", "Stops", "Areas"? 10. Remove content of SMS page pending update from wiki docs https://github.com/chalobest/ChaloBEST/wiki/SMS-How-To 11. Tabs to be aligned in layout with other elements (maps, lists, etc.) as below.
LAYOUT SIMPLIFICATION
12. Work on the master layout for the main page and the make altered layouts for the stop route and area pages based on the master. We already have this we just need to make a tighter grid for each of the pages. 13. Search bar occupies too much space, could be embedded in header beneath "ChaloBEST" left-justified (tabs will be right justified). Or could be right justified at current position and with same width as list boxes below. 14. Drastically reduce excess white space and padding between header, search box, stop/area/route name/info, and map below. 15. Try making width of map should stay same across all page templates, viz. home, area, stop and route. 15.1. It should occupy 60-65% of the total width. 15.2. If unworkable, have two different map widths. 16. Width of list boxes to right (or left) of map should be fixed across templates, and widths of list boxes used across templates (Departing Routes, Nearby Stops, Areas Passed) fixed across templates. 16.1. Work on lists' styling (alternative colours per item, text and link colours black or dark green, not red). 17. All templates should have one map on right (or left) and two lists to its side. This should be a uniform across all templates. 18. Display of Roman/Devnagari stop name on stop page, area name on area page, and route number and from-to stops on route page, should all be in uniform font and size, generally can be larger. 19. Review and finalise design of icons (CV). 20. The rest of the entire site is four templates, for home, area, stop and route pages. There is a single page for every area, stop and route of BEST which use these core templates. All remaining comments pertain to the unique templates.
STOP PAGES Example http://chalobest.in:18910/stop/khodadad-circle/
21. Should have two columns with lists (not one above and one below): Routes and Stops, with style same as on route and area pages. 22. Styling and position of road name and area name below stop name. 22.1. Suggest to left justify road name and align below stop name 22.2. Right justify and enlarge area name, and make it clickable link to area page.
ROUTE PAGES Example http://chalobest.in:18910/route/0041/
23. Should have two columns with lists (not one as at present): Stops and Areas, with style same as on stop and area pages. 24. Route number should be printed much larger, though route type can be smaller than the number. 24.1. In cases where prefix or suffix or both (i.e. 201 or AS-4 or 3LTD or C-52 Exp or A-76 Exp) should be spaced uniformly. 25. "Expected Frequency" in mins to be printed in large font right justified above right top corner of map, with route number and from-to stops left justified. 26. From and To stop names in a route should not have line break, should uniformly have full stop names in Roman and Devnagari separated by "to", not spaced in a grid.
AREA PAGES http://chalobest.in:18910/area/POWAI/ http://chalobest.in:18910/area/FORT/
27. Should have two columns as at present: Stops and Routes, with style same as on other stop and route pages.
MEETING NOTES
- Fix map to viewport on left so it remains fixed when scrolling lists on right
- Make list items clickable in all lists as whole rows
- Horizontal grid of 6-2-4 or 6-4-2 across route, stop and area templates with map on left 6 and two lists in 2-4 or 4-2
- Vertical grid move stop, route, road, frequency, alternative names, etc. metadata to right above lists 6
- Make English and Devnagari in stop lists left and right justified, rather than on top of each other, to reduce row widths
- Include connecting routes at stop in stop lists, and visual indicator of route density
- Explore embedding search bar in header later, for now keep on left above route/stop/area name. Depends on position of tabs.
. map / list grid is now 60% / 40% across the site (as is on the stop page) . make changes, if required to the area page list, once map width is reduced . make search box width of map, move to left, , remove grey background . move metadata to the right above list, look at styling metadata - needs to be more prominent as it is now . make header changes with new header images, shift image from left to right, hide tabs and login details, vertically center and re-do header code. Darken red gradient, if possible . footer - Give it a dark red gradient, make text white and add the github icon
KAREN TASKS, 23.1.2013
. Tabs in header or below header . Information below Search - Title and Metadata moves to the right in line with the search bar . Reduce font size of title . Move all information below map to the right column . Fix map to viewport . Add Tabs - white background, yellow stroke - SMS / About . Look at increasing font size of route in list on stop and area pages . Change links and body text, etc. according to Chitra's new swatches . Remove top border on tr elements in list, remove dark grey background from filter input and replace with a 2px border olive/lightgrey, try and make all filter inputs 100% width of table . Kill the gradient on the footer, make an rgba background and make it slimmer
COLOURS OF BEST:
. Red: #eb0101 . Green: #029b02 . Olive Green: #d2dab3 . Yellow: #f0ae10 . Dark Grey: #404040 (for text) . Light Grey: #cdcdcd
- Should be based on the signature colours of the BEST: bold red and white with trims of green and gold.
- All print and visual media of ChaloBEST should incorporate bilingual Marathi-English text and visual design at all levels.
- Unified logo and name across web, smartphone and sms services and all print and visual media
- Should look and feel "semi-official", for lack of an advertising or design agency within BEST we can do the job
Goals:
- Token of appreciation for volunteers
- Do minimum pre-public promotion
When is promotion succesful:
- When people google ChaloBEST (and use the webapp, see the wiki, etc)
- When people remember the SMS number and what you should message to get results
- When people search for the Android app in Android market (not yet available).
- When people are successfully able to explain to others why ChaloBEST is a cool tool
How do we get people to google ChaloBEST:
- they need motivation to google us (we must be interesting to them)
- they need to remember our name OR need to use a unique keyword + need to recall our name
- Explain advantages of using the service - shortened, easier commuting, route planning, grip on your travel.
- Make yourself related to something of peoples interest and suggest value - eg use visual similarity or surprising recall items and link it to ChaloBEST
- Connect to interesting visuals
- Repeat name often
- Display legible name in plain text (short & clean)
- First explain to them when the service is beneficial and how to use it (Chitra got particularly good feedback on the cartoon story that she drew, this was received, remembered and valued more than the other posters)
- Repeat the number, so that people can store it in their phone.
- (send SMSs to friends circle from ChaloBEST SMS number so that they can store it in their phone with lowest barrier)
- (use a forward SMS to friends from the ChaloBEST SMS number)
- By publishing it in the Android market, facebook, twitter (not yet relevant)
- By showing the android logo in all or most (if not all) of our communication
- By giving them a use case (story of when & how ChaloBEST is helpful)
- By reminding them of the usecases though a tag line
- Repeat the tag line
How can we bond with volunteers?
- Symbol of accomplishment
- Symbol of belonging to ChaloBEST volunteers
- Something that makes volunteers feel appreciated by others: get noticed or recognised, trigger to tell a story about the accomplishment
- use stickers in bus
- SMS video in bus (on regular video screen)
- SMS video on website
- SMS app with instructions in Hindi & Marathi
- Facebook ChaloBEST button
- Bags with ChaloBEST branding &/or something recognisable for volunteers & team
- T-shirt with ChaloBEST branding for volunteers & team
- Small stickers for in busstops with branding + phone number
- Posters for in schools / colleges
- Postcards with a nice image and usage instructions on the back
- Creditcard size card with SMS app how-to-use details + branding
- Postcard sticker combination that shows the cartoon story of how to use SMS
- Bag buttons with something cool (wanna have cute thing) that contains ChaloBEST branding (not necessarily the logo but something that makes you remember ChaloBEST) and that can be pinned on anything
- Bus-character stickers (like the ones painted in the bus to show seat reservations) that now have speach bubbles that say 'ChaloBEST'
Based on:
- reach (how easy to spread, how easy to 'put up')
- value in terms of brand recognition (what is the recall/memory potential)
- budget - so maximum value for minimum budget
- Value of information transfer
- Stickers can be cool, if they look good they are nice to receive as a token of appreciation and easy to share.
- Their reach may or may not be very high, but they are not expensive to print. Effect is assumed to be the highest when containing a nice visual, something to talk about.
- Stickers with just text are assumed less effective (dont help you to notice nor remember nor considered a trigger to talk about it) than stickers with a story (remarkable visual or the comic story)
- Just postcards or small cards have a smaller reach - you can take them along but each single one doesnt reach a large audience.
- Information on small cards limited, and becomes obsolete once SMS number is stored or people have the android app or liked our facebook.
- Not of regular use at this very moment (we dont want to do a big campaign)
- We still have posters
- If need be we can print a few posters when we need them
- Great as gifts
- Visible
- the bigger the more expensive, budget/reach ration not very good (except for things like buttons, addons to regular attire).
- Can be intensive to make.
- Very informative, potentially very convincing and could reach a very large audience when shown in the bus (may look at other options too)
- If placed in the bus (this is an unsure part) it will reach exactly the right audience at a point of time when we have their attention.
- bus character stickers (create new characters in the same style as well)
- postcard/sticker combination with cartoon. Nice gift as it looks good and has a firm back, can be passed to others, something to keep visible (school notebooks) and to stick on things. (we dont suggest bus stops of course to not litter public property... )
- buttons - because they can be put on anything, they may form a part of a persons identity (as a volunteer or team member) and are a subject to talk about (ambassador for the project). They are also not extremely expensive.
- Video: write a script that tells the story and is relatively very easy to work out.
- 500 stickers of 6"x4" glossy - Rs 2500 (4 to 5 rs per sticker)
- 200 postcard stickers - front multicolor, back single color - A6: Rs 2600
- 200 buttons - Rs 3000
- Rs 1900 contingency (video, unexpected costs)
(not to be used in the bus)
- Explaining how the SMS and Android services would work
- Chitra is working on a script for the same.
- Contact posters for attracting ambassadors in colleges etc
- Representation posters for project presentation at meetings/conferences
Feel free to add your ideas here. (dont forget to post to the group you added something here)
- Poster campaign on and near bus stops with poetry (like London's Poems on the Underground) and art.
- Posters with maps on major bus stops with nearby stops and background maps using OpenStreetMap.
- Stickers to distribute with simple how-to SMS instructions in Marathi/English, Gujarati/English and Hindi/English.
- Should be based on the signature colours of the BEST: bold red and white with trims of green and gold.
- Should look and feel "semi-official", for lack of an advertising or design agency within BEST we can do the job
- All print and visual media of ChaloBEST should incorporate bilingual Marathi-English text and visual design at all levels.
- Unified logo and name across web, smartphone and sms services and all print and visual media