Saturday, June 8, 2013

Unconventional Approaches to Web Design

First of all, I would be remiss if I did not include a shout out to the first website created in 1992 which was made available again for viewing in April of this year. It was interesting to read and hear some of the comments made about the design of the page. Some people have commented how they love the simplicity of the page with clear links and no distracting images, scrolling ads and flashy video content. The site can be called many things, but overwhelming, in comparison to current websites, is not one of them.


When I read through the Apple Web Design Guide from December of 1996, I kept coming back to my days of cut and paste in newspaper layout design. But this cut and paste involved a wax roller, large sheets of paper (tangible blank "templates'), and mad rushes to the bus station to make sure the "templates" got to the printer on time.

So many of the concerns in regard to web design are the same concerns that come into play in newspaper and magazine design. For example, newspaper articles tend to be written in short paragraphs in the inverted triangle method since readers scan and read quickly and then move on. This applies to the web design rule of keeping pages short.

Using empty space liberally was another design feature that is important in newspaper design as well. I really love the web design guide's explanation of the use of empty space:

"Empty space (known in the book design domain as white space) provides relief on a page and draws attention to aspects of the page design. Use white space around headings, graphics, and paragraphs of text to create a sense of balance on the page. By providing relief, white space can neutralize the effect of two competing elements of the same size that draw the eye back and forth across a page."

Hmmm, maybe that is why so many people liked the look and feel of the 1992 website. Sure, much of that empty space in that "old" website was not created with design in mind. For the user, however, any websites that provide empty space can bring immediate mental relief in a digital landscape where many websites designs create overstimulation to the point of overload for the user.

Getting off track for a moment from newspaper versus web design, I can not help but recall the guide's discussion about improving error messages beyond "Error 404: File not found." Some developers have a lot of fun with error messages today. The other day, one of my students got an error message on Google Chrome which stated: "He's dead, Jim." I, and a few other students, thought the Star Trek reference was hilarious. The student who received the message was not as impressed.

Some of the unconventional approaches to web standards and design "rules" got me thinking about how many times in the days of "cut, paste and wax" newspaper layout we would experiment with design and layout. In those days, the feedback was not immediate, since we had to wait until we received the final product from the printers. Sometimes we would rejoice; other times we would moan.

In my position as a news editor for a student university newspaper, my design was cut and dry. We followed the conventions when we did our work, and I was teased for being stodgy and old fashion. I secretly envied editors of other departments where there was more opportunity for creativity and unconventional approaches. So I finally gave into breaking away from standards in one area: the news features. In breaking from conventions, I learned that some rules are fast and true and a designer should stick with them, while other conventions can be massaged and manipulated. In my design, I always stuck to the white space rule. But I saw other layouts where the white space rule was ignored, and the finished product was very appealing to the eye. I just felt I could never make it work well in my layout, so I stuck to what I knew.

This trip down memory lane got me thinking about unconventional approaches to web design. Many of the conventions and standards in web design that the guide discusses are part and parcel of online templates for web design, whether they be for a blog or web page. Information about the site/author, archiving, and time/date stamping posts are conventions that are provided as standards in most platforms for creating a quick webpage or blog, like Wordpress, Blogger, Yola or Weebly.

Yet despite the need for conventions, there is still a need to explore unconventional approaches, to experiment with design. Some of these experiments work and others do not. And reactions to design can also be very subjective. Below are links to some online articles and examples of webpages that have "broken the rules." I think, like me, you will love some of them, and hate others. But as one site so wisely points out, breaking conventions is something we should do when we first understand why we have conventions and appreciate their place in design.
  • The article looks specifically at design rules and how some sites contradict the rules and provide an effective design.
  • Design patterns are explored in this article and it discusses, among other things, how design patterns are changing based on touch screens and mobility. It also provides links to many other sources.
  • How to effectively break design rules is explored in this article. It also provides a link to this article that is an impressive collection of design principles.
  • This article provides fifteen examples of websites that have broken the rules.
  • Fifty examples of creative web designs that experiment with conventions are illustrated in this article. I love the look and feel of this site. Unsurprisingly, it was a lot of blank space!
This video contains a collection of clips from Star Trek, and illustrates how Google developers were probably inspired when creating one of their Google Chrome error messages:

No comments:

Post a Comment