Welcome back. I'm 35,000 feet in the air right now, and I'm convinced I was built to thrive in a pod in space.

But I can't do much reflecting on the year, because during our This Week in Design livestream, someone said "what you say is what you get" and I can't stop thinking about what it means for software interfaces.

It's clear that our tools are changing. What's less clear is how. But I have some ideas.

And thanks to thousands of you, we'll have more data points from this year's Design Tools Survey.

Please take a sec to fill it out before it closes on Dec 31st.

—Tommy (@DesignerTom)

The Wireframe:

• The Evolution of WYSIWYG Interfaces
• How We WYSIWYG Today
• A Glimpse into the Future

Software tools are dope.

Don't you forget it.

In just the last week, we got:

1. Spline's Shape Blend​
2. LottieFiles' Lottielab 1.0​
3. Rive's release year in review​
4. Screen Studio's 3.0 release​
5. Framer analytics​

Ali R. Tariq 🍉 @alirtariq It's easy to forget and not appreciate how the tools we have wide access to today are so incredibly powerful. This type of stuff was absolutely unheard of without breaking the bank on hardware and software. And now it's in your browser for free. Sheesh. https://twitter.com/splinetool/status/1869060989699899700 Spline @splinetool We are shipping Shape Blend, a new way to build and interact with 3d, all in Spline. 12:8 PM • Dec 17, 2024 0 Retweets 5 Likes Read 1 replies

​

And through the whirlwind of these releases is an emerging pattern I'm paying attention to: an evolution of WYSIWYG.

Note: If you geek out over interfaces, this one's for you. But as you read, ask yourself:

1. Why did these patterns become dominant?
2. What can I take from historical UIs and apply today?
3. What are the next UI paradigm shifts?

The Evolution of WYSIWYG Interfaces

WYSIWYG: "What you see is what you get."

In 1973, Xerox PARC’s Alto computer displayed something magical: text on a screen that mirrored what you’d see on paper.

A familiar metaphor for unfamiliar territory.

Then Xerox developed the BRAVO text editor, a tool for editing text with formatting that matched printed output.

But it wasn't until the Apple Lisa was introduced that the WYSIWYG pattern went mainstream.

Apple Lisa was the first PC to offer a comprehensive WYSIWYG environment.

Users could create documents that looked on-screen almost exactly as they would in print.

Made possible by:

• LisaWrite: A word processing app providing true WYSIWYG text editing: fonts, styles, and page layouts were shown exactly as they would appear when printed.
• LisaDraw: A graphical drawing app that allowed users to create and arrange visual elements with precision, reflecting the final output.

These tools reflected a paradigm shift.

But when Microsoft released Word for Windows, WYSIWYG went generational.

And then something different happened: the WYSIWYG metaphor was used for publishing to the web instead of print.

Cue the intros of Microsoft FrontPage and Macromedia Dreamweaver, visual editors for creating websites.

And born again was a new iteration of WYSIWYG.

This pattern has morphed and flexed to new protocols (Kit for email), visual mediums (Streamlabs for livestreams), and mental models for doing work (Notion for productivity).

We've turned the page to a new chapter in interfaces: WYSIWYG 2.0

Together with Framer​

Designing a Website 🤝🏻 Building a Website

If you’re a designer tasked to create and publish visually stunning websites, there’s a tool for that. If you want to boost creativity while speeding up the overall web development process, you need Framer—no coding required.

The next best no-code website builder for designers, Framer:

• feels and works like Figma and other design tools you know
• lets you publish your design as a real website in seconds
• supports breakpoints, animations, and even a whole CMS

Plus, you can even import designs from Figma using our Figma-to-Framer plugin so you don’t have to start from scratch.

Are you ready to learn how Framer can streamline your web development process? Learn more now.

How We WYSIWYG Today

There are two vectors to WYSIWYG patterns that have multiple variations:

1. Input
2. Output

But the golden rule remains unchanged: what goes in must translate the same when it comes out.

Examples of Input

Direct Manipulation WYSIWYG

Users edit content in-place, seeing the changes happen directly where they interact.

Examples:

• Framer: Dragging objects directly on canvas to create layouts.
• Notion: Typing and formatting text exactly as it will appear.
• Canva: Drag-and-drop graphic design with instant visual feedback.

Key Traits:

• Immediate feedback: The interface updates in real-time as the user acts.
• Natural interaction: The user’s mental model aligns perfectly with the tool (e.g., “what you see is what you are working on”).
• Great for: UI/UX design tools, text editors, presentation software.

Challenges:

• Overload of affordances: Users can feel overwhelmed if every part of the UI is interactive.
• Scaling issues: Complex documents or designs can become cumbersome with many layers or nested elements.

Referential or Split-Pane WYSIWYG

A dual-view setup where one side serves as the input area, and the other side previews the result.

Examples:

• Bolt: Raw prompting on one side, rendered code and visual previewing on the other.
• Kit: Formatting in a sidebar and the resulting email preview in the main window.
• Screen Studio: A video preview in the main window with a timeline and a settings/configuration sidebars panes.

Key Traits:

• Explicit separation: Users edit settings or structure in one pane and view results in another.
• Control + preview: Great for scenarios where structure and presentation are equally important.
• Great for: Structured content editing, web design, form-based workflows.

Challenges:

• Cognitive load: Users must mentally map changes in one pane to results in the other.
• Preview lag: Latency between action and result can be frustrating.

Form-Based WYSIWYG

Users fill out structured forms or fields, and the content updates dynamically in a preview area.

Examples:

• Typeform: Choosing pre-defined content blocks or modules and updating content within them.
• Shopify CMS: Inputting data (e.g., titles, descriptions) into fields while previewing the website in another panel.
• Contentful CMS: Modular input fields for managing structured content.

Key Traits:

• Highly structured: Ensures modular, scalable, and clean content generation.
• Dynamic previews: Live rendering of results keeps users in sync.
• Great for: Scenarios requiring strict content structure, like CMS, form builders, or legal documents.

Challenges:

• Lack of flexibility: Users can feel constrained by rigid input fields.
• Learning curve: Requires users to understand the relationship between form inputs and rendered outputs.

Examples of Output

What started as direct translation for print has morphed into use cases for direct translation to the web and beyond:

"How it should look in e-mail"

• Kit
• Beehiiv

"How it looks in my head"

• MyMind
• Miro

"How it should look on video"

• ScreenStudio
• Loom

And the list of output use-cases seemingly continues to grow:

• v0 / Bolt / Windsurf / Devin
• Gemini 2.0
• Notion
• Spline
• Jitter
• LottieFiles
• Rive
• Supercut

The gap between idea to production is closing quickly, and every productivity tool from design to code to knowledge management is seemingly inching towards more and more WYSIWYG patterns.

Just last week, Beehiiv's head of growth revealed their plans to get into web publishing and Grammarly acquired Coda.

What's next?

X launches it's e-mail client and gets into e-mail publishing?

Stripe builds a Zapier for business operations?

Android AR glasses allow us to build spatial UIs on the fly?

How might the new world of WYSIWYG get us closer to creating our ideas than ever before?

And what patterns might you use to build that world?

See you next week,

Tommy

Thanks for reading! What's your favorite WYSIWYG pattern? Hit reply and let me know.

Enjoying this newsletter? Let us know here.