Week IV Pt I: Good & Bad Web Design

Four websites reveal everything we need to know about how to design our websites and how, by all means, not to design our websites. Let's start with the former:

California Center for the Arts Escondido

For a high-profile arts center bringing in the likes of Buddy Guy and Pink Martini, this website does its facility's class a disservice. Here are a few of the things the CCA Escondido could improve upon:

       1. Hierarchy
Content that needs to stand out simply must stand out, alone. One headline or paragraph set in a large, bold font will garner the first and final attention of visitors. Each additional piece of content set in the same layout will only add to the chaos of the scene while detracting from the urgency of the initial content. In this site's case, every single line seems to be made just as pressing as the last, which is a huge turn-off for readers.

       2. Proximity
Clustering works great for Honey Bunches of Oats and nuclear physics. If you're a website, you can pull clustering off by pairing it with the appropriate spacing between grouped elements. For the CCA Escondido, the website has become a hodge podge of clustered elements more disorganized than a third grader's first scrapbooking attempt. Just a smidge more spacing would make the whole experience a lot more breathable for readers.

       3. Alignment

Along the same lines as hierarchy and proximity, the lack of alignment on this page causes for a final fatal flaw. Background images with foreground text are superimposed on the website's header itself, causing a painful clash of page divisions. Headlines are more often shouting in all-caps than not, which is simply not a pleasant experience for the reader.

All in all, it's a shame this otherwise beautiful centre has chosen to adorn its online presence with numerous images of chaos rather than a few pictures of its peaceful campus. A bit of spacing, some lowercase letters, and breathability between page elements would set the California Centre for the Arts Escondido back on its digital track.

The next example, unfortunately, sets the bar far lower than the prior.

Gates N Fences

       1. Ease of Use

Clicking into gatesnfences.com is the equivalent of walking into a house inflicted by generations of hoarding. The site is not mobile friendly, meaning visitors on phones or even small laptops find themselves scrolling horizontally just to see the whole of the page. The logo and value statement are boldly contrasted with lines intersecting the text through the background image. Subheadings of individual pages are intimately squeezed into one another on the side of the page like sardines with borders as thick as the type itself. Overall, not a site your grandfather could easily navigate.

       2. Depth of Content
It is an honest shame that the quality of workmanship this company puts into their product has to be displayed with such a kitsch website. Hundreds of inspiring examples of gates, fences, and railings fall victim to an impossible to find call-to-action button. Even if a customer were able to navigate to the exact work they wanted replicated, it would take just as long to catch the flying "buy now" banner that soars across the header of certain pages only. 

       3. Typography

One of the few good decisions made in the design of the page, the sans-serif font for body text, is instantly battered by a slew of poorer choices surrounding it. Dark grey background colors surround the black text when the page is already adorned with a textured watermark. Overlapping lines of text make parts of the page look like a broken printer's work, and alternating colors only add to this effect. 

Overall, an overhaul of this site focusing on accessibility, calls-to-action, and readability would serve Gates N Fences incredibly well. Given their top-notch smithing work, all that's left is to mirror their mastery of the craft with an equally masterful digital display.

This leads the discussion into examples of how to do websites the right way. For this, we'll look to some of the better designed websites on the net:

Headhunter Hairstyling

This Pensacola-based stylist makes an immediate impression as one of the most immaculate hair salons, if not companies, in the Historical Downtown District. 

Contrast is purposeful and meticulous, making for a clear and readable experience from menu to footer. Only six options adorn the top of the page, establishing the white, teal, and brown theme to be continued throughout each section. 

The content depth is thoughtfully planned out, leaving little space for anything but what the site is designed for: information and conversion. The home page is minimal while each subsequent page only cements your desire to visit the salon even more. Proud, honest descriptions and luscious visuals seduce the reader to click around for more. 

Consistency is built through repetition, where elements like the logo, contact information, and share buttons are placed identically throughout each page. This creates a sense of familiarity the potential customer feels welcomed into, not overwhelmed with. 

The sleek design and simple signage of this company create an atmosphere of soft-spoken elegance from minimalistic cues. The male and female signs on the ends of the scissors in the logo, the transparent and thorough display of services, prices, and products, and the consistent thematic and visual branding make this one professional service, especially digitally.

Apple

The golden standard of technology and design lies in aesthetically-driven companies like Apple.

The mesmerizing nature of Apple's product displays come from a strong sense of concept. Somehow, in a world filled with consumer electronics sales, this company manages to engage, entertain, and entice all at once. Focusing on immersing the consumer into the experience of, for example, the iPhone 11 Plus, the product and its capabilities swallow the reader as they scroll through an incredibly interactive, but highly simple site. 

Hierarchy is masterfully crafted by a combination of home-page smarts and sub-page looks. The home page pulls the reader in with just enough information on the newness, price, and exclusivity of a few products, then, once inside the individual pages, the user is struck by a delicate balance between clever headlines and descriptive imagery.

Typography and proximity are used hand-in-hand to add to the general sleekness of the brand. Bold, consistent headlines are tiered by shades of surprisingly readable grey captions. Images are clustered together with their descriptions while seamlessly flowing into the item just a scroll down the page. 

Conclusively, it is the subtle consistency that brands like Apple and Headhunter Hairstyling are able to pull off that attract people online not only to visit, but more importantly, to stay a while.