CSS Zen Garden
Initial Impressions: I think it’s well put together! For anyone that’s ever played a Fallout game the vibe is instantly recognizable. It feels like old-school patriotic propaganda.
Hierarchy: There is a basic hierarchy present, but nothing beyond that.
Balance: I would not say the balance is very good. Everything minus the main body of the text is located on the left side of the exercise.
Whitespace: There is enough whitespace separating the paragraphs and around the frame it all sits within. I believe that the exercise does not resize completely as there is an inordinate amount of whitespace to the right when it is in full screen on my MacBook.
Rhythm: Again, nothing to write home about, but it is there.
Repetition with Variation: For the sake of consistency, I believe that it is better to be repetitive than not. Variation is a little different because of the random set of designs that are placed in the bottom half of the doc.
Scale: I think the creator could have differentiated the titles of the sections by increasing the size. I do think on the most part there isn’t a lot of variation overall.
Figure/Ground: There is a stark difference between the example and the background it is on.
Grids: Broken into two columns (small/large), They extend in the same way until the end of the garden.
Typography: This was my least favorite part. There is no real attempt at varying the type minus italicizing/bolding in the main body. Some variation in weight and height is in the sidebar, but on the whole not very impressive.
Color: As I said in the initial impressions, I dig it! I like that it reflects a type of Americana.
Texture or Pattern: It felt like the creator was going for a paper feel to their work. It’s as if you could find this stapled to a telephone pole on a street corner.
Initial Impressions: Wow! Actually, I was offended that my address bar was in the way.
Hierarchy: The creator used sections of his book which the website is based on as descending sections of his webpage.
Balance: There is a great use of balance between elements. Nothing seems off-kilter.
Whitespace: Man, I love the use here. It gives the overall product room to breathe while still having a fairly dense amount of content.
Rhythm: This was also well executed with an alternating pattern of image and text sections. Additionally, the first section changes design every 3 seconds or so and it creates enough movement that it catches your eye but doesn’t overtake any other part of the page in terms of emphasis.
Repetition with Variation: I think this is related to the rhythm section, but I felt as if this was accomplished adequately enough.
Scale: There was a wide range of scale in terms of the elements used. The initial section took up the whole window and the following pieces descended in scale as you scrolled moving from 2 columns to a smaller picture to 1 column.
Figure/Ground: The creator used the changing shapes on the first section to appear as if they were part of the background. It looked like they were punching into the yellow.
Grids: The grid layout did not consist of any more than two halves. It stayed in 1 piece the rest of the time. This allowed for a solid use of whitespace.
Typography: There was a great use of typography. Serif and sans serif combination throughout with titles bolded in the first section and various weights in the chapter section.
Color: I love this shade of yellow and just looking at the text it appears like it’s a mix of dark blue and black?
Texture or Pattern: The top of the page has the pleasing yellow cream color but also gives the appearance of a raised bumpy texture. This contrasts nicely with the dirty white background that the text sits on. It reminds me of vanilla bean ice cream.