Art Direction Language
Last Updated 09.28.03
General Description
To maintain a family resemblance between all applications within the Oracle product line,
below an art direction statement has been made to help understand the rationale and
thinking behind the visual directions being determined for HTML applications.
Collage of Various Elements in BLAF to Outline the Art Direction Language
Spec Attributes
Spec Version # - 3.1
Spec Contributors - Betsy Nute
UI Models - All models
Example Products - all products
Related Guidelines - all
Interaction and Usage Specifications
Not applicable.
Visual Specifications
Art Direction Rationale - The HTML application suite visual design direction is targeted to
match the latest business goals and objectives of Oracle. Oracle is an "internet" company. With slogans like,
"The Internet Changes Everything,"; "Oracle - #1 in eBusiness," it is important that the
applications we ship reflect the "internet" aspect of our products. To capitalize on this aspect,
a visual elements list was created to enumerate exactly what may be
perceived as web like. But to be more articulate, below is the detailed art direction for BLAF applications:
Predominately Blue and White Palette with Beige Accents
The color palette that is being used remains
relatively unchanged, with the main difference being that the predominerance
of grey has been replaced with white, and an accent color has been used
to add "warmth." Besides this, the blue palette remains unchanged. This
new palette, now offers a clean, professional, and business like look
that can convey messages such as: trust, security, cleanliness, precision,
conservative, technology, comfort, and warmth.*
Rounded and Square Shapes
To remain within the family of all Oracle products (including Java products) yet,
also convey a web like form, the predominate shapes within the self service art direction
have been reassessed. From the findings above in the elements list, it is clear that the web
has many more free form visual elements present, than, say, a typical GUI application. To capitalize
on this, the new art direction style perscribes the use of not only curves, but also sharp corners and rectangular shapes.
It has been researched that rounded shapes are quite effective in portraying psychological responses
like connection, community, and comfort. Whereas, a rectangular shape can evoke responses such as order,
logic, and security.* Along with these responses, the use of these two shapes together will add a dynamic
and original feel to the overall page layout since these two shapes are complimentary in nature.
Visual Hierarchy of Information through Size and Depth
To maintain a sense of visual hierarchy within self service applications,
the art direction recommends size and depth be used. Using different sized visual elements within the new UI will aid the user to
focus on the most important elements and information first and form a mental hierarchy of information. This technique can also prevent the
design from becoming cluttered, with too much information at relative weights, and importance, such that the user may perceive no clear notion of importance of information. Another technique used to create
visual hierarchy in this art direction is the use of depth, giving 3d attributes to
visual objects. This not only enforces the information hierarchy, but also can convey messages such as professionalism, richness,
and sophistication.
Sans-Serif Typeface
The font choice is to use a sans-serif font to convey cleanliness, and
modernity. The chosen fonts, specified in the Text
Standards and CSS Guideline is to be defaulted to Arial, and as an
alternative, Helvetica. Also, Arial font (or a sans-serif font face) is
preferred by low vision users, thus the usage of Arial enforces Oracle's
compliance to accessibility standards. Here is a comment from an article
regarding sans-serif fonts: "A less formal, more warm and friendly type
style, a sans-serif typeface typically makes an excellent screen font
as it is clear and easy to read."*
Minimize Rendered Icons, Emphasize Simplified, Stylistic Graphics in Content
The art direction can also be seen through the use of icons and other graphics within the content
of the web page. Since the presentation of the toolbar has been changed, one ramification is that the use of
highly rendered icons have been minimized. This minimization will also be beneficial, since the icon visual
style is seen more typically in application designs, but not necessarily in web pages. With the minimized use of icons, the new
art direction demands that more attention should be placed on graphics within the content. The styles
of these graphics should be less rendered, with a more stylized and simplistic look thus, not to be competitive
with the UI and task at hand. Also, rendering these graphics in the content with visuals from the
application domain can play another role of enforcing the unique and individual characteristics from
each application family (i.e., using HR specific imagery in HR applications, or Financial imagery for Financial applications.)
*Source of information: "Satisfying Customers with Color, Shape, and Type," by Molly E. Holzshlag; Web Techniques Magazine, November 1999.
Open/Closed Issues
all issues are closed.