Everything visible. Everything secure.
Visual Design, Branding, Graphic design, Marketing
From 2018 Feb - present
Qualys marketing team, Develop team, Communications team
Adobe Illustrator, Adobe Photoshop, Adobe Efter Effects, Adobe InDesign, InVision, Sketch, PowerPoint, Excel
Qualys is a global security company that provides cloud-based security services for more than 15000 companies worldwide.
I have been creating Qualys marketing collaterals including the company’s web pages, promotional print-based materials, email and presentation templates, and event branding by using the existing brand guidelines and making updates to the protocols along the way.
I have been optimizing and enhancing the branding by adding new visual assets including new illustration styles, data visualization, and icon styles.
This page highlights the three elements that I created for the company’s branding.
Communicating the values and personality of the brand
Qualys illustration style is built to enhance promotional campaigns such as the Qualys Cloud Agent service.
The illustration style is made of simple shapes, limited colors, and unique brush strokes to make the brand and its message intriguing and easy to digest.
The role of illustrations
It makes the company itself and promotional campaigns more accessible and recognizable.
It represents Qualys brand in an efficient and clear way.
It exists to tell stories and thoughtfully convey ideas- they are not being used simply as decorative elements or space fillers.
Qualys wants to …
By adding the narrative illustrations, it makes the text contents more accessible.
Neat and clean looking illustration style emphasizes the trustworthiness of the brand.
The reality-based perspective and the depth of the illustration style represent its practical and useful characteristics.
The colors for the illustrations are based on the brand colors and use tone-on-tone pairings.
The guidelines help to make the illustration style consistent throughout the website and the overall brand image.
Do not use strokes
Do not use gradients for both the background and the illustration itself
Do not add more colors outside of the brand guidelines
Do not overlap the text contents and the illustrations
Do not stretch them inappropriately
Do not scale them inappropriately
Qualys uses illustration across marketing collaterals to support consistent, clear, and cohesive company ideals. Illustrations are most commonly used in the company website, landing pages, microsite, and presentations.
The characters are becoming beneficial in introducing the company’s new products and services because without them these web pages would be too text-heavy and overly sober.
After we gathered the initial ideas for the characters - a man and woman in a suit - I hand drew the sketches. During this phase, I was able to figure out some key gestures and movements for the characters.
The main gesture for the male agent is of him looking through binoculars, which represents his efficiency as a problem solver. The female agent is standing and holding a tablet, which represents her readiness to analyze the customers' pain points and what they need.
One challenge during this process was that Qualys did not have any style guidelines for illustration and character development. I had to create the characters from scratch through research and ideation, simultaneously developing an illustration style along the way. I personally did almost all of the designs, including the ideation, hand drawing, and digital sketches, and I finalized these with the creative director.
To finalize the characters I have experimented with different colors and coloring styles, to find the boundaries of each character’s expression.
Derive simplicity from complexity
Visualizations make complex concepts easier for the viewers to understand.
When Qualys promotes its new services and applications, the company wants to show the products that it offers at a glance. However showing the actual product immediately, presenting it everywhere, or using it on promotional materials as it could overwhelm the viewers. This also makes it less visually interesting and convoluted. Thus this simplified and artistic version of visualized data for use in the company’s promotional materials seems more intriguing and direct.
2d based data visualization is a simplified version of the actual products. Select necessary widgets and present the most usable and powerful features of the products. It’s widely used for the company’s website and digital-based promotional campaigns/materials.
This develops a manipulated version of the actual products. To make the dashboard look more interesting, make them three dimensional. This style is used for free app services to create a more inviting look that incites user interest in the apps extensive features.
2D based data visualization is featured below. For the 3D based data visualization, it follows the company UI design systems and only changes the angles and readjusts the elements accordingly.
① Select items that the company wants to highlight for the promotional/marketing collaterals while utilizing the actual product.
② Simplify the selected charts and change the colors to tone-on-tone colors.
③ Use separately based on the widgets or reorganize them on a dashboard.
Bar and column charts
When the bar and column chart are moved from the actual products, select the items that are the most important and valuable to present on the promotional/marketing materials, ensuring simplicity and a clean look.
Like the bar and column charts, pick the most important data and develop easy to read pie charts. If data must be entered to clarify the meaning of the chart, an appropriately sized hole can be made within the pie chart. If that is not needed, the diameter of the hole may remain at 50% of the circle.
Use selected items and present them with the necessary visuals. For example add Qualys icons or gray scaled logos for each data element to enhance its visibility.
The graph colors as well as the added tone-on-tone colors are based on the brand guidelines. Subtle colors such as these work well for visualized data, especially since they will be used for the secondary elements on promotional/ marketing materials. New colors should not be added to limit confusion and ensure consistency.
Shadows, radius and construction
The data is simplified and visualized for the broad use in marketing collaterals to make complex ideas easy to digest. Visualized data is used on the company website, landing pages, microsite, emails, presentations, and printed materials.
The widgets can be used separately or together on a dashboard form.
Say it with icons- loud and clear
Qualys’ iconography is used to express the complex ideas of the products and services that the company provides.
Icons and their usage principles were designed to communicate quickly and effectively across all promotional and marketing materials.
System icons help in differentiating several points when each needs a graphic representation. It assists in breaking down information by creating a hierarchy and an easy to scan format.
Isometric icons can also be used for less prominent web pages and printed materials.
These app badges are created to promote free services in a more intriguing way. Typically badges are in shield form and add a characteristic of the app inside of it.
The icon colors are based on brand guidelines. The 2D main icon style consists of the Qualys red and pale blue. The 2D sub icon styles and isometric icons have tone-on-tone colors that are derived from the Qualys royal blue. The app badge colors also follow the brand guidelines.
System icons are straightforward in meaning and intend to bring clarity to their subject so the shapes should always be simple and easy to understand. The main style consists of blue lines and red focal color. It has three sub-styles: 1) Pale blue lines + Qualys spot color, 2) White lines in a blue square, and 3) pale blue lines + dark blue spot color.
The icons have been scaled up to 200 and new ones are continually being added based on the demands.
All icons are created on a 64x64px grid frame and the frame contains 1px padding. The key lines give designs consistent sizes for basic shapes and proportions across the icon set.
The icons should maintain the same visual weight by using 2px stroke for all icons with rounded edges. However, there are few exceptions to this rule when the icon is complex or smaller than other elements.
Frame: 64x64 px