Logo and Website Building

From Brand to Code; Building a Digital Identity for a Chemical Industry Company.✏️

1. The challenge

Quimex operates in the chemical processing sector, but their digital presence didn't match the company's technical solidity. There was no website😭. Additionally, the brand lacked a consistent visual identity: the existing logo was outdated, it didn't convey trust or modernity and didn't work on different backgrounds or sizes.

>>Goal: Build from scratch a strong visual identity and a responsive website that reflected the seriousness of the chemical industry, but with a contemporary touch.👊

2. Research & References

Knowing that Quimex wanted to position itself as modern and trustworthy and not outdated, I had a good look at logos from major national and international chemical groups (Basf, Braskem, Oxiteno) to understand the industry's visual codes: geometric shapes, colors evoking safety and technology, robust typography. The existing logo had all the classic signatures of early 2000s corporate design: a serif typeface (which lost legibility at small sizes), a gradient fill (could bring inconsistency across digital and print applications), and an abstract, kinda wavy shape that didn't connect to the chemical industry's identity.🤔

Major chemical groups

Old Logo:

3. Concept & Sketching &
Refinement

I digged into my research analysing the market's place that the company wanted to place itself without losing it's heritage.👷‍♀️ I was looking for references that could transmit universal connotations of safety guidance, minimalism, innovation, neutrality, and modernity. So the smallest part of a chemical element came up to me: the atom symbol!🤩 - Also the fundamental unit of matter. But not ANY atom symbol could express all values nurtured by the company; we needed every shape to have meaning and purpose. So I designed it myself with three main creative guidelines: (1) The company's identity as a Brazilian industry, (2) immediate visual connection to the world of chemistry, and (3) a shape that harmonized all the ideas and connected to the company's name.🤯

Website

Yay, now we have our logo, our brand identity and our colours all harmoniously communicating the company's image! Let's translate it all to the internet language on a responsible website (literally </> 😎)

4. Defining a style guide

We had a really tight deadline for this project.🥵

Originally, the company didn't even have a website, so all the work needed to be done quickly and neatly - ensuring customers could access product specifications and contact information as soon as possible.💪🏼

For the website build and coding process, I used Bootstrap 4. Using Pingendo, an online tool, to assemble the responsive frameworks I needed was an efficient - though demanding - process. I had to create the style guide and set up all the variables for the website's main components so they would follow the collour pattern we had ready: orange as an accent color (energy, innovation) and dark gray evoking modern, elegance, sophistication and professional strength.

5. Using responsible framework tools

· Designed mobile-first, knowing that many clients would access via phone during technical visits. Used a flexible card grid for products, making reading easy on any screen. Prioritized orange call-to-action buttons, guiding visitors toward contact or quotes. Since I had the opportunity to handle development (or lead implementation with a dev), I ensured the site was lightweight, fast, and had basic SEO applied.