The classicwfl.com redesign: motivations and themes in web design
So, the Classicwfl.com redesign has been up for a little while now (and the blog finally matches the rest of the site - I hate editing templates for CMSes I didn't originally code), and I would like to talk about the themes and motivations behind the redesign, especially considering how much exposure it has gotten recently.
Recently, as an artist, I have been preparing myself to do more photo manipulation pieces. My current inspiration is a concept usually approached by younger artists, because it can be relatively easy to express themes and interpret; blending artificial and organic. You can see one of my first pieces utilizing this theme here. I won't go into details regarding MY motivations for this form of expression, however; I'll let my work speak for itself once the new pieces and series manifest themselves in my portfolio. As far as this website design is concerned, I chose it because of a barrier I have found myself being all too aware of; designing websites that look, read, and function within the common nature of websites.
When I say that, I'm referring to a stereotypical structure, such as a basic header, menu, content, and copyright. While this design does stick to that theme to an extent, there are certain aesthetic choices that not only create a unique look and feel, but also make it more interesting to work with on the layout and usability end (while not being completely unapproachable to the novice surfer). I wanted the website to be as much an aesthetic presence as an informational presence.
Another problem I frequently found myself encountering was a lack of energy once I got to the point of doing content page layouts. I'd spend hours, or days coming up with the core themes for the splash/index page, only to slack off on the content layout because I was tired of thinking about it and just wanted to get it done. This time I didn't allow myself to shirk my responsibility as a presenter of content, and made a concerted effort to create an aesthetic content layout that is functional, too.
I guess now I'll touch on some of the numbers and technical details designers may be interested in. First, the typefaces.
Adobe Caslon is a beautiful serif typeface, and I've always enjoyed using it for all-caps headlines. I opted to use it for my main headings (now that I finally have it, thanks to Illustrator CS2 coming with the OpenType version) in a raster image format. I considered making use of sIFR, but chose not to for potential performance/stability reasons (I have a number of fans who use Linux, including myself, and sometimes Flash can cause stability issues). Since I rarely get visitors using anything other than Firefox, IE, Safari, or Opera, and am not focusing on mobile users, raster images will work fine for the headings.
The subhead typeface is Rosewood (another OpenType font - I'm using the filled sub-type). I recently fell in love with this typeface when I saw it used beautifully in US Cellular's recent print advertising (reminder: I work at a newspaper during the day as a print and web artist/developer). Tighten up the tracking and it really stands out for headlines. I'd never use it for body type or extended reading, however.
For the standard body type I went with the best serif typeface commonly available for web usage: Georgia. It is well readable and has enough strength to it that makes it well suited for extended readings without being uncomfortable, for the most part. I would like to also note that, were I going to go with a sans-serif body type, I would choose either Trebuchet or Tahoma. Trebuchet has a bit of love/hate amongst designers, but it is among the best available to web artists for extended text (and I HATE Arial).
Anybody familiar with print media will recognize the accent and link colors. I've loved utilizing magenta for links considering how well it stands out on both dark and light backgrounds, and cyan works equally well. This is a great lead in to something I'm sure a number of people are curious about: the boxes next to all links.
I wanted to avoid using standard underline conventions for links and mouseovers, but also wanted to ensure that the links didn't get lost and that the convention used would be easily recognizable. The result is something that makes it a LOT easier to scan a page hunting down links. I implemented the visual effect using simple css borders.
Code wise, I switched to XHTML 1.0 Strict, since I will need to get a little more motivated towards XML usage here in the near future for some web 2.0 (oops, I just used a buzzword) products I have in mind. I'm a little late in the game, but thankfully it was a simple transition from HTML 4 Strict. The best part? The site won't even render if there are errors - forced me to be really paranoid about my code. While I'm normally a standards nazi, I do make mistakes; this helps eliminate them.
Site was mocked up visually in photoshop, hand coded using Geany and HTML-Kit, and made manageable thanks to CSS and a little PHP.
-WFL
Recently, as an artist, I have been preparing myself to do more photo manipulation pieces. My current inspiration is a concept usually approached by younger artists, because it can be relatively easy to express themes and interpret; blending artificial and organic. You can see one of my first pieces utilizing this theme here. I won't go into details regarding MY motivations for this form of expression, however; I'll let my work speak for itself once the new pieces and series manifest themselves in my portfolio. As far as this website design is concerned, I chose it because of a barrier I have found myself being all too aware of; designing websites that look, read, and function within the common nature of websites.
When I say that, I'm referring to a stereotypical structure, such as a basic header, menu, content, and copyright. While this design does stick to that theme to an extent, there are certain aesthetic choices that not only create a unique look and feel, but also make it more interesting to work with on the layout and usability end (while not being completely unapproachable to the novice surfer). I wanted the website to be as much an aesthetic presence as an informational presence.
Another problem I frequently found myself encountering was a lack of energy once I got to the point of doing content page layouts. I'd spend hours, or days coming up with the core themes for the splash/index page, only to slack off on the content layout because I was tired of thinking about it and just wanted to get it done. This time I didn't allow myself to shirk my responsibility as a presenter of content, and made a concerted effort to create an aesthetic content layout that is functional, too.
I guess now I'll touch on some of the numbers and technical details designers may be interested in. First, the typefaces.
Adobe Caslon is a beautiful serif typeface, and I've always enjoyed using it for all-caps headlines. I opted to use it for my main headings (now that I finally have it, thanks to Illustrator CS2 coming with the OpenType version) in a raster image format. I considered making use of sIFR, but chose not to for potential performance/stability reasons (I have a number of fans who use Linux, including myself, and sometimes Flash can cause stability issues). Since I rarely get visitors using anything other than Firefox, IE, Safari, or Opera, and am not focusing on mobile users, raster images will work fine for the headings.
The subhead typeface is Rosewood (another OpenType font - I'm using the filled sub-type). I recently fell in love with this typeface when I saw it used beautifully in US Cellular's recent print advertising (reminder: I work at a newspaper during the day as a print and web artist/developer). Tighten up the tracking and it really stands out for headlines. I'd never use it for body type or extended reading, however.
For the standard body type I went with the best serif typeface commonly available for web usage: Georgia. It is well readable and has enough strength to it that makes it well suited for extended readings without being uncomfortable, for the most part. I would like to also note that, were I going to go with a sans-serif body type, I would choose either Trebuchet or Tahoma. Trebuchet has a bit of love/hate amongst designers, but it is among the best available to web artists for extended text (and I HATE Arial).
Anybody familiar with print media will recognize the accent and link colors. I've loved utilizing magenta for links considering how well it stands out on both dark and light backgrounds, and cyan works equally well. This is a great lead in to something I'm sure a number of people are curious about: the boxes next to all links.
I wanted to avoid using standard underline conventions for links and mouseovers, but also wanted to ensure that the links didn't get lost and that the convention used would be easily recognizable. The result is something that makes it a LOT easier to scan a page hunting down links. I implemented the visual effect using simple css borders.
Code wise, I switched to XHTML 1.0 Strict, since I will need to get a little more motivated towards XML usage here in the near future for some web 2.0 (oops, I just used a buzzword) products I have in mind. I'm a little late in the game, but thankfully it was a simple transition from HTML 4 Strict. The best part? The site won't even render if there are errors - forced me to be really paranoid about my code. While I'm normally a standards nazi, I do make mistakes; this helps eliminate them.
Site was mocked up visually in photoshop, hand coded using Geany and HTML-Kit, and made manageable thanks to CSS and a little PHP.
-WFL

