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.