Web Design Katas & Koans

Get better at Web Design through practice and thought-exercises.

Explanation & Justification

You are a master at something, how did you become one? You started as a novice, but now you are a master. There are many ways to become a master, but one way is though practice. That is where katas come in.

Kata (型 or 形 literally: “form”), a Japanese word, are the detailed choreographed patterns of movements practised either solo or in pairs. The term form is used for the corresponding concept in non-Japanese martial arts in general.

A kata is an exercise to carry out in order to make the activity second-nature. The idea is that you practice it enough until you get to a point you can just do it without thinking. At this point, when you need to do something related, you can quickly and fluidly carry it out and focus on the polishing touches. After each iteration of the kata, your skills should be improved. Every time you repeat a kata, do it differently. When you get to a point the katas truly do feel second-nature, work on some koans.

A kōan (公案)/ˈkoʊ.ɑːn/; Chinese: 公案; pinyin: gōng’àn; Korean: 공안 (kong’an); Vietnamese: công án) is a story, dialogue, question, or statement, which is used in Zen practice to provoke the “great doubt” and test a student’s progress in Zen practice.

A koan is a thought-exercise. The purpose is to get you to doubt and rethink why you do something. Katas will answer the what’s of design, but the koans will answer the why’s of design. When you are thinking genuinely about the why’s of something, that is the point you can start mastering a skill. You don’t improve anything by being indoctrinated, so it is always important to think of situations contrary to what you believe.

The Exercises



No idea if these are good Koans yet. Feedback welcome.

  • Helvetica
  • Black on White
  • Vertical Layouts
  • Different Mediums
  • Ways to Increase or Decrease attention

Additional Links


5 thoughts on “Web Design Katas & Koans

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s