Design

I decided I want to learn some fundamentals of design. I imagine a lot of front-end developers are at about the same level as I am with design. It’s certainly closely allied to what we do, and only a fool would disrespect the added value of good design. Some people don’t understand the difference between a web developer and a web designer. It’s a very important difference. A web developer is a developer. A web designer is a designer. Using blunter (and less accurate) words, developers are engineers. Designers are artists.

As a developer, I know the basics of styling web pages. That is, if someone tells me how it should look, and if that is feasible, then I can usually make it happen. But I don’t know much of the fancy stuff, and I don’t know the underlying design principles that make a good artist. Graphic design is a completely different but allied profession. That said, in my observation the most beautiful displays of what the web can do are created by artist-engineers who know both quite well. They can imagine something beautiful and create it themselves.

I probably won’t ever be that good at design, but I’d like to take some steps along the way, and maybe you’d like to join me. In this blog post, I’ll begin doing some research, brainstorm how to learn this topic, plan things a little, make some observations. I’d like to actually take a first step, and I’d like to make concrete plans for a next step.

To begin, I think we have to just dive in somewhere. I don’t have a teacher, and I guess you don’t either. Also, I’m not going to follow any particular book, but if I find a good book along the way I’ll be sure to tell you. Instead, let’s try to learn from delightful examples of good design. That word I used “delightful” is not just filler. It’s the characteristic I will be looking for, but I’m using it as an undefinable starting point. I cannot tell you what “delightful” means, but I can tell you when I am delighted.

Consider the website https://zzz.dog/ . This is the site of a JavaScript project for making little images that look 3-dimensional. The images themselves are charmingly simple. Obviously we are not looking at the kind of 3D rendering engine a modern PS4 game is built on. But it doesn’t matter. We can even drag these little images and move them in three dimensions, and it’s delightful.

The Zdog project is an example of almost magical good design, and the Zdog project web site is also an example of good design. I’m pretty sure the same genius designer/developer made both the project and its web site. His name is David DeSandro (https://desandro.com/ ). I don’t know him, but I am a fan of his work, and it is mainly his work that has inspired me to make myself better at design. He appears to be the main (possibly only) creative force behind Metafizzy ( https://metafizzy.co/ ).

Please do look at the Metafizzy website now. I invite you to play with this “Packery” widget. Drag the box around, and you can see how the smaller boxes form themselves around the larger box. As a hobbyist-level designer, I can imagine those boxes as web content. They are pictures or blocks of text—anything. I’m not sure of the intended purpose of being able to drag the contents around, but one use that comes to mind is allowing the users of a blogging platform to build their own pages by easily moving the blocks around.

I can tell you from experience that drag-and-drop has never been easy or pretty on the web. Even now, in 2019, I remain deeply skeptical of drag-and-drop. The last time I tried to use it on the web was not too long ago, and it still didn’t work right. I’m not a fan of having to hack my way around shoddy, non-standardized browser implementations. What makes Packery delightful—aside from the fact that it seems to work—is that the boxes are nicely animated as they move, transitioning from one place to another. This subtle design flourish is delightful and practical. It makes it easier for us to track which boxes have moved and where.

Let’s count that as a long-term observation here. Subtle uses of animation transitions can offer dramatic improvement in design—so long as they don’t get in the user’s way or slow him down.

Let’s go back to the Metafizzy web site. The color scheme shows flourish and it feels both bold and cohesive. The colors vary from what you might simply call “red”, “orange”, “gold”, “green”, “blue”, and “charcoal gray”, but they share a certain quality that it is hard for me to put my finger on exactly as a non-design person. I think they are all sort-of dark shades of those color groups. These are not the bright shades of children’s toys and candy. And I think if the author had put a bright shade in here, it would look out of place. I think that is what lends cohesiveness to the choice of colors here.

Studying Metafizzy, one can also see the particular style of artist David DeSandro. The logo image is something like, I don’t know, a stylized teddy bear perhaps. It is a simple, abstract sketch with heavy lines similar in nature to the 3D figures we saw on the ZDog web site. Also, before moving on, note the waterfall of flowing colors that appears if we hover over the title text, “Metafizzy”. I think it’s delightful, and I think it would be far, far too much if it did that all the time. DeSandro smartly made it only do that when you mouse over the title.

I want to continue this study by moving immediately into color. I’d like to gain some vocabulary before I start using words like “hue” without really knowing what they mean.