and Evernote: Redesigning my landing page

Posted: - Modified: | geek, visual

Hello, I’m Sacha Chua, and today I’m going to show you some of the ways I’ve been using‘s new Evernote integration as well as the Areas and Outline feature. (You can enable the Areas & Outline feature by clicking on your account picture, choosing Settings, and choosing Labs.)

You can watch the screencast (< 2 minutes), or read the blog post below.

I was recently working on a small redesign of my blog’s landing page at While giving people my card, I realized that my personal blog can be… a little overwhelming for people. Time to design a new page!

First, I started with some ideas for what I want this page to do. The text tool makes this easier, and I can draw connectors between items. Even if I move the items around, they stay connected.

Untitled (Time 0_00_30;03)

There’s a lot of great inspiration out there, so I use the Evernote Web Clipper to save images and webpages to my notebooks. I file the relevant notes in my project notebook and tag them with keywords.

Untitled (Time 0_00_40;06)

To import the notes into, I click on the Evernote icon. You can search across all of your notebooks, or you can pick a notebook to browse and search within it. Adding the note is as simple as clicking on the thumbnail.

Untitled (Time 0_00_50;07)

One of the things I really like about is the ability to see multiple Evernote items together, like clipping things to a virtual bulletin board.

Untitled (Time 0_00_59;19)

With the Areas and Outlines feature, it’s even easier to keep things organized. To define an area, click on the Spaces icon and fill in the name.

Untitled (Time 0_01_03;29)

If I want to get back to the original site that I clipped, I can right-click on the item and open the note in Evernote, then follow the source URL.

Untitled (Time 0_01_11;00)

I drew some ideas for my landing page design on my tablet. Let me add them here as well.

Untitled (Time 0_01_17;11)

So then I drew the landing page design and implemented it on my site. Here’s a screenshot that I saved to Evernote… and now I can update the arrows to show what connects to where, doublechecking that I’ve covered everything.

Untitled (Time 0_01_32;19)

Now that makes it super-easy to grab my Evernote clippings, I can imagine using for sketching out user interface flows, data visualizations, and all sorts of other stuff. I hope you have fun with it too!

Other things you might be interested in:

For your convenience, this post is also available at . Enjoy!

You can comment with Disqus or you can e-mail me at