Skip to content


“Drawing is putting a line (a)round an idea.” —Matisse

“Bring a stick and a bottle of ink to class”. After three months in drawing class I didn’t expect to hear that. But we spent the next morning drawing with a twig I picked up from under a tree and India ink. It was liberating. I drew freely without the slightest concern for anything but the base elements. It was freeing and exciting and made drawing fun again after months of careful, thoughtful work.

Opening up the Brushes app for the first time I got those same feelings. I know it has layers, an extraordinary color palette tool, multiple brushes and of course undo. But there is something primary about the experience. You swipe and fill color with your finger. Nothing seems more direct.

I like a drawing experience that invites me to be spontaneous, probably because it is so forgiving. With a limitless number of canvases, I can be raw with no thought to waste or judgment. This is the promise of a tech tool that delivers an immediate response like pencil, like paint.

However, brushes is a very powerful app. One my favorite features is Brushes Viewer, the ability to save the file as QuickTime movie and watch your process play back in rapid animation. This is a remarkable aid in viewing your or someone else’s thinking. What better way to see that come to life than with this feature.

I have decided to make some time for this app on a regular basis. I’ll share my efforts soon.

Please reduce, reuse, and recycle these ideas.

Posted in art, creativity, ideas, technology.


SCAMPER to your next great idea

Product designers use foam to mock up products all the time. But it’s not the first thing you think of using for UI design. Yet, it was a perfect material for teachers to use to prototype a video player. Add to that a tested method for brainstorming ideas and you can quickly dash (or SCAMPER*) to your next great idea.

Why foam? Because it was immediate and non-threatening. The teachers looked at it as a craft project. We started with where they are, not where we want them to be. Taking the tech out of it put them at ease and produced some remarkable results.

Here is the process I used with ten teachers—with widely varying degrees of tech savvy—to create a video player and customize it in the space of a half hour. Why foam? Because it was immediate and non-threatening. The teachers looked at it as a craft project. We started with where they are, not where we want them to be. Taking the tech out of it put them at ease and produced some remarkable results.

1. Each participant was given a bag with a variety of pieces of foam, from an art supply store, in various geometric shapes and colors.

2. To introduce the exercise I asked them not to invent but to reinvent. This is an important idea to emphasize to minimize the fear of creating we all share. Reinvention is the primary means we arrive at a new idea or product. Most ideas are evolutionary, not revolutionary. I began the with the story of the Honorary Chairman of SONY Akio Morita and his idea to combine two devices to create a new entertainment product. SONY engineers had shelved a project that they believe had failed: the smallest possible stereo tape recorder. Chairman Morita saw the potential of this tape player when combined with another new idea—light weight headphones—and the SONY Walkman was born. “This is the product that will satisfy those young people who want to listen to music all day. They’ll take it everywhere with them, and they won’t care about record functions.” The Walkman led to the iPod—and It was easy to find one of those in the room.

The presentation reviewed the components of a video player and summarized each of the nine methods for brainstorming. I gave them a brief example for each.

*SCAMPER (each of the first letters stands for a method):

Substitute something
- making this out of foam to explore the potential rather than get caught up with technology

Combine it with something else
- insert quiz
- notes/annotations
- add pop up comments

Adapt something to it
- set start and stop times
- create a Ken Burns documentary = combine images and videos

Modify or Magnify it
- rewind and ff, pause and single frame forward/backward
- enlarge the timeline to precisely adjust start/stop feature
- highlight elements in a video

Put it to some other use
- sound output includes auto tune to teach music

Eliminate something
- hide or minimize a component

Reverse or Rearrange it
- consider it from someone else’s point of view

3. I showed them a prototype to give them a possible solution. They had 30 minutes to create mock-ups of their players using the foam and then each person presented their reasoning behind their design ideas.

We asked them to “Imagine, genuinely use your imagination, and consider how you can alter your player to help you reach a student or students.”

4. We photographed the results and loaded them into the computer.

Prototype video player demo from Stephen Chovanec on Vimeo.

5. Using ScreenFlow to capture their presentation to the group (which was also being projected), each participant walked us through their results using the mouse as a pointer and explaining what they wanted and why.

The results were striking. One teacher, who was very hesitant at the outset identifying herself as so far behind in her tech savvy, began her presentation with the following statement “I wanted to make the invisible visible”.

Extraordinary ideas came from each and every person when they considered it from their students needs and their desire to teach.

Please reduce, reuse, and recycle these ideas.

Posted in prototyping.


Learn to Build iPhone Apps class review

New Year or not, I have set some goals for learning and improving my skills. One of my education goals is to learn more about design for mobile, in particular iphone apps.

So, I’ve started a weekly online course, Learn to Build iPhone Apps with HTML, CSS, and JavaScript. It is a new effort on the part of O’Reilly Training in connection with CreativeTechs. These are my initial impressions.

Why free is not really an option
They call it free but I have a few issues with that.

  • Two hour sessions are too long for effective learning. You have to break these down into more comprehensible segments to get the most out of them.
  • The time of day on the east coast (2:00 p.m.) is not the most productive time for learning.
  • It’s difficult to take two full hours out of a work afternoon to take the live course.
  • I can’t absorb all that is going on without a review of the code on my computer, and for that you have to pay.
  • I like to review and watch the videos again, because I always miss something. After the live sessions, you have to pay.

Why I’m buying it
The quality of instruction is first rate for an online course and here’s why.

  • The instructor, Elisabeth Robson, is well prepared — she has done her homework on the content.
  • It is evident that she is very familiar with what she is saying because she doesn’t hesitate or second guess her statements.
  • The presentation is very direct, she gets to the point and she highlights what’s important.
  • Elisabeth is an appealing speaker who is easy to listen to.
  • She moves through the material at a comfortable pace.
  • The presenter and team do a good job of supporting her with cues for important points and raising appropriate questions from the audience.
  • I appreciate the straight forward approach — she isn’t trying to amuse or entertain.

To make good on one of my goals, I’m paying for the videos and code examples and I’ll go through them on my own time. I’ll miss out on the ability to ask questions but more often than not someone else has the same question and the Q&A will appear in the video. My recommendation to O’Reilly and CreativeTechs is to break this up into eight weeks if it needs to be that long. In the weeks ahead, I’ll discuss what I’m learning and show my work.

Series Session Dates: January 19, 2010 | January 26, 2010 | February 2, 2010
Course outline details

Note: The course is $35 now while the course is in progress but will jump up to $79 after the course ends February 5, 2010.

Please reduce, reuse, and recycle these ideas.

Posted in technology.

Tagged with .


Design influences

100px-YinYangA recurring theme for me is influences. So much so, that I have dedicated the About page of my site to the artists, designers, and thinkers, who have had an impact on my work and ideas. I’ll begin with some of the visual symbols and icons that had something to say to me as I created my logo. To keep it simple, I’ll provide a brief explanation along with the significant visual aspects and meanings that I find engaging.

The first symbol is the “yin and yang”, a Chinese sign expressing the philosophical concept of opposing forces that are interconnected.
Visual aspects

  • strong figure–ground
  • symmetry
  • complementary color: black and white
  • contrast

Meanings

  • life and death
  • mind and matter
  • opposition and attraction

The circular form — that occurs in so many symbols — establishes continuity and expresses a desire for unity while containing two contrasting forms that connote (or signify or suggest) interdependence.This contradiction is a simple yet profound idea that is life.

Please reduce, reuse, and recycle these ideas.

Posted in creativity, design.

Tagged with , , .


One Quick Way to Improve Your Web Typography

“Give full typographical attention even to incidental details.” – Robert Bringhurst

In high school, I skipped typing class after just a few sessions, to stay in the studio to work on art. I regret it now, being a slow and scattered typist, but I do remember a few things I learned before I cut for good. “Always double space after the period.” Why? It’s a visual cue for the end of one sentence and the start of a new one. This is no longer needed but it hangs on reflexively with most people.

This is a vestige of the typewriter, when all the letters occupied an equal space or fixed-width, from a cap “W” to a lowercase “i.” This was because the typewriter could only advance the same amount of space with every stroke. When every letter has equal space, you have to have a means to indicate a pause.

Digital fonts account for this by occupying variable space for each letter based on what precedes it and what follows. An interesting side note: HTML recognizes only a single space no matter how many spaces are there, unless you style it to display them. This was fine when HTML was all that was accounting for typography in a browser. But, with the proliferation of WYSWIG editors in blogging software, among other things, this is no longer the case. Paragraphs with double spaces after sentences are showing up all over the web, not to mention all those PDFs. The extra space breaks the rhythm of the typography. It’s distracting, like a missed note, and some consider that it reduces legibility.

2vs1

WordPress example:The two spaces create a river of white. A river usually refers to the gaps created by wide inter-word spacing but it can be any spacing.

Why bother with such a small detail? The practice of typography is built on relationships; letter to letter, word to word, line to line, and so on through multiple pages. If you care about creating beautiful type, start with the basic elements and your compositions will flow.

For an in-depth review of typography from rhythm & proportion to harmony & counterpoint read the indispensable book The Elements of Typographic Style by Robert Bringhurst.

See these extracts The Elements of Typographic Style Applied to the Web by Richard Rutter.

Please reduce, reuse, and recycle these ideas.

Posted in design, typography.


“An Eye for an Ear”

gutenberg bible spread in the Library of Congress

gutenberg bible spread in the Library of Congress

One of the three known “perfect vellum” copies of The Gutenberg Bible, is owned and displayed at the Library of Congress. It is important to understand its impact, not just in the history of graphic design and typography, but as one of the most significant documents in the development of western culture.

It was a remarkable typographic and technical achievement, Gutenberg had to overcome a variety of difficulties to produce the two volume edition. However, producing multiples of a book went beyond a practical solution, it changed the way we think and relate to one another. According to Marshall McLuhan, (I’m simplifying his ideas considerably), we moved from story telling = group, shared knowledge, to print = individual, specialized knowledge. This ability to distribute information took the power of interpretation out of the hands of the few (literary intelligentsia) and gave it to us all.

Where: Library of Congress, 2nd floor of the Jefferson Building.
When: Monday – Saturday, 10am – 5pm.
Metro stop: “Capitol South” on the Blue and Orange lines. Two blocks north on 1st St SE

For more on McLuhan’s (prophet of the electronic age) interpretation read Understanding Media: The Extensions of Man or The Book of Probes by Marshall McLuhan.

Please reduce, reuse, and recycle these ideas.

Posted in design.

Tagged with , , .