Sunday, November 30, 2008

Ideas for Site Structure

The usage of the note cards seemed a bit useless at first. Given that it wasn't really explained with such great detail at first made it even hard to understand. But after the short demo we had in class, I was able to make sense of it.

The following images are that of my assets list/site structure analysis and also of my site map.
Assets list of web site elements

image of site map layout of content and pages

Monday, November 24, 2008

Project 3: Layout Ideas

The following images are related to the three websites that I examined. Each of which resembles the original look to each one of them. Therefore, I must remember to add variation but also find a way to unify all three at once. 

1) This one resembles more of what the MASA website looks like but at the same time I am trying to make it look clean and professional.

2) Here you can start to see the kind of look that I am going for--clean and professional. Yet there could be some more interaction occurring.

3) This one focuses entirely on the interaction aspect that most websites are incorporating into their designs. Not sure if I want to go this far but I just might end up doing it.

Wednesday, November 19, 2008

Website Critique #1

Website: http://www.blind.com/

Navigation:
Is it easy to navigate or difficult?
Extremely easy! Very elegant too—smooth transitions.
How are you led through the site?
Viewers are lead through a common set-up of a blog where you have your menus on top, features/news that’s most current underneath that and additional menus to the side(s).
What visual clues are given to tell you how to interact?
The main visual cue that is given is that of color variation. This becomes most evident when you are scrolling over any of the links that are on the site. Another visual cue is that of receiving feedback when you are looking at the video examples that each feature has as well as it incorporates “Fitt’s Law”.

Does the designer use a metaphors to get you to move through the website?
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)
A combination of Organizational and Visual Metaphors are what is being used on this site. Organizational because of the group setting that is typical of a blog-type site. And visual in that even though there are a few common graphic elements, they still help put the viewer at ease while navigating.

Information Architecture:
Does the information in the site make sense?
Yes. The information on this site does make sense. I just wished that under the “About Us” section there had been a brief description about the company and not the definition of the company name. Reason being is that not everyone would understand that portion.

Can you access the content you want easily?
Yes. Precision is key and this website has it! Even though it may seem like a blog site it still functions very well as a normal site.

How is the content organized? (By location, alphabet, timeline, category, etc?)
The content on this site is interesting in that it is organized by all of the mentioned items listed in this question: Location in relation to the navigation bars. Alphabet and Timeline in that you as the viewer are allowed to choose that option when looking at the projects that are being presented. And category in that there is a number of categories that one can access.

Is there visual and content hierarchy that allows you to easily understand and access the information presented to you?
Yes, but at times it almost seems like they are competing against each other but at the same time are balancing each other out.

Usability
Is this site easy to use?
Yes—so easy and yet interesting too.

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?
Both of these concepts are working extremely well in that the information architecture is supported by the navigation portion and vis-a-versa. They are such important parts that by combining them it makes it so much easier on the viewer to grasp what they need.

Overall- does the site sustain your interest and engagement?
Yes. Its simplicity seems to compliment the feel of the overall site look.

Meaning-Making: (Narrative and Metaphoric Structures)
In what way is the designer creating meaning in this site?
In that this business/company is about being professional and yet entertaining when needed to. This can be seen by the way the website looks and operates.
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.)
The only real metaphors that are being used are those of the navigation menu bars. Everything else doesn’t seem to fit this description.

Is there a narrative, story or event that unfolds over time?
No. There doesn’t seem to be a set order to support a narrative in this site. Except for the part of the storyboards for the designs.

Is this narrative linear, non-linear, or multi-linear?
N/A

Reflection of the User:
Is there a reflection of you, as the user, on this site? Does it change according to your specific visit? Do you receive mouse feedback? text feedback? Does the site store any choices you have made? Are you engaged enough in the site to linger and explore.
You mainly receive mouse feedback, especially when you hover over the links. But the headline seems to change color every time you enter a different portion of the site.

Transparency of Design:
Does the design of the site lead you to pay more attention to the content or to the design itself? 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?
They both seem to work very well that it is hard to say that it only focuses on one. But in reality, the content is more important then the actual design. Reason being is that the business/company is trying to demonstrate the professionalism of what they do.

Does the transparency or lack of transparency of the design make sense with what the site is intending to do?

Website Critique #2

Website: http://www.masa.com.ve/splash.html

Navigation:
Is it easy to navigate or difficult?
Yes to some certain extent (though it seems that there really is not a clear understanding at times.

How are you led through the site?
Lead through by a large set of menu bars on the bottom left of the site. This then takes you to their designated area where other items can be scrolled/viewed.

What visual clues are given to tell you how to interact?
The visual cues are composed of icons that primarily are highlighted when you hover over a certain link. There are a few media buttons that can be pressed to play some of the items shown on the screen. There is also a preview window that is consistently refreshing itself with images of projects.

Does the designer use a metaphors to get you to move through the website?
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)
This website uses a common combination of Organizational and Visual Metaphors. Organizational in that there is a group of navigation menus so that it is easier to spot, which is the most dominate visual on the website. And visual in that there are common graphic elements like the stop, play, and mute buttons.

Information Architecture:
Does the information in the site make sense?
After reading the description about the website, yes. This is a site that is dedicated to the emphasis of Latin American pop and worldwide contemporary street culture. Therefore, the simplicity but also complexity of the type choice makes sense.

Can you access the content you want easily?
Yes and no. Even though the links seem to respond well when one clicks on them, there sometimes seems to be a crossover between the menu bars and the preview window, causing it to not fully cooperate. Trying to scroll and stop on a certain portion seems to work a lot better.

How is the content organized? (By location, alphabet, timeline, category, etc?)
The content on this site is organized by all of the mentioned items listed in this question: Location in relation to the navigation bars. Alphabet in that mostly everything is alphabetized. Timeline in that there is an actual timeline in one of the sections. And category in that there is a number of categories that one can access.

Is there visual and content hierarchy that allows you to easily understand and access the information presented to you?
Yes, but it seems that this site’s focus is more emphasized by the hierarchy of the images compared to that of the content.

Usability
Is this site easy to use?
Yes—somewhat easy.

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?
It’s a bit of a challenge at first, but having both of the above concepts work together on the usability of this site could be improved. There seems to be an unclear correlation between the two but with a few tweaks, it should be fine.

Overall- does the site sustain your interest and engagement?
Even as a designer, not really. For one it’s been repeated several times and there seems to be too much white space.

Meaning-Making: (Narrative and Metaphoric Structures)
In what way is the designer creating meaning in this site?
This site is about emphasizing a pop/urban life culture. Therefore, it’s meaning would be to portray that to it’s fullest capabilities-through its art samples.

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.)
The only real metaphors that are being used are those of the navigation menu bars. Everything else doesn’t seem to fit this description.

Is there a narrative, story or event that unfolds over time?
No. There doesn’t seem to be a set order to support a narrative in this site.

Is this narrative linear, non-linear, or multi-linear?
N/A

Reflection of the User:
Is there a reflection of you, as the user, on this site? Does it change according to your specific visit? Do you receive mouse feedback? text feedback? Does the site store any choices you have made? Are you engaged enough in the site to linger and explore.
You mainly receive mouse feedback, especially when you hover over the icons. But there is also the option of scrolling through items and being able to adjust that window once you scroll away from it.

Transparency of Design:
Does the design of the site lead you to pay more attention to the content or to the design itself? 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?
Because the design is so simple, this site almost requires you to focus more on the content than the actual site. This is good if you’re trying to send a clear message across to viewers.

Does the transparency or lack of transparency of the design make sense with what the site is intending to do?

Website Critique #3

Website: http://www.emilianorodriguez.com.ar/home_eng.html

Navigation:
Is it easy to navigate or difficult?
Yes, despite seeming like it wouldn’t be because of how different the interface is to other websites, it’s still easy to navigate.

How are you led through the site?
Through the basis of groupings of information and a key/legend at the upper right-hand corner. The entire website is composed of one single image for the background that also helps us navigate through it.

What visual clues are given to tell you how to interact?
The basis of the visual cues are composed of icons. You are give a small preview of what to expect and once you’ve clicked on it; you’re able to see the entire thing. It’s the same thing with being able to mute the sound within the website.

Does the designer use a metaphors to get you to move through the website?
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)
This website uses a combination of Organizational and Visual Metaphors. Organizational in that everything is set in groups. And each group has its own purpose for the function of the website. Visual in that there are a lot of common graphic elements that people are familiar with—like the “traditional” media player options.

Information Architecture:
Does the information in the site make sense?
Yes. This is an online portfolio site for this individual by the name of Emiliano Rodriguez. Here we are able to learn about who he is and see examples of his artwork. Therefore, it is if we were seeing his resume.

Can you access the content you want easily?
Yes. The links to the content are precise, responsive, and very easy to spot.

How is the content organized? (By location, alphabet, timeline, category, etc?)
By a combination of location and category. This is what makes this website so easily functional—everything is easily spotted from the moment you access the website.

Is there visual and content hierarchy that allows you to easily understand and access the information presented to you?
Yes. This can be seen by he navigation menus/links that there are in different areas of the website. And that the hierarchy is also present which makes everything seem to work smoother.

Usability
Is this site easy to use?
Yes it is—extremely easy.

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?
Both are working together in terms of usability. Because the navigation is so easily recognizable, it allows the viewer to easily find their way around the site. As for the information architecture, the grouping of important information on the basis of categories makes it even easier to know exactly what one is looking for and the fact that the metaphors are solely based on visuals adds to the ease of the website.

Overall- does the site sustain your interest and engagement?
As a designer, yes. For someone who isn’t a designer, it might be interactive but plain at the same time (which could be good).

Meaning-Making: (Narrative and Metaphoric Structures)
In what way is the designer creating meaning in this site?
In that this site is about the individual. It is a portfolio/resume site that is allowing this individual to showcase himself to the online community.

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.)
Metaphors in the way of icons on a desktop, then yeah. The majority of the website is composed of them. This is evident from the navigation menus.

Is there a narrative, story or event that unfolds over time?
Yes. The narrative is that of seeing this individual and his artwork from beginning, middle, and end.

Is this narrative linear, non-linear, or multi-linear?
The narrative is in a linear fashion.

Reflection of the User:
Is there a reflection of you, as the user, on this site? Does it change according to your specific visit? Do you receive mouse feedback? text feedback? Does the site store any choices you have made? Are you engaged enough in the site to linger and explore.
You mainly receive mouse feedback, especially when you hover over the icons. There isn’t that much more of a reflection of the user.

Transparency of Design:
Does the design of the site lead you to pay more attention to the content or to the design itself? 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, in fact, the site does pay more attention to the content when it is available. But when it isn’t, there is an equal balance focused on the design.

Does the transparency or lack of transparency of the design make sense with what the site is intending to do?

Monday, November 17, 2008

Finally Done!

It took me until 5:30PM on Saturday to complete the movie title sequence! But the good thing is that it is done! All that is left to do now is burn it onto a DVD to submit on Monday's class and find a way to post it on this blog or at least a link to it. 

Apparently my public ONID space is at max capacity that even after deleting the majority of stuff that I've placed there, I'm still not able to upload it. 

There are a few areas that I still wish I could have improved but that only occurred to me until after I was already done with this project. The good thing is that I still have all of the files and different versions that I saved so it won't be that hard to fix in the future. 

Work In progress #2

At this point I have done a tremendous amount of progress. Over the past week I have dedicated about 5-6 hours a day (4 days straight) in order to get this project finished. It was intense work but it was well worth it. 

Here are a few screenshots of what I was looking at all this time. 





Designing more elements

In order for the scenery to correspond with the concept that I wanted to portray (the micro-to-macro and duality of the film) I needed to make sure and make the title sequence seem like the "fight" was occurring in a street alley. Therefore, I needed to create the illusion of blood being splashed onto the wall.
 
Here are the designs that I came up with (not all of them were used but there needed to be variety so repetition wouldn't occur).




Sunday, November 16, 2008

Elements of Choice

As you can see, I have derived from my original title sequence idea. But the result has made it more dynamic (just like the original one from the film). Therefore, I am in need of showing where these new ideas came from.

Resource: Video Copilot (specialization in After Effects + Tutorials)

Music
(Final Choice): "Bleed It Out" by Linkin Park

Fonts (Final Choices): "Fight This", "Dirty Ego", and "Tags Xtreme".

Textures: (From Deviantart.com_keyword: Grunge Texture)
Colors: (From original scenes in the film)
The color blue was taken from both the opening scene but also from this closing scene where both Edward Norton and Helen Bonham Carter's characters are holding hands.
The red color was taken from the jacket that Brad Pitt's character wore in the first part of the film. This was to illustrate the difference between both characters and how the issue of duality was such an important part (to both my concept and the movie)

Monday, November 10, 2008

Time for change

During the weekend, I still wasn't too sure about how my original idea for the title sequence was working. I felt that it was too static and that it needed to be more dynamic, just like the movie. Therefore, I did some research for tutorials and found one that works so well with my concept. Not only that but I also changed my song. It seems that everything is working out much more than it would have if I kept going with the other idea I was working with.

Note: I will post links and examples of what I am currently working on soon. (see above)