Sunday, December 20, 2009

Blog Topic #1B: Dude, this site is the coolest!

Boone Oakley (Youtube)

Boone Oakley is awesome. I love the narrated story and information. The delivery was very unique. A perfect example of trying something new and it seems to fit the company very well. They are risk takers. And not afraid of trying new things or offending people. An ad agency for the 21st Century.

Blog Topic #2B: Can I get a resource?

Fonttester

I ran across this site the other day, and although it is very simple it is very simple.

THe site lets you compare 3 side by side comparisons of text that have been differently formatted by CSS. It comes in very handy if you are editing your files when you are at a computer that does not have the software that you are used to and must hand code.

Thursday, December 3, 2009

Blog Topic #11: What's a Favicon?

What's a favicon? What file format is it in? Is this a file format that Photoshop natively supports? How do you create a favicon? How do you add one to your HTML code? Where does it appear? How does it affect bookmarks? Why use a favicon?

A favicon is a little icon that appears next to the URL of your website. It also appears next to the title of your page on your tab(If you use them), it also appears next to the bookmark it is a associated in many browsers.

The favicon is in the Windows Icon format(.ico) and is not natively supported in Photoshop. You can download a Photoshop plugin to make one or you can use Irfanview.

In order to utilize this feature you must upload the .ico file in the same directory as your index.htm file, you must also reference this line of code




in the head of each page that you wish the favicon appear.

A favicon is a good way to brand your site and visually remind your users of its presence in their bookmarks.

It is also possibe to use a GIF or a PNG, you can read more at PhotoShop Support.

Blog Topic #10: Web Critique and Analysis


I liked the idea of having a mostly monotone background, so that it adds extra emphasis to the elements of importance. The structure was very clean and straightforward.
One thing I did fin annoying is the nav bar would reload after you go to a different area of the website.

http://hirshhorn.si.edu

The design elements are very making them very strong, I love the amount of white space around the different elements. The gradient in the background is nice and the flash banner with slightly moving images was a nice touch(Although one was not consistent).

http://www.sonypictures.com/movies/identity

The site reminded me of a comic book(very much of Max Payne Game), It was very dark and scary, the large amount of black(unkown) space of the website that was never really utilized led you to wondering what else could be there.

http://www.lunabar.com

Very nice colors, the curves and and colors seem to cater directly to women. The colors were soft and yet joyful along with the curves you kinda feel the energy. Probably the feeling they want you to associate with their brand name and food products. (... I wonder how the site would look on an older monitor)

http://www.holmleaguesthouse.co.uk

I was a little confused off the bat, had to really think what the site was trying to say. I felt the information was clustered and needed to be ordered in a logical manner. Too much different types of imagery and overall way to condensed. I could not find the most important element on the page. The red text kind of got lost with the lack of contrast of the background(Perhaps changing font or style).

http://tang.skidmore.edu/

Although I think this site design would better suit a architectural museum. I liked the angular design. The colors were good and brought out the artwork, I felt the web site designer was a contemporary artist.

http://www.rubios.com

The colors were very cool, very representative of the restaurant chain. I like the flash animation elements when you enter the site as well as the continuing subtle animations. If you click on Catering the site takes you to the old accounts page, I think they should at least do the login page to match the style.

http://www.groundsforchange.com

Seemed to small for a high resolution wide-screen monitor. I liked the colors, both by representing the coffee product and the neutrality they stand for by offering a fair trade product. Although it did make the site look a little flat. Navigation was logical and mad sense.

http://www.hi-res.net

I thought the design was kool, and the fixed positioning and the animation very stellar. However The text directly against the black shape was hard to read. Very clean and logically laid out.

http://www.okeeffemuseum.org

Very beautiful design, the monotone design with the light blue background was very pleasing. Again the lack of color contrast really brings out the artwork of the images that are loading dynamically. Structure and navigation are very clear and simple.

http://www.chipotle.com

Interesting design, at first glance all their is info on how to make an order and how to get to the location to pick it up. I think the Logo should have a animation indicating that one should roll-over it. I was surprised at the wealth of information after initialing thinking their was hardly anything to do on the site. I think the amount of white space really helps keeping everything in context.

http://www.oslaw.com

The site seemed lacking, I am not sure if it the high res, big monitor but everything seemed kinda dull and very small. The contrast on the buttons is not the best choice. However, the layout and architecture is very direct and straight forward.
Is this site to boring or am I just spoiled with interactive eye candy?

http://www.wilderness.org

Beautiful imagery and gradients, a logical structure, peaceful colors. A great site all around.
I like the use of orange which represents acticity. It is used for the sign-up button, the take action tab and the Donate button.

http://www.avocado.org

The site made me feel as if I was at the farm, I liked the use of colors and how each one would change depending on which section you are in. Great use of imagery, logical layout, nice backgrounds and borders.

http://carrotcreative.com

The carrot site was very easy to navigate, I like when you can see the transitions so that you know exactly where you are. The colors are strong and the transparent background really brings out the background-image although it looks more like the floor than a desk.

http://www.okeeffemuseum.org/

Website In-Depth Critiques

The Wilderness Society

Chipotle - Mexican Grill
  1. What are the communication objectives of the site? Is there one purpose that is primary?

Both Chipotle and The Wilderness Society are trying to tell us something. Chipotle is telling us about their new way of ordering. You could order online at their website or from your iPhone or iTouch. They are trying to inform us of their new feature in an entertaining way. The Wilderness Society is trying to get you to join(and donate to) their cause by informing us of the problems that face our worlds ecosystems. They give us different types of news sources, all covering events that effect our environment. Many of the articles inform us on a personal level, stating things like Big Oil is lying to you, by developing in Alaska, something they said they would not do.

  1. Who is the target audience for the site? Is there an audience who the site excludes?

The target audience for Chipotle is teenagers, young adults and pretty much anyone that keeps up with technology. This obviously excludes Grandma or any technically inept people. The Wilderness Society does not really exclude anyone, although their pitch is definitely catered to those who might already be sensitive to the issues they are presenting. Usually a slightly older, more mature crowd, who are not as absorbed with mainstream media.

  1. What is your rationale for believing the communication objectives and audience are what you claim?

The demographic for those that use the internet and iDevices do not include the majority of the elderly and non-technical people. The Chipotle site has much more information to offer, however it is almost hidden and could easily be missed by those not familiar with the new changes of the internet. The colors seem to attract a more mature crowd; the tabs on the top add a sense of professionalism, and the layout is very structured and organized. The info being distributed is being written in a way that targets those with a genuine desire to help.

  1. What is the aesthetic look and feel of the site? Why do you suppose the designer chose this look and feel?

The Wilderness Society has a very sophisticated look, the background looks like aged paper and the colors seem to have an aged almost rustic look. The designer probably chose this design to help portray The Wilderness Society as a reputable company that has been around for a while and knows what they are doing. The BBB symbol next to the Sign Up button is not a Coincidence. Chipotle has a very simple initial layout, but the design seems very spontaneous. It is direct and to the point, perfect for those who are undecided and open to ideas. If someone were to ask “I am hungry let’s get something to eat”, this site would be a great answer for them, it shows you locations, and several ways of ordering your food. It makes the decision process very fast and easy.

  1. Does the look and feel support the communications objectives? Why or why not?

Chipotles look and feel does satisfy their communication objectives; the site is very simple and can easily show someone how to make their order electronically. Everything they need is on the initial page and it does not have many distractions. The Wilderness Society’s website does support their objective, they cater to the target audience that is most likely and most able to help them (a more mature audience that is more likely to be able to contribute financially), and they establish their credibility very well.

  1. Does the site have a theme?

The Chipotle site has a Box car racing theme, the instructions are tailored to box car racing, and the structure are in groups of three (think ready, set, go). Even your burrito or car is constantly be customized, it makes your order seem like it will easily be chosen. The Wilderness Society’s theme is that of a folder of an established professional. The different tabs separate the sites different content logically. The content structure is organized very cleanly and the colors are very supportive of the society’s reputation of being established.

  1. How do the design elements (composition, use of color, choice of fonts/typographic design, use of graphics and photos, textures, animation, sound, interactivity, video, etc.) function to reveal the themes and objectives of the site?

The design elements on Chipotle are very simple and clear, the fonts the colors have good contrast and the fonts are fun and exciting. The statements made are bold, branding a cow with a UPC symbol. The fast geared paced, customization of the burrito. The rollover buttons that flash rapidly on rollover states. The design helps the craziness and hastiness of many users anxiousness and decisiveness of choosing what to eat.

The design elements of the Wilderness site support the idea that the Society is an established reputable company. The tabbed layout, the classic fonts, and the calm color scheme. The Huge banner of beautiful imagery gets your attention, and the concerning text on the images really make you think a little bit harder than you might normally.

  1. How are principles of design such as harmony (repetition, consistency, pattern, rhythm, unity); variety (contrast, differentiation, elaboration); balance (symmetrical, asymmetrical, radial); movement (sense of movement, direction, rhythm); dominance (focus and emphasis, sense of hierarchy); and economy (cleanliness, clarity, ease of understanding, purity) applied to reveal the themes and objectives of the site?

The Wilderness Society incorporates many design principles, The website is made up of rectangular shapes, the tabs, the banner, the text boxes, the sign-up section even the logo has an implied area made by the about us tab. The site is very symmetrical and the difference the rectangles and the color and texture and a nice variety. Despite the sites wealth of different information it is very clear and easy to understand, the divisions have a great enough contrast to depict the change of space. The emphasis is on the images of different locations around the world, some in danger and some where it is already too late. The orange donate button and the sign-up tab give you hope that you can help make a difference and stop the beautiful landscapes from turning into commercial ugliness.

The Chipotle site follows design principles as well, even though it seems it might break quite a few. The logo and caption on top is balanced by the links at the bottom. The colors and fonts are repeated throughout the site. The site is consistently active, implying movement and change. Even though many elements of the site are a little messy the amount of white space makes the site seem surprisingly clean. The variety of different images and random changes and interactivity keep you very interested. The design elements make me want to explore, click buttons and inspire me to be bold enough to try the new online ordering system. With everything that is going on I haven’t really thought about security issues, which is usually a major concern of mine.

  1. Are the design elements and principles appropriately applied? Does the design complement (or compete with) the communication objectives? Why or why not?

Both The Wilderness Society and Chipotle apply their principles appropriately although the Chipotle site may make you dig a little deeper. They both are successful at communicating their objectives. Chipotle is trying to set a standard in the food industry, something that cannot be done without making bold choices. Their website is reflective of their company, this is not your grandpas restaurant and the site is not designed for grandpas either.

The Wilderness Society effectively communicated the concerns of it’s current members, and the need for more support, whether it is financially or through active participation. The design reflects the kind of company they are, they are a sincere, no thrills organization that is dedicated to their cause.

  1. How is information structured on the site? What is the site's basic information architecture? How are files and categories organized? Does the site apply a naming convention?

The wilderness site is structured with tabs, and sub categories in each tab. This makes it easier to get back to where you started, without pushing the back button so many times. The majority of the information is articles, the headline and the first few sentences are shown. If the user is interested in the article they just have to click the “MORE” button. This way the site does not intimidate you with lengthy articles that you do not want to read.

The Chipotle site is a complete 180 degrees, The links are all hidden in the logo until you rollover them. I had missed this early on but the do have a key animation signaling to it’s users that there is more to the logo than just the logo. The animation is of a hand spinning c coin and the coin turns into the logo. The site has categories and sub-categories and the pages have page headers so you know which button you clicked on. All the pages are accessible by rolling over the logo and are within a couple clicks.

  1. What is the site's navigational scheme and structure? Is the site easy to navigate? Do you ever get lost or confused? Does the interface present information clearly? Does the interface allow for a logical flow of information?

Both sites are logically organized. The interface is very clear and the sites are easily navigated. The Wilderness Society uses tabs and Chipotle uses a spry menu from their logo.

  1. Can you easily accomplish any tasks that you might want to accomplish on the site? If yes, how did the site make it easy or obvious? If no, what got in your way?

Both sites made it very easy to navigate from one page to another without loading and navigating through excessive pages.

  1. What technologies (HTML, Flash, Javascript, CSS, XML, ASP, PHP, Shockwave, CGI forms, streaming (or progressive downloading) video or audio, etc.) does that site utilize? Does it utilize web technologies effectively?

I would guess that the Chipotle site is done entirely in flash, and Wilderness uses flash to cycle through its imagery. They both use progressive downloading. I could not imagine the wait time on dial-up if Chipotle would load the whole site before being accessible. Wilderness uses HTML, CSS and JS. The Wilderness has a CGI form for the donate and newsletter links. And CGI is probably used in the iPhone app and the online ordering system of Chipotle.

  1. Can you discover any incompatibility problems with the site for people using different browsers, platforms, screen sizes, fonts, modem speeds, etc.?

Both the sites are modern sites using imagery and flash. The Chipotle site I would assume would have more load bars when navigating through the site, many of the transition animations could be data heavy.

  1. Is there anything unique about the site and sets it apart from other sites and/or competitors? Are there special features that the site employs?

The wilderness site has beautiful pictures that capture your attention. The captions in the pictures are quite intriguing as well. The Chipotle site is very entertaining and interactive. Bothe sites have a home page that grabs your attention and promotes you to explore.

  1. How do you suppose the site markets itself? Does it do anything to drive traffic to itself (such as viral marketing) and/or provide reasons for return visitors?

I do not think either site employs viral marketing. The Wilderness society has a very descriptive name and all people interested in the sites objectives could be led here from searching for information or events that is in the content of the articles in the site. Chipotle uses other mediums for advertisements, such s billboards and television commercials.

  1. What is your overall impression and assessment of the site? Does the site accomplish it's objectives? Can you think of design ideas or solutions that would be interesting or more effective alternatives?

Well seeing how I chose both sites because I thought they had great design and were effective at communicating their goals, I can’t think of many suggestions.

Blog Topic #9: Project Research




Excalibur Roofing communication objective is to get you to use their roofing services, they do this by giving answers to your questions and urging you to contact them for an estimate.

The structure of the site is the standard top to bottom left to right. The Logo and contact information is the very first things on the page. Followed by the navigation bar where the information is structured in a very logical way. First the Company describes a little about itself, then a little about what they do. Then they list several options that you might choose that fits your needs. The company follows with convincing you with how good they are with photos of completed work and testimonials. Lastly they give you their contact information.

Excalibur's contact information is clearly emphasized. They also show their certifications and affiliations on the sidebar. This shows that they are qualified to answer questions you might have and urging you to contact them.

The Theme is simple the content consists of blocks that resemble structural elements like pillars or a foundation. The colors are very soft blue, which is calming and inviting.


I have learned the emphasis of the goals that the company is trying to communicate. They want you to know who they are and how to contact them, as well as showing off their credibility.

Blog Topic #8: iPoint Critique

I like the use of colors very much, the blue and the gray match very harmoniously. The image on the front page is very eye catching. I liked the little symbol in the "o" indicating that the company did not only deal in domestic matters. I would have liked to see more congruency with the delivery information, If they are all in the same position independent of what page you are on it is easier to keep track of it.
I liked the color scheme, thought the dark colors was very representative of the company Karl described. I liked how everything was very clearly divided. The logo looked very sharp on the top corner. I liked the imagery on the top, perhaps the image can change with each page. I would have chose to make the page header image fixed so that it lines up with the image above it. The picture needs to be fixed aswell(Maybe you can use the DIVs we learned about). Also the buttons should have the dotted lines removed when activated, and perhaps inverting the color of the text as well as the background.
I liked the colors but thought they might have been a little to dark, maybe an accent color would help. I liked the logo and how the "i point" really stood out. I think some imagery would have really helped as well.
I liked the layout very much, it is nice to see something different about a site, it makes you want to explore more. I liked the animation and how it created the logo, a great way to have your brand recognized further. Great use of shapes the design is very nice. I liked the colors a lot but I do think the city looks like a night shot. I also wanted to mention that the scroll bar allows you to scroll so that there is almost no content on the page.
I felt the design would suit a technological site very well. I liked the use of gradients on the buttons. I thought the navigation was very effective and the colors really helped the information be brought out.
I think the colors really stand out. Th imagery is very beautiful and the alignment is really strong(The page header should line up with the photograph). The gradient background is a nice touch too. I liked how everything was very angular and felt the buttons should also be angular. Perhaps they could be a little larger so the text can be a little more spaced out.
Nice use of lines ans alignment. The effects on the logo was a little much, perhaps bring it down to match the hover states of the buttons. I kind of expected the picture of the phone to link to e-mail also. I really liked the Clients page and especially the bio page, the pictures were really sharp and were positioned very nicely.
I liked the use of background images, and the design elements were pretty cool. I think the buttons hues are too close together and need a little bit of differentiation. I liked the sidebar, it made viewing the content much easier on my wide-screen laptop where many of the sites including my own are cut off in the middle.
I liked the imagery used. And the added informative text comes in very handy. I think the contrast of the links on the bottom is to similar making the text hard to read. The use of greens was to broad. I would ave stuck with fewer shades of green. I would have liked to see the banner only rounded on the top. And maybe you could add some pictures to the bios page.
This was probably my favorite site. I loved the layout and the color scheme. The logo was simple and clever. The images suited the site very well. The only suggestions I could make are the ones that Karl recommended in class. The yellows hue is a little bright. The extra link on the bottom to and from the public and private sector. The bio page implies hierarchy but we all know how hard it can be to find the right images.
I liked the logo but I kind of wonder if the "i" could be the same height as the rest of the logo. The images were very interesting, I thought the clients page with the Network(Style) photo fit very well. The text that takes up the whole width of the page, is a little hard to read. I would have liked to see some margin and the same text areas across all pages.
Very interesting site, it looks very futuristic. I definatly agree with Karl when he was talking about the amount of different depths can get confusing. I would change the images to be on top of the background and not look like it is even lower. I would like to see the use of at least one more distinct color, or maybe the pictures only need a slight tint of the blue. I liked the layout very much, The placement of everything worked very well and seemed to fit beautifully.
The page layout made it very easy to distinguish the different areas of information. I liked the colors but thought it could use one additional color. I liked the use of lines to separate page content, but I felt it could do without on the contact page, perhaps only underlining them. The contact information is one body of information, I don't feel telephone, facsimile or email need to be separate.
I liked the logo alot, and the buttons. I felt the need for a home or about button. I think the banner was too large. I liked how the email-us button was very noticeable, probably the main purpose of the site, to help lead generation. I liked the colors a lot but I would have liked to see the red balanced, maybe with the same color bar on the bottom.
I think the colors really made the site easy to view, they work really nice. I like the structure of the page a lot, but I wish there was a little more distinct division of the different elements. Maybe you could use lines or change the colors when doing the banner or button area. The imagery you have is very good, but I think you could add to it. I would try adding some pictures.
I liked the fact that the layout scaled to different browser sizes, and maintained the structure. The buildings were very cool and the colors worked well together. I would have liked to see another color in the color scheme. The navigational structure was very easy and clear. I liked the gradient line in the page headers.
I liked the colors and page structure a lot. Everything seemed to be in the right place and it flowed very logically. The gray and gray looks very sharp, orange is a good accent color, just make sure the text has enough weight(bold) so it can easily be read. Some of the pages page headers are inconsistent, I would not have them change position. The links on the bottom should be evenly space as well. It would be a good idea to have similar size and shapes of the pictures in the bio, I like the composition of the four to the left, it would be fun to try and use gradients to blend them together.
The page layout and structure was very cool. I was a little confused by the buttons over states, when the actual text seemed to move. But I liked that the button indicated which page you where on. I liked most of the colors, but I think I would have used a different color to replace the light blue background, actually maybe have a variation of background color when it comes to the page header, buttons and/or the text content area.
Nice simplistic design, very traditional. The colors chosen go well with each other. I could not find any errors in the site, and everything seemed to work really well together. I would have liked to see some imagery, some type of dynamism would be fun to add.
Very nice design, I liked the curves very much. I liked the repetition of the circles found on the services page and the gradient behind the buttons. The colors were very cool, the different grays had just the right contrast. The only thing I noticed was that some of the images mostly text was a little over optimized.
The navigation buttons were a it confusing, changing depending on which page it was on. I liked the color scheme a lot and I thought the logo was very clever using lower case "i"s in the name. The structure fit perfectly on my screen, and it seemed to scale appropriately.
I liked the site colors very much. The pictures and layout and text were very cool. I liked the logo a lot. The button navigation was cool, but I would have made a few changes. I would leave the over state of the button when on a certain page. Also the bio pages should have links to all the people on the actual page, not just from the spry drop down menu(It took me a little while to find it).

If you have any clarifying questions about my comments please feel free to e-mail me at ouyang.klarence@gmail.com or ask me in class.

Blog Topic #7: Net Neutrality

Save The Internet

What Net Neutrality means to Me
(and You)

If the Internet did not have open access requirements then Internet Service Providers (or ISP's)
would be able to control the lines that the internet runs through, they would be able to limit access of certain users, limit bandwidth of certain users and choose which types of media they want users to view. AT&T would be able to block it;s users access of say VOIP services, thus forcing them to purchase their own services.

Network Neutrality is the idea that all persons have a level playing field online. Everyone has the right to have the same chance as everyone else. If you started a software company and wanted to sell your software online. You have a similar chance as other more established companies. But if your provider limited your bandwidth users might find it painful to navigate your site, thus choosing another software company.

The winners will be those that stand to control the internet (AT&T, Verizon, ComCast, Time Warner Cable) as well as those already established corporations (Microsoft, Adobe, Apple, SunMicro Systems) that can afford to pay for the selective service. What if your software company offers better software at a better price, but can not afford the steep selective service fees.

The losers will be the average person, (You and Me) who not only will not have a chance to enter the marketplace of the more established businesses, but we will not be able take advantage of others great work.

Do you like using VOIP services like Skype, which is much cheaper than traditional phone service? Do you like using peer to peer communications easily sharing information with?
These service are likely to be greatly affected or even shut down. Services like Internet radio, podcasting, multimedia applications, video blogging, and Internet TV stand to be totally monopolized.