COMMUTEskim21ccsf.github.io/final_proj/

VMD 140 Final ProjectPre-Production Packet

Sarah Kim

WHY? I chose to create a site about my daily commute, which concentrates in downtown San Francisco and the Financial District. Since I, like most people near or in cities, spend a lot of time on the same buses and trains, I thought it would be interesting to showcase my commute experiences on a website.

SITE GOALS. The goal of this site is to explore one person’s (mine) commute and the spaces and times in the morning or evening that they are familiar with. Since everyone has a routine in the morning with transportation, I think the site would be fun to look through. I don’t intend for the site to be a resource, but if it helps anyone, I think that’s a bonus. I would like for the site to be more like a creative project.

TARGET AUDIENCE. My target audience are people who commute by public transit, or people who want to know about a transit experience downtown. I think they’d be able to easily relate, and also learn about bus stops surrounded by cofee shops for a quick fix before a transfer, and become familiar with issues or fun and unexpected surprises.

project overview

project overview cont’d

CONNECT SITE CONTENT TO DISCOVERY. To connect site content to discovery, I will have different pages dedicated to some bus stops and their individual quirks, links to bus routes (external websites), and some personal stories about some bus stops.

DISCUSS LAYOUT, COLOR & TYPOGRAPHY. I think images of downtown transit as backgrounds for each site would be useful for giving people a sense of location. Also, images of platforms, crowds, and signs/symbols. For color, I will do a dark background (black or charcoal) and white san serif text, and bold headlines, inspired by transit signs.

comp. analysis

CONTENT

location images x x xhow to get around x

destinations x x xplace / personal history x x x

TECHNICAL FEATURES

slideshow x

hover effects x x x

LOOK & FEEL

image background x x xminimal colors x x xlong scrolling pages x x xgrid layout x x

BROWNBOOKbrownbook.me

AND NORTHandnorth.com

VISIT BRITAINvisitbritain.com/gb/en

comp. analysis cont’d

Brownbook was my favorite site out of the three. As someone who doesn’t know about life in the Middle East, this site warmly informed me about some of its popular cities, music, and everyday people. I would like for my site to emulate the charm that this one gives off.

The site doesn’t have direct mention of where to go and how, but in each blog post, the creator vaguely describes the location. I think that the purpose of the site was more to create a vivid image of life there and less to promote tourism.

The site only uses black, white, and a beige accent color. The images are the focus. Slideshows on every landing page introduced new images every few seconds. All the landing pages are long scrolling pages, which makes sense because the pages follow a blog post format. The site uses white text on styled photos.

Visit Britain is a commercial tourism site. I chose this as a comparative site because I think I can apply the useful content and layout of a popular destination’s tour site to my own site.

I really liked their “how to get around” page. It’s a call to action, and helps site visitors find info on how to get to Britain within one website. There are also a lot of useful submenus on different methods of transportation.

This site also has long scrolling pages for each landing page. The colors are black white, a few grays, and a red as an accent. The white type on the images have low-opacity/fading blacks behind them to make it readable.

If you scroll down on any page, a grid layout becomes visible. It reminds me of article layouts.

And North is a blog travel site about a place within a place. The site focuses on Upstate New York, and looks to be targeting New York’s stay-cationers.

The blog site mentions personal or place history in each blog. It isn’t as direct as Brownbook is, which is a site that has landing pages dedicated to personal interivews and architecture. I prefer the way And North does it for the particular site I will be working on for this project.

Color palette consists of white, two light shades of gray, and a light blue as accent. Like the other two sites, the pages on this site are scrolling pages. Home page has a giant image, and the other pages use the grid layout. These are blog posts arranged in an article layout.

BROWNBOOKbrownbook.me

AND NORTHandnorth.com

VISIT BRITAINvisitbritain.com/gb/en

AM

Y C

.persona

PERSONAL PROFILE. As a daily cyclist, Amy is no stranger to the hectic city commute. She only takes the bus when her bike needs fixing. On the days she has to use public transit, Amy always hopes that her bike issues get fixed quickly, because she never knows when to expect a crowded or late bus.

TECHNICAL PROFILE & DEVICE USE. On a non-crowded bus, Amy surfs the web and listens to music on her iPhone. She favors Google Chrome over Safari, because her email, social network, and Cloud storage are all under her one Google account.

SITE APPEAL. Amy likes blogs. She can read about information through a human experience. Travel blogs are a taste of what a location may be like without having to physically be there.

POTENTIAL FRUSTRATIONS. As much as Amy enjoys all the nice things that can happen during travel, she would like more information about potential issues at the travel location.

FEMALE / 27 YEARS OLD / B. A. IN PHILOSOPHY /

ADMIN ASSISTANT @ NONPROFIT / $35K PER YEAR /

BERKELEY, CA / PERSONABLE, CURIOUS, GO-WITH-THE-FLOW

site map

Home Maps Fave Stops Warnings Stories

• Intro to site • bus maps

• bart maps

• external links

• stops w/ fav. cafes

• external links to cafes

• fav. quiet stops

• punctual buses

• hub stops w/ most of

my routes

• Infrequent buses

• crowded stops

• frequent proof of

payment check

• rush hour

• students on field trips

• kicking the door open

for a passenger

• #munidiaries

SITE TITLE ITEM 1 ITEM 2

[hero image]

ITEM 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed convallis fermentum erat quis laoreet. Cras consequat placerat mattis.

Maecenas facilisis bibendum arcu, in placerat neque iaculis in. Praesent in vestibulum turpis. Quisque massa nibh, vestibulum vitae lacinia vel, ullamcorper nec

ITEM1 ITEM2 ITEM3

SITE TITLE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed convallis fermentum erat quis laoreet. Cras consequat placerat mattis. Maecenas facilisis bibendum arcu, in placerat neque iaculis in. Praesent in vestibulum turpis.