Tags: screencast

RSS - Atom - Subscribe via email

Mural.ly 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 Mural.ly‘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 LivingAnAwesomeLife.com. 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 Mural.ly, 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 Mural.ly 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 Mural.ly makes it super-easy to grab my Evernote clippings, I can imagine using Mural.ly 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 sach.ac/murally . Enjoy!

Capturing my sketchnotes with Camtasia Studio Pro; organizing the digital workflow

Posted: - Modified: | drawing

People often want to sit beside me to see how I’m drawing my sketchnotes, so I thought I’d record one session and put together a short video. Here’s how I drew yesterday’s sketchnote. In this video, I zoomed in so that you’re not distracted by all the other controls I have open. =)

Most of the sketchnote artists I know work on paper – sketchbooks, large sheets of paper, whatever. A few use iPads or Android tablets. Few people use tablet PCs, possibly because most designers like using Macs and Apple’s not keen on the tablet PC / stylus combination. I love how I can use my Lenovo X220 Tablet PC to sketchnote, and I want to share what I’ve been learning along the way.

Working on the computer, it’s easy to:

  • colour-match logos
  • paste in pictures and templates
  • draw over a light grid for alignment and spacing
  • move things around, erase things, resize things
  • draw without worrying about blurring or smudging
  • export to different resolutions
  • publish immediately after an event, which is great for following up and for catching the wave of interest on Twitter and blogs
  • capture my sketchnoting process and turn it into a speed-drawing video

I use Autodesk Sketchbook Pro. If I want to record my sketches while I’m doing them, I turn on Camtasia Studio as well. I used to use ArtRage for drawing and animation, and I’ve produced 1-minute animated sketchnotes using that, but it’s not as responsive and pen-friendly as Autodesk Sketchbook Pro is.

Working on a tablet PC is so different from working on paper or on a digitizing tablet like those small Wacom ones. On paper, you can use your peripheral vision to keep the big picture in mind as you’re working on some detail. With digital sketchnoting, I zoom in so that I can draw legible letters, so I don’t have that sense of space – but I can work at various zoom levels using very similar motions, so I can be more consistent. The ability to sketchnote an event in person without needing a special table or access to a power outlet allows me to put the spotlight on all sorts of events, while a digital workflow lets me publish things right away and spread the ideas even further.

Some organizational tips if you’re heading down this path as well:

Invest the time in developing your templates. I’ve been experimenting with different aspect ratios. Lately, I’ve been using a 7.5”x10” template at 300dpi, which means that I can print my sketchnotes on letter-sized paper, and they still look decent at 11×17”. I also have templates for a square grid and for credits so that I don’t spend time lining up my name, Twitter handle, and URL just so.

Save the colours and your favourite brushes to your palette. Make it easy to switch between colours by adding them to your palette. Experiment with the right brush widths too, and save those.

Pay attention to how you name your files and save your images. Exporting files with descriptive names saves me lots of time when it comes to filing and searching them afterwards. I sketchnoted more than a hundred 1-hour talks last year, and I often find myself using Evernote to dig up a specific sketch.

Lots of people tell me they’d love to learn how to do things like this. I want to help people improve their visual communication skills. What kinds of questions do you need answered? What would help you get started?