Pixel Art Finds Its Home on the Web

The design community in particular has been a rather dynamic part of the fabric of the web from its earliest days. Designing for the web means understanding the constraints of the screen while simultaneously accounting for a whole host of variables, like hover states and animation and screen resolutions and network connections. It requires a unique approach to the design discipline in order to best serve the experience of users. Naturally, designers of the medium are also among its most active members, and unsurprisingly, it is not at all difficult to find a healthy and vibrant community of web designers on the web. Techniques are swapped, ideas are exchanged, and over the years, a design language has been built up.

Web design exists as only part of the continuum of visual design, and there’s an ebb and flow that happens between the two. Web designers pull inspiration and ideas from all across the spectrum, and often are responsible for pushing new techniques out into the world. In the late 90’s, there was moment when designers rallied around this kind of exchange, when web people pulled a specific technique from the digital medium to bring a new kind design to the web. Over the years, that technique has often been referred to as pixel art.

The term pixel dates back to 1965 at Caltech’s Jet Propulsion Library. It stands for “picture element” and was used to measure a singular unit of photos of the Moon and Mars that were being literally beamed from space. Over the years, it was picked up by others in the imaging and video worlds and now translates to the smallest physical point on a digital screen or image.

In the early days of computers and video games, that smallest physical point was still pretty large. Screen resolutions were so low that one pixel could easily be detected. The graphical complexity that could be rendered to the screen was minimal at best, and forced some interesting constraints on the artists and programmers that designed for it. The result was graphics with limited color palettes, minimal definition, and blocky outlines. The original version of the character Mario, for instance, was given a mustache because it wasn’t easy to figure out where his mouth was, and a hat because rendering hair on a pixelated screen was nearly impossible.

Screenshot of Mario from its very first version

By 1982, this new way of working was given a name by Adele Goldberg and Robert Flegal. They had used the technique in a different way, to convert photographs of people to a version that could be rendered properly on screen. The result, in the days of 8-bit, was grainy and pixelated, but had a raw and unique aesthetic. So they coined the phrase “Pixel Art” to describe it.

Incidentally, this is around the same time that Susan Kare came along and elevated the technique to an entirely new level.

Kare’s background was in painting; she had received a Ph.D in fine Arts from NYU before working at the Fine Arts Museum in San Francisco. But when a friend put her in touch with the lead programmer at Apple in the early 80’s, she decided to undertake an entirely new creative challenge. Her initial work was with typefaces, and she designed some truly amazing ones. She understood almost immediately the limited resolution and space of the digital screen, so she created typefaces like Chicago and Monaco that were proportionally spaced, to make fonts that were both aesthetically pleasing and clearly legible.

Her next project at Apple, however, has more relevance here, though her approach would end up being the same. She was tasked with designing a set of icons for the Mac operating system. And her work would become, pardon the pun, truly iconic.

A sample of icons from Susan Kare

From her work with typefaces, Kare had come to understand some of the constraints of the screen, especially in the very earliest days of personal computing. Her canvas was to be a small grid of just 32×32 pixels for each icon. Each pixel however, could either be “on” or “off”. You couldn’t shade, you couldn’t curve alongside a pixel. At the time, pixels were binary (like the systems they represented), and icons had to be designed to fit that particular limitation. So Kare went to a nearby art store, bought a grid sketchpad, and began sketching out icons, using each grid box as a separate pixel. Eventually, she ported over her sketches to the screen using special software. And working from that point, she designed just about every icon in a Mac user interface, including the Trash can, the command symbol, the paintbrush and perhaps most famously, the smiling Mac.

Years passed. Kare’s methodology and style were endlessly repeated. Some found success and creative freedom in designing 32×32 pixel icons. Others merely ripped off or copy what they saw. During this time, the web was born. And little by little, pixel artists began talking to each other on it.

If you were a designer in the late ’90’s, you may recall a site called eBoy. It was the homepage of a collective of three designers from Germany of the same name, founded in 1998. As young men, two grew up in East Berlin, the third in Guatemala. They were no strangers to political strife or underground movements, and yet all three learned to create art in restrictive environments and emerged with an appreciation for vivd colors and the buzzing activity of technology. They gravitated toward the very technique that Kare had pioneered a decade earlier.

The trio at eBoy adopted the pixel art aesthetic for a much different purpose though. Kare was focused on legibility and ease of use. She was designing an interface for millions and millions of users. eBoy leaned further into the technique to create incredible works of art, featuring weird characters and portraits and new takes on corporate branding. Their main focus was on eCity, vast, intricate, pixelated representations of major cities around the world. Pixel by pixel, they built up their works of art coloring each one in at a time.

And when they were done, they posted their work on the web.

One of the earliest versions of the eBoy website

If the desktop was where pixel art got its start, the web was where it found its home, in no small part thanks to eBoy and artists like them. In the late 1990’s, there was a resurgence of pixel art, as more and more designers began to bring the discipline into their work on the web. It was, after all, a natural fit. Pixel art is best viewed on a screen, and screens back then were of the especially low resolution variety. In fact, on low-res screens pixel art could be far more appealing than photography. Web designers began to explore pixel art in new and imaginative ways, forming online communities in the process to crowdsource feedback and techniques and encouragement.

There was, for instance, GUI Galaxy, where icon designers and desktop customization enthusiasts could gather. Active contributors to the site mostly followed in the tradition of Susan Kare. Designers would assemble icons for different software on a 32×32 pixel grid and post them to the site. These icons were in high demand, as more and more software releases flooded the online world. Some artists working in the space, names like Mozco and Iron Devil, even elevated their designs to an art form, merging intricate detail and utility in their iconography. Tools sprang up to make things easier for designers, most notably Candybar, a program created by Iconfactory that made icon design accessible to all. Suddenly, pixel designers were everywhere, chatting with one another and exchanging tips and rooting each other on. GUI Galaxy stood at the center of this conversation, a place where beginners and veterans alike could feel safe and challenged and learn all about icon design.

GUI Galaxy in the early days

GUI Galaxy also sported a fairly unique design, inspired by the pixel by pixel technique that it helped foster. It wasn’t at all uncommon to find small pixel art characters littered around the site (including theGUI Galaxy robot), and textured, pixelated backgrounds behind menu items and features.GUI Galaxy wasn’t the only site on the web to bring the characteristics of pixel art into actual website. There were several that came before them, and plenty more that would come after.

Most of the first pixel art websites came from the personal sites of the artists themselves that had become wholly enamored with individual pixels. The earliest versions of the websites for designers like eBoy or Mozco paid homage to their passion, laid out across a unique grid with pixelated backgrounds and fun, playful characters sprinkled in. There were gorgeous designs that stood out and blended well with the low resolution screens of the early web. Over time, this influence became a full-on trend, and more and more designers incorporated aspects of pixel art into their website’s design.

Sometimes, the influence was subtle, in the borders of tabs or backgrounds of dropdown menus. Other times, designers leaned in completely, utilizing the pixel motif from top to bottom. One of the more striking examples of this was Habbo Hotel, an online social community launched in 2000, complete with chat and games and virtual pets. Users, represented by pixel art characters, were organized into one of 150 different “hotels” which users could browse by clicking around on a pixelated landscape and explore through pixelated rooms. The resulting experience was immersive and fun, and unlike anything that had been done on the web previously.

Screenshot of the Habbo Hotel website

Then, there was Kaliber10000 (K10K for short), which really was in a class of its own. Launched in 2000 by the folks at Cuban Council, it was billed as “The Designers Lunchbox.” The designers at Cuban Council had already made a name for themselves with a series of pixel art videos for Bell mobile phones. But the web was their home, and they wanted to create something entirely unique for it. K10K was a fun and imaginative side project for their team, and a way for them to celebrate the techniques and trends that inspired them and share their ongoing work with friends. The design for K10K embodied all the things that made pixel art fun. It was light, and playful, and a little subversive. And on every page of the site, it’s pixelated roots were quite clear.

The site focused on a weekly “issue,” a theme or motif for designers to collaborate around. The best of the best were showcased on the site, which soon became a dynamic and shifting collection of some truly groundbreaking designs. It blended competition with encouragement, and ultimately, gave pixel artists a goal to reach for. As a designer in the early 2000’s, if you could get your work on K10K, you knew that you were on to something. For over a decade, the site continued to grow, bringing on guest writers and news and a solid community that came back day after day. It might not have been the most popular thing on the web, but for a lot of designers, it was the most important. In 2011, the site officially closed down.

K10K, billed as “The Designers Lunchbox”, offered a unique web design aesthetic

Pixel art isn’t dead. Far from it I’d say. The web is just about primed for another resurgence, with projects like the Dead Pixel Society and Make 8-bit Art leading the way. Even though our screens have gotten better, there’s something unique and incredible about a technique that forces each and every pixel to be considered and deliberate. Mastery of pixel art requires the kind of dedication and patience you don’t always see. Maybe you should give it a try.


Added to the Timeline

November 1, 1999 - Kaliber10000 Launched by the Cuban Council as a community of designers, K1000 featured design news, techniques and showcased some of the best designs on the web. The sites and designs featured on K1000 fostered a creative exchange that inspired both novice and veteran designers on the web.
May 2, 1997 - eBoy A collective of three designers that met in Berlin, eBoy.com represented the beginning of the rise of pixel art on the web. Their unique and vast cityspaces provided inspiration for those working in design both on the web and in the larger design community.
View the Full Timeline

Sources