More Updates

I hope everyone had a great break! Mine was periodically relaxing, occasionally hectic, and mostly very nice. I was able to get a fair amount done on the site, and I think it's coming together now. Some things that have been changed:

- The Media page is finally done. After many a failed pre-made Flash gallery, I finally just decided to build my own. In the end, it's a lot more consistent anyway. Right now, there are only eight pictures. You'll notice there is a scroll bar in place as well. It doesn't work, but it's one option for a way to access more pictures. The other is the "1/6" sign attached to the gallery. This option would work similar to other parts of the site where the box flies out of the frame and is replaced by another containing more images. They would NOT be used together, they are both on there to see which works better visually.

- The Contact page is done now too. It has the basic information, as well as some link out sites. There is also a balloon man. He will have something to say, but for now he is just there observing the scene.

- All of the pages are now clickable and the site is basically as it will be. There is always something else that could be added or tweaked, so I will devote the rest of the semester to these types of things.

- The front page can now be accessed from anywhere by clicking on the site title in the left corner. The main page remains empty, and I can't really decide what to do here. Personally, I don't mind it like it is, because I feel the bottom of the site is interesting enough that it doesn't matter. By this point, I don't look at the bottom anymore and I've gotten used to it. I think that a new viewer would look at the bottom first and it wouldn't matter to them that the sky is empty. That said, I'm all ears for any interesting ideas.

- The Info page is cleaner, and there is less distracting stuff going on here. I tried to take a cue from my About page, which is very simple.

- The bottom has been tweaked a little bit to fit in a little more with the rest of the site. You'll see the buildings, the bridge, and the grass now have a little more of a hand drawn feel.

- The plane flies less often.

LINK TO THE SITE
(Remember to wait for everything to looooooad)

Updates and Etc

OK a lot has changed. Well, a lot of the coding anyway. You may not see major differences in the overall look and feel, but I have changed how the site works substantially. There were a number of issues with how it was operating before, and I couldn't continue building the site knowing those problems were there. Now everything should be fixed, and I think it's on the way to becoming a nice little site. I have posted the link below.

Click here to see the site (make sure to read below first!)

Some things to keep in mind and watch out for:

- It's heavier than before, so wait a bit for everything to load. Building custom Flash Preloaders is a mystery to me and WAY more complicated than I thought. For now, you'll just have to wait.

- The "About", "Info", and "Support" areas are currently clickable pages. There is also some clickable content within these pages. You'll also notice that a large portion of the site is now Flash. It sort of evolved into this out of necessity and it's been a learning process to tweak it into this format.

- The menu is now up in the left corner. It's there for a few reasons, both aesthetic and functional. First of all, I think it looks better, but it also allows me more space to work with. It also fixes a terribly annoying Dreamweaver bug that was messing with alignment.

- The layout for the content is structured differently now because of the new menu position. I am using the floating boxes to house most of the content, with little extras (like the cloud-man and the swinging photo). I think this will be both interesting and more consistent with the feel of the page overall.

- You can click on both people (the guy in the plane and on the cloud). Each of them has something to say! The idea here was twofold: 1) Increase the "exciting" factor of the site, and 2) to provide me a vehicle for delivering Shakespeare-esque messages in a "voice" I thought appropriate for the feel of the site. It should feel silly, but also a bit theatrical. Later, they will look a bit more like Shakespearean characters.

- The clouds will follow your mouse slightly, so have fun with them. Also I fixed the man in the plane, he should move faster now.

- There is a lot still to be done. Obviously flushing out the rest of the content is the priority. Once this is done, and if I have time, I would like to play around with some other extra bits as well. Ideally, there will be curtain over the city that will "reveal" the scene and also set the stage as it were for the rest of the site. I am thinking about fixing the transitions between the pages so they flow into one another and don't just appear randomly. I know how to do this, but won't implement it unless I feel the rest of the site (content etc) is up to snuff.

- I am aware that the "pop" sound effects on the mouse overs are too loud. My export settings within Flash are being all screwy. Maybe it's time for CS4?

Site Progress

Phew! What a crazy week. Going from Illustrator to Dreamweaver/Flash is an unpredictable process! I have to say, the problems I was expecting were easily overcome, and the things I thought would be easy took forever. The Flash stuff was really fun and I plan to flush that out a lot more next week. Hopefully I'll have some city sounds going on, as well as a few Shakespeare inspired sound bytes when you click around. The HTML section has been simple to develop so I hope to have a few more pages done by next week. Something I am excited about doing is a Form. I have never done one before so I think that will be fun to try and incorporate. I've gotten through about 3 pages so far, and I am still finessing a lot of details here and there. I've put a link below so you can see where I am at currently.

Click here to view current Prototype (work in progress)
(the "About" and "Media" pages are working links. Also be sure to click on the images in the gallery to see the javascript work!)

There are a few lingering problems that I am aware of. The biggest one, something I should have realized before I started is the window size. Right now, the website is approx 1280 x 890 pixels. This is fine when you have the luxury to be on a 23inch monitor, but for laptops (that are mostly running at 1280 x 800) you cannot see the bottom of the page. For now, I've re-enabled the scroll bars, but I want to site to hide these so it really feels like a mini site. When I do this, and the monitor size is too small, you cannot view the rest of the page. Right now, the fix is just having the scroll bars back, but next week I am going to reformat the whole thing to fit in a smaller window so I can eliminate the scroll bar functionality and have it look really clean.

Image Loading Code Demo

I have also prepared a small demo of how the photos will load off of my media page. As you have seen, there are only thumbnails on the media page and no space for the full photos. The reason for this is because I plan to make each image clickable and enlarge into a small gallery that overlays the page. It's somewhat hard to explain, so please go here to see what I mean. The idea would be that each image in my media gallery will behave exactly like the one on my demo page. (The reason I couldn't incorporate this into the clickable version of the site is because the script won't run off of an image map)

Prototype ish

On my last post you were able to see each page individually that I designed for this week. I have also prepared a very basic clickable version that you can see here. You are able to click on the "info", "media", and "support" buttons. In each case, it's just loading a JPG of the page, but it will help give a sense of how you can move about and what you'll be confronted with. It's more natural than just looking at each one from a Blogger site. (apologies for resizing your browser window...I know this is a web no no, but I wanted to make sure the content filled the space effectively for the prototype.)

Page Redesign

New colors, a Golden Gate Bridge, some Presidio buildings, and a tagline! Woo! I think these new elements complete the look and feel I was going for. There are some details, like grass etc, that I will add later when I start working in Flash. I tried to design a wide range of content laden pages, with little overlap of layout. These four pages should give you and idea of how the various types of content would conform to the screen real estate I have to work with. I really like the playful/hand drawn look and I think the content "fits" better than it did last week. It no longer looks pasted on and should feel more a part of the overall page.

Design Round 1

I've done three pages of design which you can see below. They are all based on the same wireframe and I am very happy with the layout. The first image is the homepage, then part of the "event info" section", then the "about" section. There are still multiple refinements that need to be made, but I think you can get a sense of what this will feel like. The bottom will be flash, middle HTML, and the top probably flash too. I am thinking the little sign can drop in with some sort of animation but we'll see. On each page, something different would randomly happen on the bottom. Maybe on one page someone jumps off the sailboat and runs into the forest- that sort of thing.

The fonts used for the the display text will all be images, and the copy text will be Verdana since I think it's the best looking HTML compliant font. I think this three row format will lend itself nicely to getting squashed into HTML. I hate coding, and I am always thinking ahead when I am designing for the web, "Hmm but HOW will this work in Dreamweaver". This time, I've tried to make things as easy as possible for me. There is one area I am concerned about, and that is the boxes that encapsulate the HTML text. There are some alignment and page loading issues that might arise here, but I'll cross that bridge when the design phase is over.

A Couple More Wireframes

I only had one last week, so I did a couple more for comparison. I must say, I am pretty set on my one from last week, but these are some other options just in case the other one doesn't end up working out. They are pretty standard, and aren't exciting at all, but I thought that they might be important to explore. One thing you can always say about these types is that they are clear and easy, something that a lot of websites miss the boat on. As I move forward, I will try to make sure I don't lose either quality with my other wireframe design.

Pre Thursday

Hmm. I have been a bit quiet lately on this blog. I suppose it's because I feel like I have honed in on exactly what I want the website to look and feel like, and it's now just a matter of executing it. This is usually the easy part for me because I usually haven't honed in on anything when I begin. I just start firing away. This obviously has its flaws, but it's what I'm used to. It's been very interesting to approach this in a different way, and I look forward to seeing how the results differ for me.

Conceptual Design (cont)

I've been reworking my conceptual design a bit, starting with some drawings this time. I haven't been able to get my scanner working very well, so it didn't quite go as I had planned, but I think it's a progression from my last attempt. I'll continue to refine this idea if the concept is something that people respond positively to.

Event Progress Report 15

I've taken another pass at my concept design. My last attempts were much more poster-like, and I wanted to try something this time that I thought might eventually turn into a website look/layout. You'll see an illustration of San Francisco and a small rendering of a park (presumably the Presidio). On the right side of the map there will eventually be a Golden Gate Bridge and other details to make it look more fun/quirky, but this is the basic idea. The text floats above, would be clickable, and the content would be up there in the clouds as you change pages. Roll overs would also be present to make it a little bit more interesting. I didn't fully flesh it out because I think you'll get the idea and the vibe I'm going for anyway.

Personally, I think it will look best if I hand illustrate the whole bottom portion, and refrain from using some of these vector type illustrations that you see. Just looking at it again made me cringe a little bit. I'll give this a shot sometime later on this week.

Site Map and Wireframe

I've done a pass at this assignment, just to sort of get these ideas out there, before I try again later in the week. Both preliminary attempts are pretty simple, maybe too basic versions of what I'll eventually have. Especially for the site map, the tittles are simplified just so I know what type of content will actually be on the site. What I am planning on doing is reworking the titles to be more playful, quirky. So instead of being normal titles like "about" or "contact us", they might be a little more Shakespearean and say things like "Much Ado about us" and "Thy means of correspondence".




The wireframe looks pretty stripped down, but I know exactly what I want it to look like. The "static image" along the bottom is going to be a panoramic illustration of San Francisco, with the Presidio in the middle and distinguishing local landmarks on the outside. "Shakespeare in the Park" will be written either above or as part of the illustration, as will the menu. The content will be dynamic and will essentially be floating above the city, in the clouds as it were. On the left will be the text and information, and the right will be another illustration or a photograph.

Event Progress Report 14

So far I have not included any images of Shakespeare in my renderings. I have perused a lot of Shakespeare related materials (books, posters etc) and they very often have some rendering of his face. I think this approach has merit, especially because his face is so recognizable, but I want to take this another direction. The focus of my graphic explorations will try to be on the park and play up the experience of seeing Shakespeare there. The focus will be Shakespeare in the park , not Shakespeare.

That said, I have been playing around with using a book as a way to represent Shakespeare. Like in my last example, you see a book with a park coming out of it. (*ha) I wanted to see what this would look like with some photography instead and the result is below. I don't know how I feel about it, but it's another facet of this book/park idea. I think next will be a more typographic approach with color as thew driving factor. We'll see.

Event Progress Report 13

I've worked up something for my conceptual design assignment. I usually steer away from illustration, but I thought I'd give it a quick try just because it seemed to fit my new direction. What I have posted below is not a fully fleshed out idea, but it's an option for a direction that this could go. The idea would be this sort of simple, illustrated, "festival-like" approach.

Event Progress Report 12

So I've been messing around with some font options in preparation for the concept design assignment. I've basically narrowed it down to two possible directions when it comes to the type. Either A) a more unique and quirky face, similar to those utilized in most festival identities, or B) a much more standard, serious face that isn't unique on its own, but draws an identity through its implementation. (with color etc) So I'm leaning towards A, but I think both have their merits. I'm going to post some of them in use, with other elements in place, to give you a better idea of how they might unfold. I've posted some examples below. These aren't necessarily the exact faces I am considering, but they should give you an idea of what I'm talking about with the description described above.

A)


B)

Event Progress Report 11

I've been thinking a lot about my event and how best to position it. My mood boards from last week weren't really doing it for me, so I've been experimenting with another direction. Rather than focus on the "far away mystery" of the Presidio, I've decided to really make it feel like a gathering, celebration and cool kind of event. The important compromise will be between playing up the Presidio as a destination and also conveying that Shakespeare is being held there. I want the event to feel like it's being held in the other parks (Dolores, Golden Gate), but still make it clear that this is a Presidio specific event. Basically, justify the two needs; Shakespeare event / promote the park, by using the event to distinguish the park as a unique destination.

I think one of the best ways to approach this graphically will be a "festival style". Things like Bonnaroo, Austin City Limits Festival, and Outside Lands are all good examples of this. The Presidio is beautiful, so this will be important to convey as well. Rather than focus on the whole "fog" thing, I'm going to try and conjure images of summer etc. I have mocked up a quick mood board to show what I mean. I think it will be more clear when I get working on the Conceptual Design project.

Shakespeare Meeting

So I had another meeting this morning, this time with someone from the group that actually puts on the event. It was very important that I get his perspective, in addition to the Presidio Trust's, because he was a lot more knowledgable about the hard details. They are doing a surprisingly large amount of publicity already for the event, and it really didn't sound like any additional campaigns (like the Youtube one I thought of) would really be a valuble endeavor. I was actually surprised to hear how much they got the word out, it was impressive.

We talked a fair amount about the existing website, and I asked him what features he wished it would provide. I wanted to know what an ideal event website would be from their perspective. He gave me a lot of good feedback on this and was mainly concerned that it provide all the logistical details. He also expressed interest in having some way that people could provide feedback, in the form of reviews or maybe a community forum of some sort. Lastly, he hopes the other programs they put on will be linked to and promoted.

What I found to be the most helpful (and illuminating!) about our conversation was his descriptions of the audience and the intended audience. He said on a typical night the audience would look sort of like the DMV, and would be a good cross section of the San Francisco population. Ideally, they want everyone to come and especially target people who might not have ever been to a play before. They want the event to be percieved as something that is fun, easy, free, and an all around laid back type of event. They don't want to position themselves as being hard to get to, or give off any kind of mysterious vibe.

So. This sort of threw my whole idea of the "mysterious journey" out the window, and is why I say our talk was so important. I'm still sort of wrapping my head around everything he said, but I defintely feel like I have a better hadle on how to portray the event visually. As far as content goes, I'm still thinking, but I feel like something should come soon.

Mood Board

I've posted my mood board below. The conceptual phrase I've sort of been working around is "A San Francisco adventure". It's sort of lame (haha), but is mainly just trying to connote the feelings of taking a journey (in this case to the Presidio) or going for an exploration to learn new things etc. The idea is one I've played with before, and that is that the Presidio is sort of this unexplored land within our borders that has much to offer us if we'd just take a little journey. I also tried to throw a little mystery/fantasy in their to play up the theater at night thing. I've purposely not included images of people, and I wasn't sure if this was a requirement or not. I can see how it would help a mood board, but I guess I wanted to try it this way first. Work in progress...




I have another idea, for a completely alternative direction, that I will explore after I hear how successful this mood board attempt was.

Experience Map Round 2

I have posted below another attempt at the experience map. Last time in class, I was focused too broadly, and wasn't providing enough detail for what the audience would actually experience on the web. This time, I've tried to focus myself only on the web and provide as simplistic as possible a visualization of what the user will be confronted by.

Tip

I'm sure a lot of you all already know about this Google app, but just in case- Google Reader is a great way to keep up with all of our blogs without having to visit each page separately. You just subscribe to each blog and it will show you when anything new is added, from any of the blogs, all on one nice clean page. Of course, then you miss out on all of our wonderful blog designs, but it's hard to argue with saving time time time.

Event Progress Report 10

I've been thinking some more about my event, obviously, and I've reached a few conclusions about the audience. It's clear from talking to my contacts, that both the Shakespeare in the Park, and the Presdio Park in general, would both like more people to attend the event. Clearly, this is not groundbreaking, but it's important to note because at first it seemed like they were happy with the turnout and classified it as a success. I get the sense that it's a younger crowd that they are missing, and it might be worth targeting this demographic in particular. The reason for this is because a lot of people are currently reached via mailings and newsletters etc. These types of publicity avenues tend to reach older people that are part of the Presidio's community and are already supporting the park in some fashion. It's the people that aren't part of these circles that I need to go after- which is great because this is the same demographic that feels comfortable on the web and will be used to this form of communication. As I tackle my mood boards, I am going to try and take these notes into account.

Event Progress Report 9

Some pictures from my Presidio Trust meeting. There are a couple from the location that they are sort of pushing as "the central" location in the Presidio, and a couple of Shakespeare event materials around the area.

Event Progress Report 8

I just got back from a meeting with the Presidio Trust regarding my event. I went down there this morning and it was great to get to see the location and hear a lot more about the event. My contact was extremely nice and eager to help, so I feel like I got some great information. We talked a lot about audience, a conversation I intend to continue with the head of the Shakespeare Festival tomorrow morning, and I learned a lot about the Presidio Park in general. A lot of what I assumed about the size of the event was correct, but I think I did slightly underestimate the reach of the program. Each night typically draws about 800-1000 people, which is great for the space, but he did say they would be happy if more people came. The audience is on the older side, and I got the sense that they would be very interested in attracting a younger crowd as well. We spoke a little about how the Presidio neighbors the Marina, home to many a twentysomething, and how few people consider the Presidio as a "destination" like they might Golden Gate Park or Dolores Park.

I have often wondered why they would want to attract more people, given that the event is free, so we talked a lot about the various motivations of the park and the Shakespeare group. Donations play a big role, and it's always good to have successful events if you want to continue to get community support and financial backing. Shakespeare in the Park is a good example of one of the things that the Presidio Trust is doing to help promote the park as a place to visit. They are doing a number of other things to switch the perception of the park, and it was interesting to hear about it from the inside. A lot of my more detailed questions will be answered by the Shakespeare people, but I got a number of ideas from my conversation this morning.

Design Inspiration 7

One last artist for this week's round of visual references. (You can find the others below) I have always been exposed to Adrian Johnson's work through Monocle Magazine, but never was curious enough to seek out his name until today. He's got a very distinctive look, especially his editorial work, and I really like the overall aesthetic.

Experience Map Exercise

Since I missed last week, I may be off the mark here, but I attempted to represent the Wikipedia experience in my diagram below. It's super simple, but I think that's the point yes? After I get feedback tonight, I'll revamp this to fit my event.

Personas Exercise

I have been thinking a lot about the target audience for my event. I have my own inklings, but they will be clarified next week when I meet with the Presidio Trust. I'm interested to see what their target audience is as it compares to their actual audience. My guess is that they target a younger audience than they get, but that's just my assumption. Either way, I have developed some examples of personas below:

Davis Peabody - The 18 yr old Indie Kid from Chicago 
Since we live in San Francisco, this shouldn't be too hard to visualize...

Davis is a few years out of school and works a decent job at a coffee shop in the Mission. He lives in an apartment with two roommates and rarely travels outside the city. He doesn't have a TV, and often criticizes those that do. Most of his free time is spent catching up with friends in Dolores Park, or shopping for second hand books. He has very specific tastes that are always changing and very hard to predict. One day he might be obsessed 70's down tempo electronica, the next it's fixed gear bicycles from Mexico. He enjoys doing things that aren't popular, sometimes just for that reason alone, and doesn't discriminate based on quality unless it's extreme. Weekend nights are always spent at the Rickshaw Stop, smoking fair trade cigarettes and listening to his friend's friend the DJ. He is very in touch with the pulse of his community, but has little interest with what is going on outside his bubble. He knew who Vampire Weekend was before you did.

Jackson Graft - The twentysomething professional.

Right out of college and working some big money job downtown, most likely for a bank or a consultancy. Jackson takes advantage of what the city has to offer and explores every opportunity. He lives in the Marina and likes to spend his weekends down on Chrissy Field playing Frisbee or watching the kite surfers go out. He isn't limited by financial restraints, so dinner is usually out, in SOMA, but it wouldn't be unusual to find him at the Slanted Door. He travels a lot and has a large network of friends. Decisions for the weekends plans are often made via email and are subject to change at a moments notice. Last weekend he visited his friend's winery in Napa. He is very accepting of new experiences, but usually only if they have been vetted by an acquaintance. He likes what he likes, but is very aware of how his choices are perceived. If something isn't popular with other people, he will view it suspiciously. That said, he shops at Gap, goes out in the Triangle, and listens to Dave Matthews.







Dolores Marks - A family focused woman from the suburbs

Dolores is always home from work before dinner and spends all of her free time with her family. She works hard, but never too much as to be a detriment to her home life. She hopes one day to send her children to a good college, like hers, and always encourages learning outside the classroom. She is well off and is able to live in a safe and desirable part of the city. On the weekends, she likes to visit museums or galleries, if she's not already playing tennis with her husband. She shops at Whole Foods, maybe Trader Joe's if it's closer, but always makes sure to go organic for the kids.

Event Progress Report 7

I finally decided today, having not heard back from my GGP contact, that I would just call over there and see what's what. I was able to reach him by phone and he was very receptive to the project and very willing to help. We set up a meeting for next week, so I'll be able to get all the information I need, some contact information for Shakespeare in the Park members, and past event materiel. I am really looking forward to the meeting and I feel like I will be able to get all my questions answered.

Lynda Thoughts 2

So I think I'm about 5 or 6 hours into this Lynda section. This one is not quite as interesting as the last one, but that may be because of the length. I did enjoy learning about the different ways to save files for the web, however, it seemed like the format settings were all based around dial-up internet speeds. I have worked on a few websites recently, and shaving off 2kb was never a concern. I am looking forward to rounding out some of my Photoshop knowledge with some of the later sections. I have always felt very comfortable with the program, but have not been aware of its full functionality.

Design Inspiration 6

Some more things I've been throwing into the visual mixing pot for this assignment.

ISO50- since I work for him, and always surrounded by his work, I'm always influenced to some extent.




Jauna Gaita magazine. I've never actually read it haha, but the covers are very interesting.

Event Progress Report 6

I have started thinking some more about concepts for how to approach this event. I think some interesting points were brought up last week relating to the "distant" nature of the event's location. As I think Mauro mentioned, rather than count it as a fault, why not play up the distance and use it to create an air of mystery surrounding the event. Shakespeare in the Park could be like an adventure into an unknown land (in this case the Presidio haha) or it could be a reward at the end of a journey. Maybe some sort of scavenger hunt around the city that ends up in the Presidio? That way, people are discovering the event and also a part of the city they may never have considered.

Event Progress Report 5

So I'm taking a break from my Lynda work this week to post up some images I found of past Shakespeare in the Park events. They are all from San Francisco incarnations of the event and I have to say, the stage looks a little cheap. Since the event is finished for the year, I won't get to see a play in action, but I think I will try and get down to where they hold the event sometime this week. Although, by the looks of things, there may not be much there. It looks like they just set up shop for the event and then can take it down or move it. No permanent stage