Hi and welcome to my new personal site. I’ve finally been able to get out of the six months long swamp known as “creative block”, “problems deciding” and “lack of time”. I’m a boy man of perfection and innovation and we all know that we are our own’s worst client. This new site features a journal (with posts and quickies), a work sample page, an about page with services and contact info. The previous designs were quite ambitious, and were sort of “too big” for me. It took a couple of iterations for me to realize that I didn’t need an XXL site. Just a place for writing, showing off my work and contact info would be fine. I’m quite embarrassed sitting here in October with a site I planned to launch in March, but I’ve learnt a lot during the process.
Previous versions
I neither want nor can show the first version for you, so we’ll begin with the second one.
May — Dyluni
As you can see I was sort of hooked on lining everything up in a grid. The cool cork board is something I’m pretty proud of. There are some advanced CSS3 stuff in there and no unnecessary markup (it’s one section with border-image and multiple background, including an unordered list with work samples that scroll horizontally).
But alas, I changed my mind with the design when I was close to launch. It just didn’t work out. It was dull, boring, empty and not focused enough.
April — Contrast
I worked quite a lot with this version as well. More colours and the serif typeface Palatino (which I’m still using) made it into the design. After I’ve marked everything up and used it for a while, it still didn’t feel right. Wasn’t that streamlined and included a bunch of wannabe things. Also still quite empty and white. Where’s the contrast?!
June — Brave New World
This was a wireframe of another version. I was going to put portfolio thumbnails in those black boxes. It was more of a frontpage design that transported you to my portfolio page than the other designs. I also built this cool CSS3 media query thing which switched layout of the boxes when viewed on an iPad or iPhone. I was quite keen to keep the logotype for future versions. It featured different textures everywhere you saw it. I even animated it to slide new background patterns in behind it. Also implemented a PHP script that extracted colours from the portfolio thumbnails and used them in the logo. That didn’t work out good however. It was nothing really wrong with this design. I stopped working on it just after I had marked up the frontpage and blog page.
June — Experience
This design was really the foundation for the current one. I used a different colour scheme (lots of purple) and I worked with the fonts in another way. “Content” was the keyword for this iteration. I wanted contrast and no more empty spaces. In the end of the markup process I felt that this one would be “too big” for me. I moved on. The current design owes a lot to Experience — both technology and appearance wise. Especially the journal pages are the same (to the left. Don’t worry about the float bug on one of the articles).
August — Grid
I started out fresh with a less colourful scheme. You can spot the underlying twelve column grid better as well as the baseline. Clear typography and readability is apparent. Written in semantic HTML5 and modern CSS3 this site may not look that crazy, but boy it’s much under the hood. Go ahead and check the source — it’s quite beautiful. The theme features ARIA roles, custom shortlinks in the head, send to Instapaper and Twitter instantly from the journal posts or quickies and more. You can of course resize the browser window and see layouts for iPad and iPhone. I think I’ll go with this one.
Looking back
I’ve learnt a lot during the process. In the end, it wasn’t that bad to be dissatisfied with the previous versions. For every iteration I fine tuned the HTML and CSS, and found more techniques and ways of doing things. My CSS framework, Dyluni, was the outcome of my work in SASS. I’ve written and reused many PHP functions in the theme during the iterations as well. You have to go through hell to appreciate heaven, I guess.
What’s next?
I will of course create a portfolio page with work samples. After that I’m thinking of making a digital resume on a designated page, optimized for printing. I’ll also add a social page with my Twitter, Flickr and Last.fm streams. For now, check out the posts and quickies pages for a steady flow of articles and shorter pieces, and feel free to read more about me on the about pages. And just to make it clear: I’m available for freelance work. Thanks for reading!