Content Audit - observations & connections

Three different websites whose purpose revolves around books the want to read and storytelling. Even though all three of them are different. One ending in .com, one in .net and the last one .org. Even though they vary in their format there are multiple similarities and things that I have observed. Some similarities that I noticed were things from navbar area, main content area, color, texture, footer, interactivity, and logo design and placement.

In two of these websites the navbar seems to be divided into two areas. The top horizontal navbar contain links like home contact and other basic links that are highly relevant to the purpose of the website. The second navigation area hold the rest of links like donate, calendar, or acts as a second navbar bar but only vertical. Also, all three website’s log/title is made up of type but has a mark or abstract image combined into the title/logo. Besides how the logo is created, the colors that the different logos use seem to reappear where highlighting text headings, rollover, and background color for the navbar links. This occurs in no two but all three of these websites.

All three websites’ logo are not in the same place but are always situated somewhere in the top left of the web page due to the studies that show people skim/read in an “F” or “Z” pattern. The only one that is not situated in the top left is still effective. It divides the navbar in half. Four links on either side that makes people feel like they have choice and yet not be overwhelmed by all the choices they have to click.

When creating the content audit I became aware of website content went highest to lowest, .org, .net, and .com. The last thing I observed during my audit was that the .com website did not have social media icons or direct the viewer to the facebook or twitter page. In today's world social media is becoming very important, if a website doesn’t have any links of social media , facebook, twitter, vimeo, youtube, pinterest, and ect, I consider it to be unfinished.

Content Audit - screen shot

Here are screen shots of my content audits for my three websites. Purple is the home page, blue is signifies other main link pages, and gray is links that take the viewer off the website to another website.

Reverse Wireframing - Recreate website & reasoning

Below is a recreated wireframe of the Massachusetts Poetry Festival home page.

Out of all three websites this one needed the most help. There are pictures that are broken on the home screen and little to no hierarchy. The page content is all vertical followed by comment.  Some of the comments are not even in english. With all the comment vertical there is no visual interest. Uses appreciate “surprise and delight” and in this form there is none. Also, with the massive amount of text that is closely knit its not easy for the viewers to “scan” the page for important information and key words. So, after reading the homepage I came up with a header followed by a navbar, a main features area, three sub sub content areas, and a footer.

The reason I did this is to break up the information. When reading the homepage there was a lot of text that could be broken up into three categories, upcoming events, admission, and a comments/discussion area. These three categories will act as the sub area which will navigate the viewer to a subpage to learn more about upcoming events, admission, or what people have or are saying about past and present poem festivals.  Breaking down the main body of content increasing scalability and “surprise and delight” factor.

Reverse Wireframing - home and sub pages

Home webpage and sub page for Princeton Children's Book Festival

Home webpage and sub page of Massachusetts Poem Festival

Home page and sub page of International Storytelling Festival

Final - Flowchart version 3

After reviewing the critique comments left on my printed out version 2 lots of things needed to be changed. Most of the changes revolved round colors, arrows, and missing elements. Instead of using colors that I like for no apparent reason I used my actual dinner plate trying to find out the best setup that leaves enough edge space and space between flowchart, key, and title. So far what i think it is much better that my original.

FInal - Flowchart version 2

The updated version changes some things around.  Added arrows changed colors of boxes and organized using arrows the flow in which I took to eat dinner. Looking back on this version I would love to know what I was thinking. I had no key or title.  Even when my professor was explaining the final project I could not understand the boxes with out a key.  Thankfully this version wasn't the hand in version.  Time to make changes and improve!

Final - Flowchart version 1

This is my incomplete very beginning stage of my flow chart.  Really bad I'm know.  Totally random color choice and the arrows not even put in yet.  However, there is a lot of potential.

FInal - Flowchart Event Observed

So the event I choose to make a flow chart out of was "what to make fordinner on a late night".  Basically the ever important question of to be lazy or not.  Then all the steps and choices and options I took to end up eating my chosen dinner. Gumbo for dinner to end a day perfect!

Final - website choices

The first event website I choose was the international storytelling website. Then we we tasked to find other event based websites of the same genre.  After hunting around for a bit I found two others; Children's Book Festival through Princeton Library, and Mass Poetry Festival.

http://www.storytellingcenter.net/festival/

http://www.princetonlibrary.org/find/kids/book-festival

http://masspoetry2012.crowdvine.com/

Pannifino FInal Due Dates

Tuesday Dec. 11: 9-11am
     -finish adjustment on flowchart, print in color and trim
     - will take multiple choice test on chapters 6 & 7

Friday Dec 14: 12noon
Uploaded to Blog, no need to show up!
     - Screen shots of content audit and 300 word summary of connections and observation.
     - Reverse Wireframing and Composite Wireframe with 200 word summary of reasoning.

Group Work

Out of class meeting with my group member and lab tech.

CSS page design 100%

Added a subtle texture behind the txt, centered sidebar links, added sound waves to enhance "plugged in" theme. Also, made sure that all txt that was a link inside of body by like color and underlined.

CSS page design 75%

Changes font choice for header and added rest of txt. Cleaned up headphone cord to make more smooth and finished.

CSS page design 1

This was my first "50%" done picture of what my website was to look like. Not very extensive.

Version 2 Style Tiles

Made some changes from original tiles that are college student themed.  Still not satisfied with the color theme of the second one.

CSS Zen Garden Style Tiles

Here are two different versions of style titles ideas.

Mind mapping & Visual Diary

Below are pictures of mind mapping and visual diary pages that are going to help me decide my theme for my CSS Zen Garden Website.  So far I've decided to go with a "plugged in" through the use of headphones and earbuds.

Website After Critique Changes

HAd a few minutes after the class critique to changes a few things.

Website Design In-progress V3

Final version. Added a footer and boxed subinfo thats relevant to two main topics. Spent time trying to make hanging quotes work with new layout but had to axe them. Fiddles with colors and nav bar hover colors.

Websit design In-progress V1&2

Version 2 of my website.  Changed the background. Changed the layout for straight txt to boxing some txt and trying to fix the hanging quotes. Also, added nav bar.

Version 1. Did a very simple layout. Focused on typography mostly and using natural colors.

Lynda Videos Summary

After watching these videos a few things have come to my attention about being a graphic designer. A Graphic designer is a very broad area, it is wise to not limit yourself. Since, the world has been moving more to the web, a graphic designer should not just limit themselves to print. They should become familiar with web design whether front end or back end development.

My Summer Web Page