More Design Fundamentals

Let us continue our study of design (from a developer’s perspective). In the last few posts on this topic, we learned some basics of color and typography. About color, we learned that it looks good when you carefully choose contrasting colors opposite each other on the color wheel. We also learned that you can make the color pallet more cohesive by toning all the colors in a similar way. As for typography, I remain convinced there is no bread in the oven. It seems like the entire subject is just, “some fonts ‘feel’ right and others don’t.”

This stuff that says it feels right or it doesn’t is certainly true. That’s exactly the phenomenon we are trying to tap into. We want to create things that do feel right. But such shallow thinking doesn’t help us, and I could not find a single word about typography that went any deeper than that. They have lots of words for the shapes and techniques, but why does any of it matter? Where is the theory about what matters and why, and to whom?

What are some of the remaining fundamentals of web design and design in general?

I’d say proportion is high on the list. Iconography. Never using sticky headers is up there—but I guess it’s really just that one commandment.

I’d like to dig further through this stuff and find some more advice that’s a little deeper than just “this looks good” and “this doesn’t”. I think we really learned something valuable when we studied color. Let’s try to find more of that. Let’s Google and think.

In my searches, I am not focusing on web design. If you include the word “web” in your search, you will get a lot of information that is too specific, and too much geared toward the engineering side of things. They will tell you to build responsive sites that look good on a phone. Sure. Duh. That isn’t the kind of design I want to study. We know that stuff. (If you don’t, go study that now, because it’s easier, and it’s part of the web engineering craft.) So instead let us search for things like “design fundamentals”. Later, we may even search more broadly for just “art proportion” or “color theory”.

This looks interesting: https://designacademy.io/design-fundamentals/ . Some kind of course about design for developers. Mostly, what I want is free text I can read right now, not videos or courses or books I’d have to buy. But it might be of more interest to you. And the course description alone might give us more study ideas.

I’m still Googling, but it’s very hard to find actual content worth reading. For example, here is a post on design “fundamentals”: https://www.freecodecamp.org/news/before-you-can-master-design-you-must-first-master-the-fundamentals-1981a2af1fda/ . It’s almost entirely fluff, statements that are far too obvious to even say. But I do see one useful idea in here. “Spend time compiling color palettes for things around you like photographs, magazines, and your favorite shows. Then take an existing design and apply new color palettes to it.” That makes sense to me. We could do that.

I’m one sentence into this page and I like it so far: https://3.7designs.co/blog/2010/07/ten-laws-to-design-by/ . Hick’s law is something I could learn from. It’s simple, it’s practical, I can summarize it in one breath: offer people fewer choices, and they are more likely to actually pick one of them. On my portfolio web site, then, I should only offer a handful of featured projects on the home page. That way people are more likely to actually click on one of them.

Next this page tells us about the 80/20 rule. I was already familiar with that idea, but I had never thought about it in terms of design and/or web engineering. I’m still not sure how I would apply the idea except in very practical settings like making the most likely options in a form the easiest to select. Still, I agree that it could be usefully applied in various ways.

The next section is about something the author calls the rule of thirds. Worth reading. At the very least, it’s not obvious and not something I already knew or thought about. High marks for that.

This author’s 7th rule is about the Golden Ratio. People often repeat that this proportion is visually appealing and say nothing more than that, and this page is no exception. One day I’d like to see some evidence of that.

There’s a brief comment about the Fibonacci sequence that offers no advice at all about how to use it and no evidence to support the value of using it. Still, that is something I want to research further. Perhaps that’s the mathematician in me talking.

Rule 10 about “mental modes” is about basing your designs around things that are familiar to the users, like using “files” and “desktop” on a computer OS. One example of failure to do that comes to mind. I remember Google’s unsuccessful attempt to enter social networking. They used imagery and words like “circle” to refers to groups of friends. I had never thought about it before, but looking back now I think both the shapes and the wording did not align with how people actually think about their friends. You occasionally hear one talk about a “circle of friends”, but it’s not a geometric circle, and even the wording is not very common. Google made such commonplace ideas seem abstract and foreign.

Lets dive into those topics above in more detail now. First I want to read more about the Fibonacci sequence in design. Unfortunately, when you click the link on that page to read more about this topic, it takes you to the Wikipedia page on the Fibonacci sequence—which is a mathematical topic, not something directly related to design or art. We will need to look elsewhere. This looks promising: https://3.7designs.co/blog/2010/10/how-to-design-using-the-fibonacci-sequence/ .

This post actually has some specifics about how you could use the Fibonacci sequence in design, and that’s a good start. For one example, you could use these numbers as font-sizes of text at various hierarchies (body text, headlines, etc). Is there any value in doing that based on human psychology? Maybe. We won’t usually be able to support design principles with science, but we could at least try it and see if it looks good to our own eyes. It sounds like an improvement over how I currently decide font sizes—arbitrarily, and with no reasons deeper that what looks right to me personally.

An unfortunate thing about studying a principle like this, using the Fibonacci sequence, is I definitely could not tell at a glance if some web site is using it or not. I would have to do math, look at proportions, etc. That will make it hard to recognize in case studies.

I think now I want to put some of what I’ve learned together and make a design mock. I’ll use https://codepen.io/. If it works right, I should be able to show you the results, and if you want to play along you can do the same exercise your own way. Here is the link: https://codepen.io/adamcross/pen/JQXKvL .

More specifically, I’m going to choose a color pallet using techniques we learned in my previous design posts, and I’m going to choose sizes and/or proportions based on the Fibonacci sequence. At the end, let’s just see if it looks decent.

I’ll begin with the color wheel and I will choose a selection of colors based on a painting I own and love that is hanging on my bedroom wall in front of me. I’ll use the color wheel and the painting for reference, but to actually pick the colors, I’ll use an HTML color picker. My painting shows a stormy blue-green sea with crashing, white-foamy waves, and a dangerous red sky with flecks of yellow. In this painting alone, I see at least three different shades of blue-green that are highly distinct—not counting the tiny variations that are possible and inevitable when using paint. My color pallet will not be quite as complex.

One has to start somewhere, so I will pick a base color to start with and build everything from there. I’ll try to capture the most prominent blue-green hue I see in the painting. It’s rather like rgb(8, 89, 102). Example. I’ll use the seafoam-white color as my neutral. It’s basically just an off-white. The color rgb(249, 249, 249) looks about right. Here the background color is that particular white. The “red” color of the sky here is richly toned—it’s not just a basic, primary red hue. Hard to capture just right, but let’s go with rgb(145, 39, 39). Example.

This is a decent starting pallet. For more variation, we can choose different shades of blue-green. But really the next step seems to be figuring out how and where to choose the colors we already chose.

We will use the Fibonacci sequence for sizes and proportions. Remember to use semantic markup in HTML for this. Don’t make custom sizes by applying them to a span tag or the like. Instead, resize the semantic header tags, h1, h2, etc.

Let’s start with this subsequence near the beginning: 13, 21, 34, 55, 89, 144. We will use this to inspire our selection of font sizes. How about margins and column widths and such? The article linked above suggests basing these on the subsequence 144, 233, 377, 610, 987, 1597. Bear in mind that these are proportions.

As a rule, do not make web pages using fixed widths, but since this exercise is about design, let’s start there. Later we can think about how to use these principles in a proper, responsive web page. Remember this: using the Fibonacci sequence does not literally mean that you should make something 1597 pixels wide. You can scale things up or down by multiplying every number in the sequence by the same scaling factor.

The way the Fibonacci sequence is defined lends itself to sizing hierarchies of divs is a very literal way. For example, from 610, 987, we compute the next number in the sequence by adding them, and that’s how we get 1597. So we could literally make an outer div of width 1597 and give it two inner columns of widths 610 and 987.

This is a good opportunity to practice using the (relatively) new CSS “flex” techniques. I’ve been doing this a long while, so things from the last 5 years are new to me. There are plenty of tutorials on that, so I won’t teach you how to do that. But if you check out my codepen example, that is what you will see.

At this point I have applied the Fibonacci sequence to a panel that has a left column and a right column. In this template I am assuming that the right column is subordinate and the left column is the main content. I used 377, 610, 987. What about margins and/or padding? I have never given much thought to choosing margins or padding. I just chose something that looked right. And that’s fine, but it’s not exactly what we are doing today.

Does it even make sense to make the padding of divs vary depending on hierarchy or the size of the div itself? Or should padding be some constant? For this experiment, let’s use some small numbers like 8, 13, 21, 34, etc., for spacing and see how that looks. For my “.main” div, let’s give it padding of 34 px. I want some space between the left column and right column. To accomplish that, I can give the left column right-padding in the amount of 21 px. This spacing does look pretty good.

Thus far, I have not made any choices about fonts. What I see right now on my screen is the default experience, and it’s a serif font. I don’t know much about fonts, but I think I’d prefer a sans-serif experience. I’m changing the body font family to “Helvetica, sans-serif”. Let’s experiment with a special font for the main header, h1. Something with a little flourish. How about a serif font in an italic shape. I’m also going to give my h2 elements an italic shape.

Let’s go back to color. Right now the only color on my page is the base blue-green I made. I set that to be the color of my header elements. Blue-green headers with no other color on the page looks like a pointless choice. It’s not part of any larger theme. How about links, buttons, etc?

The default experience on the web was blue, underlined links for a long time, and I don’t recommend straying far from that. The Principle of Least Surprise is always a higher priority than making things pretty. But maybe we can get away with toning the blue slightly so it looks more like our template. How about rgb(27, 137, 196)?

We can add a text-shadow to the header by applying the style: “text-shadow: 2px 2px 2px rgb(190, 212, 224);” The color there is a blue-green pretty close to the color of the header. It’s a subtle effect, but it’s nice.

I’m going to add a little AngularJS app on the side to create more opportunity for use of color—buttons and such. It will just be a tiny to-do list basically. Adding a “done” or “delete” button to this widget gives us an excuse to use our red color.

Here’s what I have so far. Obviously it still needs some work, but I like the color scheme at this point. It’s subtle, but it’s cohesive. I’d like to see more color though. Also, the spacing of the “reading list” widget needs some work, and nobody likes the ugly, default “button” on a web page.

Custom buttons are not the easiest thing to do. That’s why there are CSS generators online for this, and built-in options with Bootstrap. I used an online generator and tweaked the colors to suit my color pallet.

Hm. The problem with this color pallet is that my contrast color, that toned red we chose above, has a meaning associated to it: danger. That limits where we should use the color. The page could use more contrast, but I don’t know where to put it.

Anyway, after making a few more small changes, here I am. It has a little more contrast. I added a scarlet-red color a little lighter than the “done” button color. The contrast does make the page more visually interesting. Overall its still very boring though. It looks like a page in a very boring school textbook.

Here is the codepen link again: https://codepen.io/adamcross/pen/JQXKvL .

Later I’ll pick this up again and maybe make it responsive. Until then, I don’t recommend actually using this template for a web page. Also, I want to add some sort of flourish to make it more visually interesting, but I don’t know what yet.