A History of CSS Through Fifteen Years of 24 ways

December 17, 2019 • History, Through

I’ve written nine articles in the 15 years of 24 ways, and all but one of those articles had something to do with CSS. In this last year of the project, I thought I would take a look back at those CSS articles. It’s been an interesting journey, and by reading through my words from the last 15 years I discovered not only how much the web platform has evolved – but how my own thinking has shifted with it.

2005: CSS layout starting points

Latest web browser versions: Internet Explorer 6 (at this point 4 years old), IE5.1 Mac, Netscape 8, Firefox 1.5, Safari 2

Fifteen years ago, my contributions to 24 ways started with a piece about CSS layout. That article explored something I had been using in my own work. In 2005, most of the work I was doing was building websites from Photoshop files delivered to me by my design agency clients. I’d built up a set of robust, tried-and-tested CSS layouts to use to implement these. My starting point when approaching any project was to take a look at the static comps and figure out which layout I would use:

Liquid, multiple column with no footer
Liquid, multiple column with footer
Fixed width, centred

At that point, there were still many sites being shipped with table-based layouts. We had learned how to use floats to create columns some four years earlier, however layout was still a difficult and often fragile thing. By developing patterns that I knew worked, where I had figured out any strange bugs, I saved myself a lot of time.

Of course, I wasn’t the only person thinking in this way. The two sites from which the early CSS for layout enthusiasts took most of their inspiration, had a library of patterns for CSS layout. The Noodle Incident little boxes is still online, glish.com/css is sadly only available at the Internet Archive.

which one of the two possible websites are you currently designing? pic.twitter.com/ZD0uRGTqqm

— Jon Gold (@jongold) February 2, 2016

This thinking was taken to a much greater extreme in 2011, when Twitter Bootstrap launched and starting with an entire framework for layout and much more became commonplace across the industry. While I understand the concern many folk have about every website ending up looking the same, back in 2005 I was a pragmatist. That has not changed. I’ve always built websites and run businesses alongside evangelizing web standards and contributing to the platform. I’m all about getting the job done, paying the bills, balancing that with trying to make things better so we don’t need to make as many compromises in the future. If that means picking from one of a number of patterns, that is often a very reasonable approach. Not everything needs to be a creative outpouring.

Today however, CSS Grid Layout and Flexbox mean that we can take a much more fluid approach to developing layouts. This enables the practical and the creative alike. The need for layout starting points – whether simple like mine, or a full framework like Bootstrap – seems to be decreasing, however in their place comes an interest in component libraries. This approach to development partly enabled by the fact that new layout makes it possible to drop a component into the middle of a layout without blowing the whole thing up.

2006: Faster Development with CSS Constants

Latest web browser versions: Internet Explorer 7, Netscape 8.1, Firefox 2, Safari 2

My article in 2006 was once again taken from the work I was doing as a developer. I’ve always been as much, if not more of a backend developer than a frontend one. In 2006, I was working in PHP on custom CMS implementations. These would also usually include the front-end work. Along with several other people in the industry I’d been experimenting with ways to use CSS “constants” as we all seemed to call them, by processing the CSS with our server-side language of choice.

The use case was mostly for development, although as a CMS developer, I could see the potential of allowing these values to be updated via the CMS. Perhaps to allow a content editor to change a color scheme.

Also in 2006, the first version of Sass was released, created by Hampton Catlin and Natalie Weizenbaum. Sass, LESS and other pre-processors began to give us a more streamlined and elegant way to achieve variables in CSS.

In 2009, the need for pre-processors purely for variables is disappearing. CSS now has Custom Properties – something I did not foresee in 2006. These “CSS Variables” are far more powerful than swapping out a value in a build process. They can be changed dynamically, based on something changing in the environment, rather than being statically set at build time.

2009: Cleaner Code with CSS3 Selectors

Latest web browser versions: Internet Explorer 8, Firefox 3.5, Safari 4, Chrome 3

After a break from writing for 24 ways, in 2009 I wrote this piece about CSS3 Selectors, complete with jQuery fallbacks due to the fact that some of these selectors were not usable in Internet Explorer 8.

Today these useful selectors have wide browser support, we also have a large number of new selectors which are part of the Level 4 specification. The changes section of the Level 4 spec gives an excellent rundown of what has been added over the years. Browser support for these newer selectors is more inconsistent, MDN has an excellent list with the page for each selector detailing current browser support and usage examples.

2012: Giving Content Priority with CSS3 Grid Layout

Latest web browser versions: Internet Explorer 10, Firefox 17, Safari 6, Chrome 23

My 2012 piece was at the beginning of my interest in the CSS Grid Layout specification. Earlier in 2012 I had attended a workshop given by Bert Bos, in which he demonstrated some early stage CSS modules, including the CSS Grid Layout specification. I soon discovered that there would be an implementation of Grid in IE10, the new browser shipped in September of 2012 and I set about learning how to use Grid Layout. This article was based on what I had learned.

The problem of source versus visual order

As a CMS developer I immediately linked the ability to lay out items and prioritize content, to the CMS and content editors. I was keen to find ways to allow content editors to prioritize content across breakpoints, and I felt that Grid Layout might allow us to do that. As it turned out, we are still some way away from that goal. While Grid does allow us to separate visual display from source order, it can come at a cost. Non-visual browsers, and the tab order of the document follow the source and not the visual display. This makes it easy to create a disconnected and difficult to use experience if we essentially jumble up the display of elements, moving them away from how they appear in the document. I still think that an issue we need to solve is how to allow developers to indicate that the visual display should be considered the correct order rather than the document order.

The Grid Specification moved on

Some of the issues in this early version of the grid spec were apparent in my article. I needed to use a pre-processor, to calculate the columns an element would span. This was partly due to the fact that the early grid specifications did not have a concept of the gap property. In addition the initial spec did not include auto-placement and therefore each item had to be explicitly placed onto the grid. The basics of the final specification were there, however over the years that followed the specification was refined and developed. We got gaps, and auto-placement, and the grid-template-areas property was introduced. By the time Grid shipped in Firefox, Chrome, and Safari many of the sticky things I had encountered when writing this article were resolved.

2015: Grid, Flexbox, Box Alignment: Our New System for Layout

Latest web browser versions: Edge 13, Firefox 43, Safari 9, Chrome 47

Grid still hadn’t shipped in more browsers but the specification had moved on. We had support for gaps, with the grid-row-gap, grid-column-gap and grid-gap properties. My own thinking about the specification, and the related specifications had developed. I had started teaching grid not as a standalone module, but alongside Flexbox and Box Alignment. I was trying to demonstrate how these modules worked together to create a layout system for modern web development.

Another place my thinking had moved on since my initial Grid article in 2012, was in terms of content reordering and accessibility. In July of 2015 I wrote an article entitled, Modern CSS Layout, Power and Responsibility in which I outlined these concerns.

Some things change, and some stay the same. The grid- prefixed gap properties were ultimately moved into the Box Alignment specification in order that they could be defined for Flex layout and any other layout method which in future required gaps. What I did not expect, was that four years on I would still be being asked about Grid versus Flexbox:

“A question I keep being asked is whether CSS grid layout and flexbox are competing layout systems, as though it might be possible to back the loser in a CSS layout competition. The reality, however, is that these two methods will sit together as one system for doing layout on the web, each method playing to certain strengths and serving particular layout tasks.”

2016: What next for CSS Grid Layout?

Latest web browser versions: Edge 15, Firefox 50, Safari 10, Chrome 55

In 2016, we still didn’t have Grid in browsers, and I was increasingly looking like I was selling CSS vaporware. However, with the spec at Candidate Recommendation, and it looking likely that we would have grid in at least two browsers in the spring, I wrote an article about what might come next for grid.

The main subject was the subgrid feature, which had by that point been removed from the Level 1 specification. The CSS Working Group were still trying to decide whether a version of subgrid locked to both dimensions would be acceptable. In this version we would have declared display: subgrid on the grid item, after which its rows and columns would be locked to the tracks of the parent. I am very glad that it was ultimately decided to allow for one-dimensional subgrids. This means that you can use the column tracks of the parent, yet have an implicit grid for the rows. This enables patterns such as the one I described in A design pattern solved by subgrid. At the end of 2019, we don’t yet have wide browser support for subgrid, however Firefox has already shipped the value in Firefox 71. Hopefully other browsers will follow suit.

Level 2 of the grid specification ultimately became all about adding support for subgrid, and so we don’t yet have any of the other features I mentioned in that piece. All of those features are detailed in issues in the CSS Working Group Github repo, and aren’t forgotten about. As we come to decide features for Level 3, perhaps some of them will make the cut.

It was worth waiting for subgrid, as the one-dimensional version gives us so much more power, and as I take a look back over these 24 ways articles it really underlines how much of a long game contributing to the platform is. I mentioned in the closing paragraph of my 2016 article that you should not feel ignored if your idea or use case is not immediately discussed and added to a spec, and that is still the case. Those of us involved in specifying CSS, and in implementing CSS in browsers care very much about your feedback. We have to balance that with the need for this stuff to be right.

2017: Christmas Gifts for Your Future Self: Testing the Web Platform

Latest web browser versions: Edge 16, Firefox 57, Safari 11, Chrome 63

In 2017 I stepped away from directly talking about layout, and instead published an article about testing. Not about testing your own code, but about the Web Platform Tests project, and how contributing to the tests which help to ensure interoperability between browsers could benefit the platform – and you.

This article is still relevant today as it was two years ago. I’m often asked by people how they can get involved with CSS, and testing is a great place to start. Specifications need tests in order to progress to become Recommendations, therefore contributing tests can materially help the progress of a spec. You can also help to free up the time of spec editors, to make edits to their specs, by contributing tests they might otherwise need to work on.

The Web Platform Tests project has recently got new and improved documentation. If you have some time to spare and would like to help, take a look and see if you can identify some places that are in need of tests. You will learn a lot about the CSS specs you are testing while doing so, and you can feel that you are making a useful and much-needed contribution to the development of the web platform.

2018: Researching a Property in the CSS Specifications

Latest web browser versions: Edge 17, Firefox 64, Safari 12, Chrome 71

I almost stayed away from layout in my 2018 piece, however I did feature the Grid Layout property grid-auto-rows in this article. If you want to understand how to dig up all the details of a CSS property, then this article is still useful.

One thing that has changed since I began writing for 24 ways, is the amount of great information available to help you learn CSS. Whether you are someone who prefers to read like me, or a person who learns best from video, or by following along with a tutorial, it’s all out there for you. You don’t have to rely on understanding the specifications, though I would encourage everyone to become familiar with doing so, if just to be able to fact check a tutorial which seems to be doing something other than the resulting code.

2019: And that’s a wrap

Latest web browser versions: Edge 18, Firefox 71, Safari 12, Chrome 79

This year is the final countdown for 24 ways. With so many other publications creating great content, perhaps there is less of a need for an avalanche of writing in the closing days of each year. The archive will stay as a history of what was important, what we were thinking, and the problems of the day – many of which we have now solved in ways that the authors could never have imagined at the time. I can see through my articles how my thinking evolved over the years, and I’m as excited about what comes next as I was back in 2005, wondering how to make CSS layout easier.

A Brief History of the Virgin Logo Design Including a Napkin Doodle

November 27, 2019 • History

Came across this post on Virgin’s official blog: Virgin Logo The original Virgin Logo Design was used for Virgin Records way back in the 1970’s, and the logo was designed by English artist, and illustrator, Roger Dean.

BIOGRAPHY: ROGER DEAN was born in England in 1944,and is an artist and designer internationally renowned for his, album cover designs, posters, books, the revolutionary publishing companies, Dragon’s Dream and Paper Tiger, Eco architectural, furniture and stage design, as well as typefaces, logos and iconic designs for computer games company, ‘Psygnosis’ and redesigned the Tetris Logo.”

Read the rest of the Biography on Roger’s official website: http://www.rogerdean.com/biography/

Dear Ken, Please find attached copy of the new Virgin Logo.

The letter shown below was sent in 1979–attached to the letter with the original naked-twins logo letterhead) is a copy of the more familiar Virgin logo.

Virgin: It [the twins logo by Roger Dean] was an embodiment of the early-70s and really summed up the feel of the brand and the artists we represented.

However by the time 1977 rolled around, and we’d signed The Sex Pistols, the logo began to feel a little dated, and didn’t overly reflect the direction we were headed.

Edgy and Less Hippy

So it would appear that in this later period of Virgin’s business, a more ‘edgy’ and less ‘hippy’ logo design was called for. Got to love the word ‘edgy’…

Part of the reason for this logo update were due to plans to expand Virgin into other industries, so something ‘stylishly simple’ was needed.

Virgin NASA logo Design

The Original Virgin Logo Napkin Doodle Sketch

This is my favourite part, as I’m always referencing the ‘napkin doodle’ to my new clients; a way to explain how some of the creative brainstorming process can come about, something as rough as a few words scribbled on a napkin can lead to mighty mighty things.

I’ll be referencing this in my client communications from now one, as some of my past clients don’t seem to believe me when I say ‘napkin doodles’ can often lead to the chosen logo design.

In Virgin’s case, it was a young designers who came to meet Mr Virgin on his houseboat, and whilst talking about about the logo, scribbled what you see on the napkin.

And that was it, it was love at first sight!

Mr Branson: “It looked like a signature. It had attitude. It had energy. It was in-your-face simplistic.”

This original Virgin logo sketch became the official brand mark of Virgin in 1979, and has since disrupted everything from air-travel, to banking, health clubs and hotels.

No denying that the Virgin logo is one of the world’s most recognisable brands.

Virgin Logo Refinements

Apart from the original naked twins logo, the Virgin logo has seen a few subtle refinements over the years, but nothing has dramatically changed in these intermediate updates.

I wonder when and if the next Virgin logo update will happen…

Hire a Freelance Logo Designer in the UK

If you like the Logo & Brand Identity Design work I have done in my Portfolio, and Case Studies and Monomarks, and are looking to hire yourself a Highly Talented, and Super Experienced (27 Years), Freelance Logo & Brand Identity Designer, then look no further. Visit Hire Me, and fill in the Design Brief, or just Contact me.

The Logo Smith has Full Business Idemnity Insurance (FCA Regulated).

History of grids: from the printing press to modern web design

October 17, 2019 • grids, History

Grids give designers an intuitive method of organization. From the rule of threes, which guides composition in photography, to the rows of products on an ecommerce website like Amazon, grids provide a visual logic that helps us quickly and easily understand what we’re seeing. Join us as we take a look at the history of grids, from their earliest incarnations to their modern applications on the web.

Grids are the building blocks of order

We don’t have to look any further than our everyday environments to see the beauty and balance that grids bring. From the office file cabinets to the aisles of a grocery store, grids make navigating our world easier.

Grids work a kind of geometric magic, guiding visual elements to adhere to vertical and horizontal lines. Designers are the wizards who wield them, bringing order and organization to what would otherwise be chaos. Alignment, spacing, and proportion are all important ingredients in creating a visual sense of harmony.

Grids act as the concealed framework guiding design from the ink and papyrus scrolls of ancient history to the pixels of today’s increasingly digital world.

The hands of early graphic designers were guided by notions of the divine

As with so many early cultural works, the earliest (preserved) published works were often religious. Drawing, writing, and binding these books was time-consuming, so why waste these efforts on anything less than what came from above? Historical romances and self-help books would have to wait hundreds of years, when the publication bar would be much, much lower.

The proto-graphic designers producing these texts didn’t have formal training, but their work shows an incredible attention to visual harmony, and a deep awareness of the power of visuals to communicate with a largely illiterate audience.

In the example from the Book of Kells below, created around 800 C.E. and containing the Four Gospels of the New Testament, we see both symmetry and balance. Grids are intuitive in laying out information and these early religious scholars had the innate sensibilities to arrange these holy texts following the grace of these invisible guidelines.

We can go back even further. The ancient Egyptians followed what we call the Canon of Proportions. The figures depicted in their carvings and paintings followed this grid rule. The Egyptians based their canon of proportions as a human fist, measuring 18 fists from the ground to the forehead of a standing figure. Their hieroglyphics also show a distinct grid layout. Just imagine what these early creators working in stone could have done with CSS grid and flexbox!

From manual to the mechanical

Movable type was first developed in China about 1040 C.E., with porcelain used for its characters. In the West, movable metal type would emerge around 1450, and the release of the Gutenberg Bible around 1455 would be one of the first massive milestones in publishing.

The nature of working with metal type made grids a necessity.

korean moveable type press — Replica of a Korean moveable type press from 1447. Located in Incheon International Airport in Seoul, South Korea.

Printing presses allowed for the mass production of books, and unlike the handmade religious texts that came long before, the metal plates that they used made for uniformity. The Gutenberg Bible presents its text in a simple two-column layout.

Gutenberg bible — The Gutenberg Bible was one of the first large scale books ever to be released printed on presses using movable metal type.

The refinement and (relative) affordability of printing presses, as compared to hand-production, led to books of non-religious topics being printed and the creation of newspapers. Grids changed with the advancements in printing technologies, making complicated layouts with variably sized columns, rows, text, and photos all possible.

Grids get arty: the influence of Piet Mondrian and the De Stijil Movement

Sparked in the Netherlands in 1917 and lasting until 1931, De Stijil was a modern art movement rooted in both minimalism and abstraction. Simplicity replaced the intricacies of realism, with a linear approach that touched both art and architecture. Where Art Deco was marked by excess, De Stijil was about stripping away to the bare bones of practicality.

The Niagara Mohawk building with its decorative pillars touching the sky is an example of the untethered ornamentation of Art Deco.

With the illusion of stability shattered by World War I, De Stijil offered a new promise, a sense of hope that order could be restored.

These flats designed by Jozef Israëlsplein embody the utilitarian spirit of the De Stijil Movement.

Piet Mondrian co-founded this movement along with Theo van Doesburg. Mondrian’s paintings are known for their grids of straight lines and squares of color, which are uncomplicated yet almost mysteriously engaging.

Following this adherence to simplicity, he worked with a basic color palette using yellow, blue, and red along with gray, black, and white. This equation of 3 primary colors plus 3 primary values yielded works rooted in restraint, yet marked with experimental sophistication.

Mondrian’s stacked blocks of colors are easy to identify from afar and his influence is equally obvious in modern web design. And with tools like CSS grid, creating your own Mondrian-inspired layouts for websites is an easy process.

The Made in Webflow “Piet Mongrid” offers fitting tribute to the artist who brought the grid to new levels of creativity.

Commercialism and the grid: marketing in the 1940s

With World War II over, and a formidable evil vanquished, optimism replaced fear and a new consumerism arose. Advertising latched onto this exuberance, along with a rapid pace towards economic expansion.

Considered by many to be one of the forefathers of modern marketing, Paul Rand implemented marketing strategies and a sense of branding that hadn’t been used prior. And grids played an instrumental role in this new way of advertising.

Grids shaped the faces of soap boxes, magazine advertisements, and television commercials. They were even used to create neat rows of houses in emerging suburbs. Grids were omnipresent, bringing order and efficiency to this new consumerism.

Grids and modernism

The 1940s and 50s brought about the Swiss Movement, which has shaped so much of graphic and web design. The Swiss Movement shook free from rigid guidelines, but grids were what floated just beneath their often asymmetric layouts.

It emphasized the more emotional components of design. It paid particular attention to how typography can shape meaning, dropping the ornamentation of serifs for fonts that deliver text unaffected by stylization. From this utilitarian philosophy came the universally used and sometimes despised font, Helvetica.

Out of the Swiss Design movement would come one of the grid’s strongest advocates: Emil Ruder, whose book Typographie: A Manual of Design, espouses the good that grids do in a three-column layout, with each column holding a different translation of his writing.

The offset layout in this poster from Jan Tschichold is emblematic of the Swiss Movement.

Joseph Müller-Brockmann was another important member of the Swiss Movement who brought grids to the forefront. His poster work, as well as book designs, were aligned by grids, with a visual aesthetic inspired by the Bauhaus art movement and a direct descendant of De Stijil.

Breaking free from grids with the power of computers

Muriel Cooper worked in both traditional graphic design and used computers in her work at MIT Publications. This piece promoting a summer workshop from 1983 took advantage of the power of this new technology. Source: Alliance Graphique International.

Before computers, a graphic designer’s drawing table held X-acto knives, rubber cement, and tweezers. The process of placing type and visuals was a physical experience. Mistakes couldn’t be changed with a command from a computer keyboard.

The advent of computers ushered in a whole new approach to design. Type could be replaced, borders shrunk or enlarged, and elements of a layout dragged to different spaces — all in an instant. And with this ease came a new appetite for experimentation. With this liberation from the constraints of physical media, the stakes were low to take chances with something new.

AIGA eye on design — This poster by Deborah Sussman for the 1984 Olympics has a visual complexity that computer assisted design made easier to execute. Source: AIGA Eye on Design.

The introduction of computers for design led to the California Graphic Design movement, which emerged in 1975. The movement brought avante-garde sensibilities only possible with the assistance of computers. Computers have helped designers shape their creative visions with a less time-consuming process. Today, it’s hard to imagine a world without their digital assistance.

Grids in modern web design

Grids guide almost everything. Though their essence of being a framework of vertical and horizontal lines remains unchanged, they can be used in a multitude of ways.

Baseline grids: Grids are about imparting consistency, and baseline grids bring uniformity to how elements like text are vertically aligned. Think of the pages of a lined day planner. Each line is a part of a bigger baseline grid that lets you jot down things in an organized way instead of a scattered, unorganized mess of writing.

In web design, these baselines don’t have to be solid lines, but are usually transparent guides for aligning elements.

Manuscript grids: This is just a single large column containing all of the text as well as images. This blog post you’re reading now follows a manuscript grid.

Multicolumn grids: These are common in web design. Multicolumn grids organize content into vertical blocks. These grids are everywhere from standard two-column header layouts to featured projects in a design portfolio.

before you shine — Before You Shine, a Czech startup, uses a three-column grid for this important block of content.

Modular grid: Modular grids feature an organized division of horizontal blocks, with guidelines dividing it vertically. We mentioned the Swiss School earlier, and using modular grids to align visuals on posters was a common practice for them.

CSS grid gives web designers the power to fix elements on both the vertical and horizontal axis in almost any way they can imagine.

japanese style grid — Built in Webflow, this Japanese-styled grid organizes these visuals both horizontally and vertically using a CSS grid.

Irregular grids: This style subverts the strict lines of regular grids. Overlaying elements, skewing items into irregular positions and unique shapes can break up the monotony of these grids, without devolving a layout into a free-form disaster.

CSS grid is also a great tool for bringing a bit of variety to layout, making irregular grids easy to pull off.

This example below for the Momentum Conference made in Webflow has both overlapping visual elements and text that still follow a logical organization, but aren’t tethered to a traditional grid.

Grids will never go out of style

From prehistory to the 21st century, grids have guided so much in design. They make for a linear approach, where elements can be arranged with ease into a visually pleasing organization. Whether you’re following a traditional layout or subverting to fit your own artistic sensibilities, they make for designs that are easy to understand and simple to navigate.

UX inspiration from history: made in the Soviet Union

September 21, 2019 • History, Inspiration

History is full of great inventions. Over the past 100 years, people have created a great number of original inventions. Despite this, there is no streamlined process to create a product that is guaranteed to be successful.

Today, if you want to create a product that will become legendary you have to spend a lot of time researching, validating your ideas, looking at other products, testing them, etc. Unfortunately, all these still won’t guarantee success. Even with such a large set of resources like the Internet, books, videos, etc. Besides, no one will accept your idea without deep research and market analysis.

It is a well-known fact that in the Soviet Union, all information was blocked from outside. But when outside information did manage to make its way into the country, it was collected bit by bit and passed from person to person carefully. This is how the products that I will talk about were built: almost in complete isolation from the rest of the world. Mostly with local knowledge and local resources.

Despite these limitations, engineers and designers have made wonderful devices that were used by most people in the Soviet Union. Not all of them are perfect from the UX side but there are plenty of amazing solutions and features that can inspire everyone.

Electronica VL-100 front view — image by u-ssr.ru

It was the first portable TV in the Soviet Union. Electronica VL-100 was extremely popular because of its unique design and compact size. Also, it was relatively lightweight — only 2.8kg! One of the best features of the TV was the portable battery, which you could add and take with you to the park.

It was the right product for the right time. The engineering team filled in the need for a portable device. They didn’t just improve existing products but changed the way of how people use TVs.

TVs Electronica-50 and Electronica VL-100

The most prominent part of every new product is the ability to use with as least explanation as possible. This TV was very successful with that. Electronica VL-100 had 5 small dial knobs to control contrast, brightness, etc., plus one big dial to switch between channels. This simple control system allowed to set up and use the TV easily and intuitively.

Every dial has its label and placed above it. When the user turns a knob, they can see what setting they are changing. Indeed, not all modern products follow this simple rule: give enough context to users.

Electronica VL-100 setting knobs: Contrast, Brightness, Turn ON/OFF/Volume — Setting knobs: Contrast, Brightness, Turn ON/OFF/Volume. Image by u-ssr.ru

Another remarkable part of the TV is the antenna that goes straight from the handle. It is a perfect solution that combines both usefulness and aesthetics. Instead of going a standard way and mounting it on top or at the back, engineers came up with the ideal solution and added it to the handle. With this design solution, the engineering team prevented the antenna’s damage during frequent transportation.

Another design decision that was driven by functionality is the material that the body is made out off. The core idea of this product is to be portable and used for outside events or often moved within a house. Customers want to be sure that after an accidental hit, it will not fall apart. It was the good old days when the design was mainly driven by customers’ needs and not by marketers.

Side View of Electronica VL-100. Image by u-ssr.ru

There are many products from the Soviet Union that are known for durability, and this one is no exception. You may be surprised, but there are lots of places where you can get a used TV and it is still fully operating. The fully functional product that has been produced 50 years ago, how do you like that?

Normally, until around the 1990s, most of the TVs were cathode-ray tube-based with a small ceramic heating element. It was essential to have some cooling to avoid overheating. Engineers made holes on top and at the back to be sure that inside parts won’t overheat. At that time, passive cooling was a standard choice for lots of TVs.

The overall style is simple with a little number of details. I would even say it’s close to Braun type of products from a design perspective. The only thing that I find underwhelming is a huge logo on the front of the device. You do not want to tell your user the name of the device every time they use it. People will buy a great product one more time but not because of the name in the front.

“Spidola” radio in good condition — Beautiful “Spidola”. Image by SverdlovskAvia

Let’s continue our path to the world of portable devices. The next one is “Spidola” radio that has been produced in the early 1960s. This radio is one of the most popular devices in the USSR in the middle of the XX century.

“Spidola” was a pioneer in the world of portable radios. Many people wanted to have a small and convenient radio for different occasions. In the 1960s, all radios were huge, heavy and just for home use. That’s why this radio was a breath of fresh air for people who wanted to listen to music outdoors or on the go.

Technical characteristics were outstanding for that time — almost 200 hours of battery life without recharging. For the first product in this niche, it had impressive integration with other products. For instance, you could plug a bigger antenna or a more powerful speaker. Sometimes it seems that the ability to plug the third-party devices are not the most important function for the initial version but it set the standard for all future portable devices.

Sometimes even for the first version, you must have a killer feature to make sure that your product can compete with others on the market. Of course, for this radio, the main feature was portability and only then third party plugs.

The design of “Spidola” Radio is minimalistic and clean. The metal body instead of plastic for better durability in conditions of frequent transfer. Engineering team could choose to make a plastic body, but they put endurance first. It’s not overloaded with ornaments or functions. This is a simple radio that does its job amazingly.

The antenna also hides inside the radio, which is the ideal solution for portable devices to prevent any damages. The speaker is small relative to its body, but the quality of the audio is impressive for that time.

“Spidola” radio front — Image by SverdlovskAvia

Another detail — all controls of the radio except the handle are “hidden” inside the body. The handle is soft and thin to make the product lighter.

All controls are missing labels, and that’s a problem from a user experience standpoint. If you wanted to know which control does what you had to check the operational manual. Interestingly, there was a lot of space to place labels for every button.

“Spidola” radio top view — Image by worthpoint

“A user interface is like a joke. If you have to explain it, it’s not that good”. — Martin Leblanc.

This radio was so successful that it served as the base for 5 different models of portable radios. All of them were released between the years of 1967 to 1978.

Both of these products had feedback forms that came with the packaging. At that time it was the only way manufacturers could communicate with customers. You should always seek for any kind of feedback, especially from direct consumers, to improve your product.

Electronica VL-100 and “Spidola” radio are excellent examples of great functional and long-lasting design. Moreover, the durability that was laid in the design is outstanding.

Hopefully, one day, everything will change and companies will be making products for people, not just for shareholders.

Also, check out my other articles:

The History of Web Design

August 5, 2019 • Design, History

Design
Usability
Creativity
Content

From the rise of Flash and its demise by the hands of Steve Jobs, all the way to HTML5 and mobile. FWA Taschen present the story of how Web Design was born and became part of our lives.

Elephant – Design Lead, Art
Creative Director & CEO @ Trionn Design
Creative director in Geex Arts
Red Collar, Creative director
Head Of Digital Art at ALMAPBBDO
Freelance UI/UX Designer & Founder of welovedaily.com
Neverbland, Digital Design Lead
Design Lead at Blizzard Entertainment
Co-founder and Creative Director at Viens-là
Leavingstone, Design Director.
Interactive Art Director at Apple
Freelance Interactive Designer at UNIT9
Creative Director at RED Interactive Agency
Product Design Director at AKQA San Francisco
Awwwards Users – Pro and Chief
Creative Frontend Developer at Red Collar
Freelance Creative Developer & Interaction Designer

102

Collect

From Spain

August 01, 2019
82

Collect

From France

July 31, 2019
133

Collect

From Canada

July 30, 2019
154

Collect

From United States

July 29, 2019

Jury vote eliminated

Sites are sent to a minimum of 16 Design Jury members, the two scores furthest from the average will be automatically eliminated by our system. SOTD will then be sent to the Developer Jury to be evaluated following the Developer Guidelines, find more info here.