This past week, we learned more about visual hierarchy and analysed the visual hierarchy of different sites. For our final assignment, we had to come up with a layout for one of the three types of sites using what we had learned. I've been wanting to create a better design for this blog, so I decided to use that as a starting point.
My mentor (Andrew Wilshere) suggested that I write out some adjectives for my blog, and use that as a starting point for thinking about the design. Here is what I came up with:
You can see already that there are some potential challenges here. For example - thinking of "whimsical" versus "informative" brings to mind very different styles.
I also looked at lots of different examples of blogs that I follow, and thought about what I liked about the design and how it conveyed a certain feeling. I've recently become quite obsessed with "Design for Desktop Publishing" by John Miles, published in 1987. (I stole/borrowed it from my partner's step-father - thanks Sandy!) I love the stark simplicity of the designs, and the clean, geometric feel. Based on this, I knew that I wanted to channel an 80s feeling in the design.
Looking at all of these things, I started to draw out thumbnail sketches for the layout. I had three possible elements for the header which I wanted to include:
- Logo/main title
- Profile pic of me (it is my blog, after all - people must know)
I drew a bunch of different ideas for how these might work, and then also sketched out some ideas for logo designs and different elements from the 1980s book that I thought looked interesting.
I was having an early meeting with my mentor this week, so I just threw together a layout quite quickly so we would have something to review:
I had the idea of using a 1980s computer style, but adding in some Victorian flourishes for a touch of whimsicality. The layout matches quite closely with the header design that I sketched out. I chose to go with a design featuring bold dividers to separate it from the rest of the page. This gives a bit of weight and adds emphasis.
The palette is white/black/red, which matches the colour options that were available on early printers. The body text is in Gill Sans, and for the headers I have used Josefin Slab. I like slab serif fonts because they feel very old-fashioned and mechanical.
If you read my last post, you may notice a bit of a theme in my preference for late 1920s and 1930s design. I do really love Art Deco, and I don't think it's a completely unnatural fit with the 80s theme as it experienced a revival at this time. I was trying to go for something that could marry together a sense of whimsy and craftsmanship with a technical feel.
That said, I don't think this design is very successful. The two feelings don't seem to sit well together on the page. The header feels a bit too weighty, and the content is dominated by the two dividers. There are two many disparate elements on the page, so although it is quite empty the page feels cluttered. I also don't think the Josefin Slab sits well with the rounder, more modern feel of the Gill Sans.
Iterate, iterate, iterate
In the review with my mentor, he suggested that I try to focus on developing a single theme as the main idea for the page, to give a stronger feeling. I still couldn't decide on the technical vs the more whimsical retro idea, so I ended up decided to explore both and then see what direction it took me in.
One of the challenges that I was having was getting the right palette. The white/black/red palette was giving more of a goth vibe than I wanted. Since I sew, I started by looking at fabric designers that I liked. I then took some images that attracted me and picked palettes off them.
My mentor gave me the idea of looking more at 1980s horror and sci-fi posters for inspiration after he sent me an article about the typography of Stranger Things. I was finding it difficult to get a 1980s style that didn't seem like total pastiche, so this gave me some good ideas.
We're now going to have to insert the blog equivalent of a training montage, as it would take way too long to go over every version that I tried for the layout. Here's a screenshot of all versions, organised according to theme:
Altogether, I made 16 different versions. The main look/feel can be divided into a retro theme (using a cursive script for the main header and a pink/green colour scheme), and a tech theme (using a blocky font for the header and an aqua/dark navy colour scheme).
One of the challenges I had was to reduce the header height so that the blog content starts higher up the page. I ended up ditching the profile picture because it took up too much space, and didn't feel "valuable" to the reader in terms of added information.
Here is the design I ended up with:
As you can see, this is pretty far removed from the design I started out with. The colour scheme and look/feel has changed quite a bit. For the fonts I've used Megrim for the "MWW" logo, and Dosis for the headings. I tried a lot of different fonts for the body text, but in the end I decided to stick with Gill Sans...because...I love it and I can't stop loving it. I've reduced the weight a bit so it doesn't compete as much visually with the header. (If you know of any other fonts that are Gill Sans-like that I can try out, let me know.)
The header design has been considerably slimmed down. (I was heavily inspired by Rands' blog here.) It's visually effective, but doesn't get in the way of the reading experience. The little banner design feels whimsical without being heavy-handed.
Overall, I'm much happier with this design. It sits together better, and feels more professional looking than my first version. However, to get this I've had to sacrifice some of the 1980s elements, which ended up feeling a bit distracting. The current design makes a slight nod in the direction of 80s sci-fi, but it definitely doesn't read as 80s to me. I'd like to continue refining this so it starts to have more of a unique flavour.
The next step will be to actually build this blog theme. I'm currently working on designing a landing page, so there is still that to be done first. I'd also like to test this design out on a few more people to get feedback.
Do you think I've been successful? What do you think makes a good blog design?