I. Setting

To begin with, the application we intended to port as a first get-in-touch with Windows RT (also referred to as Windows Runtime, WinRT) is a small, Windows Phone 7 based soccer game leveraging the mightiness of Silverlight as a subset of the Windows Presentation Foundation (WPF). Therefore, the game´s entire frontend had been designed exclusively using Silverlight XAML and related concepts. Furthermore, the applied architecture strongly follows MVVM (Model-View-ViewModel) principles targeting a strict separation of user interface and application logic.

In one of our previous blog articles we talked about the use of pie menus in touch screen interfaces and discussed pros and cons of this kind of interaction. In this article, we are going to show a concrete example of how a pie menu can be used.

Every user interface designer is familiar with the procedure to some extent: To find out what a user interface needs to look and behave like it’s certainly a good idea to create a prototype and evaluate it with potential users. Users will tell you what’s still nagging them and therefore should be improved before coding starts. So, in the beginning of any UI design process everything is about change – you create a prototype and already expect it to require modifications in order to work alright. As you – and most likely your client, too – want changes to be as cost-efficient as possible, you are better off taking a change-friendly prototyping method or tool. This is especially true in early stages of the project your ideas of potential solutions are rather vague. In this early phase, most often you don’t even know the exact problem for which you are in hunt of a solution. You are still analyzing more than you are designing.

Centigrade specializes in creating GUIs, in many projects with a particular focus on the implementation of Java Swing based GUIs for desktop applications. With the advancement of the mobile market, it is an obvious step for Centigrade to also have a look at Java based mobile GUIs. This article gives an overview on the mobile market today and includes a comparison of the two major Java players in that sector, Google Android and JavaFX.

In the previous part I took a closer look at how and to what extent Microsoft Expression Blend and Adobe Flex Builder offer pixel-graphics and vector-graphics tools to enable GUI designers to create modern user interfaces. In addition I outlined the concept of 9-Slice-Scaling, a method to make pixel graphics scalable without any quality loss. In this last part of the series I’m going to give a short example of how the concept is implemented in both tools and finally provide an overall comparison of the two tools to point out their strengths and weaknesses.

The previous part of this series outlined why it is not possible to just create one single vector-based instance of an icon to scale it to any desired size. This part raises the question, on the one hand, what tool support would need to exist in the future in order to serve an icon designer’s everyday work adequately and, on the other hand, what tool support already exists to make his life at least a bit easier in the present times.

In the first part of this series I described how user interface design tools bring together developers and designers in a seamless workflow and gave an overview of the technical environments of Adobe’s and Microsoft’s tools in that area.

In this article, I am going to focus on the use of pixel and vector graphics in design, deal with some of the pros and cons of the two graphic types and finally give an introduction on the scaling of bitmap GUI components.