Explore

How to design your docs to shine like a diamond
How to design your docs to shine like a diamond

Ideas on how to make your Coda docs beautiful using page layout

Ideas on how to make your Coda docs beautiful using page layout

Hieu Tran

Published on 01/05/2022

Up until now, building blocks in Coda flow like a waterfall—from top to bottom. Sad to say, this single-column limitation has been preventing you from designing a more flexible, expressive, and beautiful layout for your docs. Also, looking at the Coda community, we have heard that our makers have a lot of different needs to layout various building blocks side-by-side.

⁠

I could be able to do a lot more with my document if I could add columns to the actual document text

⁠

I’d love to be able to have 2 tables side by side

⁠

[With columns] I can see the bigger picture easier and see everything in one glance without need to scroll and scroll further

⁠

If this becomes true, I could even use Coda for my presentation

At last, the time has come to either makeover your old docs or design your new docs with Coda’s newest and shiniest feature:

page layout⁠

⁠

💍 Single building blocks (Put something next to it)

Now that Coda supports having columns to place content side-by-side, you might wonder, “How should I use this new fabulous feature?” Hold my drink, please. There are countless use-cases for you to apply page layout in your docs: from breaking up a long to-do list into multiple columns, to putting images side-by-side in a blog post, to crafting a project brief with text next to images … and the list goes on. Trust me, the possibilities are endless—just like my cocktail options.

⁠

Planning a wedding, a vacation, or just a daily to-do? Use columns to have multiple checklists next to each other.

⁠

Do you enjoy writing blog posts to share your provoking thoughts? Then you must also love putting images side-by-side.

⁠

Crafting your work experience in Google Docs is so 2010. Try having a better-looking resumé using columns in Coda.

⁠

Is your project brief looking a little stale and dull? Why not spice it up with zig-zagging sections of text and images?

Beyoncé preaches that if you liked it, then you should have put a ring on it—and I honestly couldn’t agree more. So now if you think a certain building block looks cozy next to some other building block, then you should absolutely put them next to each other in columns.

⁠

😒 Break up your content, I‘m bored

One particular Coda building block that I feel underused is the line separator. As a designer, I found myself using it often, in addition to white space, to visually isolate various sections of my docs. I low-key tear up every time I see a doc with so many visual elements crushing on top of each other without any clear separation. To that I scream, “These building blocks are so into each other, they can barely breathe!” One really cute thing about using columns in Coda is that the majority of components are responsive to the width of columns—line separator is one of them.

⁠

Doesn’t it feel less chaotic when building blocks are neatly divided up into sections using both white space and line separators?

⁠

See those responsive line separators? Use them responsibly to split up small units of your content within columns.

Ariana Grande wishes that you would break up with your lover because she is bored—but I’m here to tell you that might not be the smartest choice. Instead, you should break up your content into beautiful blocks using line separators. I promise you, it will make your docs less boring.

⁠

📝 Blank columns, where you been?

When I was a baby graphic designer, my editorial design instructor would often say to me, “You have an uncomfortable relationship with white space.” I honestly never knew what she meant until much later in my career. I always thought it was a smart idea to shove in as many design elements as possible onto a given surface. Turned out, I was wrong. Using white space effectively can create focus and clarity around your content. With page layout in Coda, you can have columns that are intentionally empty. My favorite trick is to use blank columns as a way to offset content.

⁠

With blank columns, you can easily push content to the right or left. Sometimes, not everything needs to be centered.

⁠

Need I say more about why I love blank columns? Have you noticed how I have been using blank columns to offset every example in this blog post?

Taylor Swift loves to write the name of her lovers (or exes) in a blank space—which is a habit I fully endorse. But at the same time, I also want to recommend that you use blank columns to visually offset content to create more dynamic and expressive layouts in your docs.

⁠

🕺 Dancing with a mood-board

If you are a creative that loves to collect images and links to reference later, you can easily achieve the mood-board aesthetic look inside Coda’s columns. Prior to page layout, it was tricky if you wanted to have images or embeds next to each other—you would have to resize one building block so that it can make room for another building block to sit on the same line. To that I yell, “Hell No! What is this vibe? This isn’t cute.” But now, you can quickly create multiple columns and place all of your visual elements in there—and they will adjust to fit the width of each column.

⁠

Having images of different heights creates a beautiful sense of unbalance—and not to mention it looks like your own personal Pinterest board.

⁠

Don’t limit yourself to just images and gifs, but also try creating mood boards using embeds and URL cards.

Sam Smith enjoys dancing with a stranger because he is lonely at night, and I am too (like for real!). But instead of that, you can dance with a visual mood board to help spark inspiration and ideas on your next award-winning project.

⁠

We hope this new feature will allow you to create more experimental and playful doc layouts that utilize numerous Coda building blocks. This is just the beginning of our effort to enable more customization to make Coda docs more robust and beautiful. Let us know what you think and what you end up designing.

Rihanna believes that we’re beautiful like diamonds in the sky—and yas honey, we really are! Now, I want you to transcend your inner and outer beauty and manifest that into your next Coda doc. Energize your docs to shine bright like a diamond in this limitless universe we know as The Internet.

⁠

To learn more about the mechanics of how to use page layout, you can read our

community post here⁠

. If you have ideas for making Coda docs more fabulous, we’d love to hear from you in the

Coda community⁠

. As always, we can’t wait to see what you make with Coda ✌️.

This was written on behalf of the page layout team (Teresa de Figueiredo, Gleb Posobin, Stone Shou & Andrew Granoff) who worked on making these experiences possible.

Character illustrations from

Doodle Ipsum⁠

⁠

💍 Single building blocks (Put something next to it)

😒 Break up your content, I‘m bored

📝 Blank columns, where you been?

🕺 Dancing with a mood-board

Gallery

Want to print your doc?
This is not the way.