Menu
Visual hierarchy
In the fifth installment of Before and After, I had the task to align an image with the correct visual order of images and text. I selected the "Why Take Notes?" image because I thought the parts of texts and information were scattered around the image. In the before image, the visual hierarchy is inconsistent and there is no order to the image.
In the after image, since the title of the image was not clear to the learner in the before image I decided to put the name of the file in a large size font in the top part of the after image. The second important part of this piece was the letter information, which I made larger than the smaller details of text. These details were included in middle and bottom portions of the text. Finally, a red background was added to allow the gray and orange color boxes to differentiate the title from the other information of the text. Consistent text was utilized to establish unity throughout the theme. The after image establishes a visual hierarchy since it follows the "Z" pattern of how the eye tracks information and the image is divided into three parts.
In the after image, since the title of the image was not clear to the learner in the before image I decided to put the name of the file in a large size font in the top part of the after image. The second important part of this piece was the letter information, which I made larger than the smaller details of text. These details were included in middle and bottom portions of the text. Finally, a red background was added to allow the gray and orange color boxes to differentiate the title from the other information of the text. Consistent text was utilized to establish unity throughout the theme. The after image establishes a visual hierarchy since it follows the "Z" pattern of how the eye tracks information and the image is divided into three parts.
visualhierbefore.jpg | |
File Size: | 48 kb |
File Type: | jpg |
afterhierarch.jpg | |
File Size: | 514 kb |
File Type: | jpg |
afterh.psd | |
File Size: | 3171 kb |
File Type: | psd |