Graphic design choices for an engineering mood

Choosing fonts, colors and shapes to set the right feeling while avoiding round corners.

---

Design choices immediately set the mood

If you've been studying computer science, chances are that you also had that professor that has a personal website like this, without any CSS, no colors, no animations, pure content, just like the pure performance of Disk Prices website. This is what peak performance looks like, but it's a strong minority of websites.

In the first few seconds of opening a new web page, your perception of the design choice, including fonts, colors, shape of elements and arrangement of elements immediately set your mood and first opinion of it.

Companies such as Apple, Google and all tech start-ups understood this and play with these parameters to shape their product image. Take Apple's macOS Ventura page, for example. It's made of a lot of free space, big fonts, animation, colorful texts, images, round shape boxes and free space. This page gives a consumer-friendly vibe that is playful, easy-to-use and enjoyable products.

For a long time I was digging this look, and wanted to mimic it. However now I feel burnt out of it, everything looks similar. Until I discovered Berkeley Graphics and its twitter account. It's a type foundry that creates graphic guidelines focusing on engineering standards. Their website feels very different, it tickles some kind of simple yet efficient string in me. I would say it was love at first sight. I was wondering why and how. How to make design choices that are giving a professional and engineering mood, instead of a slightly childish, consumer-friendly one.

It's all about design philosophy

Actually, Berkeley Graphics states very clearly their design philosophy on their website, it's made of 13 rules:

• Emergent over prescribed aesthetics.
• Expose state and inner workings.
• Dense, not sparse.
• Explicit is better than implicit.
• Regiment functionalism.
• Performance is design.
• Verbosity over opaqueness.
• Ignore design trends. Timeless and unfashionable.
• Flat, not hierarchical.
• Diametrically opposite of minimalism. As complex as it needs to be.
• Driven by specifications and datasheets.
• Beauty emerges automatically without deliberation.
• Do not infantilize users.

You don't have to remember everything but I feel like if you're making something for professionals and experts: it all comes down to one principle: the first goal is to expose all needed information without fearing complexity.

Make the right design choices

Whatever design horizon you choose, you will need to select at least three elements: colors, shapes and fonts. Here I will try to describe a few of these elements I like.

Colors: pop colors or light pastel ?

You probably saw these colors and thought, "Hey, I know these colors !". They are Google's logo colors and illustrate exactly how a color scheme can define a brand. You have different choices in the colors you pick, from very saturated pop colors to light pastel ones, all defining a different feel. For example, personally I prefer for now light pastel colors, such as the Nord Theme (see image below). These soft bluish colors are soothing for the eyes. Additionally I made them a little bit more saturated for dark-theme terminal using Themer.dev, you can find my theme here.

One interesting color schema inspiration would come from official government documents, such as these colors coming from the U.S. Federal Regulations. Colors on these pictograms have been chosen with high attention to be seen and understood by a hundred millions of people and preventing accidents. They are a great source of inspiration for a very functional color scheme that transmits an industrial vibe to a product.

Shapes: leave round corners for square corners

Over recent years, there has been a significant shift in the UX design towards rounded corners. Whereas it is Apple, Google or any of your favorite application, there is a strong chance that they use rounded the corner button. Below is an image from Material Design example, the Google's design system, used in Android and all their app. Everything is round and more importantly it's a huge loss of space. Round corners are a loss of space. Maybe it feels fresh to you, but not to me anymore.

A refreshing trend in UI shows that square corners can actually produce a great effect. As seen below, from the menu of Berkeley Graphics website, square corners with a light bottom right shade are very simple yet highly effective to represent buttons. This design choice gives a more "engineering, industrial and retro" feeling than the previous one, while maximizing readability and usage of free space.

Fonts: recognizable yet forgettable

Fonts are subconsciously important. People don't notice it, but they can feel when a font changed or is different. To simplify there are two types of font: serif and sans-serif. Serif fonts are your newspaper fonts, great for printed books and wall of texts, they use small decorations for letters, a classic example is Time New Roman. Sans Serif fonts are your typical online fonts, for websites, brand logos and application, a classic example is Helvetica.

However both these fonts have been overused, mainly by Apple for example for Helvetica, but also on any public sign and brand logo. Helvetica is everywhere and you don't notice it anymore (that's actually part of the genius behind it). It has been used so much that Apple had to create their own personal font called San Francisco to replace it from their products.

Font choice comes down to personal preference, but I have some recommendation that I like. Basically, you want a Helvetica look alike that is not Helvetica, that's why I suggest Univers (developed the same year and very similar) as a paid option and Inter as a free and open-source alternative for Sans Serif font.

For Serif font, instead of the good old Times New Roman, I suggest the classic Garamond (or Alegreya for a more risky choice).

Lastly, for coding and technical specificationn we need a third type of fonts called Mono-Spaced Fonts. In these types of fonts all letters have the same width, creating aligned vertical columns in the text. This is absolutely needed in terminal and code editors.

For this I have to absolutely recommend Berkeley Mono, it's a paid font (75$) but I've fallen in love with it and it's the source of inspiration for this post. (Actually, I haven't bought it yet, but I probably will in a near future, when I have a real job.) I mean just look at this:

It's a mono-spaced font, inspired from Adrian Frutiger's genius (creator of the Univers font) and it has a very pronounced engineering and retro vibe to it. It looks well fitted not only for code but also for any specific technical document. For free alternatives you have different very good mono-spaced fonts such as my favorite Hack, but Jetbrains Mono, Source Pro and Fira Code are all great alternatives.

	Commercial Font	Free Font
Sans Serif	Univers	Inter
Serif	/	Garamond & Alegreya
Mono Spaced	Berkeley Mono	Hack (Jetbrains Mono, Source Pro, Fira Code)

Closing Thoughts

I hope that with this blog post you learned a bit about graphic design choices, especially in terms of fonts, colors and shapes and how you can use these tools to give a specific vibe to your projects. I want to share a bit more resources about this, namely this magnificent blog from Berkely Mono creator and this engineering aesthetic Twitter account. On a side note, thinking about engineering aesthetic made me like the brutalism aesthetic that has some kind of special place in my heart.

Anyways, this closes this blog post. Don't hesitate to share with me what color scheme, font and design choice you prefer. You can also follow me on twitter to keep you updated on my posts: @corentinm_py