Here is the mobile version of my CZG website. The dotted magenta line measures 400px wide. It also uses all the same graphics with the exception of the sign at the bottom. I chose to place it in a container similar to the other sections. The footer is also condensed into 1 column.

Tablet Comp

This is the medium-sized comp of the CZG website. It utilizes most all of the graphics as the desktop version, but I got rid of the arrows on the content boxes. The dashed magenta line measures 800px wide.

Mobile Thumbs

concept1: This version bleeds the graphic to the top left and the sections will be divided diagonally. This might not work.

concept2: This version uses the graphic as the background and 1 column of divs down the center on top of the graphic

concept3: this version breaks the composition down to flat divs and could screen back the graphic behind.

concept4: similar to the tablet design with the graphic bleeding off the left side

concept5: this version lays the copy over the graphic. Links at the bottom.

Tablet Thumbs

concept1: try to fit all the information into the petals. Content varies in size so this might not work.

concept2: this version uses the flower as the background and 1 DIV containing all information

concept3: a condensed version of the desktop layout. I'll get rid of the arrows and narrow the columns. Links at bottom

concept4: another version of the desktop version still using the dirt footer.

concept5: this version bleeds the flower off the left side. All speech bubbles will point left.

HTML, so far

I finished up the HTML/CSS for now. I'm having trouble getting the CSS gradients to work with the arrows on the green speech bubbles. I feel everything is so hacked together because of all the negative margins. I'm about to download IE to see the mess.

Mockup

Here is the first mockup of the site

I think it's looking pretty good. I kind of cheated because I'll have to manipulate some of the HTML. Oh well, YOLO.

Hopefully the CSS goes well. 

Thumbnails

We were assigned to redesign the CSS Zen Garden site. We have to use the same HTML and only manipulate the CSS.

Here are my thumbnails:

Concept 1: A pretty general approach with a large image above the fold

Concept 2: Create a page that would mimic an information graphic with the content in the petals of the flower.

Concept 3: Create a horizontal website

Concept 4: Create a site where the content would be on the petals.

Concept 5: This version is another approach utilizing a grid.



After receiving feedback from the instructor, we went ahead and chose concept 4.