The metronomic swing: website design 1996-2019
I’ve recently been thinking about where digital design is heading in our agency as we head towards the 2020’s, but to do that I needed to consider the change that has happened since we began back in the late 90’s.
Over the years website design trends have swung consistently between form and function. That the yin and yang of form (design weighted towards aesthetic & interaction) and function (design weighted towards usability and accessibility) swing from one to the other every five years, as new web technology, new devices and new coding standards evolve.
However, the metronomic beat between the two is quickening, and based on this hypothesis we can make some assumptions on design trends over the coming years. We can also consider the type of interfaces we will be designing for, some of which won't even have Graphical User Interfaces.
At least BBC Online avoided blue links in 1998! © BBC
But first let’s go back to when ORM started...
We sprang to life in the late 90’s, after watching the web develop we were founded to bring our expertise of graphic design to the worldwide web.
The early web was garish, text heavy, with hardly any layout and information structure - it was predominantly designed by developers. Early design techniques focused on making text heavy pages usable, easy to understand and navigate, while also considering performance; we were still in a dial-up world.
In these early days of web, the priority was functional design (usability and accessibility). Back then, life was so much simpler when we only had two browsers to design and develop for, Internet Explorer and Netscape!
Bandwidth grew, Flash and similar technologies made the web truly multimedia, which meant websites got worse! We had large loading times while we shoved megabytes of website down 0.5MB broadband lines.
It was the digital Wild West, a free-for-all with interactive animations, dodgy 3D, buttons as graphics, text as graphics, nothing was searchable, not much was usable. Usability got put on hold – design was now all about form (aesthetic and interaction).
With the birth of Web 2.0, websites were no longer passive as user-generated-content, social sites, wikis, blogs and mashups become popular. Usability and interoperability were the focuses, and the discipline of Information Architecture became more prevalent. We now had to create considered information structure, hierarchy, and organisation.
Conversion rates, search engine visibility, and analytics became part of the design discussion, we could now prove how good design can affect a website's performance, so we stripped them back and removed the Flash animations.
Design trends swung towards functional as we made our designs measurable and usable on upcoming browsers including Firefox, Safari, and Chrome.
We also had to think about small screens, early mobile WAP pages, and then in early 2008 the iPhone gave mobile a real GUI with a touch interface. In this period it was our UX team who were defining the strategies for our clients, adopting a User Centered Design approach to help understand our client’s business objectives, aligning them with users needs. Our clients were investing in bespoke builds, custom content-management systems built on open source.
LinkedIn search results © LinkedIn 2007
The web was maturing and fast! Smartphones were becoming ubiquitous in the western world, and new form factors such as tablets and watches appeared. New web languages were evolving such HTML5, this gave designers more control over the layout, fonts and styling, all now done in code.
Designers brought form back, we had way more control of the front-end than we had ever had, it was like having the flexibility of print design on steroids, so we dusted off our typography and Müller Brockman books.
Clients also started to wake up to the value of design and started to employ their own UX experts. Well thought-out design was now valued and measurable, and we could demonstrate it through the data.
Users had digitally matured too, we were consuming more and more content on a number of devices. We were engaging with new brands, disruptive businesses with products and services that changed our behaviours. We now had high expectations. We wanted hyper-convenience. For designers, it meant we had to think in terms of the wider Customer Experience (CX), and the multiple touch points across a service that might include physical and digital, user journeys within a product were now part of a larger service design.
We also had different screen sizes to contend with, different inputs including gestures and swipes, and we were learning new techniques, using lightweight tools and agile methods to get to the answer quicker.
The expressive web showcasing HTM5 and CSS3 © Adobe 2012
This was a defining period at ORM. We separated strategy from UX, it wasn't just about digital products, it was about business transformation and change. And with transformation came new robust web CMS platforms and cloud technologies that could deliver on scalability, interoperability and affordability, such as Adobe's CQ5, Sitecore and EPiServer.
In the same period, we saw mobile become the dominant device for some websites, the analytics were showing the trends, and we knew it would impact the user experience, suddenly you beautiful desktop site looked dreadful on a mobile device. Responsive design and Mobile First became our favourite buzzwords. And for the first time the metronomic beat between design form and design function increased.
Have responsive design and CSS frameworks like Bootstrap homeginised the web? Websites needed to be designed to work across a number of screen viewports sizes. So our designs got more simple.
There is, and still is, a trend for websites with stacked, horizontally striped blocks with centered content, that work with a long scroll. These are great for storytelling in a linear way but they make us all look the same.
Mobile design made us less obsessed with the fold, we realised people didn't mind scrolling, especially on mobile. So initially in this period, we have swung towards functional as the priority.
We used techniques to optimise the experience to make it right for the device: the content and functionality needs for mobile might be different to a desktop, therefore understanding context and relevancy was the challenge.
Spot the difference. An image search for 'Bootstrap template' on Google © Google
But brands also need to differentiate – they need to stay ahead of their competition and be visible in a crowded and global landscape. For this reason, and where we are at with the maturity of web technologies I believe as we head into 2017 we are already swinging back towards form, that is design weighted towards aesthetic and interaction.
Now, I feel rather guilty leaving this important aspect as a footnote, so apologies to all you content experts out there, but it’s worth remembering that no matter how good the design, without the right content, users will not engage. Content must be taken seriously and be part of the process from the start, from the strategy, to creation and governance.
While the web gets more interesting to look at new as we try to differentiate, new forms of UI including Voice, AR, and surfaces will give designers different challenges. As web technologies evolve more towards the end of this decade, functional design is guaranteed to swing back into priority!
Watch this space...