White Space Quest

Illyana Lund- DTC 355

Key Peninsula Civic Center – https://www.kpciviccenter.org/

Chase Bank – https://www.chase.com/

Modcloth – https://modcloth.com/

The best example of white space use is the home page for Chase Bank. Each section is given room to breathe with ample space surrounding information. Categories and links are differentiated with blocks of color, with emphasis on calls to action. For example, to bring attention to their savings account option, Chase frames a large white section with thin grey bars, separating it from the white background. They indicate saving with a large blue piggy bank icon. The text inside the section has a large headline “Open our most popular savings account,” with plenty of room underneath for subtext and a large green “continue” button. The button also utilizes white space by allowing room all around the text, so it does not appear crowded. Chase uses this framework throughout the website which creates an airy balanced feel, despite the large amount of information present.

Modcloth also uses white space well. Though much more crowded with pictures, ModCloth uses color and texture to act as a break between images. Calls to action are framed by large colored blocks of white space, providing emphasis to the relatively small text and button inside. This white space also acts as a buffer between the colorful and more chaotic photo banners that alternate throughout the page. This buffer allows Modcloth to showcase many examples of clothing without taxing the viewer.

Another example of effective white space is the round photos with thin black frames to indicate different collections. These photos have a bit of white space between them and the frame, which helps to ground the photos. By giving these circles lots of white space around them as well, the overall effect is clean, organized, and visually pleasing.

Key Peninsula Civic Center is much less adept with its white space use. The landing page features a large photo of the building as its background, overlayed with call-to-action buttons and widgets. The result is cluttered and difficult to decipher. To improve, the civic center could either remove the photo or reduce the opacity significantly. It would also benefit the site to surround the call-to-action buttons with white space. Lower down on the page they have large blue blocks containing operating hours and the address to the center. If they followed the same framework for the buttons, the result would be much easier to navigate.

Scroll to Top