Back in 1993, the first website launched: a text-only site by developers at the European Council for Nuclear Research (of all places). It was a huge step in technology, the catalyst for a cultural revolution and really, really boring to look at. Design options were not readily available for the first ever website (which you can view here) but have since become that which separates professional online content from the amateur and bog-standard.
In this blog, we’ll be taking you through history, to the essential developments in design that impacted web design how we know it today. This goes way back; much further than the development of the first website.
500 – 1900 AD
As early as medieval times, optimal proportions have been used to arrange handwritten text on pages using the Villard Diagram. With the invention of movable type in the mid-1400s, these ideas of proportion were adopted for typesetting and page design, resulting in the Printing Revolution. Information archived and shared meant the scientific and artistic communities develop theories that arguably played a key role in the development of periods from the Renaissance to the scientific revolution.
In the early 1900s, the analysis and intellectualisation of these rules led to the development of a new layout guideline. At the time, product advertisements would often be strewn with information that was very difficult to absorb. As a solution, some of the world’s best designers, including Josef Müller-Brockmann, came together to develop the ‘International Style’ grid system. The modern grid system allowed for greater clarity in visual communication, and emphasised hierarchy, structure and rhythm of content. To this day, the grid system serves as a framework with which a designer can present information in a rational, easy to absorb manner.
1990s
The 90s saw a temporary lull in grid-based design, as alternative styles from the likes of David Carson and Paula Scher became more popular. This was a reaction against the entrenchment of the grid, particularly its dogmatic use and association with corporate culture. The result was many designers rejecting the system in favour of a more organic, stylistic and radical structure.
But the rise of computer-based design – especially those for the web – came with it the return of the popularity of grid-based design. The 90s radical style would serve to hamper the consumption of information because grids have a practical use in web design. Coding/lining up elements to definitive X or Y coordinates (i.e. column or row) is far easier than having to arrange elements in a bespoke, case-by-case basis. By the late 90s the technology developed to the point where browsing websites had mass appeal.
In fact, the rise of the web grew so quickly, development on making the production of websites easier and more professional increased exponentially. From a designer perspective, the critical development was Flash. Flash (ahh-ahhhhhh) allowed for elements of the web page to animate and react to users in ways that clipart couldn’t compare to. These included animated buttons (rather than simple hyperlinks) and even games. You could argue that Flash was the real birth of user interactivity on the web.
2000s
Back in the old days, developers only had HTML to define text structure. They could define a paragraph (<p>) or headline (<h1>) and the like. Options were limited for design: developers were using HTML in inventive – albeit not always strictly correct – ways to layout pages and lots of HTML only worked on specific browsers (“You need **** browser to view this page”, remember that?). Eventually, Cascading Style Sheets (CSS) came along to fix the problem: it works in conjunction with HTML to offer a wealth of layout and style options for designers that function in all browsers.
Another of the developments in the 2000s was the introduction of drag and drop, or WYSIWYG (‘what you see is what you get’) web publishing/development tools. These meant it was far easier to layout a web page visually. These tools allowed designers with next-to-no coding experience to create web pages using familiar, desktop publishing style tools. This made the workflow much more efficient, as any problems or changes that needed to be made could be identified and addressed quickly. This is actually why WYSIWYG was developed in the first place but then was later hijacked by kids wanting to blog about their pets or something equally uninteresting. Professional web developers no longer use WYSIWYG (some never did), since they are notorious for ‘bad markup’ (incorrect and bloated code), which in the long run would cause more problems than a WYSIWYG editor offered to fix.
But the most significant progress in the 2000s was the release of broadband internet to the masses. With the ability to transfer information at a much faster rate, designers were less restricted by how much information their page could contain. Coding became more sophisticated, which in turn offered more methods and flexibility to developing a website. Developers were able to build websites with more variety, giving designers more options, and consequently more control, in their work.
2010s
In the past six years, the key development has been responsive design – allowing flexible grids for different device screen sizes. The hyper-popularity of smartphones and tablet devices means any website we build needs to have the capacity to adapt to different screen sizes.
From a designer’s point of view, the process of design to development has been streamlined by the ability to use code for elements or shapes rather than having to produce and upload graphical elements to achieve these. Previously, we would need to use images for certain effects, for example, rounded corners on boxes or coloured gradients, that would have little-to-no flexibility. However, coded elements – often specified using CSS – are flexible and can adapt to changes in screen or browser window size.
This saw the introduction of ‘fluid’ grids, meaning that they call for page element sizing to be in relative units, like percentages, rather than absolute units like pixels or points. With more options and flexibility for designers also came more responsibility. Extra attention now needs to be given to the page content and its hierarchy, as it will ‘re-flow’ depending on the device.
The future
The common thread for design over the last several hundred years are grids. As technology and the mediums through which we absorb information progresses, the grid system moves right along with it. It develops and reacts to technological progress, and will continue to do so while we continue to engage media in new ways. When VR headsets become the standard method of interactive media, or even if we figure out a way to develop holographic images, the grid system will change, adapt and assist users in absorbing information.
Share.
- Web Design.