Web page

The address to my web page is http://www.oregonstate.edu/~storkean/

Link

Here is the link to my website so all can visit: Click Here

Working - done

So I worked the other night on the css of my website for about 4 hours and really got a lot accomplished. In class I was having issues with my images and my link bar. I figured out a way to solve the image issue by putting all three images into 1 image document. This way I could line them up horizontal within Photoshop instead of trying to figure out how to line 3 separate images in css. For my link bar I added what is called piping inbetween each link because these are common elements that people are familar with seeing in link bars. And it added some extra color.

Overall I am really happy with how my website turned out. Although it is simple, it is clean and everything works. It's also very easy to navigate.

I did run into a problem putting up my site on my onid account. When I put it up the css and images weren't working, which was odd because everything was linked right and it worked within dreamweaver. I figured out with the help of fellow classmates that the security and permissions were what was messing it up and I had to go in and change these settings. But now my site is up and running. And I really like how it looks!

Site Map

I am mainly trying with this site to keep it simple. I have a home page and then from there you can link to each of the website critiques, plus an extra information page which contains the information given to us called Windows & Mirrors. I have split this information up a little so it is easier to read and then also relate it back to the websites I reviewed. Each of the 3 sections link back to one of the websites. 

Every page will also contain a home link, and links to the other critique pages not being visited at the time. Hopefully this will work out!

Design Directions

Design #3


Design #2


Design #1

These are 3 possible design directions. It was a little hard to create these, because I am not exactly sure yet what will be going on the page, what links, and stuff. But I tried to keep the design pretty simple so that it wouldn't clash with the designs of the websites I am critiquing. I also used colors that were used in the other websites, to try to tie them together a little better. Right now I am liking the top design, design 3. The colors really compliment the websites, it has a fun feel to it, and it is still pretty simple.

Site Critique #3

Stenkat.com

Navigation:

The site is a little tricky at first to figure out, but once you realize where the navigation bar is, it becomes easier. The site acts as once page, and the animations and info just change with on it. The navigation bar is on the right side hidden under rectangular bars. The text appears when you hover over the area and you can then click to bring that info up. The designer uses few metaphors. The rectangular bars act a little like buttons, an x in a box is used for "close", and arrows are used to go to the next page. These are visual metaphors.

Information Architecture:

The information on the site sort of makes sense. Once I figure out where the menu is, I can access the content easily, all though I am not really sure what I am looking out. When I am directed to the pages other than home, I am not really sure at first how to look at the images bigger, but realize soon that I just click. The content is organized categorically. The visual and content hierarchy allows me to decently understand and access the information presented.

Usability:

The site is a little hard to use. The site does not use many metaphors that cue the viewer what to do or where to go. The menu is a little hard to find and it takes some guess and check t

o figure out how to look at the artists work. Overall, the site sustains my interest and engagement from the animations that appear whenever I click on a menu item. 

Meaning-Making:

Meaning is not really made through using metaphors. There is not much of a narrative or story, but as you click on menu items, things seem to unfold. They are non-linear however. 

Reflection of the User:

There is a reflection of me, as the user, on this site. I recieve mouse feedback as I move around the site. When on certain pages, things move and numbers change according to the mouse movement. The site does not change according to my specific visit and does not seem to store any of my choices. I am engaged though in the site. I like clicking on the different menu

 items and watching the animation unfold, but after watching the animations I get a little bored. I don't like having to click on every image to look at it larger because it take time to load. So after looking at one or two images I move on. The site is in the middle of being transparent and opaque. The menu is not obvious but is not exactly hidden. There are visual cues that lead to it. I pay more attention to the design of the site because of the lack of transparency though. The lack of transparency makes some sense with what the site is intending to do. It is a portfolio site, so it should be more artsy and grab the viewers attention with interactivity and graphics, but it should also elevate the artists work (images), and this site is lacking in that area. 

Screen Shots:

Site Critique #2

Masa.com.ve

Navigation:

It is a little confusing at first to navigate. I was u

nsure at first what to do, but once I figured it out it was easy. You are led by the site, first by entering, then there is a drop-down menu that only comes up when your mouse is over it. You can then select where you want to go. And click to be directed to that page. The drop-down menu is always there at the bottom, but you have to hover over the area for it to come up. There are not many visual clues given to how you are to interact, you just kind of have to hover over things, and if they change color then you k

now they are a link. The designer didn't use too many metaphors. The only ones I see are arrows that exist as visual metaphors. 

Information Architecture:

The information in the site makes sense. I get that it is an artists site and it shows their work. I can access the content I want easily once I find the drop-down menu hidden at the bottom. I only have to click and the link changes color wh

en I hover over it. The content is organized by category. Once I find the drop-down menu I understand pretty easily how to access the information presented, but there doesn't seem to be much visual hierarchy that allow me to do this. I am just presented with large moving images that take up the whole screen.

Usability:

The site takes a few minutes to figure out, but then it is easy to use. The drop-down menu that comes up when I hover with the different catego

ries makes the site easy to use. The lack of metaphors however make it 

hard to tell what is a link or not until you hover over them. The site sustains my interest though, because I want to figure out what is link and explore. I also am interested when I go to certain pages how the im

age just move automatically when my mouse moves. 

Meaning-Making:

The fact that the site uses limited metaphors makes the experience with the site a little more difficult to use because we are use to them being there. I want there to be a back button thats an arrow instead of just their logo to go back

 to the home page. There is exactly a narrative o

r story that unfolds but there are images that pop up on the screen and change ev

ery few seconds that seem to progress and then start over.

Reflection of the User:

The user is definitely reflected on the site by all the roll overs and color changes. Also on certain pages where the images move as your mouse moves like a touch screen. The site does not change according to my specific visit and does not store any of my choices. I am very engaged in the site, trying to see what are links and what happens when I roll over certain things. 

The design of the site leads me to pay more attenti

on to the design. The design feels more opaque as it has the viewer puzzle out how to navigate the site, but I am also interested in the content of the site, at least the work by this artist on the pages where I move my mouse and the images follow. The design makes se

nse with what the 

site is intending to do because it is an artistic site that will be explored by other artists and interested people who are most likely not looking for specific information.

Screen Shots:

Site Critique #1

BrooklynKids.org

Navigation

It was definitely easy to navigate. I automatically saw the links in the middle of the screen, and when I hovered over each, options showed up. Then once you click where you want to go, you are sent to a page that has all the new options on the left hand side and the original ones at the top. 

The tabs and drop-down menus are visual clues. The tabs are kind of metaphors for real tabs and folders. These metaphors are organizational metaphors. The site also uses a mix of visual and functional metaphors at the bottom with the conta

ct information. It show s letter for the E-Newsletter and a calendar for their calendar. The site also uses arrows to go to the next image, which perform as visual metaphors.

Information Architecture:

I am right off the bat shown from the large title that the site is for the Brooklyn Children's Museum and see below who they are with a description. I then see tabs of information organized by category. I can easily access this content by clicking. However, I have to hover over the tab to get drop-down menus in order to see all the options. 

Usability:

This site is very easy to use. By categorizing the options in menus, the user can easily navigate to the desired page. The metaphors make sense because they are typi

cal metaphors used on many websites. Overall, the site sustains my inter

est and engagement because I am curious what is beneath each menu. I see animated graphics, but I am not distracted by too many things going on. 

Meaning-Making (Narrative and Metaphoric Structures):

Through the graphics, text and colors used, we see a site that is aimed toward children and parents. Metaphors are being used with the tabs, the arrows to go to the next image, the rectangular shapes that bevel out to look like buttons t

hat exist just as that, the bottom contact visuals, and even the images are put on a background to make them look like Polaroid pictures. there is somewhat of a story that happens with the top graphics as ch

ildren move within the city, riding bikes, dancing, etc. The narrative is non-linear. I t only exists on the main page.

Reflection of the User:

The site reflects the user when you get mouse feedback. The color of certain text changes when hovered over, or a drop-down menu come up. The site does not change according to my specific visit and does not store any choices that I have made. I am engaged at first to explore the site by the music, animations, drop-down menus and colors, but get bored easily especially on the other pages. 

The design of the site leads me to pay more attention to certain conten

t. I pay attention specifically to content such as the menus. 

The site is very transparent and natural to use in that it is setup as most websites are with tabs and drop-down menu. In doing this the viewer is led to focus  more on the content, however, the viewer is reminded of the design with the graphics up top. The transparency of 

the site makes sense for what it is intending because it is aimed more at children and parents who want to be able to easily navigate through the site and et the information they need, but also need a little non-complex interactivity to stay involved in the site. 

Screen Shots:

All Done!

Here is my final video! Overall I am really happy how it turned out. Obviously if I had more time, there are a few things I would change, but I think it's complete!

Ok so maybe I won't post this video and you all will just have to wait to see it until class, because it was taking forever to load and I am too impatient.

Almost Done!

So I worked the other day on the video for about 6 hours and got a lot done. Today I am just making some final alterations and rendering my video for output. I obviously ran into a few problems while making my video, but I feel like I successfully figured out how to make the video work. I was proud of myself because when I did run into problems I didn't just give up and change the video. I looked up the tutorials or asked questions in class, and figured it out.

One problem I ran into was how I was going to zoom into sections by scaling up using the anchor points. I figured out how to move the branches and blossoms together, but since the blood had its own anchor point I didn't really know what to do. I finally realized that I could use the branches/blossoms as a parent, and the blood as a child. So that whatever the branches/blossoms did the blood would do as well. This worked out great.

I also ran into the problem that I couldn't watch my entire video all at once because it was too long and detailed. But with the help of Krista I render some parts of it into videos, which saved on space and figured out how to watch certain sections by moving the time ruler.

Next I had to figure out how to use an illustrator file and move around the parts within that one layer. I used the puppet pin tool and created points on the blood in order to pull and move certain sections.

Now I just have to finish and put up the video, woo!

Workin...

I have been working on this video all day today. Here is a small section of it.

Video... so far

Here is my video so far. It doesn't have much of the titles yet, I am going to work on that next. But the tree grows, woo!

Woo!

Well, I feel pretty proud of my progress last class, and am excited that we have an extra week to complete this project. I now can put a lot more time and effort into it and have a better result. Last class I got my tree branches to grow, and they look pretty realistic, at least compared to what I originally had. First, I was going to animate my hand drawing the branches, but this was looking really sloppy and unrealistic. So I watched the tutorial on masking and learned that this technique would work well for my situation.

My next task is animating the blossoms. I have found that the time consuming part is not the actual animating, but finding and understanding the technique in which to use. I talked to Krista last class, and I think I have a good idea of how I am going to do this. I am going to simplify the blossoms further, making them look less decorative. I think this will help tie the blossoms back to the movie. My goal is to work on this this weekend and then next week I can work on the blood dripping and the text.

Starting to work in After Effects

So I started working in after effects the last few days. I watched almost all of the tutorials, but I still feel overwhelmed. Right now I am trying to animate my tree branch growing, which is not working out as I planned. After Effects unfortunately doesn't have very many paintbrush types, so my branches look very unrealistic, but I think the clean lines may be better for Kill Bills tone. I am also very bad at using the brush tool and my hand goes all crazy. I am using the duration write on effect that records what I do and how fast, but I am just not good at reenacting a realistic betrayal of a tree growing. Hopefully this will work out. 

Refining/Storyboarding

So I have chosen to use the song Bang Bang by Nancy Sinatra. It is a slower song from the movie, but it seems ironic and I think it would go really well with my visuals.

I have been working on my concept and storyboarding and here are some screen shots:

here are a few of the images:


I have a few ideas. At first I was thinking that the blood would just drop down the page, but I am finding that it is looking too cluttered. So I want to zoom in closer into the scene into one or two blossoms as they drip blood onto the text. Then follow the blood down as it drips. So I have included in the screen shots some closer up views.

Further Visual Concepts

So after doing the 5 visual concepts and talking to Krista, I am finding that I want to use different aspects from each within my title sequence. I am visualizing a cherry blossom tree growing across the page, but the blossoms will be red, or made up of blood drops. This has an ironic feel to it as does the movie. The fact that Uma Thurman's character writes the death list, leads me to think that it would be cool to use a handwriting font that writes out the names and maybe have them in a numbered list, as in the death list. At the end I want to have the blood start dripping down the page and completely fill it up, as blood has an important role in the movie. 

This weekend I am working on getting all my visual elements, type and music together.

Revised Creative Brief

Creative Brief

Project Details
Date: October 18, 2008
Prepared by: Anna Storkel
Project name: Title Sequence for Kill Bill
Design Lead: Anna Storkel
Hand-off to Production: Due 11/12/08 Product Release:

Project Concept
This project allows me to explore After Effects. And I will create a unique and functional title sequence for the movie Kill Bill that is exciting and action filled.


Objectives
The objectives and goals of this project are to provide the tone for the movie and to list the actors, actresses, and the title.


Audience
The audience would be one that enjoys action movies, blood and guts, fight scenes, kung fu, and a unique experience. They will most likely be a middle-aged men, around 15 to 35 years old. Also the audience would most likely enjoy Quentin Tarantino movies, which are a little offbeat but always action packed with a touch of humor.

Perception/Tone
The tone and perception of the project will most likely be a dark one, but at the same time has a touch of humor. The colors will be black, yellow, and red. The project will attract action lovers by using similar elements in the movie, such as blood and swords.


Communication Strategy
To create the perception/tone, I will stick with the color palette of red, yellow, and black because these are exciting and bold colors that have significance in the movie. I will grab the audience by using graphic images/animations. Like an action movie, I will keep the audience on their toes by using shorter segments, surprising details, and coordination with sound/music.

Movie Elements – Anime, Asian Symbols, Country/Western, Black and White, Yellow Motorcycle and Suit, Death List, Exaggerated Spouting Blood, Swords, Red Tint, Chapters, Revenge/Payback, Hospital, Fight Scenes.

Competitive Landscape
Competitive products include all movies by Quentin Tarantino including Pulp Fiction and Grindhouse. Also Crouching Tiger, Hidden Dragon, Snatch, Sin City, Clockwork Orange, Fight Club, Battle Royal and Once Upon A Time In Mexico.
All these movies are action packed and many use lots of blood. Sin City has the same unique sense about it and uses similar cinematography. Crouching Tiger, Hidden Dragon is similar in that it has an Asian quality and uses unique fight scenes. Battle Royal is all about killing as is Kill Bill. Pulp Fiction stars Uma Thurman and has the same tone and feel.

Single-Minded Message
Unique & Exciting Bloody Revenge

Concepts

Concepts

Ideas

So today in class we had time to think about ideas for our title sequence and begin building sketches. I have come up with a few in my mind so far and began making them today in Illustrator.

I did one using a notebook piece of paper, like a to do list, but on the theme of a death list and it says Kill Bill in a handwriting font.

I did one where blood is dripping down onto the title.

And I am thinking about doing one that has a more Asian theme, like using Asian symbols or having some kind of natural tree or blossom thing growing.

I wish I knew how to draw anime or was even any good at drawing in general, because I think this title sequence would work really well in anime.

Typefaces, Music, and Visual Elements

Here are the Typefaces I am thinking about using:

Typeface Page 1

Typeface Page 2

The Music I am thinking about using is from the movie. I like the following songs:

Bang Bang by Nancy Sinatra

Kill Bill by The Drunken Masters

Battle Without Honor or Humanity by Tomoyasu Hotei

Visual Elements:

The rest of the visual elements I am interested in are linked here: Kill Bill Visuals

Creative Brief

Here is my Creative Brief:

Creative Brief

Project Details

Date: October 18, 2008

Prepared by: Anna Storkel

Project Name: Title Sequence for Kill Bill

Design Lead: Anna Storkel

Hand-off to Production: Due 11/12/08

Project Concept

This project allows me to explore After Effects. And I will create a functional title sequence for the movie Kill Bill.

Objectives

The objectives and goals of this project are to provide the tone for the movie and to list the actors, actresses, and the title.

Audience

The audience would be one that enjoys action movies, blood and guts, fight scenes, kung fu, and a unique experience. Also the audience would most likely enjoy Quentin Tarantino movies.

Perception/Tone

The tone and perception of the project will most likely be a dark tone, but at the same time has a sense of humor. The colors will be black, yellow, and red. The project will attract action lovers by using similar elements in the movie, such as blood and swords.

Communication Strategy

To create the perception/tone, I will stick with the color palette of red, yellow, and black. I will grab the audience by using graphic images/animations. Like an action movie, I will keep the audience on their toes by using shorter segments, surprising details, and coordination with sound/music.

Movie Elements - Anime, Asian Symbols, Country/Western. Black & White, yellow Motorcycle and Suit, Death List, Exaggerated Spouting Blood, Swords, Red Tint, Chapters, Revenge/Payback, Hospital, Fight Scenes.

Competitive Landscape

Competitive products include all movies by Quentin Tarantino including Pul Fiction and Grindhouse. Also Crouching Tiger, Hidden Dragon, Snatch, Sin City, Clockwork Orange, Fight Club, Battle Royal, and Once Upon A Time In Mexico.

Single-Minded Message

Unique

Good Title Sequences

I have been researching and looking at title sequences and here are some that I found that I really like:
Down With Love
Mr. Magoriums Wonder Emporium
The Starter Wife
Kiss Kiss Bang Bang

Project 2

So last class we got our new project. Our homework was to look through the movies we talked about in class and choose one to use for making a new title sequence. I had a hard time deciding between Kill Bill and Batman Begins. Both are very graphic and are a couple of my favorite movies. Without even watching either of them again, I already had ideas in my mind. I chose to use Kill Bill Vol. 1. I just got done watching it and here are the notes I took: 

Kill Bill Notes Page 1 

Kill Bill Notes Page 2

Finished!

So I am all finished with my 3 animations. It feels like a weight has been lifted off my shoulders. I worked all day Sunday on them, but they are done. I saved my type animation for last. All was going well until I got to the top layer of the animation. I had a rolling "D" but for some reason, when I srubbed through the animation it was there, but when I tested it, it wasn't. I was so confused. I figured out that it didn't like when I rotated the type. I decided to pull in a letter "D" from Illustrator. And for some reason this worked. This was a little frustrating because it took a lot of time just to figure out the problem. I am glad to be done.

Animation #3 - Referential

I have decided for animation #3 that I am going to hand-draw a figure walking to simulate an up and down motion, similar to the sound. Here is the first drawing I made of stick figure about to walk:

Sketches/Drafts

For animation #1, the abstract one, I am using circular shapes because they represent my sound well. They aren't too harsh, they are organic, and they can fluctuate. My idea is to have a circle fluctuating to the sound. The circles will grow/shrink when the sound gets louder/quieter. My limitation is using only 2 colors. There will be 2 circles total, because there are 2 distinct cries. So I will most likely make the circles change colors as well. I haven't decided on the colors yet, but I think red and pink.













For animation #2, type-based, I am using the thunder sound with two letters. I haven't chosen the typeface yet. The background will be small "s"s to represent the rain background in the sound. I chose s because it is an organic letter and seems peaceful. They will be a light yellow color and will blink or shake at a steady pace. A large letter "D" will roll out, getting bigger as the sound does and smaller as the sound gets softer. The D will roll to the beat/rhythm of the sound. The D will be a dark purple or blue. The limit is using only 2 colors.













For animation #3, referential, I want to show someone walking, or feet walking. I am not sure if this will be hand-drawn or use images and videos from archive.org. Either way, the animation will have an up/down feel to it.

Decisions

I have decided which sounds I am going to do with which animation. But I am still deciding on which limitations I am going to use with these.

Animation #1 Abstract - Baby Crying

Animation #2 Type-Based - Thunder

Animation #3 Referential (based in video or referential images) - Eating Apple


Anim #1:
Limit 1 - form is abstract
Limit 2 - sound is referential
Additional media limitation - only 2 colors

Anim #2
Limit 1 - must use only one typeface, this is the only visual
Additional content or media limitation - only 2 colors

Anim #3
Limit 1 - must use image that is recognizable
Additional content or media limitation - only appropriated archive imagery/video from archive.org

In Class Work

Today in class we talked about our chosen sounds and the formal elements and sketches we worked on this weekend. We then went into small groups to talk more about them. In my group I was able, with my group members, to focused my sounds a little more. 

Baby Crying:

Circular/oval shapes moving. Scale of shape changing as the sound gets louder and softer. 

The sketch with the piercing shape doesn't work as well as the others. It's too harsh, where as the baby crying is not so sharp.

Apple:

Could possibly use for Animation 3 - Referential. Get an image of someone walking. An up and down movement, or open and close.

Thunder:

Two shapes interacting or existing together.

Concepts

How will the visual form change based on the sound?

Baby Crying -

I can see the form changing kind of sporadically, not regular, but rhythmically. I can see the form being almost like an almond shape or circle or something and changing sizes as the sound gets louder and softer. The almond shape could grow spikes or something out of it, as the sound becomes more harsh and the spikes could retract when the sound is less harsh. 

Eating Apple -

The sound of a person eating an apple is very regular and repetitive. The only sound that is different in it, is the very beginning when the person takes the bite, then the chewing sounds very much the same. The progression of the form will probably go up and down in a regular way except for the very first part. 

Thunder -

The sound of the thunder is a little more complex as it sounds like two separate sounds, that of the rain, and that of the thunder. I can see two forms interacting with each other. One being very regular, soft, peaceful and rhythmic, (the rain) while the other is harsh, sudden, sharp, and irregular (the thunder).

Sketches - Thunder

Thunder

Sketches - Eating Apple

Eating Apple

Sketches - Baby Crying

Visual Explorations of Formal Elements:

Baby Crying

Mind Map

I think I have narrowed my sounds down to three. I am going to use a baby crying, eating an apple, and thunder. These sounds are all different. Some are man made, while some are natural. Some are more harsh, and others more regular. 

Mind Map:

Baby Crying

-angst/anger -innocence -irregular -rhythmic -breath

-in/out -sad -frustration -forlorn -harsh

Eating an Apple

-smacking -up/down -rhythmic -repetitive/regularish

-annoying

Thunder

-2 sounds on top of each other -harsh, but soft background noise -rhythmic

-repetitive background -peaceful background -sudden

-frustration -rumble -sharp

Sound Links

Sound 1) http://www.soundsnap.com/search/audio/4+month+old+baby+cry/score?page=1
Title: Medium Distant 4 ...
User: Airborne Sound
Duration: 0:11


Sound 2) http://www.soundsnap.com/search/audio/foley+water+unscrew/score

Sound 3) http://www.soundsnap.com/search/audio/meadow+crickets/score
Title: Meadow crickets ...
User: BLASTWAVE FX
Duration: 1:00

Sound 4) http://www.soundsnap.com/search/audio/thunder/shortest?page=4
Title: thunder1
User: cyberdsc
Duration: 0:13

Sound 5) http://www.soundsnap.com/search/audio/town+small+construction+site+3/score

Sound 6) http://www.soundsnap.com/search/audio/dispense+ice/score
Title: Refrigerator ...
User: BLASTWAVE FX
Duration: 0:10

Sound 7) http://www.soundsnap.com/taxonomy/term/155/longest?page=3
Title: EatApple2
User: rebecca
Duration: 0:18

First Impressions

I just had Art 328, New Media. I am a little overwhelmed, but excited for the class. It seems like a lot of new material for me. I don't have much experience with flash, web design, or interactive design, but I am willing to learn. I think that learning these new programs and skills will definitely help me in the long run. 

Our first project sounds fun. It includes using sound and motion in different ways. I have already picked out about 7 possible sound clips in mp3 form. I hope 3 of these will work for the project.