top of page
qualys.com
Everything visible. Everything secure.
since 2018
Qualys reimagined
Role
Timeline
Team
Tools
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.
01
Qualys illustrated
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.
Illustration
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.
Illustration principles
Qualys wants to …
Be accessible
Be reliable
Be practical
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.
Color palette
The colors for the illustrations are based on the brand colors and use tone-on-tone pairings.
Illustration guidelines
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
Usage
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.
Sketches
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.
The process
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.
Iterations
To finalize the characters I have experimented with different colors and coloring styles, to find the boundaries of each character’s expression.
Data visualization
02
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.
Data Visualization
Taxonomy
2D based
3D based
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.
Discrimination:
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.
How to
① 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.
Chart types
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.
Pie chart
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.
Table
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.
Color palette
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
Applications
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.
Dashboard
Data widgets
Free product dashboards
Dashboard
1/5
Iconography
03
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.
Taxonomy
System icons
Isometric icons
App badges
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.
Iconography
Color palette
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
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.
Construction
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
Padding: 1px
Stroke: 2px
Usage
The system icons are widely used for the company’s promotional and marketing collaterals for both digital and printed designs.
Digital designs
The icons are used for the products’ descriptions, the website’s navigation menu, and other digital-based collaterals.
Product page
Core features
Application: abstract icon 2
Product page
1/4
Executives' presentations
These icons are also incorporated into the executives’ keynote presentations. In the form of diagrams, small icons play a significant role in these presentations to ensure that the information on them is easy to understand.
Everything visible
Cloud platform
Cloud flatform
Everything visible
1/6
Printed materials
Printed materials such as brochures, conference booklets, and more also use icons. The usages are the same as those for the digital designs but adjustments are made to the colors, such as shifting them from RGB to CMYK to stay consistent with brand guidelines.
Booklet 01
Booklet 02
Booklet 03
Booklet 01
1/3
Isometric icons
Serve both a decorative and descriptive purpose at the same time. This contemporary icon style gives the product pages and promotional collaterals a more executive look.
Grid
This grid is created with a vertical straight line, a 30 degree tilted line, and a 150 degree tilted line. All isometric icons for Qualys collaterals need to be created based on this grid.
Usage
The isometric icons are used for the less prominent web pages such as free services and general information pages.
Product page
Pricing page
email-02
Product page
1/4
App badges
The app badges are created to promote free services. Whenever the company announces a new service or product, the promotional pages have these app badges. The app badges are created using a shield with an added icon specific to the product that the company wants to promote.
Usage
The app badges are commonly found on the service’s web pages. They are also the key graphic for booklets that exclusively cover information on free services. As more free products are added the app badges are also updated.
RSA 2018
RSA 2018
Product detail page
RSA 2018
1/8
Reflection and the future
My journey in the company
In creative lines of work, nothing happens overnight. I have gradually developed the brand images and adopted new styles during my tenure at the company. Through this experience, I have realized a new appreciation for the small steps of a process.
It was fascinating to witness the expansion of the brand assets and how they pushed our boundaries, ultimately leading to a tighter, more concrete vision of Qualys’ entire brand. I have learned the flexibility and versatility of branding and I take this perspective with me in everything I do.
I’m excited by the prospect of continuing the extensive process of defining brand guidelines and web design system guidelines to help shape the future of Qualys.
bottom of page