WPI Website: Bad Design
This screenshot was taken from the undergraduate admissions page of the WPI website. The “Meet Our Students” section of this page is most likely browsed by prospective students and parents looking to learn more about the school. This section of the page is tucked away at the very bottom. I chose to analyze this screenshot because it breaks many basic design principles in a short space.
There are multiple problems with visual alignment that are immediately apparent. The proximity of the student name to the navbar makes it seem as though the navbar is also supposed to be centered along the same vertical axis as the name and major. This gives the impression that the navbar is slightly too far to the right. Instead, the navbar appears to be aligned with the right edge of the body paragraph, even though the text of the body paragraph is left-justified. Since the body paragraph is left-justified, the right side is “ragged” making the sense of alignment with the navbar’s right edge even weaker. Immediately after the left-justified body paragraph, the “view profile” button is centered, breaking alignment once more.
To summarize, from top to bottom, the alignment changes four times. The navbar is aligned to the right, the name and major are centered, the body paragraph is left-justified, and the button is again centered.
On top of the sporadic and inconsistent vertical alignment, the horizontal alignment of the navbar and the “Meet Our Students” title appears to be arbitrary. The top of the navbar starts between the top and bottom of the capital letters of “Meet Our Students.” (The bottom of the navbar is also not aligned with the top of the picture, either.) Since “Meet Our Students” and the navbar are almost horizontally aligned, the visual hierarchy is confusing. “Meet Our Students” seems to label the picture directly below it rather than the entire section. To make this problem worse, there is greater visual contrast in the student’s name than “Meet Our Students.” In the above screenshot, “Megan M.” is the same size as “Meet Our Students” and is also in bold font.
Overall, the preponderance of seemingly arbitrary alignment combined with confusing proximity and visual hierarchy make this section of the page feel like an afterthought. This “Meet Our Students” section is a gateway to interesting content about real students at WPI, but unfortunately, the weak design is unlikely to encourage anyone to slow down and explore these student bios.