Third Wireframe and Audit

Content Audit. I was surprised at how little this one was. I wasn't just being lazy, it really doesn't have too many links.

 As far as the website went, I felt the overall layout was pretty good for the most part, easy to navigate. The nav bar was nicely put, the content easy to look at, but the entire thing was HUGE. The redo that I put together is 1150px wide. you can see how much bigger the other one was. Basically I moved things around and consolidated them, giving it a compact and user friendly look.

Second Wireframe and Content Audit

Here is the content audit for dragoncon.org

Here is the wireframe, on the left is the original site, on the right is my redo.

The first thing I noticed when I saw dragoncon.org was the two navbars at the top. There was just SO MUCH up there. I knew that had to be fixed right away. The second thing I noticed was that there was no wrapper and that the content squished on itself when the browser was smaller. There was also a huge amount of empty space at the bottom, so I wanted to get rid of that.

Upon further investigation, most of the links in the side menu were the same as some of the links in the two nav bars. That made it easy to be able to get rid of the second nav bar. I liked their little "How many days till the next con" thing, so I kept that on there, but put it under the menu bar. I moved the slideshow to the top, because people like to look at pictures, and then the main content and news below that, because as you scroll down thats where you're going to look next.

First Site Audit and Wireframe Redo

Here is the content audit for my first website.

Here is the wireframe for the site on the left, and my redo on the right. The original website just had way too much on the front, so I limited the amount of stuff on the front page and kept it to one simple picture and one area for the main news and feature stuff. They didnt have the greatest navigation system, so I replaced it with a simple nav bar at the top. There was a picture at the top of the original page, so I kept that but blew it up so you could see it more. The sidebar is big enough to allow for anymore links and for the Twitter and Facebook stuff.

Pannafino Made Me Write This Down

For Tuesday Dec 11: 9-11:00
Finish adjustments on flowchart, print in color and trim.
Multiple Choice test on chapters 6 & 7

Friday Dec 14: Noon
Need to have Uploaded to Blog:
Screenshots of content audit and 300 word summary of connections and observations.
Reverse Wire framing and Composite Wire framing with 200 word summary of reasoning.

Event Thing

The event I chose was the PA Renaissance Faire. It is somewhere I enjoy going, it always has fun shows and really cool stuff like leather armor and Renaissance dresses. The actors they hire are great, they really make the experience more realistic. Their website is rather plain and boring, it doesn't portray the excitement I feel. Here is the website.

For a comparison, here is a website for the New York Renaissance Faire. This website is a bit more interesting and gives more of a Renaissance feel than the one for the PA RenFaire. 

My third website is a website for Northern California Renaissance Faire. This is the best website of the three. It portrays the old time feel better than the other two, it looks less Web 2.0 as well.

Ok so I messed up kind of and the RenFaire isn't the kind of event we are to be doing this project on so I'm going to do some board game conventions.

• Boardgame Players Association
• Strategicon
• DragonCon (edit: wrong link)
• MEPACON

The websites are in order from the worst design to the best, so we'll go from there. The first is very Web 2.0 and requires a lot of TLC, but that is beside the point.

As far as navigation goes, the Boardgame Players Association doesn't really have a real navbar, they just have links stuck in all over the place. I have no idea where to go for what. They have this cool little block of icons of external links though, which I think it somewhat nice.

Ok BPA was really bad and pretty much undoable, so I replaced it with Strategicon, which isn't too much better but at least it has a clear navigation.

DragonCon looks to be a cookie-cutter forum website, you know those ones where people go to create a random forum for people to post in? Yeah, thats what it looks like. It is a few steps up from BPA. It has a clear navbar, and a sub-nav bar, but there are billions of links. I think they could be consolidated into more effective navigation.

MEPACON has the best website as far as design and navigation are concerned. The navbar is mostly clear and doesn't have fifty billion choices. Its got a nice clean design and I'm ready to work with them all!

Flowchart Scans

Flow Chart

First try of the flowchart. Nice and simple... I almost like the plain black and white better than any of the other tries. The blue pen I wrote in additional bubbles I could put. They added a nice level of humor in them.

On this one, I tried to use the arbitrary "default" bubbles and whatever. It didnt work at all. At that point I went back to the original black and white thing to add my extra blocks and brainstorm again.

I tried to give the feel of either brass tags or maybe pieces of parchment paper, with just ink drawn lines. I dont know why I didnt put a paper texture thing on the background. It completely slipped my mind.

Final final design

Here is the final final design of the wrapper background. 

That will be placed over this wooden background pattern.

And here is what it looks like in the browser with all the text.

Group Work

Stephen and I hanging out, doing work (with my roommate in the back.)

Possibly Final design

I changed the flags for a more monochromatic feel, and redid the title so it didn't look so plain.

In Prog- redo

Here is the redone design without the ugly inkblot thing in the back, it will be over a wood grain pattern, like a desk.

CSS Zen Garden website

First Mockup of my CSS Zen Garden design

Useful Sites

Backgrounds- free to use (to my knowledge)
Subtle Patterns

Buttons!
House of Buttons

Browser based style editor- in beta.
Typecast

Codrops- lots of useful information
Codrops

A list of good web designs
Design Shack

Magazine Layouts
Inspiration Hut

Style Tile Update

Updated Style Tile

Style Tiles, First Draft

Style Tile 1- Based on my doodles and my notes

Style Tile 2- Based on Van Gogh's paintings

Mind Map and Visual Journal:

My thoughts are rather random, but they all link together. I could tell you what I was thinking and what lead to what for each of them. For example, the hot chocolate reminded me of being depressed, because hot chocolate is used for a pick me up, so I drew a person locked in a small crate to represent depression. 

I'm not really the best at going out and looking at people... I dont want to stare or anything. So I sad and listened to conversations instead, which was interesting. The pack mule in the top left corner was kind of a little joke, all these people carrying backpacks around, they reminded me of pack mules.

First site try

This was one of our first actual attempts to make a website on our own with HTML and CSS. Originally my background was going to use this "lovely" pattern in the background that was two circles of varying shades of greens. People said that it reminded them of old tacky furniture... I was not thrilled by those responses. Through much frustration and anger, I came up with this lovely piece of work. The wrapper floats over the background, and all the boxes have a bit of transparency. Yay.

Re-design Page

We were to redesign the text on this webpage... I didnt get too far, it took a lot of time to copy paste things into paragraphs and headings and stuff. 

HTML Exercise- (WIP)

Sam Burgett's Summer "Adventures"

June

In June I managed to get a temporary job in a warehouse for Office Depot.

It was ok. I liked the people I worked with, but the supervisor was kind of an idiot. They treated us like we were lesser people (me and the other temps) because we were temporary employees. It was much like the Dr. Seuss book with the Sneeches and their starred or not starred bellies. It really wasn't all that bad though, so I just brushed it off.

July

The beginning of July, my shoulder had started acting up again, very painful.

I called off sick for one evening. The next morning the woman who hired me called me and tried to tell me that I needed to file an accident report. Now, I've had some shoulder issues for awhile, a year or two, and this was just my shoulder flaring up again. I talked to her for about an hour, trying to tell her there was no accident, but she would not have it! I just finally gave up in defeat and did the accident report and tried to move on with my life. She called about an hour later saying that I needed to do a post accident drug test. Again I tried to explain to her there was no accident. Again, she acted like I was wrong and whatnot. At this point I said that I just wasn't going to come back.

August

All I did the rest of the summer was play World of Warcraft like the lazy nerd girl I am.

Sure I missed having a job and money, and I realize I should have just sucked it up and done the drug test, but it was far too late for that. I was warned by people how they treated their employees, why I thought they'd treat me better I don't know. Hopefully I will have a job soon again. My time management is horrible though so it will definitely be an interesting semester.
Oh. I tried to find an apartment with my friends this summer as well, but that all fell through. We went through about three or four different roommates and in the end nothing came together so I am stuck in a dorm again. Such a stressful and uneventful summer.

Above the Fold: Ch 2

Things to remember:

• What is the purpose of the site?
• How will it be used?
• Who will be using it?

Important Layout Information:

• The top left is looked at the most. Put important information there.
• Users will skim pages for key points. If something is very important or very interesting, make it stand out.

Search Engine Optimization (SEO):

• In order for your site to have a high search engine rank, it needs to have a lot of words and few pictures. Multiple text links, few images, headings, and important content placed "above the fold" are all ways of getting a high SEO.

(WIP)

Here is the code:

 Here is what it looks like on the browser: