Dram's Semiotic Standard For All Commercial Trans-Stellar Utility Lifter And Heavy Element Transport Spacecraft

Hi again, Dram here.

A month ago when the new styles panel beta was unveiled, one of the problems with it was the fact that nobody could say that the overflow icons were, in fact, overflow icons and not something related to text formatting. And this was one of the first changes to the beta - icons were changed to be more familiar.

This got me thinking about what makes an icon good and I even considered writing on this subject (even though there are already a lot of articles of much better designers than myself on the web), started digging into the more obscure fields still connected with iconography, and sidetracked so much that decided to postpone the musings on the topic for later :slight_smile:

Anyway, let’s talk about Ridley Scott’s Alien, shall we? I mean why not, it’s a good topic to geek out, eh? But wait, it is not as far from the original idea that got me thinking at all! I wanted to talk specifically about the work of a set designer Ron Cobb who did something amazing while working on the Nostromo’s interiors. He came up with the set of icons aptly named Semiotic Standard For All Commercial Trans-Stellar Utility Lifter And Heavy Element Transport Spacecraft.


They look incredibly timeless and very well done, even though they may not be perfect from the modern designer’s point of view.

It struck me as an excellent piece of interface to try to replicate in Webflow using only css and no images. Some of the icons looked quite complex at first glance but that was a challenge I was willing to take. And one weekend later it was done.

Without further ado let me introduce my own rendition of Semiotic Standard, done with simple divs and css-transform.

This approach to icon creation is obviously not the best choice when you can simply use images, since we create a large amount of elements that may slow down page rendering (well, unlikely by much but still) so this is rather just a proof of concept. The icons are completely resolution independent, being created with percentages, they use global swatches and hence can be easily modified in terms of colour, and they are faithfully recreated unlike some of the renditions you may find on the web with this and that “fixed”. I did my best to make them exactly as they looked in Ron’s sketchbook with their pixel-imperfectness, optical balancing rather than strict one etc.

People often think if they can do something in Webflow (talking about visuals), and this is a good illustration of what is possible with just simple divs, z-indexes, rounded corners and 2d transforms.

Enjoy and thank you for your attention.

4 Likes