Having a design system is like having a super power. It takes away all the small decisions you have to make about a design and lets you focus on the higher level goals you have for your design. But creating a design system is a labour intensive process usually only worth it for product teams […]
My first design is finally done
After over a year and a half, I finally have a design of my own. It’s been announced way too many times, but now it’s really here. Find out what happened to the tagline, after the break!
This is actually the first design I made on a Linux machine (nerd), and the first design that went directly from sketch to html. My sketches were more detailed because of this, and I might add them to the article later, when I have a good camera at hand. In any case it means I didn’t buy fancy pencils for nothing :) Most of the typography was actually sketched out, instead of added as an afterthought. The header is set in Asturias.
Besides that, the whole website adheres to a vertical rhythm of 18px (even my form elements!), largely the cause of the awesome SenCSs. There is a pretty strict grid as well. It might seem quite small if you have a fancy 24″ monitor, but since I have an Asus EEE, I wanted it to work on there as well. I can create 1, 2, 3 or 4 columns within my style, with space to the right of the design where I can put extra stuff. I might experiment with that in time.
I liked the idea of having as little administrative cruft available as possible, and initially didn’t have a search form at all. This is functionality I wanted to offer though, so I settled for what you currently see. It’s in the top right corner with
position:fixed, more part of the browser window (right below your google search bar) than my website. Huzzah! I also removed the sharing options, and made the meta information as small and invisible as possible.
Oh, and about the tagline, it’s still there for those who look :)
Yep, I used SenCSs for this design, and that took away about 50% of the styling needs. I’m so happy with developing it :) There are probably some things here and there that I’m going to change in SenCSs 0.4.7, or, if I can finish the form part, they’ll go straight into 0.5 :) (0.5 being the first version to include form styling).
HTML-wise it’s quite boring. xhtml strict, nothing spectacular. I went down a scale in headings in articles. (So what was
h2 with the old design will be
h3 in the new design.) Will be interesting to see what Google thinks of that…
I’m also happy to tell you that this site is made with a screw IE attitude. I can do this, because IE users are only about 15% of my visitors. Most of the site will work for them, the fancy stuff won’t. What fancy stuff, you ask? Well, That would be fancy CSS selectors such as these:
h2 + p:first-line .first-post > p:first-line .comment-form .left ~ button li:not([class=pingback]) .comment-content p:first-child:first-letter
I’m using the similar posts plugin to display related posts at the bottom of my articles, which works pretty well and I find myself browsing through my backlog, so I hope you will, too. :)
On the homepage I have the three most popular posts. Anyone that has searched for a plugin to take care of that and works with WordPress 2.6 probably found out there isn’t one. So I had to make my own little snippet* that uses the post options plugin. I’ll post an article with the code in the next couple of days. *my WordPress-fu isn’t good enough to develop plugins yet
More than a weblog
I like the idea of this just being a weblog, but I am also a freelancer, and wouldn’t mind showcasing that on my site a bit more. So the projects page will include both open source and client work. I got some cool things lined up for release. On the homepage I’m displaying a list of projects I developed or am involved with. Currently that’s just SenCSs, but expect that to fill up in the near future.
I’m quite interested in your thoughts on the design and the website in general, let me know in the comments and if you’re browser is hot enough, I’ll give you a sweet
first-line effect! ;)