Purple Website Inspiration

Purple People Eaters: Websites & Usability

Of all of the hues that we’ve covered, purple seems to show up the least often around the web. Perhaps this has something to do with our monitors inability to display these colors consistently, or maybe lavender backgrounds conjure painful memories of the Geocities days. That’s not to say that a purple palette cannot be a beautiful solution for a webpage, in fact the rarity of this mysterious color can help your site stand apart from the competition. Purple is associated with luxury, knowledge, and sensitivity, and though 75% of children (of either gender) prefer purple over any other color, many purple websites tend to be marketed towards the female demographic.

Let’s take a look at some purple websites and see how they rate for usability!

Hallmark

The Hallmark website looks exactly as you would expect it to. Handwritten typography and adorable copy accompany playful doodles and a youthful purple color palette. While this aesthetic does capture the nature of greeting cards, it is quite overwhelming on the eyes. We counted at least six different typefaces on the home page alone. From a design perspective, this is makes us cringe, and while it definitely affects the usability of the homepage to some extent (this aesthetic overload makes it harder to process information), there are other features such as the “Quick Finder” and rotating banners that somewhat help to redeem the design.

Upon trying to browse the products, we realized why a Quick Finder was necessary on the home page. You cannot simply click “Shop” and navigate to the products page, you have to click through multiple drop down menus, which is a huge usability mistake. Also, some of the categories that exist under these drop down menus are misleading or overlapping.

Once you land on one of the product category pages (such as Occasions > Birthday), the distracting design elements make another appearance. The navigation on the left hand column is straightforward enough, but the pale yellow hand lettering on the light blue background is almost illegible. There is way too much going on, the pastel colors look tacky next to the bright purple call outs, and the handwritten gender specific links are small and hard to read.

Usability Score: 1/5
http://hallmark.com/

Hungarian Wine Society

The Hungarian Wine Society’s website is yet another example of how a print design aesthetic often does not translate on the web. On first glance, the ecommerce wine shop has a beautiful design, with a luscious deep purple color scheme and beautiful typography. The home page design is actually quite nice, featuring a picturesque banner, call outs to informative pages, and featured products. However, as you scroll, the left hand navigation (which features the shopping cart, Wine of the Month, and social media links) follows you down the page with a bit of an awkward delay. We found this movement to be incredibly distracting and would prefer to see the shopping cart in its typical location (upper right corner) with the other links as call outs on the homepage or site footer. Also, we did not even notice the search box, which sits at the very bottom of the page!

Upon navigating to the products page, we started to realize that creative design is not enough to cover up major usability flaws. The same type treatment and imagery that created for exciting banners seems redundant and takes up valuable real estate as a header on the product page. There is little consistency between the product shots, which creates a sloppy presentation. And worst of all, the product names do not always fit within the the ribbon that they are supposed to sit on, making the already hard to read copy practically illegible.

On the news page, one of the banner photographs from the home page is repeated with no accompanying title. This provides no additional value to the page and seems like filler. The typography of the news articles is even worse, the light brown color and serif typeface might work for print design, but body copy on the web is most legible in darker colors and sans serif fonts. There is also little to no hierarchy between the date, headlines, and links (which are almost the same color) which makes it incredibly difficult to navigate.

Usability Score: 2/5
http://www.hungarianwinesociety.co.uk/

NYU

Among the sea of poorly designed college websites, NYU’s homepage stands out apart from the rest. Implementing the university’s iconic purple color scheme and the clean san serif typeface Gotham (which Obama’s site also uses), the site features a well organized grid layout and clear navigation. This is no easy feat, as university websites tend to have numerous pages that fall into overlapping categories. NYU helps to prevent possible confusion by offering a list of “quicklinks” and even an alphabetical index of all their pages.

The About NYU page presents a variety of information organized into a multi column grid structure. In addition to describing the university’s mission and brief history, the page also provides easily visible call outs for prospective families who might not be familiar with NYC. For those who wish to learn more about the school, the copy continues down the left hand columns, while news articles and other call outs appear on the right.

While all of the other pages within the main NYU site follow this same organized grid structure, the designs vary greatly between the different “schools”. While the Tisch School of the Arts page is bold and energetic (if not a little web 1.0), the College of Dentistry page looks like it was designed by… well, dentists. We wish that there was more consistency across these pages, even if it was just in the form of a uniform global navigation bar.