The recent release of Figma 3.0, a collaborative interface design platform, reminds us how far software has come since design went digital over 30 years ago.
And it’s not just about the superior speed or technical capabilities of the tools we have today, though of course our wafer-thin MacBook Pros are thousands of times more powerful than the 1980s’ first mainstream machines. It’s also about a cultural change that goes back to the middle ages: the leveraging of technical progress to democratize knowledge.
From printing presses to keypresses
In 1439, Johannes Gutenberg created a printing press that for the first time made it possible to rapidly duplicate and disseminate information. The effects of the printing revolution were immediate and dramatic. By the 1480s, book printers were operating in at least 110 locations around Europe, and by the end of the next century, they had produced hundreds of millions of copies.
Although the first mass-production book made using this new technology was the Gutenberg Bible in the 1450s, in the longer term its effect was to prise away control of knowledge from the political and religious gatekeepers of the time. This cultural shift played a crucial part in the Reformation that swept across the continent in the 1500s, and paved the way for the Enlightenment in the centuries that followed.
The Gutenberg Press
The technical innovation of the Gutenberg Press began a period of democratization of knowledge that continues to this day. Perhaps surprisingly, though, the next bona fide revolution in printing and print design didn’t happen until the early 1980s.
There were, of course, significant technical improvements to the machines and methods used by printers in the intervening 500 years. And thanks to movements like Bauhaus and Brutalism, there were also fundamental changes in our cultural expectations of art and design.
But the basic social structure of how you designed something and went to print had not really changed. You prepared your manuscript and your graphics, handed them over to a commercial printer, and they used their expensive, industrial-scale equipment to create page masters and make copies.
The desktop design revolution
Depending on your age, the phrase “desktop publishing” might evoke uncomfortable recollections of family members creating party invites in Comic Sans on Microsoft Publisher circa 1997.
But, aesthetic travesties aside, a fundamental shift was taking place: the tools of the trade, both for editorial design and the dissemination of information, were migrating from professional publishers and commercial printworks to the home office.
Professional desktop publishing software like Aldus Pagemaker (1985) and Quark XPress (1987), combined with early image editing packages like Adobe Photoshop (1990) and Jasc Paint Shop (1990), began to transform the way that professional designers worked, and accelerated the adoption of digital printing presses by the commercial printing industry.
Interestingly, the speed of the shift to digital design tools also sharply illustrated the dialogue between design and technology. Designers don’t exist independently of their tools: design decisions, visual language, and cultural conventions are strongly influenced by the available technology.
The arrival of these software tools made it possible to use new graphic techniques, including more radical photo manipulation, experimental typography, and complex layering. Coming to prominence in the 1990s, David Carson was one of the pioneers of these new possibilities, eschewing received wisdom and disrupting the graphic design industry in the process.
The desktop design revolution: key moments
1970: Xerox PARC Alto computer introduces the first mainstream graphical user interface design (GUI). Check out that portrait screen—something that didn't return to mass-market UI design until the arrival of the smartphone.
1974: Bravo, the first what-you-see-is-what-you-get (WYSIWYG) word processing platform, by Xerox PARC. Here, computer historian Ken Shirriff has set Steve Jobs’ famous commencement speech in Bravo, showing that advanced computer typography predated the Mac by a decade.
1984: Apple Macintosh 128K—the first Mac, complete with the beautiful “hello” by Susan Kare.
1985: Microsoft Paint, a simple raster (pixel-by-pixel) image editor, is shipped with Windows 1.0. Paint survives to this day—though it received a stay of execution a couple of years ago. And the amazing illustrations of MS Paint artist Pat Hines show how technical constraints can be the friend of creativity!
1985: Aldus PageMaker, later Adobe PageMaker, a professional editorial design and typesetting tool. It was discontinued in 2001, and effectively superseded by Adobe InDesign.
[MID_ARTICLE_CTA]
1987: Adobe Illustrator, a professional vector image editor. Over 30 years later, it remains a core part of Adobe Creative Cloud.
1987: Quark XPress, a professional editorial design and typesetting tool.
1988: Aldus Freehand, later Macromedia Freehand, Adobe Freehand, a professional vector image editor. Discontinued in 2003.
1989: CorelDRAW, a professional vector image editor. Corel continue to own and develop the product today.
1990: Serif PagePlus, an entry-level desktop publishing tool, is launched. Check out that DTP aesthetic!
1990: Microsoft Word for Windows, the first WYSIWYG version of Word. This is a version of Word 6, running on Windows 3.1! Word might not be a “proper” design tool, but it enabled a generation of designers to discover typography and the dubious joys of clipart and—yes—even WordArt (click for nostalgia).
1990: Adobe Photoshop, a professional raster image editor which fostered big changes in graphic design practice in the 1990s. Although primarily a photo editing package, Photoshop remained the primary tool for UI design until Sketch hit the market in 2010.
1990: Jasc Paint Shop (later Jasc PaintShop Pro, then Corel PaintShop Pro), an entry-level alternative to Photoshop.
1991: Microsoft Publisher, an entry-level desktop publishing tool, here running on Windows 95.
1996: GIMP, an open-source raster image editor and a free alternative to Photoshop, here running on Linux.
1999: Adobe InDesign, a professional editorial design and typesetting tool, and the successor to Adobe PageMaker.
The web design revolution
Hot on the heels of desktop publishing came a rapid growth in internet use in the late 1990s and early 2000s. For the first time in human history, with internet access it became possible for anyone to reach a mass audience without having to deal with a middle-man like a printer, publisher, or broadcaster.
However, this wasn't what most designers would consider a golden age of graphic design. For the first decade or so of the web, the visual quality of the average webpage was constrained by low resolution screens, low bandwidth connections, and underpowered web standards. And, of course, you don't need an eye for design to be able to publish a website.
And amazingly, until the introduction of Sketch in 2010, professional designers were still creating the majority of their mockups using software intended for photo editing and print design.
Key moments in the web design revolution
1995-2003: Microsoft Frontpage, a package which allowed WYSIWYG webpage creation, as well as file management of a web server. Packages like FrontPage were envisaged as all-in-one design, development, and website management tools, but the industry evolved more specialized roles for designers, developers, and product managers.
1996-present: Macromedia Flash, later Adobe Flash, a deprecated animation and video platform that is now disappearing from the web. Before the arrival of better web standards in the form of HTML5 and CSS3, Flash not only delivered the majority of streaming video on the web, but could also be used to create entire Flash-based interfaces and websites.
1997-present: Macromedia Dreamweaver, later Adobe Dreamweaver, a more advanced website design and development package.
1998-2012: Macromedia Fireworks, later Adobe Fireworks, an image editor aimed at web designers.
2010-present: The release of Sketch in 2010 began a new generation of lean, inexpensive UI design and prototyping tools, with mobile app design in mind in particular. Sketch's pared-down features enable designers to work more quickly and intuitively than in traditional packages like Photoshop. (You can learn Sketch with Sketch 101, our free email course!)
2013-present: Marvel, initially a prototyping app, has since developed into a simple browser-based design, wireframing, and prototyping tool.
2014-present: InVision, a browser-based, collaborative prototyping tool. Pictured here is Inspect, a feature that helps designers hand off their work to developers.
The next revolution: collaboration
For all their sophistication and power, the software platforms that dominated the 1980s, 90s, and 2000s were still focused on the model of a single user, working at a single machine, running a single operating system. This is still the assumed starting point in almost all software design, including otherwise stellar contemporary software packages like Sketch.
It’s pretty incredible to think that in today’s world, where we are constantly digitally connected to one another—and where we talk a big game about collaboration—most designers are still working with software that only allows a single user to work on a file at a time, and offers no real-time insight into what others are doing.
However, this is beginning to change. The most significant step so far towards a truly collaborative design platform is undoubtedly Figma, a browser-based interface design tool that was released in 2015 and just received a major update.
Figma allows multiple designers to view and work on the same project in real time—as well as leave comments, build and view prototypes, and work from team libraries of design assets. Think of it as Google Docs for designers.
Figma also has the advantage of having been designed with true collaboration in mind from the outset. Importantly, this means that its developers are released from the difficult and time-consuming task of trying to integrate collaborative capabilities into an existing single-user product.
This platform is emerging at a time when we are coming to understand that problems tend to be solved more successfully when tackled collaboratively: co-creation is becoming increasingly influential as an approach to problem-solving in the design of healthcare services and other complex systems.
As design educators, at Designlab we’re particularly excited about Figma’s potential to allow students and mentors to work together on assignments in real time.
Collaboration is the next revolution in design software—and we’ve put together a free email course about Figma to help you learn the basics!
.jpg)
.jpg)
