What's a design system? Find out what they're used for, and how to create one.
Digital design has been navigating uncharted waters for about 20 years, since the advent of mainstream internet. In the 1990s, any aspect of ‘design’ was in full control of the programmer – black backgrounds, bright web-safe colours in a highly pixelated 8 x 8 font, infamous vintage gradients that are now making a comeback and ASCII character drawings that made anything look cool.
ifindit.com is a late 1990s search engine that’s a real graphic gem and still live today
At the time, concerns about web layout, information architecture and user experience were secondary – or even tertiary – in relation to content. The more that could be dumped on a web page, the better. Whatever information you couldn’t include on the landing page would be signalled by hyperlinks to drive the user to additional pages – who can forget those long, heavy text lists of rainbow coloured, underlined hyperlinks? In some cases, there was a certain attention given to navigation but only by absolute logical need. Navigational consistency between pages was another matter. Early days.
The start of user journeys
When designers joined the web revolution, it was like a whole new world had been unveiled. Suddenly, content didn’t have to be static. You could not only hyperlink it by absolute meaning but also create an interrelation of meanings with other types of content within the same environment.
Hyperlinks could be a full line of copy or just a couple of words, without any particular hierarchy. The groundbreaking innovation was that hyperlinks enabled the creation of more complex journeys – you could now tell a story. These were the early stages of what we now call user journeys, where web designers defined how and when the user would see and interact with content.
What was previously a new, fascinating world was becoming a limitless reality
Moving into the 2000s, technology developed rapidly and with it arrived a myriad of new devices, mediums and channels. As a relatively and recently acknowledged discipline, digital design had been limited to react in response to technical developments. Until then, it was merely adapting while playing catchup with technology rather than evolving and help defining it.
Suddenly, what was previously a new, fascinating world was becoming a limitless reality. Designers now had not only to worry about multiple screen resolutions but also endless device types. Questions of adaptive layout, hidden content on smaller screens and readability – just to name a few – came front and centre.
With the complexity of new challenges and opportunities, design became a key element of web build. Aspects like information architecture, user journeys and overall user experience now complemented purpose, functionality and branding. Elements of cognitive science slowly but surely came into full play when designing a website.
Get the Creative Bloq Newsletter
Daily design news, reviews, how-tos and more, as picked by the editors.
A responsive game-changer
By the time touchscreen smartphones hit the mainstream market, companies started taking mobile design more seriously. Mobile web access, faster network speeds, higher image resolution and developments in secure online payments became highly persuasive arguments for companies to invest in additional touch points, rather than just sticking to a desktop experience.
In the early days of ecommerce, brands with the most economic foresight started developing dedicated mobile websites, leading other industries to follow. Market confidence grew and with it further investment in tech and design, which eventually led to the groundbreaking development of responsive web design – a term coined by Ethan Marcotte in 2010.
This approach was a complete game changer. It introduced a new way of coding that allowed for fluid grids and control of content display across any screen resolution regardless of device via media queries. A true innovation that put designers in control, it instantly elevated the quality of the output while allowing the focus and time to be spent on optimising a 360-degree user experience.
It’s easy to see how digital design as a discipline became more focused on execution back then. It had been intimately tied in with build since its infancy, having to compromise on the process of design thinking and problem-solving more often than not, due to the medium’s technical limitations.
Do first, think later
During this monumental leap forward, what was meant to be an exception ended up becoming the rule. Though executional knowledge thrived during the last decade, it also meant a reversed process took root as a standard workflow: ‘do first, think later’. This was a consequence of clients interpreting time to think as money wasted and thus something that had a negative impact on their own product development.
Many have learned the hard way but it pays well to let designers do their job properly from the start. You need to let them analyse and understand the client’s problem and pain points first, then – and only then – propose a solution that works and delivers the desired outcome. It’s called a process for a reason – when essential steps are missed for the sake of a speedy delivery, it means foundational elements have been forcibly ignored and the chances of a successful output are reduced exponentially.
Many have learned the hard way but it pays well to let designers do their job properly from the start
Concurrently, as design tools matured into web development, it became easier to concentrate almost exclusively on the visual side of digital. This is a mistake and one many clients willingly take at face value. Just because it looks good, it doesn’t mean it works. Equally, just because something works doesn’t mean it’s right. That’s the distinction between good design and none at all, though in many cases it might appear otherwise.
The combined learnings of the last two decades have brought the industry to a place where tech and design converge harmoniously. It’s finally possible to give due value to design thinking and process, while at the same time building products with an agile approach that benefits all teams involved, the client and, most importantly, the user.
As digital semantics becomes common language at a global scale, universal patterns of behaviour emerge, enabling shared thought structures to be immediately understood, across any physical borders or cultures. Elements on screen become symbols, associated with specific functions that are not limited or defined by a particular alphabet. They’re called design systems.
This article was originally published in net, the world's best-selling magazine for web designers and developers. Subscribe to net here.
Ana is a creative director in design. Having worked in advertising, client-side and startups, she has a good understanding of the positive impact of having a design presence at C-level.
