I’ve started vectorizing the UI elements in Adobe Illustrator, and will keep this post updated as my work progresses. Here is the main screen of the app, followed by the 3 dream-catcher shapes for Dreams, Fears and Follies. I also show some modal dialogues.

I like this combination of the Pauline font for title and buttons, Proxima Light for label text. Technically, there probably should be “Recover Password” link on the log in screen. It might also be nice to have “Delete” button inside the Open dialog, to be able to clean up unwanted files.

I iterated on the UI layout for my surreal city builder app. There is a new dream-catcher design, the elements are now arranged in a single column to give more space for the text. They used to be in rows of circles.

I also re-designed the icons for the Dream/Fear/Folly building categories. The “Dreams” used to be represented by an abstract blob. That shape was not consistent with the other two, so I dropped the blob, and decided to go for the same head shape with different facial expressions. This reminds me a bit of the health indicator in the classic Doom.

The material design will have rounded corners and 3D look to all elements. The graphic in the header consists of geometric primitives, and I have this idea of small 3D shapes floating around the toolbars. I want to use some shapes from my thumbnail sketches for this small decorative flourish.

Individual buttons on the toolbar and menu will be flat, only the toolbar itself will be 3D. This is because the UI might become too crowed if both the toolbar and the individual buttons on it are bevelled.

The font is Roboto Slab, it’s popular on the web, but I’m not convinced it is the best for my purposes. I’ve been looking for more decorative alternatives from Adobe Fonts.

Here are some variants of the main UI screen for my Surrealist city design app. I selected four of the best thumbnails that I had sketched previously. At this stage it was especially important to know the exact number of buttons and links that are required by the UI, because this affects the graphic design.

In my old prototype the buildings used to be organized according to economy sectors, but this didn’t make much sense because the app is not a simulated economy. It’s a casual city design sandbox. Therefore, I changed this according to psychological effect. The building are now organized into “Dreams, Fears and Follies”. Dreams are positive emotions, Fears are negatives, and Follies are paradoxical things. Each building in the city is a personification of one of these categories. I feel this is better because it emphasises the Surrealist influence.

The first alternative below is my personal favourite. It has a bit of Salvador Dalí in it, this connects thematically to Surrealism, and the layout is simple and clear. The next two have some thin lines and jazzed up rectangles influenced by Kadinsky. The last one places the buttons in “diegetic perspective”, that is to say, the UI is in same perspective as the city grid; I got this idea from the classic game Populous.

In the last variant the content area is surrounded by a large circle, this will work better if it is a diamond shape.