Visual design

Visual design is a refinement of the mockup. It is the final and realistic specification within the boundaries of the conceptual design and it will determine the user experience to a great extent. Apart from the look of the interface, its particular feel is covered as well during this phase.
Our aim is to create a visual language that best supports the user interaction, is visually attractive and represents the corporate identity appropriately.

Although the visual design phase may seem less important when compared for instance to the conceptual design, it is crucial within the process: a mismatch between the conceptual design and the visual language results in a disastrous interface/design. A successful visual design is an extension of the conceptual design on which it is founded: it enhances the design, reinforces the designer’s message and therefore contributes to the user experience and the corporate image.
Communicating the corporate message is another target. A good visual design appropriately represents the product and the corporate identity. Often, an existing branding or style is available, upon which the visual design is based.

During the phase of visual design, each component that makes up the interface (determined in the mockup and/or conceptual design) is translated into a specific look & feel. The look is specified by a set of graphic properties such as padding, font type, type size, colour coding etc. For instance a standard button in the mockup will be specified as being blue with an orange highlight and an darker over state.
The feel part within the visual design focuses on minor aspects of the user experience, such as animations to reinforce the interactive behaviour. The essential feel has already been determined in the conceptual design or mockup, but in the visual design it is handled down to the last detail. For instance a list item expands on click with a strong ease in/out transition. But also the specific interpretation of the different states of a component.

The visual language contains multiple aspects:

• At interface element level - colours, spacing & alignment, fonts, capitalization, animation etc.
• At screen level - layout, placement and alignment, animation etc.
• ­­At application level - icons, accessibility e.g. AnySurfer compliance with respect to the clickable area, colour contrasts and text size etc.

Visual design assets are either delivered in ready-to-use file formats or specified by means of a list with the graphical properties for each interface element. It all depends on the specific implementation needs. Depending on the mission, deliverables of the visual design phase are

• drawings of the different components that build up the UI. Source files are generally in a png format (Adobe FireWorks) which can be imported into e.g. Flash. Exports to bitmap, jpg, gif, tiff etc. can be provided as well.
• image files of each screen
• a detailed description of the interface components: a document listing the exact values for all properties of the interface elements.
• icons as standard images or .ico files. If needed, vector-based icons can be provided.