Web Design Katas & Koans
Published on
Warning
This post is both inactive and a WIP.
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.
Katas
A blog post is a personal or company owned online publication. Blog posts can be long or short formats. Often images and different font styles are mixed in to the post. Make sure the blog post can exhibit a feeling and style that is true to the author’s character.
A user input form is a collection of fields and controls the user can input values into. Often these values come in groups and are of many different types. A good example is a checkout form on any commerce website. The collection of fields to get the user’s address and billing information are very common and very unique.
A process workflow is a series of steps a user must take in order to complete a more complicated task. Often each step will be a form presented to the user to break down a very large form. A progress meter is usually shown accompanied by a next and previous control. Each step has validation preventing the user from navigating to the next step. When the user is done they are notified they have completed the process workflow.
A category navigation element is a tool to help the user navigate between different sets of data. This could be done in a number of ways, but is traditionally done by pages. Try to think outside the box and add nice polish to your navigation.
Recipe Page
Documentation Page
Data Visualization
Font Pairings
Color Schemes
Mobile and Desktop Layout
Music Player
Develop a Grid System
Koans
No idea if these are good Koans yet. Feedback welcome.
Helvetica
Black on White
Vertical Layouts
Different Mediums
Ways to Increase or Decrease attention