More Design Study/Reading

Before going any further with practical examples, let’s hit the books again. We have looked at color, typography, proportion. Are there other large chunks of design that we have not even considered yet? By the way, in my usage here when I say design, I am explicitly excluding the more technical side, as discussed in the next paragraph. Read on.

Here’s an interesting post about web design arguing vehemently that it is not art: https://www.protofuse.com/blog/details/is-design-in-web-design-about-art/ . Go ahead and read it for a different point of view, but this guy is wrong. When the author of that post says “design”, he or she is focused on a lot of things besides the artistic side—usability and driving user clicks and such. That’s definitely part of how websites are designed, but it’s foolish to go so far as to say there is no art in it. Obviously a web designer needs to be aware of the larger, more technical topics—as does a developer such as myself. But beautiful, artistic design exists. And when you see it its delightful. How can you ignore the added value of that? It’s pretty much Apple’s entire business model. Sexy visuals sell units. But you will see plenty of people arguing online that it’s not art as if that means there is no art in it. I think there is art in programming code. I don’t know why these people are so angry about insisting design isn’t art.

That said, then, I’m certainly not saying the technical stuff is not part of design. I’m just saying it is not our topic of study right now. I want to learn more about the art of website design. This beautiful example of web design artistry at squarespace.com lends the website and the company more credibility. More on that site later by the way. It’s worth a case study.

This page has some interesting links to browse: https://www.interaction-design.org/literature/topics/web-design .

The article here ( https://www.interaction-design.org/literature/book/the-encyclopedia-of-human-computer-interaction-2nd-ed/emotion-and-website-design ) is dense, long, and research-oriented. That makes it harder to read, but it’s an apt and powerful argument against the Design-Isn’t-Art article above. And finally we find some information about design that isn’t just “this looks good” and “this doesn’t”. Here we see actual research showing that visual, artistic appeal yield customer loyalty. The article is well worth reading.

In the same article, they discuss many topics, but the discussion of color warrants earmarking for future study. Color in websites is not just about choosing colors that look good together. There are also cultural associations to colors—meanings like “danger” or “happiness” or “safe”—and attitudes. These meanings associated to colors vary from one culture to another. For example, “Canadians, Germans, and Japanese all tend to dislike yellow on websites. Users in all three countries most prefer the blue sites…” Learning the basics of that, at least in our own culture or the target culture, seems like a very good use of time. This article talks about some of the known associations, but a more specific search and study is in order.

I already think this article has influenced some design changes I will make on my own portfolio website. I have some fun stuff in mind.

In light of some of the stuff we’ve read, let’s do some more case studies.

Consider the page here: https://99designs.com/blog/tips/types-of-graphic-design/ . It’s about design, and it’s also an example of good design. (Usually if people are talking about good design, they try to show us they know what they are talking about.)

Recently I have been reading about use of repetition and pattern in design. One obvious use case for repetition is with a company logo or other kinds of branding. In my own projects, for example, I should probably develop some kind of icon—an image representing myself that acts as a kind of signature on my work. It’s not just good for branding. It also adds visual appeal and I’m sure one can show with research that it helps with building visitor loyalty. The page linked above talks about that with examples.

Take a look at the page now, here. It uses a simple, sans-serif font. I see only one color hue besides the neutrals. Further down the page there is more imagery to add more color and more interest to the page, but even this simple monochromatic design works. People like blue. Research backs up the fact the fact that users of websites like a blue color scheme. If you look closely, the neutral color behind the headline text is actually a gradient, not a flat color. Vertically, it gets closer to white moving up the page.

Note the simplicity of the buttons. Neutral edges and text, transparent background. At some point, somebody asked herself, “should the buttons also be this powder blue.” Obviously she decided no. And see how the initial G is large and blue-colored. Is it possible to do that nowadays using pure CSS? That is something I’d like to play with in my next practical example.

At this end of that post, there is a cute drawing of a bear that waves his arm slightly. The animation is just enough to get ones attention without being as super-annoying as most animation is on a web page. I approve, and I rarely approve of any animation at all on a web page.

Next let’s take a look at Starbucks: https://www.starbucks.com/ . The Starbucks page is dominated by a giant, all-encompassing banner inviting us to join their rewards program. It seems very much like that program is the entire purpose of their business.

The color pallet is monochromatic. It’s just shades of green. The corporate logo is green. The gigantic banner is green. The one below it is lighter green. That little map pin thing beside “find a store” is green.

The layout of this page is like many I’ve seen before. The content is displayed mainly in full-width rows aligned in one giant column. I see a font that looks ever so slightly more interesting than the typical sans-serif. It’s something called “crete round”.

The imagery and iconography is noteworthy mainly because of the absence of any human presence. We learned recently that adding human imagery to a web page makes the page feel more social to people, which influences positive affect—generally a win in most settings. Here we see no humans—just drawings and photos of coffee.

I’m going to copy that coffee drawing here bigger. Please don’t steal it because it’s not mine, but I think I am within the bounds of fair use to copy it for the purpose of commenting upon it here.

This image was almost certainly created on a computer, but if you look closely you will see that the lines mimic chalk on a chalkboard—both in the way the color adheres imperfectly to the background and also in the simplicity of the image and the few strokes used to create it. That is nice attention to detail, very much in the style of those chalkboard menus cafes often use.

By the way, when I do these case studies, I don’t typically have some pre-defined list of websites I know will look good or bad. Big companies do not necessarily have beautiful websites, as you can see here. The Starbucks website is adequate, but it’s quite bland and ordinary. It shows no design artistry beyond the bare minimum. Let’s pick another.

How about us.coca-cola.com. Coca-cola is a huge, worldwide company. It would be interesting to do a comparative study of the websites they present in various countries—and I may. But for now, let’s look at the one for the US.

What do we see on first blush? Human imagery—very different from Starbucks. The color pallet is based on bright, Coco-Cola brand red. The font they use to write Coca-Cola has looked exactly as you see here for as long as I’ve been familiar with the company. The font is part of their brand identity.

What else do we see? Sans-serif body text. Simple, neutral buttons. Huge, full-width images featuring the product—but not alone. The product is always in a person’s hand. They have used some playful patterns like the following.

The design of this page is a picture of simplicity. One color. Few options. Nothing extraneous. Even so, it appears consciously designed to increase brand loyalty and it fits right alongside Coca-cola’s TV commercials that always feature people, like, appearing over a hill drinking Coke and laughing.

How about Aveda, aveda.com. This is a company all about beauty. When I arrive at Aveda’s web page, I’m presented immediately with an annoying modal asking me to subscribe to something. Typically I would just immediately leave the page now, but I want to look at the design here, so let’s move past it.

Also note the giant sticky header that follows us down the page.

I’m surprised by Aveda’s color pallet. Brown is an unusual choice. I wonder if that’s supposed to remind us of a hair color, or if brown is a fashionable color right now. It seems like an unattractive choice to me. The brown color is pervasive on the page. Buttons are brown, and I think that little shopping bag at the top is brown.

The layout of the page overall is the same thing I see everywhere else—one long column of giant panels. The panels all look like they were individually designed to sell some Aveda product or service. There’s a unifying theme of using plants in the photos, but even that doesn’t quite make the page feel cohesive. For example, a lot of these panels have buttons, but the buttons do not have a unified look. They all look different. Unfortunately, I think there is nothing for us to learn here.

Finally, here is a page we can learn something from: https://www.intersection.is/about#beliefs . There’s not much color at first—just some splashes of teal. Otherwise the page is very neutral with its huge, black-and-white photo background and white text.

When you scroll down the page, it does some kind of interesting parallax thing with that image. The images doesn’t just scroll up, the content below covers over it. It’s nothing new or original, but it is visually interesting and I don’t know how that is done. It’s something worth learning about.

The main text content is a clean black on white using a sans-serif typeface. The typeface itself looks just slightly more interesting than typical. I see it is something called Arapey. I like it. I might use Arapey myself. We see black header text, but also more splashes of teal.

I really like what happens as you scroll down further. It does that parallax thing again. There appears to be a gap between the two main blocks of text here, and in between you get a view of something behind. What you see is a collection of photos of—presumably company employees. They’re smiling, they’re having fun. The photos are set against a teal background with a pattern based on their plus-sign logo. The pattern is subtle enough that you might not notice it.

I’m not sure I like this parallax effect enough to actually use it in my own projects. It’s very familiar by this point. It definitely won’t win you any points for originality. That doesn’t mean you shouldn’t use it. It’s more a question of whether this particular effect adds to the effect you are trying to achieve as designer. Aside from that, I like the subtle use of teal to tie things together, and I like the use of their employee photos to help create brand identity and trust. I even like the font.

I don’t like that so much of the page is black-and-white. More color might have been nice.

What can we learn from all this, and how can we put it into practice? That will be the focus of my next practical design post, where I’ll make another template of some kind. Hopefully it will be better than the last one. That’s the goal, right? That we grow and improve.