Dec 31, 2014

On Design Iterations.

Well you know, finals and holidays, one day becomes the next and then its over a month since the last dev log. Luckily though I have been working (some).

Throughout the project, the theme is heavy upfront prototyping, sketching out designs, then testing them in Processsing (to see how they look when coded), and then (someday) moving to OpenFrameworks for performance and some other technical reasons.

Iteration 12

Last I demo’d these designs, we were on iteration 12. There were three problems I had with iteration 12.

First off, I just didn’t like the headers. They drew the eye away from the core of the design, and they were pretty ornate compared to the rest of the design, which was overly bare.

Problem number 2: translation from Sketch to Processing was far from 1-1. I would be using placeholder graphics which, while they captured the gist of what I wanted, the coded product was far from the design sketch. Often times it would feel too sparse, even when my designs where already pretty bare to begin with.

And finally, there was a real lack of visual consistency that became apparent from the previous two problems. Whatever variation on the header I came up with failed to fit into the style of the graphs I was creating in code. There was no sense of where borders belonged and how they should look and affect surrounding elements. This issue also opened me up too much to inspiration; I would try to incorporate any graphic or style I liked into my own interface, without a guideline for what belonged and what didn’t. Even the grid began to deteriorate and it was time to start again.

Iteration 16

In iteration 16, you can see a variation in the header I pursued. It didn’t work out, but it also started to incorporate graphics I could be confident would reproduce reasonably in code. Those graphs were hideous though, and more importantly, the lack of consistency is even more apparent here. Some text (under the time) are inset with ticks, while the header has neither ticks nor text indentation. The double header border is also unique and doesn’t really fit with the rest of the design.

Iteration 21

Here’s when things started to click. After seeing the Ghost in the Shell Homage, I tried to draw heavily from the titles: the color fit my design well and I used it, more abstractly, to give me a sense of what belonged in my design. I settled on using ticks and indentations as subtle ornamentation and got a better sense of the weight of objects and what kinds of graphics I could use. All the graphics I created myself rather than rip images to make the translation to code easier. And now, even the headers fit!

There’s still more I want to do, especially on the color front, and the right side of the terminal has yet to be designed, but I’ve begun work in OpenFrameworks. The layout has settled again, and now some of the design work becomes how it looks in motion. Also this project has been dragging on a bit longer than I’d like, so it’s time to start putting the pressure to complete it.