When building a GUI, I tend to spend way too much time on style decisions. I’m pretty sure that there are ways to speed up that process, but I have yet to figure them out. For my Amino Acid Trainer project, I’m trying to make decisions faster by structuring objectives in a TODO list and working my way through.
My TODO List
- Choose general style (modern, retro, funny, cute, professional,…)
- Choose fonts
- Find fitting color palette
- Sketch layouts for most views (positions and sizes – no color!)
- Decide how buttons should look (mostly shape, but also a few color ideas)
- Color all elements on my sketches (revisions might be necessary)
- Create images (buttons,…)
- Implement most views with dummy data
- Add missing parts
Doesn’t seem too complicated, does it? Let’s take a closer look at my objectives.
This one is relatively easy. Most of the time, I know right off the bat what kind of feelings I want to convey. Then, I just need to pick a fitting style.
Educational software usually looks professional and unobtrusive to help people focus. If my Amino Acid Trainer contained highly complex data or was ment to be used for long periods, I would do the same. However, who studies proteinogenic amino acids for more than 30 minutes at a time? There are only 20 of them! (Okay, 21 if you count Selenocysteine, but that’s another story). Also, those molecules are relatively simple.
That’s why I want my Amino Acid Trainer to be different. It will be flashy and extravagant, with some retro influences.
Usually, I struggle a lot with font choices. This time, however, it was easy: I’ll use the quite popular Big John – Slim Joe combination. I’ve been wanting to use those for quite some time and I think that they are perfect for the style I have in mind. Since I don’t need to write a lot of text, it doesn’t bother me that there are no lowercase letters.
When it comes to colors, I like to make use of online tools like COLOURlovers and Kuler. Sometimes, Pantone’s Color Intelligence section can also be useful. I found the color palette for this project, “Rev It Up”, there.
I’m still using paper for this one: First, I draw a rough layout grid onto squared paper. Then, I use colored pencils to sketch positions and sizes of elements.
Some buttons can be placed easily: Keeping in mind that corners are best and left/right equals backward/forward, it is quite obvious where navigation buttons go. I want the most important elements to be noticed first, so I tend to place them a bit above the center. The rest is simple trial and error; usually, I only need 1-2 tries until I am pleased.
I think buttons greatly influence the overall look of a program or website. That’s why I spend a lot of thought on their design.
As Amino Acid Trainer will be flashy and a bit retro, I’ll use simple, 1px wide icons highlighted by 3px wide colorful lines with an offset. Menu buttons will be pill-shaped ghost buttons, because they are trendy, a bit retro and associated with medicine.
Color All Elements
First of all, I need to pick a background color. Then, everything else can be colored. Usually, text will be either very dark or very light. Highlights are more difficult to design: There has to be just enough contrast. As I’m not really experienced with GUI design, I just try a few colors until I like the result. I wonder how professionals do that?
Create Images (buttons,…)
This is the easiest part. I use Inkscape to draw exactly what I planned. Depending on difficulty and amount of needed images, this takes 1-5 hours.
Implement Most Views
When you don’t have to consider interactions, Tkinter allows you to build Views really fast. You just have to stick to your plans and use the best geometry manager for your design.
Add Missing Parts
This can obviously be skipped or done much later. I prefer to “finish” the most important parts first before I focus on minor features.
I have to say that I am very pleased with the results. I think I’ve never designed so fast before and I haven’t found any cons yet. I will definitely use this TODO list again!