When I think of historical web design, images of bland web pages with heavy text comes to mind, but could you blame them?
When it came to design in the 1990s, robust effects and transitions were not at the top of the priority list. Let us not forget that any new design theme must be supported by technology. Not to jump too far ahead of myself, but I recall opening an AOL CD-ROM mailing to gain access to “high-speed” internet, which felt really fast in the 1990s. I didn’t have anything comparable to compare internet speed to other than prior CD-ROM versions. The speed then supported basic HTML pages and those of us who were interested in how computers and technology operated immediately realized that there was a lot more to come. In this blog post, I’d like to share with you some webpages from the 1990s and explain the design behind them.
PIZZA HUT
Take a look at Pizza Hut’s webpage from 1996, here we see that it is mainly text and boxes for consumers to place an order.
You may wonder whether this is considered a good or a bad design. According to my observations, Pizza Hut’s logo is front and center, with a strong heading underneath to provide some visual hierarchy. After the header, there is a paragraph containing a description of the storefront and contact information. Moving on, javascript is clearly used to allow consumers to enter crucial information and receive an output in return. The page is straightforward, but it is also interactive, which was a welcome addition at the time.
According to Don Norman, “Good design requires good communication, especially from machine to person, indicating what actions are possible, what is happening, and what is about to happen.”
For what it’s worth, I think that, considering the early state of technology, this is good design.
1996- PIZZA HUT’S FIRST WEBSITE. (IMAGE 1)
IBM
Here we have IBM’s first website.
The IBM website is a perfect illustration of how information was provided for consumers to absorb all on one page for webpages of the era. When you consider the grid design layout for the page, this flow isn’t really all that great. You can quickly get up to speed by reading my blog post on Grid Based Design if you need a quick reference on grid layouts. I was able to create a grid example of IBM’s original webpage to emphasize rules, margins, and other details.
1994- IBM’S FIRST WEBSITE (IMAGE 2)
In image 3 (below), I was able to create a grid example of IBM’s original webpage to emphasize rules, margins, and other details.
The red grid lines show that margins were not taken into consideration when the page was constructed. Margin space allows the page to breathe and avoid being crowded, making it easier for users to read the content. Although the text appears to be left-aligned on the page, whitespace is only visible on the right side. Not quite a nice balance, but I think that in the 1990s, content was more important than design in terms of design trends. We can easily see what was significant in terms of the funds and resources they had to work with when we compare design now to IBM’s site from 1994.
GRID LAYOUT (IMAGE 3)
CRAIGSLIST
When we first see Craigslist’s website from 1998, we are struck by how much content there is.
The esteemed well-liked website was well-known for assisting visitors in viewing and posting content on the website. With no graphics and a more simple forming approach, Craigslist’s content was styled in a vertical column grid which created a balance for users. When reading text in one place, a person may become overwhelmed by a flood of information and accidentally click on a link they weren’t intending to. The great thing about mistakenly clicking on a link was the link turned purple to let the user know what was previously viewed. Craigslist’s design continued to work toward accomplishing the aim of information loading quickly for users, which makes the site a success despite the obvious usability issues.
CRAIGSLIST 1998 (IMAGE 4)
CRAIGSLIST FONT BREAK DOWN (IMAGE 5)
The site title and main heading is in Times New Roman, while the sub headings and body text were Arial font.
ARE WEBSITES GETTING BETTER? I’LL LET DON NORMAN BE THE JUDGE…
“New technologies, new applications, and new methods of interaction are continually arising and evolving. New industries spring up. Each new development seems to repeat the mistakes of the earlier ones; each new field requires time before it, too, adopts the principles of good design. And each new inven- tion of technology or interaction technique requires experimenta- tion and study before the principles of good design can be fully integrated into practice. So, yes, things are getting better, but as a result, the challenges are ever present.” -Don Norman (Page 8 of The Design of Everyday Things. 1998, revised 2013)