Category Archives: sketches

Sketches from my DS Lite

On this page:

Slice of life: Meowrnings

Almost every morning, we can count on being meowed awake by our cats. They seem to do this in shifts so that only one cat is meowing at a time. They don’t really have a snooze button or a time sitting, but they seem to pause for a little bit if you meow back or fully close the door.

imageThis is one of our cats, Neko. (Yes, I have a cat named “cat” in Japanese.) She’s usually the early morning meower. We’ve been trying to figure out why she meows. So far, we’ve determined that:

  • it’s not about breakfast, since there’s plenty of food,
  • it’s not about water, since she has that too,
  • it’s not about being able to drink from the bathroom faucet, since she doesn’t always do that even when I offer, and
  • it’s not about not having company, because she still meows me awake even if W- is up and about.

My current hypothesis is that Neko is checking if I’m still there, since she doesn’t meow W- awake if I’m already up. It seems to match experimental observations. She’s only temporarily satisfied by voice; she insists on seeing me. She doesn’t cuddle or anything, just walks downstairs with me and goes about her usual cat life.

I raised her myself (hello, 2AM and 6AM soy milk feedings!), but when I moved into the dorm for university, I saw her only on weekends. And then there was that six-month span when I was in Japan, and four years (four!) when I was in Canada. Whenever I was home, Neko took to sleeping on top of me, probably to make sure I didn’t go anywhere without her knowledge. (Then she would bite my ankles at 5 AM so that I could let her out of the room to do her business.) My mom says that even though Neko avoided her most of the time (my mom’s not a cat person), Neko would cuddle up with her whenever I left on my trips.

Leia is usually the next one to meow. She usually meows if our door is left open a crack (for circulation), but closing the door often helps. Leia just wants to be picked up and cuddled. (She usually sticks around in the bathroom, meowing, until I get the message.) Luke is the meower of last resort. I think he meows because he wants someone to play with and sometimes the other two cats won’t give him the time of day. (Luke is usually the only cat at our door when he’s the one meowing, while we often wake up to all three cats waiting if it’s Neko meowing.)

I try to avoid anthropomorphizing the cats too much, but it’s fun to speculate at what goes on in their head, especially if you can test the hypotheses. =)

Neko is about ten years old now, and the other cats are four years old. The Internet says that indoor cats tend to live between 13 and 17 years. There will come a time when our mornings are quiet. In the meantime, I can appreciate the racket; our cats and their quirks.

One of the tricks I picked up from A Guide to the Good Life: The Ancient Art of Stoic Joy is that of negative visualization: imagining loss in order to enjoy a deeper appreciation of what you have. I practise it frequently. Not so much that I dwell on it, but enough to sharpen my enjoyment of life and be ready for the inevitable sadness. There will most likely come a quiet morning, maybe years from now, when I’ll look back at this sketch and and trace the outline of a memory. I practise imagining loss with pets, with friends, with family, with W-. Emotional exercise.

Sometimes I’m up earlier than I’d like, but the cats are worth it.

Visual book review: Leading Out Loud: A Guide for Engaging Others in Creating the Future (Terry Pearce)

20130628 Visual Book Review - Leading Out Loud - Terry Pearce

If you’re a corporate leader trying to transform your organizational culture, Leading Out Loud would be a good book to read in order to plan how to align your personal values and your organization’s values with a communication plan that resonates with people. Even if you aren’t, it might be a good read if you often sketch out a vision of the future and work on getting other people involved.

Want to read the book for yourself?

Let’s see if it works on the small scale. What would my Personal Leadership Communication Guide look like? I’m not leading anyone through an organizational change, but it might be worth going through the steps anyway.

I. Establishing Competence and Building Trustworthiness

Clarity of Purpose: I care about remembering and sharing what we learn. The problem is that we waste time by forgetting. We waste opportunities by hoarding what we know or being self-conscious about what we can teach. Think of all the time you spend rediscovering solutions to problems you’ve already solved. Think of when you stop and wonder, “Where did the time go?” with nothing to show for it. We learn so much, but it disappears. If we can get better at learning and sharing, imagine how much more we’d be able to do. I want to learn more about learning and sharing so that I can not only share my life, but also inspire and help other people share theirs.

Credentials and vulnerabilities: I’m not an expert. At 29 years old, I can’t even claim to have learned very much. I get things wrong. I make mistakes. I forget.

But it turns out that you don’t have to be an expert, and sharing probably even works better if you aren’t. I’ve been sharing my learning notes for more than ten years. I’ve been learning about drawing and screencasting as ways to share more effectively. I’ve even been working on learning how to interview people so that more people can share their lessons learned through me.

Empathy: I wouldn’t be this comfortable with learning and sharing in public without the amazing support of people who have taught me and encouraged me throughout the years. When I wrote about an obscure topic and heard, years later, from someone who used one of my tips to solve a problem, that appreciation spurred me to write more. When I made a mistake in my server configuration and sent hundreds of e-mails in a short span of time, people forgave me, and that forgiveness helped me be less afraid to experiment. I learn from comments, conversations, questions, role models, and inspirations. There’s so much out there, and that’s a real gift.

I know what it’s like to worry about whether you’re going to waste someone else’s time or mess up someone else’s work. Sometimes that keeps me from writing or publishing, but I’m getting better at going ahead anyway. More often, I struggle with not feeling that I understand something well enough to write about it – and then I remind myself that “showing my work” helps other people learn from or even correct it.

There’s a lot I need to learn about sharing more effectively. Writing with a plan. Cutting out excess. Making things clear. Drawing, editing video, and so on. I need questions and answers and feedback. I think it will be a good adventure.

Commonality: We’re all learning, and we all have more to learn.

Willingness to be known: Why does this matter to me personally? I was a child when I realized that life is too short to spend figuring everything out on my own. I devoured books – voracious enough that my grade school principal said I wasn’t a bookworm, but a booksnake.

I started finding the gaps that I couldn’t learn from the books I read. I started learning things on my own and from other people – and, too often, forgetting. I share because I don’t trust my brain, and because I’m curious about what I can learn from people if I help them leapfrog me. I don’t want writing to be limited to authors or drawing limited to artists. I want people to feel comfortable using whatever they want to capture and perhaps share what they learn.

II. Shared context

Blogging made it easier for people to share their thoughts, but still, surprisingly few people do it. New technologies make it easier for people to draw, but people tell themselves that they can’t doodle. I wonder what’s next, what could encourage people to share more, what could help me share better.

I don’t have a burning platform; it isn’t a timely issue. Except, perhaps, that life is short, and I forget, and things unshared are conversations that don’t happen. So yes, I have a very selfish reason for sharing. =)

III. Declaring and Describing the Future

Here’s the future I imagine: an awesome life. A life filled with doing and learning and sharing, saving other people time or inspiring other possibilities. It’s a small vision, an individual one. The bigger vision is to help other people live their own awesome lives. =) Better than a foggy life, yes?

What does that future look like and feel like? I imagine I’d follow my curiosity, dipping into my outline or list of ideas for more inspiration. I’d read, try things out, talk to people, write, draw, share. We’ll ask questions together, dig into things deeper, explore more. It’ll be useful and fun.

But it has to be more than that. It would be good for me to learn how to order my thoughts and write books, so that I can help people who are new to a field instead of just people who are in the middle of it. It would be good to learn how to make the most of whatever new tools are developed. It would be good to get better at encouraging other people to share.

IV. Committing to Action

Here are some steps I need to take:

  • Practise writing with objectives, outlines, and plans.
  • Practise illustrating ideas – mine and other people’s.
  • Practise talking to people and sharing what I learn from them.
  • Practise experimenting and breaking out of my comfort zone.
  • Dig into workshops and virtual meetups as a way to help other people learn and share.

If you want to help out, comments, questions, and suggestions welcome!

Want to read the book for yourself?

Like this? Check out my other visual book reviews!

Disclosure: I received a copy of this book for review. Also, if you buy the book through the Amazon link above, I get a small commission. (Check your local library if they have it, if you have a library near you!)

Visual Book Review: Customer CEO: How to Profit from the Power of Your Customers (Chuck Wall)

Chuck Wall’s book Customer CEO: How to Profit from the Power of Your Customers (Bibliomotion, 2013) is all about listening to the customer, with plenty of examples from established companies. While the tips may seem obvious (of course it makes sense to listen!), the chapters, examples, and advice make it easier to focus on each aspect of listening to customers so that you can shape your business around them.

Click on the image to view or download a larger version of my visual book summary/review.

20130618 Visual Book Review - Customer CEO - How to Profit from the Power of Your Customers

Feel free to share this visual book review! (Creative Commons Attribution – I’d love it if you link back to this site and tell me about it. =) ) It should print out fine on letter-sized paper, too.

For more information or a free chapter, see Customer CEO Consulting (their blog has lots of examples).

Intrigued by the ideas? You can check your local library to see if they have a copy, or buy your own copy below (hardcover / Kindle).

Disclosure: I received a copy of this book for review, and I’ll get a small commission if you buy anything from Amazon using the link above.

Check out my other visual book reviews!

Sketchnotes: How to Live an Amazing Life (C.C. Chapman, Third Tuesday Toronto)

C.C. Chapman was in town to share insights from his latest book, Amazing Things Will Happen. Here are my sketchnotes from his talk tonight at Third Tuesday Toronto. =) Click on the image for a larger version, which should also print nicely on 8.5×11” in landscape mode. (Or even 11×17”!)

20130611 How to Live an Amazing Life - C.C. Chapman - Third Tuesday Toronto

Feel free to share this! (Creative Commons Attribution License – enjoy! Links are not required, but are welcome.)

For more about C.C. Chapman, check out his blog, podcast, or Twitter feed.

If you like this, you might also want to check out my other sketchnotes and visual book reviews, or download my collection of sketchnotes from 2012 (free/PWYC). It’s always fun helping good ideas spread!

Sketchnote: Visual Thinking (Patricia Kambitsch)

It’s always a pleasure working with Patricia, and yesterday’s workshop on graphic facilitation was a lot of fun. I took digital notes during the 3-hour workshop, and we printed them and distributed them right at the end. =)

Click on the image for a larger version, which should also print nicely on 8.5×11” in landscape mode.

Visual Thinking

Feel free to share this! =)

What worked well:

  • Printing the notes right at the workshop itself – great impact, and it took only a few minutes and the organizer’s help.
  • I really like this black ink / yellow highlighter combination. It’s super-simple, lets me add emphasis after the fact, doesn’t require me to switch colours, and prints out better in black-and-white than using coloured text does.
  • I played around with a not-quite-columnar layout, using highlights and connectors to link everything together. Someone remarked that the light gray connectors helped lead the eye, so that worked out nicely.
  • Shading with light gray worked well, too. I might do that with more of the images to add some depth, and perhaps add a warm gray to my colour palette.

Things to play with next time:

More shading! More depth! =) Maybe fancier titles, too? Using elaborate frames might let me keep the text simple so that Evernote can still search it… Maybe I can start a collection of frames.

I used Autodesk Sketchbook Pro on a Lenovo X220i Tablet PC. =)

How to make a hand-drawn highlighted web page header

For the longest time, I’d been meaning to make my website look more hand-written and to take advantage of Google Web Fonts to make my site feel slightly different. After some design-related nudging from Matt Tanguay, I finally got around to it. Here’s how! =)

For comparison, here’s the “before” picture:


After (I tweaked the links, too):


If you’re already comfortable with HTML and CSS, it turns out to be pretty easy to make a hand-drawn website with highlights that appear when you hover over links. Here’s how!

Step 1: Draw the header image.

It can be more efficient to have one medium-sized image instead of lots of little images, and it’s easier to work with one image instead of many small ones. You’ll use CSS to split this up into rectangular regions later, so keep that in mind when designing your image and try to avoid overlaps.

I drew the main image using Autodesk Sketchbook Pro, but you can use any image-drawing program. You can even draw it on paper and then scan it in.


(I didn’t end up using the Random Page! button, but that’s okay. =) )

Step 2: Add highlights.

I added another layer below my main layer and highlighted whatever I wanted to highlight, making sure things were separated by enough whitespace so that the highlights didn’t overlap into another link’s rectangle. If you’re doing this on paper, you can highlight on paper as well.


You’ll notice that everything is highlighted in this image. No worries! We’ll display just the appropriate part later.

Step 3: Set guidelines.

Setting guidelines using a photo editing tool like the GIMP will make it easier for you to select consistent rectangles. Here, you can see how I’ve set up my guidelines to make it easy to select a rectangle containing the “Home” link. You can use the rectangle selection tool to get the position and size, which you can find in the Tool Options window.


Step 4: Write your HTML and add IDs/classes to it.

Code your HTML so that the text makes sense, and then use CSS to replace the text with images and to lay things out for your intended design.

I added IDs and classes to my links to make it easier to replace the links with images later on.

<ul class="links" style="margin-bottom: 0">
<li><a id="home" class="replace home-design" href="/">Home</a></li>

Step 5: Replace the text with your images using CSS.

There are a number of CSS text->image replacement tutorials out there. The general idea is to use text-indent to hide the text, and then use background, background-position, width, and height to display the right portion of your image.

This is where the guidelines from Step 3 come in handy. Simply make the position negative and use that as the background position, then use the size as the width and height.

.home-design { background: url(images/design.png) 0 0 no-repeat; }
.replace { white-space: nowrap; overflow: hidden; text-indent: 100%; }
#home { width: 96px; height: 40px; background-position: -81px -105px; display: inline-block }
.header .links .replace:hover { background: url(images/design-highlighted.png) 0 0 no-repeat; }


Still have questions? Please comment below – I’d be happy to explain more!