• about
• contact
• advertise
• archives

FG v.3 Explanation

August 05, 2004 | View Comments (8) | Category: Design Journal

Summary: My explanation for some of the design choices involving the version 3 redesign of Forever Geek.

When I announced my “Intermission” about two weeks ago my first thoughts were to begin reworking all my sites to make it easier for the new ones to come in. My top priority was Forever Geek (FG) because to me it was the weakest of the bunch design-wise, yet was quickly becoming my 2nd major site (traffic-wise) behind the CSS Vault.

Since the site is run by a wonderful crew of people I wanted to provide them with a site that they could identify with. It was cool that the previous design was simple, white and pretty much like the rest of the network, but FG really goes beyond me. And for this reason I wanted a design that not only I could look at and appreciate, but the whole crew could look at as well and be proud to work on.

Goals

For personal reasons I setup some goals that I wanted to achieve with the site. The major one was to push myself through a design that I was not known for and doing something that I have never done. Looking at the design itself you might not see something special, but the thought process required for me to get to that state was revolutionary to me. It showed me how I approach design and how I can now move beyond sticking with designs that are within my boundaries.

I also wanted to create a site that visually made you feel something. For some this is total resentment and for others it is a cool feeling which causes them to return. The more feeling, the greater the success.

Sit Down and Get the Content

For the first time in forever I didn't go looking for inspiration when it came to the design. I started off by writing down the type of content that I wanted readers of the site to see. FG is basically a geek news site with articles here and there so there are a lot of entries that are short. Obviously these take the top priority when it comes to the layout.

Secondly, I began to think about what geeks would want when it comes to a site. Of course we want our information to be quick and accessible, but I also like lots of information (or metadata) that helps me explore deeper into the site and decided that this is where I would try to go with the design.

So not only did I begin to focus on the content, but also better ways I could describe the content using metadata. In my original plans almost all links and buttons had either a popup or dropdown to further describe and give stats of the information. Very geeky. I didn't implement any of this, but I might in the future.

In any case, once I figured out what content I wanted to focus on in the homepage coming up with the layout was the easy part.

Grasp the Grid

Without a doubt I went insanely grid happy here. Again this is where my geek mode kicked in and all I could think of was structured data all over the place. Everything is calculated to follow a certain pattern and for the most part it does.

The problem this caused me though, which many of you pointed out in Tuesday's entry, is that the “Visit Site” button gets lost amongst the other buttons in the subnav for the entries. This is a case where I let the designer/geek ignore the usability person and is something that needs to be corrected since that link is important for the reader if they wish to continue on reading the material.

Visually the grid causes the site to be very boxy and very structured. This bothers a lot of people, especially when coupled with the strong contrast between the dark backgrounds and the white lines. Again though, I was taking the design in a direction I have never taken a design before and wanted to see where I could push myself.

But yes the grid is prominent in this one. I probably have placed handcuffs on myself by sticking to the grid too much, but for right now it works.

IA is Underrated

Obviously in this community design gets most of the attention, but I think that IA becomes the most important part of any website. Mess that up and the site becomes almost useless. For FG I kind of took the idea that if you wanted to get to a certain page you would have more than one way to get there. This applies to individual entries and not the basic pages such as “About” and ”Submissions“.

I also had to tie this in with the metadata of each entry. Each entry includes an individual page, comments, category and author. I chose to ignore using a link date only because I thought I was getting too link happy already, but might revisit that later.

On the homepage for each entry you can see that there are links to the category, comments, author, and individual page of each entry. Hitting the archives can also be done on the sidebar quite easily. What the sidebar also does is provide the readers a sense of how large the site is becoming with regards to content and staff.

For my own geek lust, what I am most proud of in regards to the IA can be seen on the individual entry pages. For those of you that read the Vault, you know that one of my pet peeves when it comes to site designs is when they do not provide me a visual cue for where I am situated within the site. Initially if you were on an individual page the archives tab would be highlighted because you were on an archived page. I took it a step further by also highlighting the category and author of the entry in the sidebar to provide readers with further visual cues to let them know where they are. Sure it's a minor thing that over 99% of the people won't even notice, but it's a minor thing that was easy to implement and could make a big difference for some.

The Dropdowns

I had to find a way to get all the 9rules sites on there including my ugly ass Amazon stores along with the mini-stores within the FG store itself. Immediately I thought “Dropdowns!” but then another part of me chimed in about how much I don't like dropdowns. The problem with dropdowns is that they are not effective in letting you know where you can go. You hover over a tab and it becomes a surprise to see that you have even more options. It really irks me when pages such as the “About” and ”Contact” page are hidden underneath the “Home” for example.

Even the Big Z has a distaste for dropdowns, so I knew I had to come up with a solution where the dropdowns would be cool to have, but not needed. If you go through the site in IE you won't even notice the dropdowns and hopefully don't even think they are needed because of the way the navigation is setup. If you are using Firefox (and apparently only some versions of Opera) you get the dropdowns and you can use them if you like or not use them at all and stick with the main tabs. I think this was a good solution in regards to implementing the dropdown menus.

Branding and the 9rules Network

I made a big deal not too long ago of consolidating all the 9rules sites under one brand. It only seemed logical to me because I wanted the network to be widely known and respected. I call that the Jason Calcanis approach. However, alll this occurred before the “other” sites popped into my head.

Initially, the 9rules Network was creating sites that somehow helped the design/development community. FG was my first foray outside of those boundaries and now that I have many more coming up I don't see the unified network brand working as well. With this in mind I have switched over to the Denton approach.

Every site will still be part of the 9rules Network, but each will have its own visual identity to help develop its brand. In turn the brand of the of the network itself will be the collective individual brands of all the sites. Hopefully what this also does is kill the confusion that would occur amongst the community once they see the other sites. If all the sites follow the same style, you may be led to believe that it has something to do with design when it doesn't.

Absolute Positioning

If everyone used just one browser (*cough*Firefox*cough*) the world would be a better place. All our designs would work fluidly through every browser (since there is only one). However, we know that is not the case and many of the hesitations to move on to another design is because I know sooner or later I will have to open it up in IE. And cry. And walk out of the room.

So I decided to take a different approach with FG and went with absolute positioning to control the layout. With absolute positioning footers are not easily achieved on fleixble height designs unless you use one of Inman's magic tricks, so I just cheated and included the footer in the right sidebar. Absolute positiong is a godsend. IE likes it (for the most part). Firefox likes it. Opera likes it. Safari chokes on some of my floats involving images, but I can figure that out in time. Basically if there is a way to do absolute positioning for the rest of my layouts, I will try to figure it out before I move back to floats. Less of a headache and I got to focus more on the design than the actual troubleshooting.

The Sidebar

Really one of those things that you will like or really, really disklike. It's data intense to say the least. As a geek this makes me happy. As a designer I see how it could be put to better use. You can tell which side won on this one.

What the sidebar and other sections of the site allow me to do is easily place ads within the site in the future. This would not be easy to do without the use of the grid. This was more luck than planning.

Uppercase Headlines

Love it or hate it. Just one of those things.

Color Schemes

Again trying to remove myself from my other designs and I always associated geek sites with dark colors for some reason. However, there was no way I was going to make the main content white text on a black background. Usability man won out on this one.

Tweaks

For the moment the site is done, but once I am able to step away from it and clear my mind of the design I think I can better it with minor tweaks for version 3.1. From a personal standpoint it felt good creating a site again that I could look at be pleased with myself. Of course there are people who will hate it and their criticism is welcome, but I kept this design to myself for about 2 weeks just so I could soak in my own happiness :-).

Sorry for the super long post. I tried to be as thorough as possible without writing a novel. I might revisit this topic again and go into further details, but for now this is what we get. Thanks to everyone who posted their critiques. Greatly appreciated and always listened to.

Trackback URL: http://9rules.com/cgi-bin/mt/mt-tb.cgi/290

Comments

Keep track of comments to all entries with the Comments Feed

Post a comment

Comments:


Name: (required)

Email Address: (required)

URL:

Remember personal info?
Yes
No