 |
 |
The Abilizer Configurator User Interface is made up of two main parts, the Asset Libraries on the left, and the Page Schematic on the right. Assets are simply dragged from the libraries onto the page schematic to be placed. From here, the assets, known as cells, can be Targeted, Personalization properties set, and Cell Caching properties set. |
 |
 |
 |
 |
 |
Through a single palette, you can control a site's authentication method
and configuration, its domain, and its color scheme (stylesheets).
 |
 |
 |
 |
 |
|
The Configurator Toolbars were designed to take advantage of what a user might already know and understand about using Windows applications. The draggable objects were created to help speed page building by offering the user a set of pre-fabricated cell types. |
|
 |
 |
 |
Asset construction in the Configurator is fast and easy. To create a cell with a pre-fab object, simply drag the type of object you want and set its properties. In addition to the draggable object types, cells can also be created using the Abilizer SDK (software development kit).
 |
 |
 |
 |
 |
|
The Configurator was also available via a web-based product called the Abilizer Site Manager. While it wasn't as robust as the desktop application, I was sure to keep the interaction schemes and visual UI cues consistent across both products. |
|
 |
 |
 |
Selected blueprints and specifications for the Abilizer Configurator UI. |
 |
 |






|
 |
 |
 |
Before designing the actual graphical user interfaces for the Configurator, I would design interaction schemes using diagrams to clarify the functional design first.
|
 |
 |



|
 |
 |
Once the interaction schemes and the functional design was settled with the engineering team, I would sketch the user interface using Adobe Illustrator and Photoshop. The multi-site feature for the Configurator would allow a user to not only build pages and assets for a single site, but administer them over a series of sites.
|
 |
 |
 |