So after reading that Smashing Magazine was launching a small challenge I decided to join. The basic idea is to be able to talk your design and justify what you have done by going over certain points. Among those points Paul Boag mentions Grid, Layout, Color, Typography, Imagery and Styling.
Since I intend to talk about this personal website, this should be quick
Well to be honest since the goal was to make a really minimalist website I did not really pay attention to the grid. The homepage basically centers everything and the other pages of this website follow a simple layout where it did stress the white spaces. There is no complex structure and therefore no real need to apply a precise grid.
As for the layout, I have to say it was primarily motivated by having a fixed left sidebar which would carry a logo and a navigation menu. The idea was to create as much white space on the right as possible so that the overall website would still be readable for a screen resolution of 1024x640, which I believe is the new standard.
In terms of colors, I had two motivations. First, as I wanted to create a very simple, timeless website I decided to go with two colors only. Also, even though I’m not a professional, I have realized several times that screen calibration can be a real pain when viewing the same website on two different screen. And BTW, if Smashing Magazine could give us some tips here I’d appreciate. So I went with a beige wood-like background which looks like some sort of grey wood-like background on other kinds of screen (I believe). I just did not want to have it all beige or all grey and still retain a part of the website cross-platform and which add a little touch in the background.
As for the typography. Well I’ll be honest. At first I wanted to use Microsoft’s Zego UI font which is based on Sego UI. The font is use in the Metro interface of Windows Phone and Windows 8 and I like its minimalist appearance. But then, the open font conversion did not work in Firefox so I had to change. I chose the Ubuntu font instead with font-weight set at 200 to make it thinner and more like a sans-sherif font. Overall I have to say I’m quite happy with what it looks like very readable with a subtle touch of originality.
In terms of imagery, I just made a simple logo with my initials. I believe I could spice it up a bit but somehow I don’t really feel the need to. It looks plain simple and I’m a bit afraid to add useless stuff to it.
As for the styling, the main work was actually done in the weblog section which is powered by Tumblr. But overall it’s just XHML/CSS which I guess anybody could do. As stated before I was largely influenced by Microsoft Metro UI and I was also looking for a design that would persist throughout the years (though I do know this is vain…). Each element on the right side have been put in a box. I’m currently wondering if those boxes actually are necessary. The thing is, a weblog can quickly become a mess if each posts is not properly defined in terms of visible blocks. Would a simple bottom-border be sufficient ? I believe I have to try out. Also for once I tried to reduce my use of border-radius, which, I find, is becoming more and more a thing from the past. Because simplicity is quite important to me, I made use of hover effects to reveal more information. Overall this is may not be the best design that I have done but to me a good template looks very simple at first sight and smartly reveals more advanced features to the users. Also the idea of a timeless design was quite important to me, hence its simplicity banning the use of gradients and border-radius.
So there you go!