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

CSS Zen Garden: Initial Style Tiles

Below are my two style tiles I created, starting my venture into the CSS Zen Garden project. 

Style Tile 1

Style Tile 2

CSS Zen Garden: Mindmapping & Visual Blog

The following are the results of mindmapping, centering on "College Student," & a visual blog comprised of objects I spotted during a walk around campus on a Thursday afternoon. The results will be used to help me define a theme for my CSS Zen Garden site.

Mindmap

Visual blog

After reviewing the mindmap, I've decided to go with the "Busy as bees" college student theme, concentrating on bee narratives, from flower to honeycomb, & utilizing flight paths.  

HTML/CSS/Web Font Project: Final

Version 1

Version 2

Today version 2 was critiqued.  Overall good feedback.  Major points for improvement included space between nav & content, line length, & padding around imagery.  Given time to revise, I would also add a sidebar to the right of the body text while still within the confines of the wrapper.  This would allow me to shorten the line length of the body text without losing wrapper area or much formatting, as well as practice more with hyperlinks to theoretically take the "reader" from month to month of featured articles.