Web Designs That Look Like Things
When I was in College, I spent an inordinate amount of time fooling around with designs that look like real world objects. If there is a term for that, I haven’t figured it out yet, though one of my instructors was certainly keen on it.
I have a fondness for the visual design of certain objects; game consoles, computers, machinery, and even books and their covers. Currently I am building a little personal website so I can show off my projects, and be able to use it as a resume to share my (kind of atrocious) GitHub repo. Sitting next to my computer is a little book called 6502 Assembly Language Programming by Lance A. Leventhal. I purchased this book when I was exploring assembly language for NES programming (which I still am) and was bummed when the cover on the sale page was some generic looking green cover, since I wanted the one with the orange and black design. To my delight, that’s what ended up coming anyways, and I love the way it looks.
Does it matter? Not even slightly. But I am a visual person, so when I see a good cover, I get excited. I like the fonts here, the stark contrast of orange on black. So I attempted to replicate this design on my own page.
Now the term “a splash of backend” sounds…almost inappropriate? I don’t know, but it needs to be changed, that much is true. The concern then becomes — where do you go from here? What does the rest of the page look like?
I experimented a bit with different colors down the page, since it is going to be a single page scrolling design. It didn’t work. Like, at all. So I have decided to rigidly adhere to this existing color scheme. Time will tell if it pans out at all, and not all of them do.
Now I REALLY like this design. I worked hard on this project. It was meant to be a modern store front for a product designed in the 80’s, but I tried to stuff in as much visual goodness as possible. I wish this was a real site. The “soundwave” is a bit ugly as I was not familiar with how to implement an SVG at the time. But it works as intended, even if it is built of little tiny images mashed together haphazardly, and breaks at a resolution change.
After this project, I worked on a full portfolio page mainly to show off some JS. I tried to replicate the design of the original Game Boy, as I did the Family Computer, so it seemed to make sense thematically. In my opinion it was a little too “on the nose”. I pretty much just ended up building a Game Boy in CSS instead, which kind of defeated the point, something I realized earlier. The idea of this method is not to copy a design completely, but to transpose certain elements, shapes, color schemes from something else, and build something new out of it. In the 6502 design, I have not replicated the “pixelated” text, but I have some way of representing the element of those little orange blocks. So I would put it somewhere right in the middle.
There are other things I find aesthetically cool that I’d like to turn into something. The wood grain of an Atari 2600 for example. I am big into computer aesthetics — the sort of hard to put your finger on, not quite vaporwave but something approximating it theme of computer aesthetics.
If you want to see something else that is “on the nose”, check out this fullblown, no apologies vaporwave art used in the book Fullstack React:
I’m not even sure what to say about that.
Except for maybe “awesome.”
