Sunday, December 7, 2008

My Website

I decided to go with my original, more simple design, and i decided to have scrollbars instead of have each critique take several pages.

It seems to work ok in Firefox and Opera, but It Doesn't Look right in Safari, and I haven't tried IE yet. If anyone could help me figure out why the pictures won't show up at the top in Safari, that would be awsome!!! Here's my CSS.

And Here's the link to my site!

Sunday, November 30, 2008

Design Ideas

I'm having trouble coming up with designs for my website right now. Hopefully something will come to me, but in the meantime here are some very basic designs for the home page:



Website layout/information architecture

I don't know how to make a site map, but I made a drawing of the site structure that I'll scan in and upload as soon as I can.

I won't need an extensive menu because there won't be that many pages in my website. I think the main sections I'l have will be:

HOME PAGE

I decided that the home page should have a description of the basic idea of the website, because I noticed when i was exploring websites for this project that I liked the ones that told me what the site was about right away, with either a statement on the home page, an easily accessible "about" page, or a design that makes the purpose of the site obvious without explanation.

If it will fit, I would also like whatever generic info Krista is supposed to give us about what makes a good website to go on the home page.

3 WEBSITE REVIEWS

Each website review will probably be several pages long. I'll have a back and forward buttons, as well as the capacity to jump to each section, so they're easy to navigate.

PROJECT DOCUMENTS PAGE

I'd like to provide links to the project brief, list of websites we could use, website critique worksheet, etc. so people can see more of what the project was about.


That's really about it. The site will be very simple and straightforward, and hopefully the design will reflect the simplicity of what's there.

On To Project 3!

Sorry I couldn't post my final video- my onid is full! And sorry its taken me so long to post the project 3 stuff!

First off, here are my website reviews (screenshots coming soon) Hope i did the reviews right!



Site Name: Iamalwayshungry.com


Navigation:

Overall the site was fairly easy to navigate. The main menu was large and easy to find and understand as soon as I entered the site. I was able to go to the info section immediately to get a feel for what the site was all about. The info section had a sort of poetic ___-esque description that wasn’t completely informative but set a tone for the rest of the site. The titles of the subsections also cled me in to what the site was about right away. I could tell by the menu categories “motion,” “print,” “identity,” etc. that the site was for a design group or a designer.

The only navigation difficulty was that it took it took a little extra exploration to find the contact section, because it isn’t connected visually or spatially to the rest of the menu items. This adds to the fun/exploration element of the site, but may frustrate potential employers who just want to get ahold of the designer quickly.


Metphors:

Organizational: Main menu categories were organized by use (news/showcase/archive/info) Subcategories were arranged as was fitting for each section, for example, the archive section was arranged by the type of work.

Functional: the ticking clock, use of buttons

Visual: The groups actual design work was full of visual metaphors, but I didn’t notice many visual metaphors in the site design, perhaps the envelope in the email section would count.

Information Architecture:

Information makes sense, and the content is easy to access and well-organized, overall, although it is difficult to distinguish the hierarchy between some of the submenus. For example, in the archive section the menus appear to be continuous all the way down the left side of the screen, when in fact its actually a menu on the top half, and sub-ctegories on the bottom half. But tthere isn’t enough hierarchy to tell the difference between the two. Heirarchy works to aid usability in most other areas of the site except in this one instance, though. I especially like the large main menu superimposed over the background- it helps the site feel more simple, even though there are a lot of areas of information to navigate.

Usability:

Navigation and information architecture contribute to high overall usability. The site is easy to use and interesting, presenting a lot of detailed information in a user-friendly way.
Meaning Making:

No obvious or unusual metaphors were used besides the ticking clock. The ticking clock in the upper right corner of the screen was an interesting element. Its presence gives a sense of urgency, even though it’s just keeping time. It made me feel a slight sense of urgency and anxiety while I explored the site, as if there was something I was supposed to discover within a certain time limit, almost like some sort of video game. This mostly felt like a bad thing, but I did notice that this aspect contributed to my overall immersion in the environment of the site and kept my attention on the site, because I felt I didn’t have time to be distracted.

Reflection of the user:

Besides the usual rections upon mouse-over for links, etc, there was no special reflection of the user in the site. The clock gave the feeling of reflecting the user. I felt like it was timing me. But in actuality it was just keeping track of the actual time of day, and didn’t change according to my interaction with the site.

Transparency of Design:

The design doesn’t overpower the content, but I did spend more time thinking about the site design than I did on other websites I visited. Since it’s a design group, however, this may not necessarily be a bad thing. Overall the design is fairly simple, and showcased the design group’s work beautifully with nice transitions and an easy-to-use interface.





Site Name: airbag concept

Navigation:

I wouldn’t exactly say it’s difficult to navigate, as there is only one page. However, the lack of depth to the site is not explained very clearly, so at first I kept attempting to find a way to get to the next page, or somehow uncover more information. Visual clues don’t give much of an explanation about how to interact with the site, at least upon first glance.

The metaphor of an ultrasound showing the development of an unborn baby represents that the site itself is in the midst of development and will be “reborn” in the future.

Metphors:

The metaphor of an ultrasound showing the development of an unborn baby represents that the site itself is in the midst of development and will be “reborn” in the future. I’m not sure what type of metaphor this is, maybe functional?

Information Architecture:

The site doesn’t conatin much information. I had to go to the external facebook link provided to find out what was going on with the website. After seeing screenshots of how the website normally looks, and remembering the developing baby metaphor, I put two and two together and realized that the site must be under construction. The information was presented in a very poetic and interesting way, but was not very clear at first.


Usability:

I can’t say much about usabilty, since the site is under construction, but overall I didn’t have a very good experience as far as ease of use.

Reflection of the user:

I kept looking for what the site was about, trying to figure out if the changing image was changing because of my interaction with the site in some way, but it wasn’t. It was a little frustrating at first, until I realized what was going on.

Transparency of Design:

This was one of the most interesting and memorable sites I visited, which is why I chose to write about it even though its under construction. It was also one of the least understandable and most confusing. The poetic imagery definitely overpowers clear presentation of information. But it made the site memorable. It made me want to see more of what the creators’ work is like. I will definitely go back to visit the site again when it’s finished.





Site Name: eating sandwiches

Navigation:

Very simple and easy to navigate! The user is lead through the site by a calendar-like interface, with recent articles arranged by date and posted in a calendar-like grid with a brief section of the article and a picture for each. The clickable section of the grid for each article turns green upon rollover. There’s no menu on the main page so you really don’t have many options to confuse you. All you can do is click on articles.

Metphors:

Organizational:

Articles on the main page are organized by date, starting with the most recent. Within articles, there is a menu bar an the right hand side. Menu items are organized by categories (such as art/exhibit, brand, Canadian, etc), with number of articles of each type next to each category.

Functional:

Looks like a calendar.

Visual:

[…] symbol indicates that there is more of the article to read, and reinforces the idea that the user should click on the articles to read more. The play button symbol is also used in some of the video links. Buttons are used sparingly but there are a few.

Information Architecture:

Information is clearly presented and makes sense. Content is easy to access, although you can’t search by category unless you are already in an article because there is no menu on the main page. But it only takes one click to get there, so it’s not too big of a hassle.
Content is organized by date on the main page. On other pages there is a menu that includes major sections (other pages, categories, recent comments, etc.) with exhaustive listings under each category heading. There is also a search section so that the user can find specific information that may not be listed.

Visual hierarchy helps a lot in this site’s design. This site offers the most hierarchy in text size, which greatly contributes to the simplicity and straightforward communication. In the calendar, the most recent post is the largest. Within the articles, there is enough variety in text size to make the articles easy to read or to skim through. It’s easy to understand what’s important.


Usability:

The site is very easy to use- navigation is easy and information is presented clearly. Metaphors, hierarchy, and simplicity are the greatest contributers to its ease of use.

The site sustains my interest- not because of the design but because the articles are interesting and easy to read because the information is presented so clearly.

Meaning-Making:

The designer creates meaning using the calendar metaphor which creates organization and a sense of being up-to date. There is a linear narrative in that people can converse about articles by posting comments. The whole site can also be considered a less linear narrative about whats going on in the creative world- not one story line, but bits and pieces that create a general feel (multilinear?)

Reflection of the user:

The user can post comments on articles, thereby adding information to the site as well as conversing with other users. Mouse feedback is the same as most sites.

Transparency of Design:

The design is extremely simple and lends itself to the presentation of information like these articles. The design is about presenting the info clearly, not about having an especially cool/flashy look.

Monday, November 10, 2008

A Little More Progress...

Its going slowly but surely:

Here's My Movie So Far

In Progress Title Sequence

Okay this is very very very rough. I need to figure out how to change the timing/speed on a lot of parts. And its not getting the mood I wanted at all. Also if you watch this I've only animated like 30 seconds of it even tho the movie is longer. But at least im figuring out aftereffects a little bit :)

Here it is!

Wednesday, October 29, 2008

Story Boards

At first I was stuck on my general concept but I couldn't figure out how to translate my vague ideas into actual sequences of action. Getting out of photoshop and sketching the storyboard by hand helped me think of concrete ideas.

IDEA #1:

This is my original storyboard based on the concept of a journal being erased as I described in my last few blogs.























IDEA #2: I came up with another idea while I was doodling during Art History class. This idea is also based on the journal being erased, but it is more interesting because it has sketches of the two characters running away as the journal is erased. It will be easier for people to identify with, and it will also emphasize typography more because I'll have them running through the pages of words and hiding in the letters, etc. I also moved the title to the end in this one, and It's obliterated by dripping ink that eventually makes the whole screen black, which I think is kind of cool and goes with the concept. It plays off the storyline of the movie a bit more literally than my other idea, but I think its abstracted enough that its not going to spoil the plot.

Monday, October 27, 2008

Possible Music Choices

I spent a lot of time looking at music for my title sequence. I feel like the song choice is one of the most important decisions I have to make because It will set the pace and flow of the sequence, and also contribute a lot to establishing mood.

From the Soundtrack:

I noticed that the soundtrack has a lot of very simple music. A lot of waltz rhythms or songs where the main music is just a steady stream of arpegios. This made it a bit difficult because, although this type of music has great flow, it tends to sound a little too happy. It feels like positive/forward motion, and I want the backward motion of erasure and going back in time with memories. I definitely steared clear of the main love theme from the movie, even though its a beautiful song. There were some songs on the soundtrack that seemed like they'd work though:

Change Your Heart
I like the rhythm in theis song. It would establish a good pace for the title sequence. It goes well with the movie theme as well.

Collecting Things

This one might be a little too happy sounding, but again I like the rhythm. It would give the title sequence a nice flow.

Sidewalk Flight
The slightly creepy sound is perfect for my journal concept, and I like the fast pace of it. It is only a 30-second track but I could repeat it.

Showtime

The overlapping of strange sounds would go well with the surreal/dreamlike concept I'm going for. I'd have to establish my own rhythm with this one though, because the song itself doesn't have one. I think this might be the best choice for setting the tone of the rest of the movie.

There are a few similar ones from the soundtrack that I'm also considering, maybe using several togehter.


From My Music:
I also looked through my iTunes library to see if I had anything that would work. It would make it more unique if I could find something that wasn't actually used in the movie. I tried to find songs that had a similar musical style to the movie or fit with the theme I'm going for.

The Ocean
The waltz beat in this song reminds me of the simple rhythms used in the Eternal Sunshine soundtrack. The music style is a little different but I think the words still fit the theme.

Nude
The feel of this song goes perfect with the movie. I think a lot of Radiohead would go with the feel of the movie, actually. I'm not sure how well it would work with my journal concept though. But the song definitely has a personal feel, like your getting into someones head.

9 Crimes
Consistent with the arpegio-style music of the movie, and has the emotional feel of the movie. Less surreal than my concept, but I think it would still work. I like that It's a male-female duet as well.

Because
Yup. Classic Beatles. When I tried to think of a surreal/dreamlike song this is what came to my mind first. And the music is actually very consistent with the movie. It might be too recognisable and dated, though. I don't want it to be distracting because of it's associations.

Derelict

The words don't go well, but the background music is so perfect. I wish I could get rid of the voice track, or find something else that's very similar to the instrumental part.

Converting Vegetarians Track 13

The first minute or so of the song is less techno-y, and has a surreal/creepy feel that would go great with my concept.

Saturday, October 25, 2008

The Grand Plan

After talking with Krista about my concepts, she suggested that I go with the journal idea because it goes best with the concept of the movie, but also throw in some quirky elements like the heart-shaped potato and some surreal elements from my "surreal" concept palette to add color and interest to the journal.

I'm pretty happy with this plan, I just wish I knew how I could animate it...? On to more after effects tutorials I s'pose :(

I want the journal to become more and more deterriorated as time goes on. I dunno if it'll end up completely blank, or maybe the edges of the pages start to disintegrate? Something like that...

I want holes to rip in the pages to reveal words on the pages below, but I don't know how to animate a rip? Maybe take a bunch of frame by frame photos? Here's an example of what I'm thinking:


















It might be cool if aftereffects had some pre-programmed animations I could use to make the journal more dream-like. Maybe a page of the journal could start to ripple like water or something...? That would kinda go well with the Surreal/dreamlike atmosphere I'm going for. But might be really cheesy...

5 Concepts

My 5 concept pallettes:

Plain
Quirky
Rip
Journal
Surreal

I turned My two favorite concept palettes into compositions:

















This one would be based on his journal in the movie where he wrote his thoughts and memories and made sketches. In the movie, after he has his memory erased, the pages of his journal with memories of clementine have been ripped out. I want to play with the concept of memory loss by making the words and images on the pages disappear in different ways. They could be erased, the ink could bleed, parts could be ripped away, etc. The would be interesting sketches that might be warped or erased as well. I would use a handwriting font or my own handwriting.

















This concept is based on the box of mementos that people would bring to the doctor when they had their memories erased. It would be a collection of objects that might have significance to the couple's relationship. It would have quirky intersting items like the potatoes they dressed up, old photos, cards, etc. It would have a brighter color paletter and A comic font similar to this one (International Superhero) combines with a more plain font (like Helvetica).

Saturday, October 18, 2008

Possible Fonts

If I go with a handwritten journal look I might just handwrite my own, but heres some possible fonts I could use as inspiration:








The general goal is for it to look like handwriting but NOT be too cutesy like comic sans, or anything like this:





Also I might have a sort of back-and forth thing between the two sets of memories of the guy and the girl in which case I'd also need a more feminine script that has a noticeably different look to it than the other script without loosing the feel, maybe something like this:

Creative Brief

So far I've been collecting imagery, writing my creative brief, and slowly learning After Effects.

Here's my Creative Brief

Tuesday, October 14, 2008

PROJECT 2: MOVIE CHOICE

After watching several of the movies on the list, I think I'll most likely go with Eternal Sunshine. As I watched each movie, I thought of ideas for title Sequence animations. I had decent ideas for several of the movies, but after I considered my limited animation skills I decided that my ideas for Eternal Sunshine seem most practical. I'd like to do something related to the concept of erasing, using imagery similar to his journal, such as sketches and handwriting.

Sunday, October 12, 2008

Reflections On Project 1

What I learned:
1. You have to put stuff in tn the library or you can't really use it.
2. Basic flash animation techniques. I need to learn how to work flash better.
3. Adding sound can make an animation a lot more interesting and believable (the punches wouldn't feel like they really even hit the knight in my referential animation without the sound)
4. Time is weird. Sometimes a few seconds seems like way too long, and at othertimes I feel like I'm having to squeeze way too much into a really short time, depending on the pace I'm trying to achieve.

Good Stuff:
1. I learned how to make something in flash! Yay! :D
2. I like my referential animation because I think the sound is kinda interesting with the images I chose.
3. I like the rumbly O's in my type-based animation. I think I did a good job of taking my original sketches, which weren't type-based, and translating the visual ideas into type.

Bad Stuff:
1. I don't like my abstract animation because I couldn't make what I wanted with my limited flash skills.
2. My limitations aren't very visible in my projects. For me personally, this is fine because I feel like the limitations are really there as a jumping off point to give us parameters to work in. But hopefully they're not supposed to be super-obvious, because I don't feel like you'd know what mine were if you watched my animations before reading my blog.
3. I am on the computer so many hours a day with this class, work, and all my other classes that my right wrist is in constant pain and I think I should get a brace or something! :(

Final Animations

So here are my 3 final animations (unless anyone gives me some feedback or I get some bright ideas to spiff them up a bit:

Animation # 1 (Abstract)
Sound: Crowded Restaurant
Extra limitation: Man-made objects
(This was originally supposed to be 'something I observed' (sparklers) but unfortunately I had to change my animation as explained in my previous post)

Animation # 2 (Type-Based)
Sound: Car Ignition
Extra Limitation: Climate
(Its hard to tell from my actual animation, but when I did my mind-mapping for this sound I came up with references to ghost-towns and desert climates. I think this might have been because the sound of the car driving away made me think of feeling lonely and deserted.)

Animation # 3 (Referential)

Sound: Gong (or bell?)
Extra Limitation: Using only found objects or drawing as subject

Abstract Animation

I found it really difficult to translate my original idea for this animation from my imagination to flash format. I wanted to have single points of color moving across the screen leaving ovelapping trails (kind of like seeing kids running around the yard playing with sparklers at night) The different colors would overlap and combine to create new colors, just like the voices overlapped to create new sounds in the "busy restaurant" sound clip. My initial drawing shows this idea.

But once I attempted to animate this, i realized that what I wanted to create was beyond my skill level in flash. The closest I could come to making lines run across the page was this trial animation.

I had to simplify my idea down to something I could handle with my limited flash skills. But the animation still retains the same basic concept of overlapping voices/colors as my original sketches:

Animation 3

Saturday, October 11, 2008

Tuesday, October 7, 2008

No Flash For Me :(

Just got home from an 11 hour workathon in the computer lab, preceded by the same yesterday. All for my other classes and my internship (huge deadline rapidly approaching) So I definitely will not be doing anyflash until this weekend... sad....

Also my blog is under suspicion of being a spam blog so I dunno if anyone can read this and I have to do all this verifying that I'm a real human... somehow the letters i am typing in arent the ones they are showing...grrrrrrrr.......

Monday, October 6, 2008

Reflections on Project Guidelines

I didn't read the project guidelines before I did my explorations. I chose this strategy on purpose so that I would think about the sound without immediately jumping to ideas for my animation. This strategy definitely helped me explore the sounds more freely, but now its making it harder to narrow down my ideas, because some of them don't fit into the project parameters. I did a lot of abstract drawings but it's going to be hard to come up with the type-based and a referential animations. Right now I can't even decide on which sound to use for which.

ANIMATION # 1 Abstract Animation
...Content limitation 1 = form is abstract (shape, line, texture, mark, etc.)
...Content limitation 2 = sound is referential
...Sound determines structure
In addition you must choose one more media limitation from the list.

ANIMATION # 2 Type-based Animation
...Content limitation 1 = must use only one typeface - this typeface is the only visual
...Sound is added to reflect typeface qualities
...Sound still determines structure
In addition you must choose one more content or one more media limitation from the list.

ANIMATION # 3 Referential Animation (based in video or referential images)
...Content limitation 1 = Must use image that is recognizable
...Sound still determines structure
In addition you must choose one more content or one more media limitation from the list.

Sunday, October 5, 2008

DONT FORGET TO FIND OUT WHEN PROJECTS ARE DUE !!!!!!!

PROJ 1 is DUE MONDAY (13th)

Next proj will be due about 3 weeks after that... schedule to be posted soon?

HW 2: MIND MAPPING, DRAWINGS, CONCEPTS

1. Crowded Restaurant-



I want to focus on the overlapping and interweaving of the different voices and conversations. In "Drawing 2" I used different colors to represent different voices/conversations and their different tones. The colors all overlap to create new colors, and get muddled up into brown, just like the overlapping voices come together to make new sounds and become unintelligible. The clinking of glasses punctuates the dull roar of the conversations and adds variety. "Drawing 3" is a more in depth look at the shapes inspired by the clinking of glasses and silverware. In "Drawing 4" I used scale-like shapes to represent the overlapping of different voices.

Mind Map

Drawing 1
Drawing 2
Drawing 3
Drawing 4

2. Car Starting-




My drawings for the car starting look similar to graphs because when I mind mapped the sound I came up with words like "up, down, decline, upward, slanted, etc..." This is probably because there are several points where the sound makes obvious transitions between low and high pitch. I'm especially interested in the rumbling of the engine and how it could be animated with some sort of ripple-like effect. I also noticed when I mind mapped that as the car drives away I came up with a lot of words like "empty, lonely, left behind, ghost town, etc..." So I want to try to have a sense of fullness at the beginning and contrast it with an emptiness at the end of the animation.

Mind Map
Drawing 1
Drawing 2
Drawing 3
Drawing 4

3. Gong-


It was hard to get away from visually representing sound waves with this one. I would like to work with the repetition and overlapping of sound in this animation because as I was drawing I noticed that the sound from the first gong is still going when the gong is struck again.

Mind Map
Drawing 1
Drawing 2
Drawing 3
Drawing 4

Wednesday, October 1, 2008

HW 2

Mind map exploring formal elements for each sound
Sketches- make visual explorations of these fromal elements (3-5 for each of the 3 chosen sounds)
Concepts- begin thinking about how your visual from will change based on your sound
Tutorials Ch 1-6 of flash CS3

HW 1: SOUND EFFECTS

Here are links to 6 sound files:

1. Multiple Sounds
(this one is good because it has lots of different sounds that could be repeated individually, like a baby crying, dogs barking, squeeky swing, etc)

2. Awesome Dr. Seuss Sound Effect

3. Machine Gun

4. Flintstones Style Skid Noise

5. Speedy Gonzales

6. Bla Bla Bla

And last but not least- PINK PANTHER :)