Michael's Art 328 Process

I believe my 'critique' website should have these attributes:

1. Neutral design that allows the content to be the main focus
2. The design should use minimal graphics but rely on simple metaphors for navigation
3. The user should be able to quickly use any part of the site
4. The main section or home page should offer insight to the website's function and offer a point of departure that's easy to discover.
5. The point of departure should involve some sort of glimpse of each of the 3 websites in review.
6. Besides having a neutral and simple design, it still should engage interactivity and use trends that target our classroom demographic.
7. Styles need to be set up to allow for discrete identification of headings, titles, subtitles, body copy, links, and quotes.
8. A system of presenting screenshots needs to be established
9. A synopsis or concluding statement should be available for each website critique so that if a user does not have the time to read the full review they can still walk away with the gist of the critique. Maybe an optional PDF download.
   
10. Contact information
11. Possibly a biographical page that gives an understanding of the background and why me, the author might be qualified to give such a website critique?
12. The color palette should be quite homogeneous with a few contrasting colors for call to action areas and/or links
13. The theme of the website should be set in a tone that uses real life situations posed as questions that many people are inclined to comment on or investigate - then to make an analog comparison to the website in review. This will divert from a dry website of purely informing the viewer of my findings. To take it a step further these questions and responses could be done in a dry humoristic tone.

I will be using Flash to build my website that critiques bl:nd, DESIGNFLOOD and FOG OF WAR

In order to begin creating my 3 layouts that denote the look and feel, I will need to investigate more thoroughly best practices for such a site.

Looking at designflood.com I already see a version of how to do a similar site. They too are basically just a portal to see other sites and offer a quick way to rate them. What differs in my website is that I will not offer user ratings but instead provide feedback on the selected sites. I like their mission to have the website design remain neutral and let the featured websites take hierarchy. This should be a feature of my website so that the content is the main focus and not my design. What I don't like about their site is the lack of metaphors to help drive navigation and other user interactions. I want it to be clear what to click on and where you can go.

This site, graphic-design.com has a very simple straightforward layout and content arrangement for its critique on websites. The background is white and non intrusive, it's easy to find websites and see a short glimpse of their critique before diving into the full review. Unfortunately to see the full review it takes you to another site that is just a PHP bulletin board. I feel this site change is not fluid and frustrating.

When searching for more websites that critique other websites I found that most of them are all in a bulletin board format to allow for extreme user interactivity. I believe the intention of our website is not to create a forum but more so to create a website to showcase our findings. On that note I am going to change my search criteria to websites that showcase a minimal amount of information in a purely informational fashion.

CSStux does a good job of this although it doesn't provide much feedback on the sites it has listed.

Smashingmagazine.com does a good job of breaking down elements with thorough reviews that have related screenshots to show in detail what the critique is about. I like this style of a linear story with pictures.

Sitecritic.com does the best job of showcasing websites then offering a thorough review with screenshots if you choose to dive in.

Killersites.com's website review section also has a fairly good system of showing their review but I think it doesn't look very pretty.

Commonsensemedia.com is different from the previous sites in that it reviews for a specific audience of concerned parents. This now makes me ask the question about if I should tailor my website critique to tailor a specific audience or style. I think if it did, the site would have more character since it's not just an unbiased critique. For instance I could make my website about how the 3 chosen websites work for a our student demographic and if the design relates well to our asthetic.

3 homepage directions (look and feel) with general examples of a few content elements in relation to the content we have from the website critique. Format should be between 700px - 1000px but all other format options are undefined.

Bring index cards to class for site mapping. Site map may or may not be due the following Wednesday.

Let Krista know by Friday at noon via e-mail if we are going to use Flash or HTML/CSS for this project.

December 1st is an in-class work day.

ScreenShot:


Navigation:
Is it easy to navigate or difficult?
It's very easy to see what to click on but difficult to discern why to click or what clicking might do.

How are you led through the site?
You are led through the site with a date-based navigation after a video plays and shows a date coordinated video next.

What visual clues are given to tell you how to interact?
There are dates, small icons and areas of white that denote links.

Does the designer use a metaphors to get you to move through the website?
Yes.

What Kind of metaphors are used? Organizational Metaphors = (organized by type, kind etc…); Functional Metaphors = performs a “real world” function (in Photoshop you can figuratively “cut” and “paste”) or Visual Metaphors (common graphic elements familiar to most – the traditional “play”, “fast-forward”, “rewind” buttons found on CD players)
The designer uses icons that represent what the text next to it is describing. There are also more abstract buttons in the form of a play and pause button to control the videos and slide the date chooser around.

Information Architecture:
Does the information in the site make sense?
At first it doesn't because I don't understand why the dates are there; probably because I haven't seen the movie. After a lot of poking around and watching the trailer I understand why the information is there but it's not apparent at first.

Can you access the content you want easily?
Yes the content is all on one page and within very short distances to each other.

How is the content organized? (By location, alphabet, timeline, category, etc? )
The content is organized by date in the middle and then organized by suggested user relevance on the left of the circle.

Is there visual and content hierarchy that allows you to easily understand and access the information presented to you?
Yes, the dates are larger and start playing movies without even interacting with them whereas the links on the left side are small and less engaging.

Usability
Is this site easy to use?
Most of the site is easy to use but I had no idea you could actually turn the date element until I randomly clicked on the odd button in-between the play and pause buttons.

How do the above two concepts, navigation and information architecture, work in terms of making the site usable or not? Do the metaphors make sense with the content?
They work together by containing a simple radial structure and keeping the layout focused in the middle and all on one page. The navigation resonates the radial structure and plays off a similar grid.

Overall- does the site sustain your interest and engagement?
No because I felt the text content and the content of the videos was almost educational style and relayed too much boring information. I believe I am not the targeted audience for this film/website.

Meaning-Making: (Narrative and Metaphoric Structures)
In what way is the designer creating meaning in this site?
The designer creates meaning by illustrating the importance of the content. You are meant to discover this film in a timeline by reading and watching videos in a documentary fashion.

Are they using metaphor? (Remember, metaphor is very common in our experience with computers, sometimes so common we don’t even realize we are using it, i.e. the desktop, cutting and pasting, file systems, buttons, etc.).
Yes, through the use of icons like old TVs, arrows, play+pause buttons, sun dials, etc.

Is there a narrative, story or event that unfolds over time?
Yes, it unfolds over the course of Robert McNamara's life as shown with the dates.

Is this narrative linear, non-linear, or multi-linear?
The narrative is set up in a linear fashion but still allows the user to jump to any point in time.

Reflection of the User:
Is there a reflection of you, as the user, on this site?
Yes through feedback of interaction.

Does it change according to your specific visit?
No.

Do you receive mouse feedback? text feedback?
Yes you receive both mouse and text feedback when you click on any of the interactive elements.

Does the site store any choices you have made?
Yes in small bits when you click on a date and then click again to view its related text, the site will remember what date you were on. The same goes for other links.

Are you engaged enough in the site to linger and explore?
Not really. If it wasn't apart of the assignment to go through the website and learn about it I wouldn't have dove in as far. The site simply did not make the film seem appealing to my tastes.

Transparency of Design:
Does the design of the site lead you to pay more attention to the content or to the design itself?
It leads you to pay more attention to the content as the design has a very minimal feel and does not protrude much from the main content elements.

Does the design feel transparent or “natural”, leading you to focus on the content
and forget the design completely? Or – Is attention called more to the design itself?
Yes it feels transparent but not completely as it does a good job of containing the content so you know its bounds.

Does the transparency or lack of transparency of the design make sense with what the site is intending to do?
Yes the amount of transparency of the design helps keep focus on expressing the film and it's supporting content.

ScreenShot:


Navigation:
Is it easy to navigate or difficult?
It's easy to navigate with the simple text-link navigation at the top

How are you led through the site?
II am led through the site with text links at the top and color header bars in the main content area. Also I see text bleeding below the fold so I am led to believe there is more content beneath.

What visual clues are given to tell you how to interact?
The clues are the color and the mouse over color changing effects on the links. The links are also separated from the main content with a background bar to highlight the link area. There are also small arrows on the top left corners of the news items along with icons at the base of each news item.

Does the designer use a metaphors to get you to move through the website?
Yes

What Kind of metaphors are used? Organizational Metaphors = (organized by type, kind etc…); Functional Metaphors = performs a “real world” function (in Photoshop you can figuratively “cut” and “paste”) or Visual Metaphors (common graphic elements familiar to most – the traditional “play”, “fast-forward”, “rewind” buttons found on CD players)
Icons are used as metaphors to show the user what the icon-link will do for them. In this case there is a small tv, envelope, and word bubble to illustrate that you can watch, email and comment respectively.

Information Architecture:
Does the information in the site make sense?
Yes it makes sense. It's clear that it is a site for showcasing Bl:d's work.

Can you access the content you want easily?
Yes, quite easily.

How is the content organized? (By location, alphabet, timeline, category, etc? )
It is organized chronologically and in subsections of the site it can be user organized either alphabetically or chronologically.

Is there visual and content hierarchy that allows you to easily understand and access the information presented to you?
IcYes via the black, white and teal color scheme. The black areas tend to be informational areas or places where you find main navigational links whereas the white ares denote where you will find content and the teal areas highlight the headers for content sections.

Usability
Is this site easy to use?
Yes it's easy to use.

How do the above two concepts, navigation and information architecture, work in terms of making the site usable or not? Do the metaphors make sense with the content?
YesThe navigation is simple and in plain site while the architecture is also simple and supports the simplistic theme. The two together work well to show content and navigational elements without being overbearing to the user.

Overall- does the site sustain your interest and engagement?
Yes, it brings me in with the cool top graphic and titles that engage me to learn more. Also the content itself is quite interesting to watch and learn from.

Meaning-Making: (Narrative and Metaphoric Structures)
In what way is the designer creating meaning in this site?
The designer creates meaning with engaging content. There are questions posed that solve problems and images to show solutions.

Are they using metaphor? (Remember, metaphor is very common in our experience with computers, sometimes so common we don’t even realize we are using it, i.e. the desktop, cutting and pasting, file systems, buttons, etc.).
There is slight use of metaphors in the use of icons for call to action areas at the bottom of content sections. They are as I previously described: tv, envelope and word bubble.

Is there a narrative, story or event that unfolds over time?
The narrative is a chonological discovery of their work and about them as a company. There are also micro narratives in their motion work. When you click on the TV icon to watch a piece of content a story unfolds of their solution.

Is this narrative linear, non-linear, or multi-linear?
The narrative is quite linear but you can jump around within the linear sequence.

Reflection of the User:
Is there a reflection of you, as the user, on this site?
In small amounts.

Does it change according to your specific visit?
No.

Do you receive mouse feedback? text feedback?
Yes when you mouse over links they change. There text feedback occurs after you comment or email something.

Does the site store any choices you have made?
Yes, the site stored information about the choices I made when contacting them.

Are you engaged enough in the site to linger and explore?
Yes because the substance of the content and the simple design that allows quick and easy access to most of their content.

Transparency of Design:
Does the design of the site lead you to pay more attention to the content or to the design itself?
At first the design has my attention from the radical top graphic but then is quickly diminished by the content. So overall the content is what I pay attention to the most.

Does the design feel transparent or “natural”, leading you to focus on the content
and forget the design completely? Or – Is attention called more to the design itself?
The design is to call attention to itself only for a short time so that you understand the company knows a thing or too about design. But the lasting impression is to understand how good they are through their work.

Does the transparency or lack of transparency of the design make sense with what the site is intending to do?
Yes the transparency works well with the intended meaning.

ScreenShot:


Navigation:
Is it easy to navigate or difficult?
It is easy to navigate on the top half of the page but difficult to access content below the fold without scrolling. There are plain text links at the top that provide access to all the pages along with a useful search box.

How are you led through the site?
You are led with links in the color gray and blunt words like "vote now", "rate this website" and with simple numbers to crawl other pages. Because of the innate nature of wanting to click on images, the images take you to the referring website.

What visual clues are given to tell you how to interact?
As mentioned above the color grey is used as the link color and call to action areas. Also larger type helps direct your eye to interactive areas. These areas are also highlighted with a thick white border around the content divisions. Closely cropped images make you inclined to click and see more.

Does the designer use a metaphors to get you to move through the website?
There are really no metaphors used on this site to encourage interactivity or movement. It relies solely on plain text/graphics and slight shift in color to activate the user.

What Kind of metaphors are used? Organizational Metaphors = (organized by type, kind etc…); Functional Metaphors = performs a “real world” function (in Photoshop you can figuratively “cut” and “paste”) or Visual Metaphors (common graphic elements familiar to most – the traditional “play”, “fast-forward”, “rewind” buttons found on CD players)
N/A

Information Architecture:
Does the information in the site make sense?
At first it is slightly difficult to understand the information on the site without arbitrarily clicking a link to see what happens. There is a FAQ at the top of the page that describes why the particular information is on the site but it's not very evident at first glance.

Can you access the content you want easily?
The content is very easy to access as there is no clutter or excess information and only the minimum needed. A simple cropped image, vote now links and feedback about the votes. Previous content is also very accessible via the simple page navigation on top.

How is the content organized? (By location, alphabet, timeline, category, etc? )
The content is organized chronologically by the order in which the author published a submitted link. Otherwise the user can also re-organize the content by using the organizational links at the top.

Is there visual and content hierarchy that allows you to easily understand and access the information presented to you?
The hierarchy relies in the size of text and if something is gray or black. The words "VOTE NOW" bring your eye over to the subdivision of a content area and then encourage you to read and understand that you need to select a rating below with the words, "Rate This Website:". The image to the left of this area is much larger and the only content in color so that stands out the strongest and with most users, encourages them to click. It is not plainly described that you should click to view the site first before rating.

Usability
Is this site easy to use?
It is easy to use but arguably hard to understand which call to action you are to begin with.

How do the above two concepts, navigation and information architecture, work in terms of making the site usable or not? Do the metaphors make sense with the content?
The two concepts make the site usable by allowing extreme focus on the content with no other interruptive elements or metaphors. There are no extraneous graphics or cues which may or may not be helpful since most website users are led with stronger visual cues.

Overall- does the site sustain your interest and engagement?
For me, the site does not sustain my interest for very long. The site is lacking in visual interest and the cropped images just look pretty and do not engage me to interact.

Meaning-Making: (Narrative and Metaphoric Structures)
In what way is the designer creating meaning in this site?
I believe that the designer wasn't trying to create meaning in this site other than showcasing other people's work. He or she simply wanted a user driven site to give feedback to other users about what everyone is looking at and finding interesting. This establishes that the meaning is to rate websites but isn't clear on what should compose your attributes for rating; simply a number to denote whatever you want it to mean.

Are they using metaphor? (Remember, metaphor is very common in our experience with computers, sometimes so common we don’t even realize we are using it, i.e. the desktop, cutting and pasting, file systems, buttons, etc.)
They are not using any metaphors because they do not want to take away from or distract the user from the image or rather the website needing to be rated.

Is there a narrative, story or event that unfolds over time?
Not really. One can see that there are many previously rated websites that are shown by numbered links to older pages. They do not unfold overtime because the user must interact to see older material.

Is this narrative linear, non-linear, or multi-linear?
This website has a linear face but you can access older pages without going through each section sequentially in a non-linear fashion.

Reflection of the User:
Is there a reflection of you, as the user, on this site?
There is. The reflection is shown after I have clicked a rating link. The site then reacts and shows my vote increasing the vote count and the resultant vote average rating.

Does it change according to your specific visit?
Yes it does change by remembering which sites you voted on and denoting the rating you picked and removing the "VOTE NOW" words to be replaced with the current rating.

Do you receive mouse feedback? text feedback?
When the mouse hovers over gray links the links turn white. As mentioned above when I click the rating link it gives me text feedback about my vote.

Does the site store any choices you have made?
Yes, the site stores my rating choice and probably my general internet information that cookies and webstats usually acquire.

Are you engaged enough in the site to linger and explore?
No I am not engaged. It's too simple and bland with poor visual cues.

Transparency of Design:
Does the design of the site lead you to pay more attention to the content or to the design itself?
The site design does a very good job of portraying the content and taking your attention away from the site design by using a muted color scheme and no metaphors.

Does the design feel transparent or “natural”, leading you to focus on the content
and forget the design completely? Or – Is attention called more to the design itself?
It feels quite transparent and calls little attention to itself.

Does the transparency or lack of transparency of the design make sense with what the site is intending to do?
The transparency makes perfect sense for the intended purpose of the site wanting to showcase other websites and not its own.

Enjoy the final piece!

Source Video (~34mb)

or view low res video:



Process:
It took a while to reach a suitable animation style and tone that I was happy with and that also satisfied the requirements for building a new title sequence. I am not going to go into great detail about how I got there because my previous posts are quite long and in-depth that show how I arrived at colors, fonts, discovering the tone, music, and analyzation of the film's techniques as they apply to this project.

What was working in my trial AE exports was the use of screen shots as photos to relate to Joel's memories. This helped the viewer to understand better the significance of the story being told. To parlay this idea into a dynamic composition for my final piece I decided to use the visual effects I found throughout the film: face disfiguring, word erasure, multiple instances of elements that move in space, transparent red color, spotlighting, intense blurring from being out-of-focus and coloring for mood.

With these effects and previously gathered assets in my bag I was ready to blend the two in a motion title sequence. From previous trials I learned from critiques that instead of blurring out facial features it worked better to clone-stamp paint over their face in a rough fashion. The creepiness came across a lot better and mimicked the films style more closely.

I started the sequence with a long shot of Joel at the beach to set the tone as sad and lonely. It transitions in with a slow blur and camera panning away adding to the mood. The film still then rotates back into space giving the illusion of a frozen memory or photograph. The title "Focus Features" comes in blurry at first and illegible while soon after the sharper text comes in. This is to foreshadow what's to come in hopes you understand that it's not always clear what you are seeing or what's going on in the film.

For the next title I transition into it with a still of Joel's drawing of Clem on the train. Alluding to his memory being erased - I slowly fade the drawing away on his notebook. The title "an ANONYMOUS CONTENT production" then comes in on Joel's notebook. This also reinforces how the movie will go through tangible pieces of Joel's memory and erase them. I bring the camera in close in steps with the music until it's soo close that it becomes blurry.

The next title scene follows that out of focus exit and brings in another artifact from Joel's memory: A note from Lacuna warning his friends not to speak about his past relationship because it has been erased. Just as you can almost see the whole note as it comes into focus I erase it from the card. This should make the viewer frustrated since you aren't able to read the whole thing. This helps relate the viewer to Joel's frustration in life. The next title fades in on the card and the camera begins an awkward stepping towards the title. I chose to make the camera move in this fashion because Joel's interaction with Clem is quite awkward. Like the previous transition style, the camera comes in so close that the frame becomes out of focus. Only this time instead of having a gap of black between scenes I have the next scene blend it's out of focusness with the current scene so it appears like a slow seamless transition. This helps keeps the viewer engage with a transition that's not the same as the last.

As Joel's face comes into focus you immediately get a feel for whatever is happening to him in the film is definetly effecting him intensely. Again I use the awkward easing camera movement to pull out from his face. I slow down the camera movement while his face slowly transforms and reveals the creepy covered up features. In the film they use this effect to show how your memory can't always recall moments correctly and that the Lacuna process isn't perfect. Simultaneously a blurry part of his title comes in and then comes in sharper twisting in 3D following the speed of the camera panning. Since the camera is dwelling on this scene I chose not make any sudden movements and slowly fade out. This helps slow down the tempo for the next scene.

A still showing Clem on the train that you saw earlier in Joel's notebook fades in the same way Joel faded out. I keep all the movements timed to the music in order emphasize the lyrics in the song and how they relate to the title sequence. This sequence begins to speed up in how the camera moves and the speed in which the titles fade in. This is to steer away from the more melodramatic mood earlier that really only revolves around Joel and Clem and does not apply to the following title scenes. Kate Winslet mimics the style I used for Joel's title enterance and exit. I did this to subtly reinforce the idea that they have a relationship in the film. During the slowed down camera pan I flip Clem's eyes up-side-down which is another effect they use in the film to illustrate memory breakdown.

The camera now keeps a much faster tempo with beats in the song as it brings into focus the next title scene with Mark Ruffalo and Kirsten Dunst. Since their characters aren't not the main focus of the melancholy mood previously shown I give it a bit more energy. I use more edgy camera movement and quicker title revealing to keep with the pace of the song. To begin the transition into the next scene which will be slower I use the red semi-transparent color like they used in the film to slowly color burn out Mark and Kirsten's characters. Simultaneously the legible parts of the titles go away to reveal their blurry counterparts. I sit on this scene a little bit longer than necessary to let the viewer be suspended in thought as to what might happen next.

The next film still comes in at the exact same distance the previous one ended on except this time it's out of focus and you can make out two doctors holding a photograph. As the camera moves slowly in the image comes into focus revealing Joel and Clem on the photograph. This is the first time the viewer sees the two characters together and not long after I fade their image from the photograph. This is the final metaphor to show the viewer that Joel and Clem will eventually fail. The main title of the movie comes in on the photograph but first in black. I chose to do this because I felt it helped reinforce the way in which memories were being burnt away or burnt into the mind. Then the final white title text comes into the black text on the photograph. This is also the last time I use an awkward camera movement. The scene slowly fades out to black where you are left with the final title.

I figured the director should not be mixed in with all the other effects and metaphors used with the previous titles since he does not star in the film. Therefore I only used simple camera movements with the director's title on black fading out as the song ends. The movement along with the song and slow fade continue with the sad mood to end my title sequence.

As a quick update from my last export I decided to move along with the style using 3D camera movement panning around a photograph. I will introduce subtle elements to keep the viewer interested as the titles progress so that it's not the same technique over and over.

Source Video





Here's a another snippet to share while the full sequence goes on a long journey of rendering:

Source Video

Source video

Source video

I am slowly meandering through after effects trying to simulate a slow moving animation that synchronizes with my song to show a change in Joel's character. The following quick export is the lead in to the first title.

View movie