Keeley Catarineau

ECM 4910

Her Campus Website Design Analysis

Introduction
The Her Campus website was created with the vision of empowering a younger audience of college-aged
women. To appeal to this group of people, Her Campus made the decision to become an online
publication run through a national website. By using a website, Her Campus was able to address timely
issues and be more easily accessible to female students all over. However, when Her Campus decided to
create a website, they had to design many aspects including, but not limited to, a header, a home page,
various navigation bars, and section pages. This paper will analyze these facets based upon the Non-
Designer’s Design Book by Robin Williams. The book serves as an introductory guide for people with
limited design experience that focuses on the main underlying principles of design. The analysis will
focus on the following elements of design: proximity, alignment, repetition, and contrast.

Proximity
Proximity is achieved, according to Williams, when a work of design can “group related items together”
(15). Yet, proximity is not merely making items in a design piece more compact—there must be a
conscious interrelatedness present. Williams states that “the idea of proximity doesn’t mean that
everything is closer together; it means elements that are intellectually connected, those that have some
sort of communication relationship, should also be visually connected” (20). Overall, the Her Campus
website accomplishes proximity by grouping items together that relate. An example of the success the
Her Campus website has with this element of design is evident in the footer (see Figure 1).

Figure 1. The footer of the Her Campus website.

1
The footer achieves proximity by placing the related text closely underneath each of the respective
headings, which establishes a good connection between the text and headings. The material underneath
each heading is also logically organized, which demonstrates an intellectual relationship in addition to
the visual one. Thereby, the footer of the webpages serves as a good example of incorporating both
aspects of proximity. However, there are certain parts of the Her Campus website that do not exemplify
adequate usage of proximity. This is apparent in the trending list located on the right-side navigation bar
(see Figure 2).

Figure 2. The right-side navigation bar of the Her Campus website.

In this trending list, the numbers have too much space between the correlating article, which means the
relationship between them is not clear enough. As Williams explains, “When the numbers are closer to
the information, we see the relationship of the numbers to the text” (18). By shifting the numbers
closer to the text, the connection would be solidified (see Figure 3).

2
 Figure 3. The corrected right-side navigation bar of the Her Campus website.

Alignment
Williams defines the rules of alignment as follows: “Nothing should be placed on the page arbitrarily.
Every item should have a visual connection with something else on the page” (33). Her Campus, for the
most part, accomplishes this on their website. The articles on the Her Campus home page all show
sufficient connectivity since they are mainly organized into rows, while the featured article at the top of
the home pages is a noteworthy example of good alignment (see Figure 4). The title of featured article is
effectively situated to the right of the image, which draws the reader’s attention.

Figure 4. A featured article on the Her Campus website home page.

3
By shifting the title to the right of the image, the Her Campus website creates more powerful alignment
than if the title were centered. Williams states that “if text is aligned, instead, on the left or the right,
the invisible line that connects the text is much stronger because it has a hard-vertical edge to follow.
This gives left- and right-aligned text a cleaner and more dramatic look” (35). Her Campus achieves this
by aligning the text to the right in their featured article, which makes it more noticeable. Despite their
success with alignment, Her Campus also has areas where improvement is necessary. The alignment of
text in articles on the website, for example, is adequate, but could be much better (see Figure 5).
Though the article text displays connectivity in its straight-down and sporadically centered design
format, it could be more striking and convincing if there was the harder vertical edge more thoroughly
incorporated. For example, if the subheadings of the Her Campus article were aligned to the left instead
of in the center.

Figure 5. The format of an article on the Her Campus website.

The centered alignment is apparent especially in the bold subheadings of the article text. By aligning the
text completely either to the right or the left, a cleaner look could be achieved that would be more eye-
catching and display stronger connectivity (see Figure 6).

4
 Align left

Figure 6. The corrected format of an article on the Her Campus website.

Repetition
According to Williams, repetition is attainable if the creation can “repeat some aspect of the design
throughout the entire piece” (55). For example, a design can positively implement repetition if they pull
out an aspect of a graphic and reuse it across the work. Her Campus implements this design
characteristic in the typeface utilized across the website. There is consistent usage of the same typeface
for the text of an article and, additionally, a different typeface is maintained throughout the website for
the headings of articles, which are bolded each time as well (see Figure 7).

5
 Same

Figure 7. The format of an article on the Her Campus website, with consistent typeface of both headings and
body text.

By regularly using a typeface for headers, the reader can more easily distinguish the intention of the
text, which is to inform the readers what the articles are about. Williams explains that in repetition,
“headlines and subheads are a good place to start when you need to create repetitive elements, since
you are probably consistent with them anyway” (57). The Her Campus website fulfills this with their
headlines but falls short with their subheadings. The subheadings utilized in articles on the Her Campus
website vary from article to article, with no sense of regularity (see Figure 8). In some articles, the
subheadings are in a more cursive font and italicized, while in other articles the font is merely a bolded
version of the body text typeface.

Figure 8. The format of article subheadings on the Her Campus website.

6
The website could remedy this issue and procure absolute repetition in the design if one typeface for
subheadings was selected and maintained throughout all articles. Preferably, the typeface that would be
selected would be the script-like one because of the contrast it creates (see Figure 9).

Use this subheading

typeface

Figure 9. The corrected format of article subheadings on the Her Campus website.
website.

Contrast
Contrast can be realized, Williams explains, when a piece possesses the ability to “contrast various
elements of the piece to draw a reader’s eye into the page” (69). In other words, if the items in a work
of design are at odds, they will be more notable to the audience. The Her Campus website does
incorporate some aspects of contrast, which is primarily done using color. An example of contrast on the
website is the usage of color to arrange and distinguish the various sections of articles (see Figure 10).

Figure 10. The format of a section webpage on the Her Campus website.

7
The color on the header that matches the article titles catches the reader’s eye and directs it to all the
important information on the webpage, which is the titles of all of the articles. Williams describes that
“contrast not only serves to draw in the eye, but you can use it to organize information, clarify the
hierarchy, guide a reader around the page, and provide a focus” (69). The Her Campus website achieves
this level of contrast with their utilization of colors for articles sections, since it guides the reader’s eye
to the vital material on the webpage: the subsections in the header and the article titles. Nevertheless,
the top navigation bar of the Her Campus website lacks in contrasting elements because it uses colors
that are similar and pale (see Figure 11).

Figure 11. The top navigation bar of the Her Campus website.

Despite the navigation bar attempting to call attention to various links with color, the rest of it is too
muted to be eye-catching on a large white page. By selecting bolder colors as the background of the top
navigation bar, the Her Campus website would include more contrasting facets of design and guide
readers to important and relevant links more easily (see Figure 12). Note how the colored links
especially demand the reader’s notice, which is critical since these are seasonal features.

Figure 12. A corrected option of the top navigation bar of the Her Campus website.

Conclusion
While the Her Campus website primarily achieves the crucial aspects of design as indicated by Williams,
there are still many elements that could be improved. The four basic principles of design are all at least
adequately achieved, though some are more favorably done than others. By making these
recommended small changes proposed to the design, the website would catch more people’s attention
and guide them with ease to the important, featured information on the webpage.