Introducing WingNotes, a Note-taking App Designed for Studying

Brandon Le
5 min readJul 24, 2019

Taking notes is an important way for people to record information they want to retain. And many tools have been built to address many note-taking use-cases such as todo lists, team-wide knowledge-bases, or general-purpose notes.

But finding the right tool to visually organize study content remains quite an elusive task, especially for technical topics like STEM which rely on examples or references.

This problem led to a side project of mine that would become WingNotes, a two-column note-taking app designed to help organize study notes and make it easier to review your content. And now, I’m happy to release WingNotes for others to use and share a bit of what motivated me to build it.

Deconstructing Study Notes

Before taking a look at what current note-taking apps look like, let’s take a deconstruct what study notes typically consist of. By and large, study notes can be divided into two primary types of information:

Descriptions: text details that describe the topic of interest. This includes headers and paragraphs, but can also include bullets or numbered lists.

References: any supporting examples or media that correspond with a particular description. The most common examples include images, videos, code snippets, graphs/charts, citations, etc.

The ideal note-taking app for studying would organize these two components in a way that is easy to write and review.

The Current State of Note-taking Apps

Single-column Apps:

Most current note-taking apps like Evernote are pre-dominantly single-columned. That is, the note-editor can only hold information inside a single text area, with all content vertically stacked on top of one another.

67%-zoomed view of note. To see the full note on Evernote, click here.

Note how the descriptions and references (diagrams) are vertically laid out one after the other.

While this is fine for short notes, a crucial issue arises when the document grows long and the heights of the descriptions and/or references make it difficult to visually refer to each other at the same time.

Let’s take a look at an example of how an average note-taker would review their single-column notes:

The familiar need to scroll up and down to review content. On standard 13in MBP screen.

In this example, the note-taker has to scroll up and down every time they want to review or compare their description and reference. Unless the note-taker has a large or tall screen, the one-column layout makes it difficult to read both parts at the same time.

Flexible-layout Apps

There are some note-taking apps like Notion (of which I’m a big fan of for team knowledge bases) that allow for manual formatting of the document. But currently, this can be extremely overwhelming for the average note-taker.

When taking notes, it’s often difficult enough to just focus on what to take notes on, say during lecture or while reading a textbook. Having to (1) determine the structure that visually organizes your notes most effectively, and (2) manually maintain the structure throughout all your notes can be a great burden on people.

And because the layout is manually maintained, that also means the layout isn’t responsive…

Manually creating a non-responsive, two-column note in Notion.

Enter WingNotes

WingNotes was designed to help learn material faster by providing a clear visual structure specifically for descriptions and references. Originally created to take computer science notes (which often includes code or diagrams), WingNotes can also be used for any subject that relies heavily on descriptions and references.

67%-zoomed view of note. To see the full note on WingNotes, click here.

Descriptions

WingNotes’ layout was made to place descriptions on the left side of each section. This way, you know that everything on the left side is descriptive.

Descriptions column. On standard 13in MBP screen.

References

The right side of a note is reserved for references like images, videos, code snippets, graphs/charts, citations, etc. It’s designed to neatly organize your references for easy review along with the corresponding descriptions.

Reference column. On standard 13in MBP screen.

Responsiveness and Markdown Support

WingNotes also comes fully responsive, adjusting the layout back to a “normal” single column text editor when screen space is limited. And to make it even easier to use, WingNotes comes Markdown-ready, which means you can use a few common shortcuts to stylize your texts.

Layouts are an important aspect in organizing one’s notes, and subsequently helping one learn more effectively. Two-column layouts for descriptions and references has shown to be extremely effective for studying, reviewing, and learning material. I hope WingNotes helps those who have been searching for a simple note-taking tool to study topics more productively.

Check it out for free at wingnotes.app, no sign-up necessary to play around!

If you have other optimal ways to take digital study notes, I’d love to hear about them in the comments below. And if you have any feature requests or questions about WingNotes, please feel free to reach out at brandon@wingnotes.app.

📝 Read this story later in Journal.

👩‍💻 Wake up every Sunday morning to the week’s most noteworthy stories in Tech waiting in your inbox. Read the Noteworthy in Tech newsletter.

--

--

Brandon Le

Always learning, doing, and exploring. Formerly @yc @mit, @supplywireless