Content Audits: Regional Fair Sites

Abbreviated content audit for the Ephrata Fair

Content audits (in conjuction with content inventories) organize all aspects of a website--different pages, subsections, links, photos...the list goes on.  While the concept of page IDs within a content inventory gave me the idea that websites were well-organized entities where everything falls into its own box, I was proven wrong as soon as I started my first content audit for the Ephrata Fair website.  There are many paths to each page.  This was extremely frustrating at first, trying to fit this into the content audit, but I realized it may be helpful for the user; if they miss the path to a page the first time around, there are always alternate routes to the same location.  While I think this idea of multiple paths to one destination has some valid reasons, the organization of this particular site makes it more hurtful than helpful.

[Reverse] Wireframing: Regional Fair Sites

For my wireframing & content audit assignments, I decided on my hometown's annual street fair as my starting point.  The website wasn't necessarily up to par, pretty simple, though we are a small town that's not exactly on the forefront.  From there, I did wireframes for two similar but bigger events, the LA County Fair and the Minnesota State Fair.  These provided a better design quality and a different organization I thought was more appropriate for today's internet user.  But when it comes down to it, wireframes are about the organization and hierarchy, not the design.

Ephrata Fair

LA County Fair

Minnesota State Fair

When it came down to it, the differences between the Ephrata Fair page & those of the LA County & Minnesota State fairs were not as many as I would have anticipated.  The imagery is bigger and keeps to one main image.  The stark sidebar is eliminated, though the LA County site still hints at one.  A search bar is exclusive to the LA & Minnesota sites, which helps drastically in user experience. Other than that, the bare bones of these sites are not too different.

Flowchart: Critique & Revisions

Above is my printed flowchart with some written critiques.  Suggestions from my peers included lining up the title & the key, switch the type & drop shadow colors in my title, stylizing the arrow to match the title treatment, make sure the arrows in the key are consistent with the arrows in the actual chart, & shrink or abbreviate some of the text to fit the constraints of the boxes.

Other suggestions included lightening the background, changing the shapes in the key from black to light gray, shrinking all text, enlarging arrows to distinguish path taken versus that not, & watching my use of informal language & quotes.

Here is my final flowchart.  Just a few things I revised: arrows are more stylized, some text is smaller to lessen line tension, the key is labeled & has round edges & refined stylization to match the title, & some wording was revised.

Flowchart: Progress & Completed Project

Here is my completed flow chart for a riding a Lancaster area Red Rose Transit bus, along with a few snippets from my process.  The project was pretty straightforward and quick to complete.  I did spend a decent amount of time though working on my type and illustration, which is an interpretation of the current bus model with the word "BUS" alluding to the rest of the illustration.

Flowchart: Draft

For my flowchart I am doing the process of taking the bus.  I typically ride the bus to work, but to construct this flowchart I took a trip out to Park City and recorded my process and choices along the way.

During class I worked on some pen drafts & then brought it into Illustrator to get my basic skeleton.  Over the weekend I will work on stylizing &/or illustrations.

CSS Zen Site: Final Critique

Today was our final critique for the CSS Zen websites.  The critique was overall positive & a number of good points were made for me to change.  First was the large scroll bar that may pose a problem for viewers with smaller monitors than the design lab's ginormous 24-inch MACs.  Second was to carry the feeling of openness I evoked in my imagery & headers into my body copy by increasing line height and either using a lighter weight of my font or a smaller size.  Third was to stylize my intro as to differentiate from just larger body copy.  And lastly was to switch the link & text colors in the sidebar.

After the critique there was about 15 minutes to make these final changes.  In this time I was able to increase line height in the body & switched 300-weight Lato out for 100-weight, as well as switch my links to white within the sidebar, which I'm hoping doesn't get confused with the white body copy.

Below are the screen shots from a scroll through my revised site.

CSS Zen Site: Final Stretch

It's here!  The final stretch before Thanksgiving break, the final days to work on this website.  This weekend I got a major portion of my site done.  It was a lot of coding, a lot of troubleshooting, but I'm rather pleased that it worked out [mostly] in the end.

The trouble I've been having has been with rogue links, especially my button links at the bottom, which have been refusing to change color in hover state &, as can be seen, that last one is acting a little funky.

The 3 pictures below are screen shots of a scroll through my site, with various links highlighted to display their signal & cue.

Jared, the Monday night lab tech & myself

CSS Zen Garden Website: Working with Imagery

Today's class I worked mostly with placing my imagery.  This is causing a bit of trouble since some of my text boxes are mysteriously being floated, as can be seen in my 2nd screen cap below.

On a more successful note, after a short lecture today on relative versus fixed positioning, I was able to keep my side nav bar fixed in its spot.

CSS Zen Garden Website: Progress

Today marked a major breakthrough for my design.  I was having a lot of trouble over the weekend & early on in class with my coded divs showing up in the actual web page.  With my partner Kris' tip of using a colored background to better see where my divs were, I was able to locate the problem & easily tweak my divs.

Below is a split screen shot of the top portions of both my HTML & CSS, as well as several shots showing the entire span of my website.  Ignore the bright pinks & reds; they show where my divs are located.

CSS Zen Garden Website: More Coding

Photo with the lab tech.

CSS Zen Garden: Beginning Coding

This past week I've begun coding for my CSS Zen Garden site design.  It's still very much in the beginning stages, but I have high hopes for do-ability.  Below are my HTML, CSS, & beginning structure for my site.

CSS Zen Garden: Completed Photoshop Mockup

In the final steps of my website mock-up, a few color schemes were slightly changed, but more importantly the bee was finally integrated into every illustration & a title/nav was added.

CSS Zen Garden: Photoshop Prototype 75%Progress

For both technical & stylistic reasons, I changed my imagery from gradient-based to more silhouette-like visual interpretation within a circle.

CSS Zen Garden: Photoshop Prototype Mid-Progress & Critique

Above are several segments from my Photoshop prototype for my CSS Zen site.  During the weekend & class I've been working on ensuring the colors in the color blocks have a cohesive theme & decent flow, as well as working to find complementary colors for the type.  

Also a great deal of time was working on the the illustrations that coordinate with the themed blocks of the bee's journey.  The first (green) is a field, blue mountains, brown tree, and the last two (orange & light brown) the honeycomb.  I will post some illustration inspirations of mine in an upcoming post. I'm still on the fence as to whether the gradient in the illustrations is effective at providing dimension or if it just looks sloppy and unprofessional.  When I first put my illustrations in, they felt flat & were getting lost amidst the background, thus a white border/drop shadow was also added.

The critique today yielded a lot of helpful suggestions.  One of the main ones was watching the contrast between my backgrounds & type, as well as making the title a tad heavier.  A few also suggested toning down color & focusing more on texture, which I'm considering; I could really go either way.

CSS Zen Garden: Updated Style Tiles