May 11, 2020

How technology and subscriptions brought skeuomorphism back

A history of SaaS landing pages, from flat to sketched to 3D.

by @maguay

Writer. Amateur photographer. Information architect. Frm. founding editor @racket and @capiche, senior writer @zapier, Mac and Web editor @AppStorm. Personal blog: @techinch.
maguay's avatar

When the team that built Wunderlist set out to build something new, its whimsically designed landing page got all the attention.

Wunderlist itself was a final hurrah to the skeuomorphic design that the early iPhone popularized, launched only a couple years before iOS 7 decreed flat design was the next big thing. With paper-like notes, bubbly buttons, and background photos of brick and wood, Wunderlist felt more like a real-world thing unconstrained by silicon and screens.

Pitch, their team’s new presentation app, didn’t bring back digital felt and paper. Instead, it showcased the newest thing in software branding: 3D, clay-style graphics that look more like kids’ toys than digital tools.

Art, so often, reflects the technology of its day. Charcoal on cave walls. Bronze cast in clay. Pigment infused parchment. Letters pressed.

And so it has been with software landing pages, where form followed function and changing technology enabled new design styles. But who would have foreseen software’s switch to subscriptions changing today’s state of the art?

Is this the real world?

BBC globe ident

“This is the BBC” was branding enough for decades of radio news. Simple technology, simple branding.

Television required show and tell, an identification logo or ident as they came to be known. Thus it fell to WWII-era poster designer Adam Games to decide how the BBC should “identify itself to viewers” with “something more exciting than a selection of test cards in between the programmes.”

Technology inspired—“The symbol must move”—and limited. Screens of the time showed only 405 lines of detail, and animation tools were decades away.

So the poster designer teamed up with a sculptor to build a wire and wood model, with a motor and lights to fake animation. Just enough to create the bat wings logo—BBC’s first moving ident.

Technology marched on, and with it the state of the art. The BBC welcomed color TV nearly two decades later with a motorized globe in a mirrored box, color added during the broadcast. And by 1985, computer technology finally matched the BBC’s ambitions as the first digitally rendered globe proceeded the nightly news.

And then software-powered design was everywhere, following the same progress as the BBC’s logo with increasingly better designs as technology made it possible.

Scissors and glue: 1990’s.

Windows and Office box art influenced by paste up art

Technology had influenced print design for decades before the personal computer. Print design, in turn, influenced software branding.

Before you could crop photos and mash them up in Photoshop, designers were clipping art from paste-up books and manually building page layouts on paper. Xerox machines and later digital scanning duplicated the work, but the original always started with layers of paper.

Software branding on boxes and disks arrived when paste-up was still state of the art. The first Microsoft Windows box—released the same year as BBC’s digital globe—was closer to a collage with a photo of a computer framed in blue. Early Microsoft Office box art featured box inception, with boxes for each included product with its own digital clip art icon.

Flat and fast: 2000-2005.

Early flat startup web designs from Salesforce, Wufoo, and Mailchimp

Box art changed faster. Office boxes showed clouds (to match Windows 95’s iconic background), photos of actual offices, and bubbly 3D icons. Adobe put paintings and photo mashups on their boxes, educational software included cartoons. With print design and loading screens, there were few technological restrictions to hold you back.

For nascent web apps, though, simple flat designs weren’t as much an aesthetic choice as a necessity. When your average user has dial-up internet and a browser like Internet Explorer 5 with limited CSS support, you kept things simple.

Thus the flat, boxy designs that dominated early web apps such as Salesforce’s site in 2000, MailChimp in 2002, and even Wufoo in 2007. Strong colors, detailed copy, and grid-based layouts defined early SaaS startup’s design language.

Screenshots everywhere: 2005-2015.

Basecamp, Typeform, and Airtable with screenshot heavy designs

In the grand tradition of BBC’s fake-animated logo, web designers used detailed image layouts to get around the early web’s limitations. Product companies like Apple built their sites around images, with product photos and detailed typography patched together from Photoshop slices. You couldn’t copy the text, and the sites took longer to load, but the web's design limits didn't hold you back.

SaaS startups had to take the slower route. Their customers would load their landing pages daily, and every second mattered. As internet speeds increased, though, that became less of an issue, and suddenly photo-heavy sites were everywhere.

Basecamp switched earlier than most SaaS to a screenshot-heavy design in 2005, before newer startups like Typeform and Airtable put a modern takes on the design a decade later. Wunderlist put their efforts into designing the software—and let it speak for itself on the landing page. Software’s design was what mattered now; the landing page stood merely to showcase it.

Sketchy designs: 2012-2018.

Dropbox, Mailchimp, and Basecamp new designs

Then came touch, with smartphones and tablets and the digital apps they enabled. Wacom tablets had been around for decades, but the iPad gave everyone a chance to try their hand at sketching.

So when analyst Ben Thompson launched Stratechery in 2013, he used the Paper drawing app on iPad to illustrate his first article. “For me, it was honestly a feeling I really didn’t anticipate: I drew something, and it didn’t suck!” relayed Thompson. Years later, it’s still how he illustrates his blog posts.

A similar sketched style of illustrations took over SaaS landing pages around the same time, prompted by similar apps. Basecamp in 2012, Airtable in 2016, and both Dropbox and Mailchimp in 2018 redeigned their sites with a more organic, sketched design.

There was “a huge wave of illustration” prompted by the new drawing apps, shared freelance designer Valentin Galmand who’s worked with Lattice among others. “For me, it was Procreate that made me an illustrator now. I was an Interface designer and developer before, and when my agency I worked for got an iPad and Procreate, a long love story began.”

“It probably wouldn’t be far off-base to assume that a lot of these illustrations were done … by product designers who also have some illustration talent themselves,” surmised designer Koi Vinh in an essay on illustration-style designs. “They designed the app and while they were at it, it was faster and cheaper to just have them create the illustrations too.”

Sketched designs were easier to make—and gave brands more life than screenshots alone. They “illustrate your message a lot more than photos and are so much lighter.” Sketches made websites faster, too. Retina displays made photo-heavy designs need increasingly large images, while sketched designs in SVG files let websites load faster while having perhaps more of an impactful design than screenshots and photos allowed.

Tools as toys: 2018-2020.

3D landing page designs from Pitch, Maze, and Specify

Then Pitch showed up in late 2018, and with it a new wave of startup sites with bubbly 3D graphics.

“There’s no official name for it,” said Romain Briaux, the designer behind Specify, Swile, Evolt, and other startups with the new 3D graphic design. “Clay-style” perhaps, or “plastic-toys.”

It’s in sharp contrast to what Galmand had described as “classic SaaS illustrations” with flat colors, screenshots, and sketched artwork. These new designs looked like they walked off a Pixar set.

“Startup websites were a bit stuck with the same illustration style and everything was looking the same,” said Briaux. “3D graphics brought something fresh and new.”

“Claymation-style 3D hands imply our design tool is our friend,” said designer Tobias Van Schneider in a recent essay about design trends. “Circles and squiggles say our form-creation app is here to party. The muted colors and lack of sharp corners signal safety. It is approachable. It is charming. It’s Kawaii.”

Mixpanel and Swile 3D designs

Realistic, 3D graphics were formerly the domain of studios, requiring thousands of dollars in equipment and software. Then, seemingly overnight, even new startups with limited budgets had animated characters selling their products.

This time, two innovations changed the state of the art: Software and subscriptions.

First, software. The biggest change is that most 3D renders—Octane, Redshift, and Blender’s Eevee—are now live, a shift enabled by GPU advances over the past few years.

“Before live rendering,” Braiux explains, “the process was tedious. Imagine that you had to do all your settings for lighting, material, etc., and then wait 10 minutes to see that the result was not as you expected.” Live rendering means today’s 3D design software makes it easy to experiment through trial and error and ship something more quickly. “You can see what you are doing without waiting and it changed everything,” said Braiux. “It's easier for beginners to learn and achieve nice results.”

Then, subscriptions. “One of the main reasons is the fact that design tools have become more widely available,” explained 10Clouds designer Igor Kozak, something that helped both traditional and 3D design tools spread. “Thanks to various subscription options, almost every designer can afford to use Photoshop. Other tools such as Cinema 4D are more expensive, but you can still purchase a license to use it for $100 for a month without being tied in”—something that cost $3,495 before subscriptions. Even as subscriptions helped inflate software costs over time, as you may pay more over time for subscriptions than you would have paid with one-time purchases, their lower per-month fee makes it far easier to use software for a limited-time project.

Then there are increasingly powerful free tools. “Blender is free, super advanced, has been completely redesigned and now the UI is more ‘designer-friendly,’” explained Braiux. And last year, Blender gained a live rendering engine, Eevee, that’s made 3D design even more approachable. Designers can start for free in Blender, then upgrade to subscription rendering tools like Octane (a 19.99€/month subscription today, versus 299€ before) as their skills improve.

Subscriptions mean you don’t even need a powerful computer to render 3D graphics. Instead, you could run Blender or Modo in the cloud with tools like RenderStreet from $3 per hour, or even use Pixar’s RenderMan in Google Cloud from 53¢ an hour.

Subscriptions made advanced design tools accessible to everyone. And now, they’re everywhere. As Briaux said, “Technological barriers almost disappear and designers have now the freedom to create more easily.”

“Technology is constantly evolving,” says Kozak, “and as a result, we can now create something faster and at a higher level of quality for $100 than we could for $200 a couple of years ago.” As designer Sheldon Drake wrote, “It’s the difference between nearly impossible and just press OK.”

It’s now entirely feasible for startups to commission 3D designs for their homepages, thanks to the combination of better tech and subscriptions.

Future design.

Lattice and Firekast designs

Already the styles are merging. Notion and Airtable mix sketched designs with screenshots. Lattice’s landing page combines 3D graphics with photos; Mixpanel put screenshots and 3D material elements together. Luc Chaissac’s sketches mixed with 3D graphics for Lattice and Romain Briaux’ 3D animated line sketches for Firekast that blur the lines between the two styles.

“Design can be compared to fashion, which is cyclical,” said Igor Kozak. Flat, then 3D, then something in the middle, then something new again.

The software that enables Pitch-style 3D graphics also enables everything from animated sketches to hyper-realistic models. And it’s not just the tools to build 3D graphics that are changing—the web is changing too. Tools like Airbnb Lottie render After Effects in real-time in the browser—no video or GIFs needed. Sketchfab lets you embed 3D models in a site today; tomorrow, it could power more creative landing pages.

It’s not software holding design back anymore. We’re far beyond wire and wood. Imagination’s the limit—and for today, that seems focused on designing the most graphical landing pages possible.

“There’s a saying in Russian: ‘When you meet a person, you judge them by their clothes. When you leave them, you judge them by their mind,’” relayed 10Clouds’ Igor Kozak.

“I think the answer here is that startups need to learn how to present themselves as you only have one chance to make a first impression. Effective illustrations, along with the right messaging, will provide a strong user experience, guiding prospective customers through their journey on your website.”

It just might be an animated character that guides you on your next user journey. Clippy may at last have its revenge.

Image Credits: BBC mirror globe via YouTube. Windows box photo via First Versions. Office 3.0 box photo via WorthPoint. Paste up image via Creative Pro. Header photo via Pitch. Older landing page screenshots via Wayback Machine.

FORMAT WITH MARKDOWN; DRAG AND DROP IMAGES
osbennn's avatar
@osbennn (replying to maguay )
3 years ago

I did not realize that the "Alegria" illustration aesthetic was history! I'm still seeing it everywhere.

2 points
maguay's avatar
@maguay (replying to @osbennn )
3 years ago

Don’t think they’re quite history yet—though just came across a site, Blush, designed to make that style of graphics for you automatically. So they’re at the level of saturation where they’re becoming standard and almost passé—and 3D or mixed designs are the new “fancy” design style.

Or so it seems!

2 points
osbennn's avatar
@osbennn (replying to @maguay )
3 years ago

Ha! Yeah, I guess that when you can automate it, that's a good sign that it's already peaked.

2 points
What's the best way to get feedback about a design or product?

Do you have a favorite survey or poll tool to get feedback, or a unique process to get actionable insights from your users about your design, product features, pricing, and more? There was an inte...

What's the best tool for building a customized API documentation?

Let's say you have an API you want to document and you want to: - Let your users test their calls to the API thanks to a "playground" like the one on the Figma API - Be able to customize it to matc...

The community for power users.