Content Audit

My content audit is large so I took 2 screen shots and also put it up on the server for this class under my name as the folder.. What I noticed while looking at the content from all three sites is that 2 out of the 3 sites are very similar. The Macy's and American Music Theater sites are similar in that they both have a navigation on the side with a similar amount of links within that. Within some of those links were more links to other pages but they mostly remained on that page. The first 2 were very dissimilar form the last. The last site seemed more advanced in its organization and design. The Macy's site has similar navigation but the Rockettes site organizes the navigation so that the user has a better experience. It has tickets, store, and facts about the show. The Rockettes site puts all of that information into main categories and sub-categories. On the Macy's site the navigation is simply laid out on the side for the user to try and figure out. The Macy's site has no sub-navigation so there's no way to tell where you are in the site. I also noticed that everything is on one page on the Macy's site. You can see that with the main content page that almost all of the navigation links lead to that page. On the American Music Theater page the sub-navigation leads to multiple pages. This is undesirable for a user because the user would have to scroll continually down the page rather than just clicking on the next set of links in the navigation. Something else I noticed was that the Macy's site doesn't have an about page. It has details about the show but they are scattered in their own links. When I have the opportunity to change it I will make an about page including all of the necessary information instead of having 3 different links for one concept.

Wireframe 3

This is my third wire frame. It is a site about the Rockettes. It also a Christmas themed site.This site is quite different from the Macy's site. It has navigation and the header at the top. Underneath that there a 5 banners instead of a main content. The sub-page contains the main content. Unlike the other site, this site's usability is more advanced. The user can navigate clearly through the site.

Wireframe 2

This is my second wireframe. I noticed that this site is planned out better than the main one I am working on. There is a primary navigation and a secondary navigation clearly laid out. The sup page is less well designed. Then banner is placed in an odd place so I would move it but it is similar to the Macy's page.

Wireframe 1

This is my first wireframe. This is the main site that I will be recreating in the second course. This website is a website for The Macy's Light Show in Philadelphia. The home page layout has a wrapper, informational header, primary navigation, main content, and the footer. The links in the navigation connect to the main content but it all lies on one page. I think the weakest part about the layout of this web page is the main content. The reason why having all of the content on one page doesn't work is because it is much harder to navigate. It would be easier for the user to get content on each page as if it were its own. There's also no "Back to Top" button for each section so the user has to scroll to the top if they want to go back to the navigation. It is also hard to identify what sections belong to what headers and links. This can confuse the user. On the sub-page, the links also change. That can also confuse the user. The site needs to be consistent so the user can easily find the information they are looking for.
The changes I made were simple changes. The first thing I would do would be to put all of the main content on separate pages connecting to separate links within the navigation. I would have a primary navigation with 3-5 general areas. If the user were to click on one they would find a secondary navigation on the left-hand side. I would also move the banner outside of the main content under the secondary navigation because it can be its own entity. I would create a smaller header with an informational header to the right to draw the user in.

Flowchart

This is my final flowchart. I made a lot of changes. I changed the typeface to something more playful and hand written. I connected the arrows into each box so that it connected the points. I also changed the color of the alternate path arrow because it was too close to the other one before.

This is a flowchart I made about playing the guitar.

My Web Page

This is my working website.

This is a picture of me and LeAnne in the computer lab on Friday working on our websites.

This is my first style tile. For this one I wanted to make something that resembled subway maps. I used to

dotted letters for the Heading of my page. I also took colors from the maps that I could find. I also want to use a map key as my navigation on my website.

For this style tile I wanted to keep going with the subway map idea. My idea is to use the routes as lines that go through the page separating content like a unorganized grid. I have images that would be placed on different stops in the route.

This is my revised website. I decided to male the links a different color so that they stand out from the other type. I also changed the wrapper so that it was flush with the top of the screen.

This is my web site based on typography. I wanted to go for a more sophisticated look because the article is about reading and typography.

This is what I did in class today working with type.

These are my two backgrounds and the center image for the website. For the first one I wanted to imitate a keyboard but after seeing it, I feel like it is overwhelming. For the second image I wanted to imitate a computer and keep a simple image on the web page.

Web Design Tutorials

The tutorials online were about web design and how a website works. One of the main things I learned was that a site not only has to look good but it has to function as well. When working on a website you need to determine your goals, generate mockups, and test the website. Something I hadn't known about before was information architecture. It is the art of organizing. When organizing a website the navigation should match your goals for the website and you want to make it meaningful. For interactive design, many designers just focus on one type of interactive software. When designing you want to know your audience because that can influence your site. There is a lot of terminology but I'll go over a few. The first is URL which stands for uniform resource locator. In a url there is a protocol and domain. these tell the server what type of file it's looking for. A DNS is a domain name server. This server converts the domain into an IP address. Different browsers have different javascripts and layouts. HTML, CSS, and XML are all ways of creating web pages.

This was mostly a review for me because I did html in Computers and Design. I remember having create end tags for everything you start. The hardest thing I think is that if you miss one character then it messes up the whole thing. I learned how to put an image on a website and to create a list.