During October 2008 I redesigned my LonelyGods.com website. I had originally designed it when I created the site a year or so prior, and the original design worked for a while. However, I began to run into some problems, primarily with the top navigation elements, and I set out to redo this when I redesigned the site.
The original plan for this site was to create a very high contrast, minimalist design. The focus of this site was the text articles I had written, and I wanted a design that featured just them and very little else. In this I feel I succeeded, and I did not want to change that for this redesign.
Original and Redesigned Home Pages
Beginning with the front page, the website is very high-contrast, with a few colorful elements showcased against a white background. I do like my original design of the front page, and I did not want to change it very much when I applied my new design. The only visual element I changed was the main site banner. Instead of a comic-style dialogue box, I used a large black bar along the top of the page. This creates a far more striking appearance and sets a more bolder look that I continue throughout the interior pages of the site.
Beyond the new black banner, I made considerable changes to the code of the page. The original site used a couple ugly positioning hacks in order to center the page content as well as the section links. I completely revised all the code behind those elements, cutting the size of the code down by about a fifth.
The site's homepage remained relatively unchanged, with the exception of the main banner. That changes for the interior pages. When I originally created the site, I crafted a top navigation menu that utilized the same large character images as the front page. Although this worked in the short term, it created several problems. First, the character images created a large, bulky overhead section that detracted from the page content. Second, since the images were so large, I could only fit four of them in the navigation area. This was problematic because there were five sections. I solved this in the short term by taking out the top image and link for the current site section, leaving in the remaining four areas. This was still a problem, however, for the navigation would shift depending on which section a person was currently in.
Original and Redesigned Interior Pages
When I redesigned the site, I set out to solve both these problems. I first did away completely with the large bulky images, instead using sleek, narrow background images that would plug into the top black bar. This bar replicated the feel of the front page banner, although it was considerably smaller. This solved the first problem. The top navigation of the first design was 145 pixels tall; the top navigation of the new design is only 65 pixels tall.
Once I moved the navigation up to the small top bar, the second problem with fitting all the links on the page also corrected itself. In the original design each link was a fixed width and height. I did away with the fixed dimensions in the second design, instead using a fluid width with a centered background image for the navigation links. This allows me to fit all five website sections into the top navigation menu, with room to spare. This creates a more consistant navigation that helps aid the site visitors as they progress from section to section.
Original and Redesigned Article Pages
Another change was with the titles of each article page on the website. When I originally made the site I did not have a very good plan of how I would style the interior articles, and their design suffered as a result. The titles of these pages were very small and cramped, with little to differentiate them from the normal text.
The new design changes that, and the article titles are much bolder and far more striking than they originally were. It is now obvious to a reader what article they are currently on.
Return to Web Design Portfolio