Assignment 1_1 Revision Comparison

I collected a few revised layouts and compared them with the originals side by side to recap/discuss improvements. For this purpose I only used the big screen layouts.

Above and example below: Think about the relations between the font sizes and the sizes of the device. The example on the left uses a large font size for the list and there's a lot of equal (dead) space on the left and right of the content. Only less than half on the recipe is visible on screen (without scrolling). Right side: By reducing the font size for the list and paragraphs there are more options of side by side placements. The whole (or most of) the recipe text can be seen without scrolling.

Left: Similar issues as in the first example wich content that is too centered. Left and right white space is unused/passive/dead. Right: Better use of available browser space. The information is easier to "digest" since I see more of it at once (two different lists of ingredients and 2 kind of directions:

A few small but important improvements on the right example. Better relationship between the headers. Better use of space.

Similar issues on the left as previously explained. Clearer hierarchy of font sizes on the right.

Improving hierarchy and placment on the right. Less centered.

Example on the left creates a square. Left and right white space identical. Right: More dynamic and open feel with those adjustments applied.

Similar issues as above

Similar issues as above

Similar issues as above