Explore

Designing a beautiful doc
Designing a beautiful doc

How to create a beautiful and usable Coda doc that you can publish.

How to create a beautiful and usable Coda doc that you can publish.

John Scrugham

All great docs begin with a great idea. But once you have your idea and the structure of your doc, what does it take to bring a doc from basic to delightful? In this doc we’ll walk through tips and ideas for how to make your doc delightful by:

Making it beautiful through visuals like cover photos, and colors.

Making it usable trough navigation and interactive features.

This doc was made for a class given internally at Coda on November 2020. You can watch it here:

⁠

Watch recording

⁠

If you’re looking for more general publishing tips, I’d recommend starting here:

The Publishing Starter Kit⁠

⁠

Pt. one

Making it beautiful

The visuals are the elements that are instantly going to set the tone and feeling for your reader. In particular, it’s important to think about the “above the fold” area on the first page. Many of the elements on that page can be set in the “Page options” panel.

⁠

Screen Shot 2020-11-02 at 11.16.17 AM.png

⁠

Cover photos

Your cover photo is your welcome mat, setting the tone for the rest of your doc. - LT

Your cover photo is really important because it’s probably the first thing that someone will see in your doc. It will appear in any link preview, as well as in the doc gallery. So you want something that really speaks to the tone of the doc and can stand out in a feed of other competing visuals. You want it to not only look great in the doc itself, but in any social media feed.

⁠

How do you choose a great cover photo?

Choose a photo that feels personal to the doc, versus feeling like a generic stock photo that could be plopped into any article.

A lot of our docs revolve around the theme of work, computers, productivity, etc. Try and avoid photos of computers :) Else many of the docs in our gallery will have this. Instead try and abstract the title in some ways.

When you’re missing a good keyword to search for, just try and pick something highly visual with contrasting colors or interesting patterns. You can even search for “colors” or “patterns” on Unsplash.

⁠

When using photos of people, aim for showing a diversity of people both in gender and race.

Remember that your cover photo might be cropped to the center sometimes, so make sure that it looks great when it’s cropped.

Exercise

Which cover photo below could be improved and why? Which over photo do you think works best here and why?

⁠

set the tone for the doc

not distracting

Header & icons

The subtitle of your doc will appear in the link preview, but it also adds a nice visual element to your header.

Do you need to use a header icon?

You don’t. Does your icon add meaning or personality to your doc? If so, then definitely go ahead and use it. However, if it feels generic then it might just be competing against the cover photo and elements on the page. Below is an example of a doc where the icon isn’t adding a lot of meaning to the doc.

Avoid using two different icons for the doc title and the first page header icon, unless the first page has a more specific purpose than to be an intro page.

⁠

Content alignment

Standard alignment is usually best for all pages in your doc.

As a rule of thumb, you want to use the same content alignment for all the pages in your doc. That’s because the navigation ( if you’re using the top-nav) will move around if you’re using both standard and wide.

If most of the content in your doc is text and pictures, it’s better to use “Standard”. Try and only use “Wide” if you have really wide tables in your doc. You can also try and avoid wide tables by only showing some columns in the detail view.

Fonts and typography

Standard is for tables, Serif is for text.

Coda gives you two font options to pick from, standard and serif. It’s better to use Standard if you have tables in your doc, but if most of your doc is text then either Standard or Serif will work well!

If your doc has an intro page that’s mostly text then it’s fine to use Serif there and Standard on the rest of the pages.

When using headers, try and make sure your headers are being used to group information together. A nice trick is to turn on the table of contents. When you turn it on, does the grouped information make sense together? Look at the table of contents on this doc and see that as an example.

Large is usually not necessary for published docs unless there’s a small amount of text on the page.

ALL CAPS sounds like someone is screaming at you. Sometimes you’ll see it used in really small type sizes on websites, we don’t have a font size that small. So please don’t use it.

Colors

Most of the color should come from the content itself.

Bring in colors to your doc through: images, multicolored chips, charts and key buttons.

Else use color in typography selectively.

In paragraph text, try and avoid using colored text because it’s harder to read. Instead use the highlighter to call out important parts of your text. Always better to use bold and italics.

In headlines, use color to draw attention to an interesting part of your headline instead of using it for the whole headline.

The headline already stands out because it’s bold, and bigger.

So think about what else needs to stand out in this headline?

Gray is a color! And it’s really nice to use to make some headlines stand out a little less. Note how this doc uses to make the “making it beautiful” headline stand out.

⁠

Every doc begins with a great idea.

At Coda we believe everyone is a maker and we can all make great docs to solve our problems.

⁠

Every doc begins with a great idea.

At Coda we believe everyone is a maker and we can all make great docs to solve our problems.

⁠

Exercise

How are these docs using colors? What works well, and what could be improved?

⁠

Buttons

Buttons and colors

Avoid using red or orange buttons unless they are “dangerous” buttons to click. Red and orange are often colors used to show warning or caution.

If you’re using multiple buttons together try and highlight one button with a color and use white for the rest.

Buttons and icons

Only add an icon to a button if the icon itself communicates the idea. Ask yourself: if the button didn’t have the label, would I understand this button with only the icon? If so, then it’s probably helpful! If not, then you might want to leave out this button.

In this example below, there are many conflicting elements near the button:

⁠

Try this instead:

⁠

Copy this doc to start

⁠

Exercise

Which of these buttons are using icons well, and which ones are not? Why?

⁠

Pt. Two

Making it easy to use

Part of making a delightful doc is that it should be easy to use. Besides the core doc model, here are a few tips for how to make your docs easier to use.

Navigation

There are two types of navigation you can use in Coda: top nav, or a sidebar. So when should you use which?

Sidebar can be good for..

Wikis - Where there are a lot of pages and the user will need to easily navigate from page to page.

Ordered processes - When there are a series of steps to go through and they must go in order, it’s better to use the sidebar because you can vsually see that order.

Top nav is good for..

Fewer pages - When there are fewer pages that people need to navigate through then these tabs work well. Example: 3-4 Tabs

Distinct categories - When there are categories that are so distinct from one another that users don’t necessarily need to view all of them then top nav works well for that. Example: A group of projects, under a page called projects.

Exercise

How are these docs using navigation? Did these docs choose the best kind of navigation?

⁠

Folding

Only collapse sections if you are fine with people not reading some sections, it’s better to leave things open than to close. Collapse if that content is only meant for a subset of people or you explicitly want to unveil something.

Scannability

In order to make a long piece of text easier to scan and read, we should try to add elements that add to the story and message as well as break up the information.

The best visuals maintain a clear message by drawing attention to what’s most important. -Elizabeth Lin,

Source⁠

⁠

For example, instead of having an intro page with a wall of text, try and find ways to break up that information. Some methods might be through: pictures, charts, horizontal rules, headlines, or pull quotes.

Exercise

Take a look at the two docs below. What works well about each of them? How would you add visual variance to the top doc?

Eigenquestions: The Art of Framing Problems⁠

⁠

White space

White space is the negative space that surrounding the elements in your design (or doc). Adding white space can actually make the core elements stand out more. You can apply this principle in your docs by adding extra spaces above and below content blocks. Always use the same amount of space though so it looks visually consistent.

⁠