zastica

Today, I’m happy to launch the new redesign of my site. There were a few major motivators to doing the redesign now, and a few more minor ones.

First, I felt that my previous design was a little too limiting, and wasn’t flexible enough to do everything I wanted to with the site. This new design is much more flexible, using even more CSS to provide embellishments than before.

Second, I wanted to draw on ideas some other people in the web design and dev community have come up with, and use them on my site. In a way, I’m paying homage to my elders.

Finally, my hard drive crashed twice in the last 6 months, causing me to lose all my old design files, so I needed some new assets. I could continue with minor changes, but as long as I was opening up photoshop and tweaking the images, I figured it was time to redo everything as well.

zastica has changed from this:

To this:

(Posting static images becuase this design will probably change over time and I want to archive what it looks like now, and what it used to look like)

Inspiration

The inspiration for this design comes from two primary sources. The first is Jason Santa Maria’s site. I’ve always admired his skill as a designer, but only recently come to appreciate the simple power that his site design has. It works extraordinarily well, and I hope to use and learn from what he is doing.

The second major source of my inspiration is mozilla.org. This is another fantastic site. I like the header especially, and that’s were mine came from. The nuts and bolts (HTML and CSS) of their header is actually pretty surprising, and I think I learned a thing or two about creating interesting effects from that site.

I know that these two sites are remarkably similar to my site, and that is something I can potentially see people having an issue with. To anyone that does take offense to that, I say that this design is a first step. I’ve set it up so that hopefully I can pull of major visual changes without much work, and continue to grow and experiment as a designer. If you still take issue, please use info on my about page to contact me and let me know how you feel.

What’s changed

Pretty much everything. The site tagline is gone, the navigation has moved down, the dragon graphic is gone from the main content area. The background is separated from the content container background with the use of a text-shadow. I have wanted to use web fonts, so the header font is League Gothic.

What’s the same

The colored bars have moved up into the header. The dragon silhouette has moved from the main content area to the header, and made into a 24bit png so that it will work well with any background. I still have the ability to post hero images for special events, or to display extra bars in the header, for breast cancer awareness for example.

What’s going to change

Link colors for one need to change. I’m not sure what treatment to give them yet, but I need a way to make them a little less 1990. Fonts, colors, backgrounds, and even the layout may change at any point. That’s what I really like about this design — it’s very easy with my new tools.

You might be wondering what those colored bars on top of my content are. And you’re right to wonder, because it’s kind of strange and out of place. While I was redesigning my site, I ran into a problem — I wanted to be able to add a little visual flare to my site, but I kept running into a dead end. I tried a featured photo thing from my vast collection of photography, but that ended up being too hard to maintain. Eventually, I settled on what you see now - a series of 9 colored bars, but I gave it a twist.

You see, the colors change everyday, and I don’t have to do anything to make it happen. I just defined 4 sets of colors, one for winter, spring, summer, and fall, and then wrote up some code to calculate the gradient between each set, and then I show the color set for any given day based on where today is on the line from season to season.

My base scheme looks like this (HSV values):

$this->schemes = array(
    $this->starts['winter'] => array(
        array(223, 58, 26), array(202, 53, 75), array(209, 11, 98)
    ),
    $this->starts['spring'] => array(
        array(0, 33, 69), array(83, 31, 84), array(187, 64, 66) 
    ),
    $this->starts['summer'] => array(
        array(93, 87, 100), array(349, 95, 100), array(33, 100, 100)
    ), 
    $this->starts['fall'] => array(
        array(0, 80, 85), array(35, 80, 85), array(45, 95, 60)
    )
);

I expand those sets of 3 into sets of nine by rotating the H value 36° to the left and right. Then I convert the values to RGB, and for each set I calculate the median values like this, with a distance of .5 (meaning half the distance between each point). This is done for each of the R, G, and B values.

foreach($from_vars as $i => $value) {
    if($value > $to_vars[$i]) {
        $diff = $value - $to_vars[$i];
        $from_vars[$i] = $to_vars[$i] + ($diff * $distance);
    }
    else {
        $diff = $to_vars[$i] - $value;
        $from_vars[$i] = $value + ($diff * $distance);
    }

    $from_vars[$i] = round($from_vars[$i], 0);
}

Basically, it just averages the two colors and applies those values to the date in between the start and end. It’s actually a lot more complicated than that, but that wouldn’t fit in one post.

This is my first post using my new CMS. It’s called HepCMS, and I developed it over the course of 6 months on my bus rides to and from work. My main goal while developing Hep was to create a simple system that would make it incredibly easy to publish content for the web. I also wanted to become more familiar with the CakePHP framework. At work, I develop and customize our custom CMS, so I also wanted a different system that would encourage me to learn in different ways.

And also, the technology that my old site used (the Symphony CMS) issued a major upgrade to their codebase, one that was incompatible with old Symphony websites. Since I was stuck in a situation where I couldn’t upgrade without some major effort, I decided to take the plunge and create my own system.

As for my old website, it’s now been archived for posterity. The content remains, albeit on a different url, and it is no longer supported or updated. Commenting is turned off, and the backend has been removed. I thought about porting the content into the new website, but honestly there was so much cruft that it wasn’t worth the effort.

The topic(s) of this site will remain the same — anything that comes to mind. And the quest to write interesting information will continue.