{"id":170,"date":"2009-11-21T12:25:57","date_gmt":"2009-11-20T23:25:57","guid":{"rendered":"http:\/\/www.paradicesoftware.com\/blog\/?p=170"},"modified":"2009-11-21T12:26:18","modified_gmt":"2009-11-20T23:26:18","slug":"icefall-ui-evolution","status":"publish","type":"post","link":"http:\/\/www.paradicesoftware.com\/blog\/2009\/11\/icefall-ui-evolution\/","title":{"rendered":"Icefall UI Evolution"},"content":{"rendered":"

Taking a break from coding topics, today’s post explores how Icefall’s dialog User Interface (UI) has evolved over the course of it’s development. My automatic-backup tool keeps every version of Icefall available, so I fired up a few old versions and took some screenshots to illustrate the process.<\/p>\n

Original Design<\/h3>\n

\"UI<\/p>\n

This screenshot\u00a0is actually from the realtime Icefall prototype. I needed a quick way to change screen resolutions for testing, so this is it. Some interesting features: The green background would slowly sway while the dialog was open, and there was a shimmering gold border around\u00a0whichever element\u00a0had keyboard focus.<\/p>\n

Revision<\/h3>\n

\"Icefall:<\/p>\n

Fast forward to the turn-based rewrite of Icefall, and this is the original Video Options dialog. Some big changes: the background texture is more subdued, there is a panel on the left to select what type <\/strong>of options to view, and the gold-edge focus indicator has gone (now, the focused element is just highlighted a little more). Buttons and checkboxes have also had a minor makeover, e.g. the\u00a0buttons are now rounded.<\/p>\n

Revision 2<\/h3>\n

\"UI<\/p>\n

What changed here?\u00a0The window frame! Gone is the ‘rusted steel’ frame from the top and bottom of the window, replaced with an ice-blue frame that encloses all four sides. I wanted to get more “ice theme” into the UI for the game,\u00a0and at the same time I\u00a0needed a UI frame that covered the left and right too, because not all UI elements use the slate background\u00a0(the spellbook, for example, uses a ‘book’ background, and it looked a little strange with no enclosing frame). I also think this looks\u00a0better than the\u00a0previous\u00a0one.<\/p>\n

Current Design<\/h3>\n

\"UI<\/p>\n

Good, the rate-of-change of the dialog is slowing down, which means we’re getting closer to completion! The only change here is to the background of the listbox. The ‘green waves’ looked ok in the original version, but as the\u00a0look and feel of the rest of the dialog evolved, it began to look more and more out of place. When the dialog frames turned ice-blue, it was a good opportunity to build on that existing colourspace and again lend more of an ‘icey’ theme to things by using a dark, ice-blue texture. This is what this dialog looks like in current builds. Hopefully, you agree with me that it’s the best looking of them all?<\/p>\n","protected":false},"excerpt":{"rendered":"

Taking a break from coding topics, today’s post explores how Icefall’s dialog User Interface (UI) has evolved over the course of it’s development. My automatic-backup tool keeps every version of Icefall available, so I fired up a few old versions and took some screenshots to illustrate the process. Original Design This screenshot\u00a0is actually from the<\/p>\n","protected":false},"author":2722,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,3],"tags":[77,5,76],"class_list":["post-170","post","type-post","status-publish","format-standard","hentry","category-code","category-icefall","tag-code","tag-decision","tag-icefall"],"_links":{"self":[{"href":"http:\/\/www.paradicesoftware.com\/blog\/wp-json\/wp\/v2\/posts\/170","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.paradicesoftware.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.paradicesoftware.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.paradicesoftware.com\/blog\/wp-json\/wp\/v2\/users\/2722"}],"replies":[{"embeddable":true,"href":"http:\/\/www.paradicesoftware.com\/blog\/wp-json\/wp\/v2\/comments?post=170"}],"version-history":[{"count":5,"href":"http:\/\/www.paradicesoftware.com\/blog\/wp-json\/wp\/v2\/posts\/170\/revisions"}],"predecessor-version":[{"id":175,"href":"http:\/\/www.paradicesoftware.com\/blog\/wp-json\/wp\/v2\/posts\/170\/revisions\/175"}],"wp:attachment":[{"href":"http:\/\/www.paradicesoftware.com\/blog\/wp-json\/wp\/v2\/media?parent=170"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.paradicesoftware.com\/blog\/wp-json\/wp\/v2\/categories?post=170"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.paradicesoftware.com\/blog\/wp-json\/wp\/v2\/tags?post=170"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}