Formal
Reflection
This class forced me to stray from my dominantly abstract and expressionist style to more linear and functional graphics. I highly enjoyed working on the Not-for-profit website because I got a chance to help an organiziation I love, and experiment with a new and open graphic style. I had no knowledge of dreamweaver or fireworks coming into this class but I now feel confident in my ability to work with the basic functions of both programs. I found Mr. Armstrong to be very easy to talk to and informative. Mr. Armstrongs expectations were clearly stated in Blackboard and all assignment instructions were easy to find.
Informal
Reflection
The class was easygoing and fun. Naturaly, all assignments were expected to be turned in but the preasure and intensity of working on them was absent. Chuck was humorous as he was informative and explained things in a way I could understand them. I enjoyed working on the assignments and the in-class critiques actually helped me become aware of problems with my work. I enjoyed hearing Chuck rant about the cone coming up on campus and his plots to turn it into his office.
Criticism
The assignments from the book were a little dry and I had a hard time retaining any information given from it.
Thursday, December 10, 2009
5. NFP Defense
Old: http://www.civic.evansville.net/CIVIC%20MAIN%20PAGE%2008-09.htm
New:http://www.andy.usi-artspace.com/index.htm
Evansville Civic Theatre
After examining the Evansville Civic Theatres website I was convinced that it was not properly representing the Evansville Civic Theatre as a well organized establishment. The site navigation changes when "about us" is selected, the cream colored box around the body text is awkwardly placed over the maroon background, the top navigation panel consists of hard-to-read performance posters and are not distinguished from the cream colored background, the websites vital information was scattered across several navigation links, and entire site was very closed-in and horror-vacui.
My page uses white space as a clean and open spacing solution and decrease eye fatigue. I use white space as a sort of thesis for the entire website. White gives off a clean, sleek, and open feel.
To prevent the white space from completely dominating the site, I added a brown bar at the top of the page . The brown bar was carefully sectioned and modified from its original gradient. The vertical rectangles along the right side of the bar counter the strong horizontal emphasis that the brown bar imposes. By gradually lightening the color as it progresses to the right, the bar loses its dominance over its content and becomes an interesting graphic element rather than a mass of brown housing a logo.
The square logo on the upper left of the brown bar was placed for both nostalgia and balance. With the majority of the page being linear and anti-dynamic, it was necessary to hint at the possibility of dynamic images. The primary logo/title on the brown bar is a modified font that embellishes modest flourishes to counter the strong linear design of the page. The elegant sweeping gesture of the "C" in Civic Theatre" serves three purposes: To wrap around the text below "Civic Theatre", to offset the geometric emphasis of the rectangle binding the whole graphic, and to add elegance to the page. The graphic was made with both the shape of a ticket and a stamp in mind. The rectangle binding the graphic is a common visual element in both stamps and tickets, the small text above and below "Civic Theatre" is a common element of stamps, and the block font of the text above and below "Civic Theatre" is common in tickets. The visual tie to tickets was done for obvious reasons but the tie to stamps may not be as obvious. Stamps, be them inked or paper, are staples of timelessness. Paper stamps are collected for nostalgia and mark a certain time in history. Ink stamps record a certain time in history and are well traveled in that once they are placed on a package or envelope, they travel with the said item until they reach their destination. Stamps relate to theatre in that Theatre marks a set time of history with the vocabulary in its script, can record social issues (dramatized though they may be) of the time, and performances are well traveled in that a single play can be performed worldwide. With this explanation, I hope it is clear why I chose to incorporate the visual elements of stamps into my logo because it would be a shame not to see the relation between stamps and theatre.
The sites navigation has been organized into three distinct fields. The top navigation contains the most basic and well-traveled links. These navigation buttons are bound in ellipses to contrast the horizontal bar above them with organic shape. "This Season" contains any information on the activities pertaining to the current season of the Evansville Civic Theatre. "Community" contains in-site links to any pages relevant to community related subjects such as donating -a link that the original site did not contain- or participating.
A unique page to this site is the Performances page (http://www.andy.usi-artspace.com/Performances%20page.htm). A muted grey rectangle starts where the performance posters begin and extends to where the posters end. This rectangle was placed to harmonize with the rectangular performance posters and to give the text below the posters something to brace against.
The titles on each page are aligned to the right of the page as opposed to the traditional left alignment. I did this to prevent the page from resembling a template ,to break from tradition, and to offset the weight of the page i.e. to prevent the page from being left-side dominated. With the left navigation bar being as long as it is, I felt that the page needed something on the right side. The page title does its job more efficiently on the right side of the page because it is not competing with the navigation bar on the left. The title size is large enough to distinguish itself as a title but not so large that it dominates the body text.
Overall, my website is simple in appearance but is the product of hours of musing over the strategic placement of text. Since theatre is an extremely visual media it was important to contrast it with the opposite extreme to give it balance. I would categorize my site as minimalism. With each element placed, new troubles emerged and other visuals no longer did their job. The main trouble with a dominantly open spaced website like mine is that if the visual elements are not placed in such a way that they maximize the ascetic value of the elements around them, then they ruin the rest of the page. In short, whatever element doesn't add to the ascetic value if the page is ,by nature, subtracting from it. This concept is difficult enough with images but it raises newer and greater troubles with text. Since text is spaced, it shows the white background behind it and has trouble competing for the foreground. When placed with precision and balance, text can potentially bring more beauty than an image; I would like to say that this is the case with my website, so I will.
I would challenge the person who calls this layout conservative or claims that little work was put into the design. This design is not conservative because the maximum amount of spacing and text has been applied to ensure both symmetrical and asymmetrical balance remain in-tact. It would have been much easier to use images in this website but that would have been highly unoriginal because theatre traditionally incorporates images.
I decided to make the bold move of putting text in the spotlight rather than the image because theatre does the exact opposite. In a performance, an actor or actress recites their lines but the emphasis still remains on the visual performance rather than the script. With such an unbalanced emphasis it seems only natural to balance it with the opposite gesture: to emphasis text supported by visual. Since text was the new visual for this site it became necessary to make it as ecstatically pleasing as possible. With no image to accompany it, the text needed to be perfectly balanced in as many ways as possible. The solution is simple shapes and colors that support -not dominate- the text on each page.
So,
By using a surplus of white space to create a clean but not sterile background, the text becomes easy to focus on. The white space is still noticeable while reading the text, fulfilling the goal to balance the open space with text.
And to those who say "Your page is too open", "There is too much white space", or "This looks like it was done at the last minute"...
New:http://www.andy.usi-artspace.com/index.htm
Evansville Civic Theatre
After examining the Evansville Civic Theatres website I was convinced that it was not properly representing the Evansville Civic Theatre as a well organized establishment. The site navigation changes when "about us" is selected, the cream colored box around the body text is awkwardly placed over the maroon background, the top navigation panel consists of hard-to-read performance posters and are not distinguished from the cream colored background, the websites vital information was scattered across several navigation links, and entire site was very closed-in and horror-vacui.
My page uses white space as a clean and open spacing solution and decrease eye fatigue. I use white space as a sort of thesis for the entire website. White gives off a clean, sleek, and open feel.
To prevent the white space from completely dominating the site, I added a brown bar at the top of the page . The brown bar was carefully sectioned and modified from its original gradient. The vertical rectangles along the right side of the bar counter the strong horizontal emphasis that the brown bar imposes. By gradually lightening the color as it progresses to the right, the bar loses its dominance over its content and becomes an interesting graphic element rather than a mass of brown housing a logo.
The square logo on the upper left of the brown bar was placed for both nostalgia and balance. With the majority of the page being linear and anti-dynamic, it was necessary to hint at the possibility of dynamic images. The primary logo/title on the brown bar is a modified font that embellishes modest flourishes to counter the strong linear design of the page. The elegant sweeping gesture of the "C" in Civic Theatre" serves three purposes: To wrap around the text below "Civic Theatre", to offset the geometric emphasis of the rectangle binding the whole graphic, and to add elegance to the page. The graphic was made with both the shape of a ticket and a stamp in mind. The rectangle binding the graphic is a common visual element in both stamps and tickets, the small text above and below "Civic Theatre" is a common element of stamps, and the block font of the text above and below "Civic Theatre" is common in tickets. The visual tie to tickets was done for obvious reasons but the tie to stamps may not be as obvious. Stamps, be them inked or paper, are staples of timelessness. Paper stamps are collected for nostalgia and mark a certain time in history. Ink stamps record a certain time in history and are well traveled in that once they are placed on a package or envelope, they travel with the said item until they reach their destination. Stamps relate to theatre in that Theatre marks a set time of history with the vocabulary in its script, can record social issues (dramatized though they may be) of the time, and performances are well traveled in that a single play can be performed worldwide. With this explanation, I hope it is clear why I chose to incorporate the visual elements of stamps into my logo because it would be a shame not to see the relation between stamps and theatre.
The sites navigation has been organized into three distinct fields. The top navigation contains the most basic and well-traveled links. These navigation buttons are bound in ellipses to contrast the horizontal bar above them with organic shape. "This Season" contains any information on the activities pertaining to the current season of the Evansville Civic Theatre. "Community" contains in-site links to any pages relevant to community related subjects such as donating -a link that the original site did not contain- or participating.
A unique page to this site is the Performances page (http://www.andy.usi-artspace.com/Performances%20page.htm). A muted grey rectangle starts where the performance posters begin and extends to where the posters end. This rectangle was placed to harmonize with the rectangular performance posters and to give the text below the posters something to brace against.
The titles on each page are aligned to the right of the page as opposed to the traditional left alignment. I did this to prevent the page from resembling a template ,to break from tradition, and to offset the weight of the page i.e. to prevent the page from being left-side dominated. With the left navigation bar being as long as it is, I felt that the page needed something on the right side. The page title does its job more efficiently on the right side of the page because it is not competing with the navigation bar on the left. The title size is large enough to distinguish itself as a title but not so large that it dominates the body text.
Overall, my website is simple in appearance but is the product of hours of musing over the strategic placement of text. Since theatre is an extremely visual media it was important to contrast it with the opposite extreme to give it balance. I would categorize my site as minimalism. With each element placed, new troubles emerged and other visuals no longer did their job. The main trouble with a dominantly open spaced website like mine is that if the visual elements are not placed in such a way that they maximize the ascetic value of the elements around them, then they ruin the rest of the page. In short, whatever element doesn't add to the ascetic value if the page is ,by nature, subtracting from it. This concept is difficult enough with images but it raises newer and greater troubles with text. Since text is spaced, it shows the white background behind it and has trouble competing for the foreground. When placed with precision and balance, text can potentially bring more beauty than an image; I would like to say that this is the case with my website, so I will.
I would challenge the person who calls this layout conservative or claims that little work was put into the design. This design is not conservative because the maximum amount of spacing and text has been applied to ensure both symmetrical and asymmetrical balance remain in-tact. It would have been much easier to use images in this website but that would have been highly unoriginal because theatre traditionally incorporates images.
I decided to make the bold move of putting text in the spotlight rather than the image because theatre does the exact opposite. In a performance, an actor or actress recites their lines but the emphasis still remains on the visual performance rather than the script. With such an unbalanced emphasis it seems only natural to balance it with the opposite gesture: to emphasis text supported by visual. Since text was the new visual for this site it became necessary to make it as ecstatically pleasing as possible. With no image to accompany it, the text needed to be perfectly balanced in as many ways as possible. The solution is simple shapes and colors that support -not dominate- the text on each page.
So,
By using a surplus of white space to create a clean but not sterile background, the text becomes easy to focus on. The white space is still noticeable while reading the text, fulfilling the goal to balance the open space with text.
And to those who say "Your page is too open", "There is too much white space", or "This looks like it was done at the last minute"...
Thus I refute thee
4. Lawn Art Critique
http://msybert.willyworld.org/lawnart/index.htm
The Good
The Good
- The lawn art images link very well with the text adjacent to them. The homepage clearly indicates that the site is about lawn art and whets the viewers interest with an interesting opening quote.
- The black background is a crisp contrast to the images and holds its negative space very well.
The Bad
- The site navigation changes depending upon which page is being viewed making it slightly challenging to browse the site.
- The body text for each image is somewhat difficult to read due to its calligraphic nature.
Overall this is a very pleasing site. The layout is simple and straightforward. Score: 4/5
http://www.taz.usi-artspace.com/
The Good
- The site navigation is very clever and distinguishes itself from the rest of the page with a clean rollover effect. The flamingo is an icon in lawn art so it is very fitting that the flamingos beak should point to the navigation as a rollover effect.
- The pages are intellectually stimulating in that that show multiple visuals and toss small puns here and there.
The Bad
- The image background gradient competes with the the text and images for the first read. This may not have been a problem if the site background color had been changed to something darker such as purple or black but as it is, the green competes with the visual elements for the foreground.
- Though the site navigation is very clever it is a tad awkward to navigate with. It should strongly distinguish itself from the rest of the graphic elements or it runs the risk of being mistaken for a logo. If the ellipse binding the navigation had been more rounded like a circle and if the text within it had been evenly spaced and padded then it would be clearer that it served as the site navigation. The idea for a non-traditional site navigation is a brilliant one but in this case it needs a bit more tweaking.
Overall, this site is very clever and holds its graphic elements very well but it just needs some improvement on the crispness of its shapes and more diverse color choices. Other than the mentioned problems, this is a very well made site. Score: 4.8 / 5
http://ethan.usi-artspace.com/Lawn%20Holidays%20Revision.htm
The Good
- This site uses dynamic images as both high opaque and low opacity that work very harmoniously.
- The site navigation gives small, low opacity examples of what they link to. This not only adds to the informative power of the page, but it adds to the ascetic value.
- The use of moderate-high opacity rounded boxes for the body text of each page by preserving the images readability with the mentioned low opacity and supports the black body text with the maximum level of contrast without interfering with the high image load of the pages.
- The contact details at the bottom of the page are clever in that they support the thesis of lawn art by marketing on the sites viewers with the "purchase ornaments" pseudo-link.
- The sans-serif font chosen for the body text is readable even at a small size.
The Bad
- The site navigation is inconsistent between the pages because it does not include the link to the page currently being shown. The reason that this is a problem is that it prevents the site viewer from predicting where the next navigation image will take them.
- The site background color changes in accordance to the dominant color of the main image on the site. This is clever but it draws unnecessary attention to the background of the page currently being shown.
Overall this is a well done site. Even though it is image-heavy it does a very good job of keeping the images organized and,with the exception of the navigation, maintains the placement of the images on each page. Score: 4.5 / 5
Tuesday, December 1, 2009
USI Website critique
The Good
- Navigation: Besides the "myUSI" button, the left navigation bar is well organized and clearly indicates what goes where.
- Images: The flash video at the top of the page is eye-catching and informative. The links in the center of the page are very clearly summarize what they link to.
- Color: The colors of the website mimic the USI logo.
The Bad
- Navigation: The navigation seems slightly cluttered in my opinion. The "myUSI" button confused me when I first used the website because I was not aware that it led to my student email, blackboard, etc. and I spent about 5 minutes searching the site for them. Both the top and the navigation bars very awkwardly change in size between the sub-pages of the USI website, making it confusing to read and difficult to navigate.
- Images: The thumbnail images in the center of the page seem too large for their relative links in that they create too large of a margin between the links. The images in general seem spaced out and disorganized. I get the impression that the USI website was created from a template. The images, particularly the top logo, changes from page-to-page making it confusing to determine wether or not I've navigated away from the USI website.
- Color: The colors seem condensed and tightly packed against one another. I think that this is due to the awkward placement of the left navigation bar and it's awkward background image color; green has no place on the USI website.
- Space: The space seems very horror vacui. The visual elements appear to battle one another for attention and argue over which one will be read first. The left navigation bar is too short to demand attention to itself and stand out as the primary navigation. The text on the left navigation bar doesn't have enough padding on the bottom and not nearly enough at the bottom. The images at the bottom of the left navigation bar are too close together The website could benefit from being able to scroll down. Condensing this much information into such a tight space is overwhelming.
My Recommendations / What Needs Changing
- Navigation: Move the left navigation bar down so that it borders the red space holding the search bar and extend the left navigation bar to the entire length of the page even if the majority of it is bare. Keep the top navigation bar and USI logo above it on every page and sub-page to establish the pages as official USI pages and preserve the ease-of-navigation from page to page.
- Images: Decrease the size of the flash video by 1/4 so that it doesn't dominate the page. Include a photo gallery with images of the campus buildings from multiple angles so the new students know what to look for when going to class. Include pictures of special attributes of the campus buildings such as student lounges, Starbucks, sandwich shops, etc. so that students can plan quick stops between classes to study or eat. If I had been aware of the sandwich shop in the Liberal Arts building in my freshman year then I would have established that location as my home base between classes.
- Color: Stay consistent with the color scheme of the pages and sub-pages.
- Space: Move the "Campus Events" panel below the "University News" panel. Moving the Campus Events panel will increase the breathability of the page and decrease the information-to-space ratio and eye fatigue.
Overall, maintain the professional appearance of the USI website by staying consistent in the placement of the navigation bars. If this is done then viewers will have a central location to let their mouse idle while they read the information on the page.
Examples of Strong Graphic Elements
- The navigation at the bottom of the University of Minnesota is nicely placed and easy to read. - http://www1.umn.edu/twincities/index.php
- The padding between the "Events", "Spotlight", and "Academic Programs" panels on the University Of Chicagos website makes for a very breathable and informative data display. - http://www.uchicago.edu/
- The top navigation bar of the University of Virginia is extremely easy to read and clearly indicates what their relative drop-down menus hold. The drop-down menus are very well organized and clearly indicate what they lead to. - http://www.virginia.edu/
- The University of Michigans website is a prime example of medium-toned geometry that produce little to no eye fatigue while clearly housing navigation options. The page has very few images but still maintains a strong visual appeal. - http://www.umich.edu/
- The Univeristy of Oregons website is very similar to the current USI website in its placement of navigation but does a much better job of reducing eye fatigue because of the easy color transition between the left navigation bar and the background color. - http://www.uoregon.edu/
What do these sites have in common?
- Each of the listed sites has a delicate balance between information and unused space. The use of space is absolutely vital to websites. Too much open space combined with poor visual hierarchy allows the viewers eyes to wander around the page without guidance. Too much open space with a strong visual hierarchy draws the viewers attention to the use of visual elements rather than the information they hold. An example of strong visual hierarchy and too much open space is a website with vividly colored and strong geometry binding short body text and navigation, and a high contrast between the geometry colors and background color. The viewer tends to focus on the steep contrast between the geometry and background instead of reading the body text.
Conclusion
- The University of Virginias website has an outstanding top navigation bar but all the navigation on the page is overpowered by the flash videos and contrasting colors. The University of Michigans website boasts an outstanding use of soft colors. If the two websites were to combine the mentioned assets then the result would be an organic and professional website with clear navigation combined with a fine tuned ratio of information to color to open space.
Subscribe to:
Posts (Atom)