I have the pleasure of knowing the great mpt. He actually spent a couple of months in Brazil back in 2006 and we ended up sharing the same apartment during this period. One of the great things he masters is the art of writing ascii art mockups of user interfaces As I am a mere beginner might not be the best person to explain this. However I will make an attempt to explain the basic principles, in the effort of having this written down somewhere.
In this blog post I will focus on commonly used interactive widgets available in Gtk+, since these are the ones I tend to care the most about.
An entry is straight forward, you use brackets in the beginning and the end and underscores to fill up the allocated width of the widget:
If you want a text, just replace the underscores with letters
Buttons are similar to entries, the main difference is the lack of underscores and the use of capital letters. Icons are usually ignored as they often are rather tricky to represent using the ASCII alphabet. A cancel button looks like this:
[ CANCEL ]
GtkToggleButton and GtkRadioButton
Toggle buttons uses brackets around the toggle part and no brackets around the rest. If the value of the radio should be active, use a lowercase x to say so:
[ ] Buy milk and cheese for breakfast [x] Eat strawberries after lunch
Radio buttons are similar but uses parenthesis and o, eg:
(o) Fresh fish ( ) Rotten eggs
Spin buttons are similar to entries, but they have two small arrows on the right hand side. To represent the arrows, use H:
This might not look good in all fonts, but it’s the best that can be done, at least as far as I know.
A combobox tend to be represented again by using brackes in the beginning and the end. To represent the arrow, use a lower case v and separate it from the text by using a | (pipe) sign.
[ Stockholm | v]
Prett simple, use _ (underscore) and | (pipe) for the borders, titles and window manager buttons can usually be skipped since they are mostly noise to us in this context:
________________________________| || Do you want to close the open || document and lose the changes || made to it? || [ CONTINUE ] [ QUIT ] ||________________________________|
These are the widgets I usually end up using in my mockups. Have any missed any important onces? Or I have I done any serious mistakes? Comments appreciated!