Visual sitemaps as the evolution of web design unification ideas
Tags: beginners, design, productivity, prototyping
Published: 2019-08-06 17:27:33

Let’s recall how sites looked like 10–15 years ago and determine how they are related to ones available on the Internet today. Some readers did not even thought about it or simply did not witnessed the Internet of the early 2000’s. This article helps to restore the look of the web of those days with the help of a few examples. And to figure out how to design and prototype websites from today's perspective.

For example, amazon.com looked like this on October 4, 2004:
![](https://thepracticaldev.s3.amazonaws.com/i/h5ja6n82a54k48rusx1x.jpg)

A layout with a simple structure. Stretching central column—‘responsive’ idea of those days. Pay attention to the amount of white space. It seems that at that time, the issue of efficiency was not so relevant.

And this is how the New York Times website looked like:
![](https://thepracticaldev.s3.amazonaws.com/i/s9c6f3ozkrviycjma71w.jpg)

Nothing unusual—fixed columns and traditional underlined links. Note how touching looks the banner for advertisers, located just to the left of the logo.

These nostalgic memories would be incomplete without the Apple website. A company that has raised the value of product design into an absolute:
![](https://thepracticaldev.s3.amazonaws.com/i/pgi2hky3v9vhea6qfyh3.jpg)

Compact and logical navigation, bold hero image and accurate organization of promotional materials. Designers will notice the gloss effect on the surface in the main navigation menu—a vivid example of skeuomorphism.

Let’s take a closer look at the Mac G5 page. It’s obvious that the organization of the content inherited the structure of a classic online newspaper article: text wrap, modest-sized headlines, content density. Looking at this today, you involuntarily begin to think about the limitations on the web that web-designers and programmers faced back then. Keep in mind that this is due not only to programming standards but also to the resolution of monitors.
![](https://thepracticaldev.s3.amazonaws.com/i/7vq6l8qdel862tnuppox.jpg)

In 2005–2006, the quality and speed of the Internet already allowed to watch videos online. So 14 years ago, YouTube appeared, and in December 2006, the main page of the future giant of streaming videos looked like this:
![](https://thepracticaldev.s3.amazonaws.com/i/rkuwi0jf24xbrc5hik4l.jpg)

Blendtec and Tom Dixon were already actively shredding the iPod. A simple and well-structured layout, in which the scale of the service has not yet been felt. The number of downloaded videos and their views yet was in the thousands.

Pay attention to the remarkable detail that unites the sites mentioned above—the navigation menu. Apple, Amazon, and ‘young’ YouTube use the same links organization principle with a bookmark alike design. Understandable mechanics that simplified the user experience. It is fair to note that this is the unification and standardization of user experience in general.
![](https://thepracticaldev.s3.amazonaws.com/i/87pqybxt15grospjay3d.jpg)
1. Amazon (October 4th, 2004)
2. Apple (October 16th, 2004)
3. YouTube (December 19th, 2006)

To put it simply, web design evolved, being in the framework that set the standards. Therefore, unification, as an ongoing process and idea, is always present on the Internet. While programmers are struggling with standards, designers are trying to define and establish visual norms.
 
Let’s recall a relatively recent example when the era of skeuomorphism ended in the interface design and era of flat design has сame. This is also standardization, which has facilitated design processes and subsequent development.
![](https://thepracticaldev.s3.amazonaws.com/i/xq35nuwuecxavno845ao.jpg)

Therefore, the unification process, both in programming and in user experience, unites the look of the web 15 years ago and its version that is available to us today. Most of the popular websites on the Internet use familiar and user-friendly mechanics and logic. And that is why we live in an era of interfaces, with already familiar structure and principles of navigation. We have to put fewer efforts to understand how sites are designed and function.

Now think about how to make a visual sketch of the page or a sitemap of the future project? Probably in your imagination, you will begin to design horizontal blocks that would form a finished page. So this is how an ‘average’ page on the Internet looks in 2019.
![](https://thepracticaldev.s3.amazonaws.com/i/axj8ewmoyb192zaoq2rw.png)

Each of these layers performs an informational or functional role.

Thanks to these standards in the approach and organization of websites, communication between customers and developers have become easier. Users understand how the Internet of our time is shaped: we feel where the ‘Add to cart’ button should be located in the online store and how it might look.

But with seeming simplicity, both clients and web developers have faced the need to plan and discuss the project in advance. After all, high-quality websites or applications require detailed study at the very early stages of prototyping.

Decades of web development as an industry have not been in vain— users understand the structure of websites more quickly. And this is not only about professionals. Today, modern tools allow designing the project at the early stages very quickly. So once the know-how industry is transformed into an open and accessible environment. And for us, as developers and designers, it is important and fascinating to invest our time and knowledge in [services](https://octopus.do/) that are potentially useful for the industry.

[Read full article](https://octopus.do/journal/visual_sitemaps_as_evolution/) about designing visual sitemaps online.