Freigeben über

New Visual Design For My Blog

  • Artikel

As a user experience designer, the visual design of content I produce is an important consideration. Therefore, I had to create a new visual design for my blog because the default was a bit dull for my tastes, and I felt that it didn't represent me as a designer very well. I had a few simple goals in mind for the new design, and they included the following...

  • The design had to be visually distinct
  • The design had to use strong colors
  • The content in the UI had to remain readable
  • The individual sections of the UI had to remain visually distinct
  • I wanted to play with the book metaphor
  • The design had to be implementable through use of CSS modifications

After producing a mockup for a redesign of my blog in PhotoShop, I began to explore how to modify the CSS for the UI (user interface). I checked out the source for one of the pages and was quickly able to access the CSS information I needed and, low and behold, the blog also had tools that would allow me to easily customize the CSS and apply it to the UI. At this point I was pretty much good to go, except for the fact that I hadn't redesigned a site through CSS modifications alone in years. 

In order to get inspired and ready to dig into the CSS, I took a quick peak at the cool stuff that people were doing at CSS Zen Garden. Then, I dove into modifying the CSS, and after many hours of twiddling I was finally able to get the UI to look like I had designed it to look. Now my blog has a visual design I'm happy with! Yay!

Here's a before image of the blog template I modified (it's amazing what you can do with CSS and a few images)...

Screen shot

I'm compelled to include some Silverlight 2 information in this post, so here are a few interesting tidbits I've found recently that I'd like to share...

  • This is an interesting post by Matt Berseth on sorting and filtering content in the Silverlight 2 Beta 1 DataGrid control
  • This is another interesting post for the Silverlight 2 Beta 1 DataGrid control. In this post you learn how to do CRUD operations using Linq to SQL and WCF from the Swiss MSDN team

Comments

  • Anonymous
    April 29, 2008
    PingBack from http://www.travel-hilarity.com/airline_travel/?p=4224
  • Anonymous
    April 29, 2008
    Looks really nice and clean.Amazing what can be achieved with some good CSS. Now would be a good thing I do the same to my blog. One day, when time allows...
  • Anonymous
    April 30, 2008
    Really like the attention to detail for the embellishments (the border color panels and barcode etc etc)...Time for me to take my wordpress blog out of wordpress and onto my own servers THEN go wild on the layout! I definetely need to put some Silverlight in thereps. where's your Silverlight bits? Maybe a banner in Silverlight or something on the left nav?? Common arnt you a Silverlight PM :)
  • Anonymous
    May 01, 2008
    With the blog tools I'm using, I don't think I can modify the banner or left nav section to include Silverlight or I certainly would :) I think I'm pretty much limited to basic stuff that can be accomplished with CSS alone :(
  • Anonymous
    June 09, 2008
    Nice styling! Actually the lack of a way to go back go the main page of the blog is the only thing that bugs me.