User Interface and Brand Design
As part of Splunk’s award winning brand overhaul I’ve been fortunate to play a key part in its development and implementation. As part of a small, highly collaborative team we’ve covered a lot of ground in a very short amount of time.
Rebranding a site of more than 500 pages is no small task, implementing a new design system takes a large, collaborative effort across multiple teams.
Once the foundation of the brand system was established, our team has worked closely with the larger brand creative team, UX, content marketing, web production, web development and others to bring the system to life. Each page must be designed and red-lined before handing off assets to the web production team to stage.
The keystone new brand colors featuring a pink and orange gradient needed to be translated for use on displays. Additionally, we would need a secondary palette including a grayscale ramp. One notable ask was to unify the web marketing palette with swatches in the product palette where possible.
Drawing from the product color palette, the primary link blue was adopted to connect the palettes in a meaningful way. The gray-scale palette uses that blue as a foundation which compliments the pink and orange tones beautifully while feeling fresh and contemporary.
As an initial step in creating the design system, it was important that the colors be as flexible in their potential usage as possible to allow for freedom in future design decisions. The entire color palette including the pink and orange were stress tested to learn their potential use cases and limitations as well as how they worked with each other. Colors that might be used for text, including the pink were modified to meet web standards for contrast and legibility on white, black and as many of the grays as possible. The grays in turn were designed to work in harmony with the rest of the palette.
With a new look and feel to the web marketing, the icons needed to be updated. Without re-illustrating the icon set, we had an opportunity to refresh the look and feel and update how the system would work.
We defined a sizing structure for the icons utilizing 3 sizes: 48px, 64px and 80px. A system was developed to balance the relative visual weight of various icon shapes and dimensions. I applied the new system to over 250 unique icons in 4 color variants.
Motion is a great tool to boost engagement. Using motion can really enhance a narrative and tell a story. Adding motion requires development or video production resources and can be time consuming.
The developers created a video component capable of playing videos, controlling when they start and if they loop. This has allowed me to quickly create quite a bit of motion on pages without requiring development resources.
Oracle: Blogs
