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-AgentQ-main-03.png
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

principles.png

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.

colors.png

Illustration guidelines

The guidelines help to make the illustration style consistent throughout the website and the overall brand image.

illo guide.png

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.

07.png
06.gif
04.gif
tablet.png
mobile.png

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.

ezgif-3-21b5a43116c1.gif
qualys_22.png

Iterations

 

To finalize the characters I have experimented with different colors and coloring styles, to find the boundaries of each character’s expression.

qualys_76.png
qualys_24.png

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-01.png
Data Visualization

Taxonomy

2D based

3D based

texo-data.png

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.

how to.png

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.

bar chart.png

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.

pie chart.png

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.

table.png

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.

data-colors.png

Shadows, radius and construction

shadows.png

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.

data-02.png
08.gif
data-04.png

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

icons.png

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.

icons-02.png

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.

icons-03.png

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.

icons-04.png

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. 

icon_menu_07-(Converted).gif

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.

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.

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.

23.gif

Usage

The isometric icons are used for the less prominent web pages such as free services and general information pages.

isonmetric-02.gif

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.

app icons.png

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.

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