As I was working on a redesign for my blog, I thought to myself ; “why not write about it”. I believe there a lot of crossovers in the ways I approach painting and web design. After all, much of it comes down to composition.
I regard all arts as essentially forms of communication, only fancier and more vivid than others. As artists, we want to transfer experiences from one consciousness to the next, essentially. The questions we need to ask in order to begin to attempt such a feat would be “what do we want our blog to feel like” and “how can we express that visually ?”. A hundred questions are going to follow down from there. For instance, what kind of typography are we going to use ? Will we using serif fonts, or sans serif fonts ? Or maybe script fonts ? Why ?
I was first an illustrator, and illustration is normally associated with writings and books. Stories are what ties it all together. And so serif fonts appeal to me because they are the ones used in books. They feel classy, they evoke craft and hard-earned skills, there is much history behind them. Although those things are ultimately subjective, the important part is giving it a thought ; it is about deciding what feels right.
I would add that exactly like you would when drawing or painting ; looking for references is an excellent way to kick-start that line of questioning. When we don’t know what we want yet, it is more often than not a good idea to start exploring what exists already. From there, what did you see that felt memorable to you ? What in it made you tick that you could exploit for yourself ?
In the case of this blog, I remember the simplicity of Seth Godin’s blog which is also a left leaning layout. I remember the Dofus devblog which featured a really immersive background. Even my .art site was greatly influenced from the Dofus splashscreen, but also the landing page of the french artist Dedouze, and the horizontal galleries of an other french artist called Corto rudant. Much of that was about giving more space to the images.
On that thought, the next thing I would like to advise is to go simple. This is especially true for us artists. We produce images, and hopefully beautiful ones. We want the viewer eye to rush straight to those images. As usual it is about contrast. The flatter and quieter the layout, the more volumetric and detailed your images will feel. The darker the layout, the more luminous and colorful your images will feel. Sure, I like those old decorated frames but we need to admit that they can sometimes be quite distracting. Rest assured, simple turns into elegant when done well. The caveat would be that such designs rest entirely on a solid execution.
Simple designs also force you to focus on the essential functions of your blog. Remove all that is unnecessary. Louis Sullivan said it best at the beginning of the 20th century : “form follows function”. What does this design needs to do ? In this case, it needs to allow for a peaceful reading of the articles I wrote, a search function, some sort of sorting mechanisms to be able to find what any visitor would specifically be looking for, and last but not least, a subscribe function for those interested in future writings. Everything else should be de-emphasized or cut-off altogether. This will leave very little to play with.
In order to make it work, you will have to turn-on your inner OCD. Everything that can be aligned needs to be aligned. Every measurement that can be reused multiple times needs to be reused, and in ways that make the most sense. Use sound ratios every chance you get. Thirds and fifths and halves and quarters are the kind we like. Stay away from complex fractions. In design we talk about “pixel perfect” layouts. Think of it this way ; they are either pixel perfect, or they aren’t. It’s really that simple. If you have heard about the term “uncanny valley” when talking about portraits that are almost lifelike but fall short, you understand that you cannot have elements “almost” aligned in a layout ; that just doesn’t cut it. Sentences such as “this div should be about 50 pixels or so” are simply not good enough. What dimensions exactly should this div be relative to the other elements surrounding it ? Furthermore, relative measurements are a even more of a necessity when dealing with erratic devices. Layouts are to be built responsive nowadays. A website must look good on any display, and these days we have no shortage of varying screen resolutions.
I must say this practice is really no more than a composition exercise. In painting and photography we are used to this sort of things. There, they manifest as “the rule of thirds” for example, in which we use imaginary guidelines that divide our images in thirds as well as their intersection points to place our strongest compositional elements. Of course, nothing is stopping us for experimenting with different ratios such as fifths, or seventh. In fact I particularly like those prime numbers along with the classic half.
You might have noticed this blog features a strong cut in fifths when displayed full-screen. I particularly enjoy how you can build sub-frames that have different ratios within. For example the ensemble encompassing the content area and the left column is cut in thirds, whereas the ensemble encompassing the content area and the background image is cut in halves, which feels very book-like. Fifths to me just feel incredibly satisfying. As I said, you need to turn-on your inner OCD, now is not the time to enjoy messy.
Anyways, I will not ramble any longer. Those were nothing but some of my thoughts on how to design a website. As with all art practices there is a large part left to subjectivity in those matters. I do hope however that what makes me tick might also happen to make you tick somewhat and that you will enjoy the new blog design as much as I enjoyed working on it !