The design process | KriLL3’s blog

The design process

The design of this site spans nearly 3 months, from early December 2007 to late February 2008, only a few elements have remained and none of them without modifications. It spans 2 domains and 2 hosts, krill3.no-ip.org on my home server, and later krill3.com on dreamhost. The site has come far in a short amount of time, I wounder where it will be in another 3 months.

Each text is related to the picture under it, click said picture to enlarge it.

2007-12-09: The very first design was like the one below but had no rounded header corners and the tab navigation was hanging of the left side of the header, can’t find a picture of that theme. It provided the baseline of the design, to be honest it was rather bloated with it’s multitude of images, image based semi mystery meat navigation and big randomized header image.

2008-01-15: I decided the navigation should be part of the main body instead of on the side, both to better fit the expectations of visitors and to make better use of the horizontal space.

Stage1

2008-01-24: I dropped the random background image in the header in the name of style and faster load times and removed the seperate sidebar after I realized it was superfluous and quite frankly, ugly. I also dropped the semi mystery meat navigation in favor of a text based one. This is the first point in the design I felt comfortable using it as a proper site to represent me and my designs, I was well aware of the design shortcomings of the earlier versions.

Stage2

2008-01-29: I experimented with the idea of having each post be it’s own “bubble” but I realized that would be hard on your eyes and be an inefficient use of space. I also made the theme a bit lighter, the background especially was very dark previously.

Stage3

2008-01-31: I also experimented with the idea of a free floating navigation bar.

Stage4

2008-02-01: Some inspiration came about and I started a new theme from scratch, I made a quick mock up of the general outline of it, it’s a very raw rendering and the final colors would most likely have been a lot closer to the old design, great expanses of black isn’t something I fancy.

Alternate

2008-02-11: I tried to pick one of the themes, but realized I could merge them, retaining the tiled background “wallpaper” from the previous style, it’s general color scheme and layout but incooperating the outline around the main body of content and the highlighted part of that outline displaying the active page along with the square corners, which felt like something fresh and exiting after making designs based on rounded corners for so long.

Fusion1

2008-02-24: That hybrid theme named “Fusion” further progressed and it’s what the site uses currently, I added a dark gradient to the bottom, also balanced some colors and replaced the header’s outer glow with a drop shadow, all in all making it a bit more refined, the footer and navigation bars seem to be the same color, but in fact they are 2 very different shades, the dark gradient in the bottom and the white gradient on top makes the fields seem to have very different colors if they’re exactly the same, an optical illusion.

Fusion2

test

There are no comments on this post

Leave a Reply