Remix 01 - JSOnline
I was asked recently about the jsonline.com website, and most importantly how would I make it better. I decided to spend a day or two and remix the jsonline.com site. This is my answer after a few days of thought.
You can see my remix here
News sites like these have to be hard to get right. There is so much information to present. I am by no means saying I have come up with the end-all solution. I have not. What I did was try to clean it up a bit, separate the different sections of content a bit more, reduce some of the redundant links and just make it a bit more pleasurable to look at and navigate. This remix is not fully developed, but is developed enough you can get the idea.
Color Palette
The first thing I did was to sample the major colors from the logo to create a palette. We have the light blue and dark blue from the gradient in the "JS" and the corresponding "Journal Sentinel". There is the almost black from the "online" and the darker red from the gradient red underline. I then also added two lighter variations of gray to give a couple more options and brighten the site up a bit. The current site seems kind of dark and gloomy to me.
Layout Decisions
If you look at the side-by-side image above of the original on the left and the remix on the right you can see it looks a little cramped. It is also difficult to decipher a menu structure. So I went to the good ol' grid for some structure and to make the design a bit more comfortable.
The Grid
I decided to give the content some flexibility I would use a 16 column grid. We need to have at least 300 pixel in the far right column for the 300 pixel ads. I also wanted to open the menu column a bit so it was not so narrow. So this left me with having to decide if we cater to the 800x600 resolution crowd or not. The current page came in at 953 pixels, so I figured it was safe to not have to cater to the lower resolution crowd, but would not really know until I saw some web stats, so I just assumed on this fact. I bumped the width up a bit and used a 16 column grid at 45 pixels each with 17 gutters (including the two outer gutters) at 15 pixels each giving us a total of 975 pixels for a total width.
The menu column gets 3 columns, the main content receives 7 columns and the right column receives 6 columns which in spots I have broken up to give 2 columns of 3 to help with some smaller link columns.
Redundancy
With so much information and many menu items listed down the left side I noticed there was a redundancy of menu items. The header item in the menu list was not linkable and directly following was a link to the home page. This occurs in all menu sections. So I decided to just link the main menu item and get rid of the following "Main Page" links.
It was brought to my attention that the classifieds are the biggest money maker but to me this is a bit much. If its the first thing on the page (and I think lightening up the top bar helps it stand out more in my version) people should be able to see it. In my version I have added a little reminder to the classified page and a way for people to one click to buy ads. I think that is enough and yet again helps get some of the other links closer to the top.
Header
I also added some tabs to the header, created a larger search box and a more prominent weather icon and current conditions. I wanted to give the header a cleaner look.
The tabs were added for the major sections of the site. To give the user a quick way to get to were they want to go. I came to get entertainment news, I can access the Entertainment tab without having to scroll down the page and find entertainment.
I also got rid of three more side bar navigation items by adding the login form and join buttons to the left of the tabs. Why not just let your subscribers, who took the time to sign up, a quick and easy login method.
You are seeing more of these nice graphical ways of showing what the weather is like. Why not. It adds a nice graphical element to the header, rather than that small little icon you cant tell what it is. I also like these because the are actually informational. I sit inside all day and like to know what the weather is like before I leave in the morning and when I leave after work.
Last but not least I cleaned up the search box. Those pre-filled form boxes are not always the most accessible of things so I used a label instead and dropped a gray background behind the form to stand it out a bit.
Conclusion
Really the end goal of this remix was to help define space, help the content to breath and to aide a bit in helping people find content. I learned a whole lot in this little exercise. I am sure as I look at this project more I could most certainly improve on things, but I think as a couple day exercise it was quite effective and made me think about design and layout a bit.
View the project page
- Posted in: Remix on February 02, 2008