Blog 4

Website Reviews…

CSS Zen Garden

Link: http://www.csszengarden.com/212/

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.

Link: https://designsystemfoundations.com/

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.