Saturday, December 13, 2008

Complications

As of Wednesday, Dec. 10, at approximately 9:35pm, I have officially completed my website and it is completely validated and passed the W3 website validator. But there has been some complications occurring: First, I was able to finally delete some of the files from my public html file on the OSU server and loaded the files.

What ended up happening was that my CSS file wasn't registering the proper path. So when I corrected it and re-uploaded it to the server, my entire site disappeared!!! So after trying to upload ALL of the files once more, the server would say that my space was FULL (yet I still ha e over 1 GB of room). WHAT CAN I DO!?

Website Progress

So I know that this is a bit late now but my progress has been a good one! The incorporation of the javascript is making the functionality of my site seem to resemble more of that of the MASA site.

I still need to figure out how/where I am going to incorporate the javascript for the slideshow or the popup window picture slideshow so that it will look a lot smoother, like my original plan.

Does anyone have any ideas?

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?