Overview: The objective of this project was to create an online vector-based illustration and design application, suited for consumer-level to professional use. This web app was designed to be a stand alone product, and yet tie into related applications under the same brand. In the initial stages, a list was created to catalog what kind of features we wanted to include and features we wanted to improve.
The top tool bar is organized to present the user all the features in one place. The inspector window to the right allows the user to manipulate and control their design elements and tools. The left panel allows layer-specific controls and organization.
Friendly, familiar and full-featured: The UI was designed to present the look feel of an app with professional-grade capabilities. However, it was important to still look friendly, inviting and fun to appeal to beginners and professional alike. By borrowing visual elements from its sister-product, it gives a familiar feel for new users coming from the related software.
Right Panel: The panel on the changes, depending on what tool is active, or what element is selected. This screen shows an example what the right panel when the rectangle tool is selected.
Dropdowns: The dropdown menus take on a dark colour in contrast to the light default UI. This style choice is taken from this app’s sister-product. The visual contrast reinforces when the user is in a secondary menu state.
Colour Panel: This colour panel users the sister-product’s iconic colour picker to reinforce the brand connection. The user has control of colours, gradients and patterns here. This panel also takes the current selected colour and helps the user break it down in tints, shades and tones. The goal for that feature is to help the user navigate their colour choices in a more informed, efficient manner.
In-scene controls: One way to improve the efficiency and ease of the program was to integrate the use of a marking menu directly next to the element being edited. The marking menu (found in Autodesk Maya) ties the product closer into the Autodesk brand.
