Website

Final Website


Ok. Here it is.

so now what?

So, I think that overall, after not having ANY EXPERIENCE in web design what-so-ever, that I did a good job. Lincoln taught me well enough that I was able to come up with what I have now and I think that having people in my class around in the computer lab really helped me with ideas and information that I may have missed in class. I took full advantage of class time this term. I accomplished a lot and was able to work with others at the same time. I wish that I had more time to go deeper into the programs (lynda expired) and that I could work longer on this specific project. So I know I complained a lot and I know that everything was extremely confusing and I know that I was not a happy camper, but even after all of that I was able to learn the coding of web design and I was able to understand it. Yes, understand it. I really liked working with DreamWeaver because as I was typing the codes, it finished a lot of my tags that maybe I didn't catch and it was really easy to follow overall. I think that after finishing this project, I am kind of interested in creating my own website.....something different then critiques, but something that I really enjoy and could have a lot of fun creating.

critiquing my critiques...

So it is clear that I did not follow my initial composition idea that I had posted earlier on my blog and I changed it to a more simple layout. I wanted the navigation of my site to be extremely clear and understanding. I think that the usability of this site is very easy and I think that making it visually appealing really helps viewers. Simple. Click and go. The given information is an easy read and I think if someone where not interested in critiques it would still be somewhat interesting because of the design layout.

DETAILS

There were many things that I wanted to show visually while designing this website. At first I thought that it would stay extremely simple because it was extremely difficult to work with the css. After Lincoln walked me through the basics :
body {
background:url(Pattern2.jpg);
background-repeat:repeat;
}

.container {
vertical-align:middle;
border-color:#0099FF;
border-width:thick;
}

h1 {
font:Geneva, Arial, Helvetica, sans-serif;
font-weight:300;
font-size:36px;
color:#000000;
background-color:#CC0066;
}
h2 {
font:Geneva, Arial, Helvetica, sans-serif;
font-weight:100;
color:#FFFF00;
}
h3 {font:Geneva, Arial, Helvetica, sans-serif;
font-weight:300;
font-size:24px;
color:#000000;
background-color:#CC0066;
}
a:link, a:visited {
color:#FFFF00;}
a:hover{color:#33FF00;}
p {color:#FFFFFF;}
I was able to chose colors that I wanted and styles that I wanted. I went to pgpatterns.com to create my background design so it was not boring. I think that by having a dark background it helps make the images stand out and that is why I chose the yellow, pink and green type colors. I added a texture to the background in order to give it a little more detailed and not so simple and boring.

I wanted my title to stand out....so I chose Cracked as my typeface and kept the same color scheme. The reason why I chose cracked is because I am critiquing websites and sometimes tearing them apart.....thus website critique is falling apart....Just go with it.

The next thing I thought of doing was changing my links so that the were lined up on a horizontal line. Lincoln helped me with that a lot and he showed me exactly what to do.

I also added a link at the bottom of Rachael Ray, Red Bull and The Movie sites that directly connected them to their sites.

Don't worry there is more.

Example of Red Bull's HTML

This is an example of what my HTML of Red Bull's Copilot website looks like. I have a title, my name and then all the information that we needed for the critique. As you scroll down, the images are great examples to the information that is stated.

HTMLs.............ruined my life.

Ok, so after having a little family problems up in Portland I missed one day in class and it instantly threw me behind like 5 days. I started my HTMLs on my laptop on dreamweaver and was able to create something very simple by decent. My index page consists of a title, Website Critiques, and obviously the author, ME. I then have the three different websites that I am critiqing with an image from each of there index pages. Their titles are the links that take the viewer to the specific page with all the information I had on their specific critique. Plan and simple. Moving on.

Websites + Amber = Death

I am clueless. I have no idea what-so-ever how to make a website from scratch. Its kind of like baking.....you forget to add the sugar and your cookies taste like shit, I forget to close a tag and opps there goes my website, see ya later. So I did a little guess and check and eventually created my HTMLs and they turned out Ok, i guess. Thank God for Lincoln though. After listening to almost every single tutorial possible, I still had no clue what to do about css or how to tie everything together. He helped me work through my website step by step (which will be described in further posts) and slowly but surely my website is coming along and is starting to look decent.

Site Map

This is my site map. It helps me to stay organized while trying to learn this crazy project.

examples

These were some examples from my critique #2 and critique #3.

Composition Idea

This was a sketch I created that was kind of what I wanted my layout of my website to look like.

Website Critique #3

Website Critique #3 http://www.thedivingbellandthebutterfly-themovie.com/
Navigation: This website was difficult for me to navigate through. The different locations that someone can click on and travel through are very small and I didn’t see them at first. In order to help someone navigate through a website, the different options should be clearly stated and visible. There wasn’t any kind of metaphor used on this website; it was very plain and simple. The transitions between each part of the site were eye catching, but nothing else that helped to understand the site.
Information Architecture: The information on this website makes sense; it just isn’t organized in a way that is easily understandable. The content is somewhat lost from the homepage. Each individual page is organized well, but it is difficult to actually get to those pages. The content is organized by category: About, Video, Cast and Crew, etc. The hierarchy does not help on this site; I wanted to click on things that didn’t have a link.
Usability: this site is easy to use once the viewer gets past the homepage. Navigation and information architecture make this website difficult to understand and use. Overall this site doesn not sustain my interest and doesn’t keep me engage with the material.
Meaning-Making: (Narrative and Metaphoric Structures) I don’t know what the designer’s goal was with this specific website, but it is not clear at all. There wasn’t any kind of story or metaphor in this website, it just seems like a bunch or pages thrown together.
Reflection of the User: this site had no reflection on me. It didn’t change according to my specific visit and I didn’t receive any mouse feedback or text feedback. None of my choices were stored and I lost any engagement I might have had when I entered the site.
Transparency of Design: The design of this site leads me to pay more attention to the content because the actually layout is confusing. The site doesn’t feel natural at all and the design is completely forgotten. The transparency of the design doesn’t make any sense to the layout of a movie promotion at all.

Webside Critique #2

Website Critique #2 http://rachaelray.com/
Navigation: This website was really easy to navigate. The tabs at the top of the site are easy to see and have a higher hierarchy then the smaller type which gives viewers the visual clue to interact. The title has falling leaves behind it which gave me the idea that I could click on her name and it would interact, but it didn’t and I found that kind of confusing. The metaphor that I think I received from this site was that you were flipping through a cook book and the tabs at the top represented tabs of different foods in a cookbook. This kind of metaphor is more organized than anything else.
Information Architecture: The information in this site makes a ton of sense and the content is easily accessible. Each tab is clear and all the information can be read easily. The information was organized by category and then depending on the category, the information was then organized in a timeline or by location. The Food section was sorted by types and then the recipes were organized by a timeline. The store section was sorted by location and availability.
Usability: This site is really easy to use. It is fun to look through and keeps the interest of any viewer. The navigation and the information architecture of this site are really what make this website. The metaphor is a cute add-on to the content and really keeps me engaged in the information.
Meaning-Making: (Narrative and Metaphoric Structures) The designer created meaning through this site by keeping it entertaining and bringing her funky personality to the website. I don’t think the metaphor is really clear at first, but it becomes clearer the longer I stayed on the site. There really isn’t any type of story or narrative that unfolds over time, it is self explanatory.
Reflection of the User: There really isn’t any kind of reflection of the user on this site. It doesn’t change according to specific visits or receive mouse feedback. It is engaging enough that if I were looking up information on Rachael Ray I could find it and I enjoyed looking through it, but it is not the best website I have ever seen.
Transparency of Design: The design of this website leads me to pay more attention to the actual content. The design is cute, but not dramatic enough to keep me attention. This site makes sense with the transparency of the design. People who watch Rachael Ray are obviously looking for simpler was to do things and this website is straight forward.

Examples of Critique #1

These are images from the Red Bull Copilot website. They use metaphors and hierarchy that really help viewers to understand how to navigate and understand the content.

Website Critique #1

Website Critique #1 www.redbullcopilot.com
Navigation:
Overall, this website is really easy to navigate. There are four main parts of the website that are visual clues to help the viewer interact. When the mouse passes over the words they start flashing and lines shoot out from underneath them. The designer uses metaphors on this site that are familiar traditional metaphors, organizational metaphors and functional metaphors. The traditional metaphors are the “rewind” and other options buttons when viewing the live movies of the flights. The functional metaphors are the dials from the dashboard of an airplane. These images are just “cut” and “pasted” onto the site. The organizational metaphors are the type and how they are organized on the pages. They are sorted by size and typeface depending on what site is clicked on.
Information Architecture:
The information in this site makes complete sense. The information and content can be accessed easily and is really organized. It is organized by location of headers, the category and by a timeline of past events. For example, it shows each country that this event is held and at different times of the year. Visually, the content has hierarchy and this helps for the viewer to access the information that is presented. For example, the four main parts of this site are in bold print, up in the top right corner. Having something on a page that is bigger and bolder will definitely help a viewer navigate through out the page.
Usability:
This Red Bull site is really easy to use and the navigation and information given really help in making it successful. The metaphors make complete sense with the site and add a touch of humor. Overall, this site sustains my interest and engagement. I continued going through page after page even when I had already seen them all.
Meaning-Making: (Narrative and Metaphoric Structures)
The designer of this site creates meaning by using a lot of metaphors and by using a very unique timeline of events. As you click page to page, it is kind of like unfolding a new event or piece of the puzzle. This Red Bull Copilot event is huge and the designer was able to grasp every little part of it with understanding. This site is a multi-linear narrative, which works perfectly because it doesn’t matter which part of the event happens first, the thing that is most important is that the site is extremely interesting and interactive.
Reflection of the User:
There is a small reflection of me on this site. I am a person that “fly’s by the seat of my pants” and this site is exactly that. It is very diverse and intense and every time I return to the site I find something new I didn’t see before. The site is engaging enough that I would defiantly spend a lot of time lingering and exploring page by page.
Transparency of Design:
The design of the site leads me to pay more attention to the content and also the design itself. It feels extremely natural and I take the time to read the content and view the design without feeling rushed or in a hurry. The transparency really helps the design of the site makes sense and do what it was intended to do.

So, I saw that there were a few errors that I missed until I saw them today in class on the big screen. The D did not disappear all the way and there were some random black squares towards the end. Weird. I know. So just pretend those are not there.

Link

www.oregonstate.edu/~schneida

Batman Returns Final

END

So I have finished my piece and I let someone other than someone in our class to watch it. Her reaction was exactly what I intended. She loved how it started off with a bang which is exactly what I everyone thinks of when they think of Batman. But because of the music and the way that it slowed, she really like how BATMAN RETURNS creeps in at the end, because to her she said, "It sets you down into a crime scene, somewhere very sketchy and you can just feel the anticipation. I kind of want to go watch the movie." All in all I really liked this project!! Yay! It's over!

The End is Near

I am exporting my final now to make a last check and then comes the rendering process.
This project has been an experience and I have learned so much. Obviously with more time this piece could become perfected and in my free time over Christmas break I do plan on working on it further. I would love comments and such on the link in the next post. Thanks!

Moving Along....

Still working. So Far I am at 1:45 and its a little boring, but the song gets kinda of slow so I can't really help that. I have gotten a lot of feedback while hanging out here at the lab. Little things I would have never thought off are continuing to pop up. I didn't think that my lines were moving a bit to fast for my current sound and I had no idea that some of my words should wait a split second longer before they faded off. Thanks guys :)

Process

So while working on this movie I came across many things that were not lined up with my music. Those were fixed as I went through my title sequence over and over. Every time I went through it I found something that I didn't like and when I let someone else look at it, they pointed something out that I didn't see. Seeing that I was at the computer for a long time a took a half hour break to clear my head before going back again. And here I am again, still pushing through and I am ready for someone to view it and get feedback from them.

My link

http://oregonstate.edu/~schneida/BatmanReturns.mov

StoryBoard #11



Michael Keaton.

StoryBoard #10


Batmobile.

StoryBoard #9


Welcome to Gotham City.

StoryBoard #8

Continuing.

StoryBoard #7

StoryBoard #6


Balm! there it is.

StoryBoard #5


Words appear!!

StoryBoard #4


Almost to the words.

StoryBoard #3


Still going.

StoryBoard #2


Continuing down the tunnel.

StoryBoard

StoryBoard #1

"zooming" down a tunnel

Comp. 4

This was my fourth comp. It is very similar to my third but this time I was only using the silhouette of catwoman instead of just her face. The text is still the same font that I liked and it looks rather boring. I think that after doing this compositions I have finally figured out what I want to do with my animation. I would love comments if anyone has any. Thanks!

Comp. 3

This is my third comp. I think that I need the title to still be bolder and maybe incorporate a different color. I really like the cat, but i don't want it to look that fake. I think that this cat can be very useful in my title sequence because I am trying to show the villians without actually using images of them.

Ok, so this is my 2nd composition. Again I kept the same typeface only this time I changed the size of Batman vs. the size of Returns. I didn't know if this really has an impact, but I was also thinking of doing the reverse. Should returns have more hierarchy because he is "returning" and that is the most important part of the movie.
This image is something that I really like. My biggest goal in this project is to make it black and white with some bright colors, kind of like the actually comic books. Those are my strongest influences and I really wanted that to come to mind when you watch the title sequence.
I really like the shadows on the Batmobile and to me they are extremely effective. I used more gray tones in the background city to show a little more detail in the sky and landscape. Is this style effective? Is there anything I could do to make this better? I would love feedback. Thanks!

Ok so this is my first composition for Batman Returns. I really like the idea of starting off the title sequence with the viewer zooming through a cave like tunnel. (One of my goals in my creative brief was to incorporate the watchers with the sequence) In the actually title sequence, it starts off with the birth of the penguin, which is extremely boring. I want the music to start and have the viewers zooming and twisting towards the names and title.
Visually, this composition is ok, it needs a little more. The bats should be black with white highlights from the light, but I should also incorporate the shadows to prove just how round the tunnel actually is. How does the typeface look? This is the one that I finally picked (with help from Jen), and I really like the weight in the letters.

Ms Catwoman

Notes on Catwoman

1. There is the scene where she actually ‘becomes’ catwoman, but this scene really isn’t an importance to the title sequence. I think that is more of what needs to be discovered during the movie.
2. Another scene, which does have some importance, is when she breaks into the department store and she actually has some practice time with her whip. Her whip is something that I want to incorporate during the title sequence because it has a lot of quick movements that will help move the text along. Specifically she jump ropes with her whip, she breaks heads off of manikins, she twirls it by her side, and then she wraps it around her waist and her neck (this kind of has a sexual effect I think).
3. Another scene is when her and batman fight and she falls into a truck full of kitty litter. “Saved by kitty litter……hahaha…..uhgh….bastard”
4. Another scene is actually when she was laying on the penguin’s bed. They were planning against batman. This really isn’t all that important, I just like that the villains are working together.

what do you think?

This title sequence is a little be closer in content to Batman, then catch me if you can. This is more of what I am interested in accomplishing.

Ok, Here Goes

Trying to explain exactly what I see in my head is kind of difficult. I am not a master at animation so I have no idea how to put what is in my head onto the computer. The YouTube video from Batman Returns, starts out with the birth of the penguin and then moves into the title sequence. I don't want my title sequence to be boring in the beginning, I want it to be BAM! in your face and get viewers really excited. anticipating the start of the movie. I really really really like the Catch Me If You Can title sequence and I am really influenced by that. Only that really isn't BAM! in your face Batman kind of thing....soooooooooooo....... I want to kind a keep the baby in the cradle flowing down, but keep in animated rather then real video footage. I also want to incorporate The penguin and his Duck, Catwoman and her whip, and side characters that help define the movie. I listed characters in my last two posts that have some importance obviously if their name is on the title sequence, and I want to show visual imagery with the text of their name. Does that make sense? I told you it was hard to explain.

Title???

How does this look? This is the typeface that I couldn't download before.

In case you were wondering...

BATMAN RETURNS Cast overview, first billed only:
Michael Keaton	.... Batman/Bruce Wayne
Danny DeVito	.... Penguin/Oswald Cobblepot
Michelle Pfeiffer	.... Catwoman/Selina Kyle
Christopher Walken	.... Max Shreck
Michael Gough	.... Alfred Pennyworth
Michael Murphy	.... The Mayor
Cristi Conaway	.... Ice Princess
Andrew Bryniarski	.... Charles 'Chip' Shreck
Pat Hingle	.... Commissioner James Gordon
Vincent Schiavelli	.... Organ Grinder

Exactly What Appears on my Title Sequence

1 Warner Bros. Presents
2 A Tim Burton Film
3 Michael Keaton
4 Danny DeVito
5 Michelle Pfeiffer
6 Christopher Walken
7 BATMAN…RETURNS (Rolls out) (Bats Fly through)
8 Based upon characters appearing in magazines published by DC COMICS INC.
9 Michael Gough
10 Pat Hingle
11 Michael Murphy
12 Vincent Schiavelli
13 Andrew Bryniarski, Cristi Conaway
14 Casting, Marion Dougherty
15 Special penguin makeup & effects produced by Stan Winston
16 Costume designers Bob Ringwood & Mary Vogt
17 Music By Danny Elfman
18 Film Editor Chris Lebenzon
19 Production designer Bo Welch
20 Director of photography Stefan Czapsky
21 Co-Producer Larry Franco
22 Executive producers Jon Peters and Peter Guber
23 Executive producers Benjamin Melniker and Michael E. Uslan
24 Based on Batman characters created by Bob Kane
25 Screenplay by Daniel Waters, Story by Daniel Waters & Sam Hamm
26 Produced by Denise Di Novi & Tim Burton
27 Directed by: Tim Burton

Title Sequence to Batman Returns

The Fonts I Like

My favorite is Orator Std because I like how everything is Caps and to me strikes the eye.

Forgot one

Perpetura Tilting MT
is my 10th Font choice, if you don't know what it looks like, open illustrator. sorry my blog hates me.

Visual exploration......

Ok which of these says "Batman" to you?......

Creative Brief

Project Details
Date: 10/15/2008
Prepared by: Amber Schneider
Project Name: Batman Returns Title Sequence
Design Lead:
Hand-off to Production: 10/13/2008
Product Release: 11/12/2008

Project Concept:
The value of this project is not primarily a business one, it is more for an entertainment purpose. Having this title sequence will better the viewing experience of movie watchers everywhere.

Objectives:
*To show characters, not just shapes
*keep the viewer on the edge of their seat (music will help)
*Make the title sequence visually appealing
*to set the tone for the way the movie starts off

Audience:
The primary audience for this project would be young adults and adults. These individuals are interested in action movies with suspense. The secondary audience would be kids younger or adults over the age of 50. These viewers are watching this product because of love of the character or because they are judging the movie to that of old and better movies.

Perception/Tone:
I want the overall visual quality/tone of this project to be suspenseful and thrilling. I want viewers to think that they are actually involved in the movie. This would appeal to my target audience because this is what they want to see.

Communication:
In order to create the perception/tone and fulfill my overall project objectives I plan on following my schedule and finish everything on time. I will take critiques very seriously and accept help by my classmates and teachers.

Competitive Landscape:
Some competitive products might be movies like: Superman, Ironman, Spiderman etc. In order to work competitively against them I am planning on watching all of there title sequences to create something lively.

Single-Minded Message:
nananananananananana BATMAN!!

dumb

My typed-based animation is really lagging. Sorry.

Uploading animations

Sorry guys I have been having a hard time uploading my other two animations. They will be up asap, whenever this stupid thing will work.

Type-Based Animation

More images

Type-based Animation Images

Type-Based Animation

While working on our type-based animations we were to choose one more content and one more media limitations. I chose "Using an appropriated design language" as my media limitation choice. This was the limation that I used of taking only pictures of street signs. I then picked " Man-made objects" as my content limitations, and again this limitation was for the street signs. I tried to keep my signs very diverse in hopes that nothing was getting really repeated or boring.

My Last Animation!!

For the third and final animation, I worked on the Type-based animation piece. This one seemed to be the most difficult one for me and I am not sure why. I think it might have been because I am not completely comfortable using type in flash. My sound was that of a sirens driving in a city, I believe. For this piece I took pictures of different street signs all over the city of Corvallis. To me I was visualizing a car crash and what a driver would see if they had lost control of the car. This animation was interesting to make and it was fun working with images on flash, but overall wasn't my most successful.

Referential Animation

For the Referential animation, we were to choose one more content and one more media limitation for our piece. For the media limitation I chose the broom as the "1 found object to base the whole visual language off of". The broom was creating the sound and that was referential to the makers writing. The content limitation I used was "A person you know". In this case I used my roommate, Jackie, to do the action and she put on a show. :)

My Second Animation!!!

The second animation that I decided to work on next was the Referential Animation. For this piece I decided to use my sound of Writing Markers. This sound was very scratchy and kind of reminded me of nails on a chalkboard, just not as squeaky. I thought of maybe sandpaper, scratching bricks, and other crazy ideas when I thought of maybe a broom. I had one of my roommates sweep our front porch, becasue it was brick, and use different strokes in her sweeping to describe the different stroke lenghts in the writing. It worked out just as I wanted it to. I had some shots of her from far away and then eventually getting closer when the film was ending. This animation was pretty successful. If I could have done something better it would have been to align the brushing sounds of the broom with the sound bit a little better. They a just a little off and that kinda bugs me, I hope it doesn't for anyone else.

Abstract Animation Facts

In my Abstract Animation, we were supposed to choose one more media limitation from our list. My choice was "Found objects only" which happened to be a real fast spinning film of found objects in my house.

My First Animation!

The very first animation that I decided to work on was the Abstract Animation. The sound piece I used to work with was the Amusement Park. When thinking of an amusement park it instantly reminded me of being sick or nauseated. My idea was to film a room that had a wide variety of colors and lights and spin while I was recording. Well, it turned out just as I had wanted it to because when the sound piece and the film were placed together, I instantly vizualied myself on a park ride being spun to death. This animation probably took me the longest to get started, but that was becasue I was getting a feel for the program a little more. Overall I find this animation to be the most dramatic and possibly the most successful.

Siren Mind Map

Changing up the Sounds

After talking with Nicole and Elise on the 6th I decided to swith my third sound to a siren instead of just water running out of a faucet. The siren has a lot more diversity then the facet and was a lot easier to come up with an idea for.

Writing with Marker Mind Map