Flowchart

This is the flowchart that I created through the process I go through when lifting at the gym. The first image is the initial flowchart created with the corrections that people thought I needed to make. I changed the design and I think the final version works much better then the first one.

Reverse Wire Frames

I created reverse wire frames for the same websites that I did content audits for next. The reverse wire frames shown the overall basic layout of each site and is easier to see design flaws. Football hoops website is very simple and is basically designed in horizontal bands. The bands are sometimes broken up in half and then an image or video is placed in one half and body text on the other side. This layout fills the website up fully and doesn't have any blank space in the design. The helmets vs shields site has a simple 2 column system and then a side bar that is on all the pages. The two column system works well except for the addition of the side bar too. The side bar doesn't have anything that is really needed or important enough to be on every single page. The final page is the hoops for heroes page, This site is laid out pretty well. This page has the main site block and then has a sidebar that has important information that is repeated.

My layout design is a hybrid of all three. I took the idea of have a main header that all of them had as well as the top horizontal navigation. I think a simple 2 column layout would work well with this kind of site and on the main page just have a feature section that you can add videos or photos.  

Content Audits

I did content audits for three websites with similar themes. The general theme that I went for was basketball charity games of some sort. All three sites had some things in common such as a top horizontal navigation and clear depiction of the navigation. At first glance the sites seem to be set up well and with minimal things wrong navigation wise, but once I completed the audit of the sites many incorrect things arose. Starting off with the helmets vs shields site, this site had issues such as each page of the website had a header before the body copy which was a clickable text link however the link was to the page that you were currently on already. After going through the other site (footballhoops.com) I noticed things that were wrong with this site as well. This site has clear navigation at the top but as you click the links to pages and that page loads the incorrect page would then highlight and became confusing as to which page you were on. The last site was hoopsforheros, this site had good navigation going throughout each page the only thing was there was the same exact links on most pages. Possibly this site could be cut down in the number of pages and consolidated into a couple pages instead. Though the sites had some things that could definitely be changed, there was a solid base to start with. If these sites would change some minor things that were only noticed really once auditing all the content then the sites could be quite successful. I think by doing the content audits of sites the navigation mistakes come to the surface quickly. I feel this is a good thing to do for a companies site to make sure everything makes sense. Though tedious the end results of what surfaces is very important.

Final Site

This is the final coding for the website created. The top photo is the css code and then the html code displayed next and the final image is the actual website displayed in safari.

Template

This is the wire frame for the final zen garden website that I will be creating. Next step will be doing the HTML and CSS for the site.

Style Tiles - Zen Garden

These are 3 different style tiles that I created for the CSS zen garden website. I ended up choosing the last one and then moving on and creating a wire frame for the site to work off of.

He made do this!

Tuesday Dec 11: 9-11 am

Finish adjustments on flowchart, print in color and trim

will take multiple choice on 5 and 6


Friday dec 14 by 12

upload to blog NO NEED TO SHOW UP!!

Screen shots of content aufit and 300 word summary of connections and observations

reverse wireframing and composite wireframe with 200 word summary of reasoning.

Web Design

This website was made to experiment with changing fonts to differentiate between different sections on a page.

Top Container

This html was created to make a website that had 3 different sections. The top was created for a header and then a body box was created and then a navigation bar.

Text Selectors

I created an html document with h tags that were used for 4 different headers. The h tags were then altered using css. The headers had different fonts and colors

Art and Design

This is a redesign of the millersville art and design website header. The header was created in illustrator and then input into the current html code.

Font face

This is an exercise to learn how to use font from an external source and to input them into a website. The font was used was from google web fonts.

Classes and id

This was an exercise to learn how to create styles on text using divs and ids.

2 Boxes

This was an exercise to experiment on placement f div's in a website.
First created the boxes in my css stylesheet and then placed the two boxes in the html, using different colors so I could see the different boxes.

Web Design Tutorials

Viewed some web design tutorials on Lynda.com. Started with basic knowledge on Web Design and what exactly web design really is. Web design is be any content that is created by web designers for web use. Web designs have lots of things that need to be thought about ahead of time to make sure the target audience is getting the desired experience from the web site.

Also viewed were videos on basic web terminology. Most of the videos went over the acronyms that are commonly used for web sites and web designs. They also discussed how each part of the websites worked together to provide the user with the proper experience on the web sites.

My Summer - HTML

Created HTML code for a website with details about my summer of 2012. After writing the code, the code was saved as an HTML document and opened in Safari to make sure the code had no errors. Some of the code that was used was to create an unordered list, headings and bold. Some key things that were learned were to always put brackets around the code (<...>) Also to make sure if you start a code you have to always close the code.