(Review My Design) - 5 Year Old Dating Website - Brought back to life.
Hi All,
I have been on these forums for awhile, posting new websites that I do. I love the feedback that I get from all of you, so I wanted to share my latest creation.
This website has been around for around 5 years and has always looked about the same. Here is a screenshot taken right before I implemented the re-design changes: Image - TinyPic - Free Image Hosting, Photo Sharing & Video Hosting
This is the current website: http://www.seekingarrangement.com Everything has been re-vamped, the internal UI, as well as the landing pages / external UI.
If you want to know the details of the Re-Design, read on!
Here are some of concepts behind my changes:
First off the key to this site is that it has been around for 5 years. With over 900,000 members I can't just drop all of the branding that those 5 years have done, so I have to make to make this site modern but still keep with the major characteristics of the website. Basically, keep the logo, branding images, and refine the message so it is clear.
The first thing I noticed is that the site was extremely small sitting at around 700px wide. I generally like to keep a site to 960px. This is the easiest number to break down, and it looks great on 1024x768 and degrades fairly well for smaller 800x600 resolution screens. Also, I am a big fan of mathematics; many of you may already understand the "golden ratio" (if not read up!).. It is a concept that has been used in architecture and art for years. having the site at 960px makes it much much easier to achieve this ratio and have a clean, lovely looking site.
The overall theme of the original design was White and Red. The creator of the original design knew that red was key to getting attention, but what he didn't think of is that overusing that red makes the user's eyes get lost. The site also had tons of white-space and the actual content was cramped and had very small text. I kept the white background, but took this re-design opportunity to bring in some greys and blacks (actually blue-blacks NEVER USE #000!!). I removed all of the Red colors (above the page break). Now the only red seen on the site are the join now buttons, the most important page.
The next thing was the navigation. The bright red nav background definitely drew the eye to the navigation, but there were so many options that users tend to get lost, not knowing which page will provide the best solution. I noticed that many of these information pages could possibly be grouped into single pages. First I needed to see what links are used more often.
I ended up looking into analytics to see exactly which pages are viewed most; I found the following most viewed pages: 1) Join Now 2) Whats an arrangement and 3) How it works. Powered with this valuable information I changed up the navigation completely, putting the less used links on the top (smaller), and placing the most viewed links in a large easy to see spot.
Finally, the main content was missing a "message". It was fairly easy to get lost in the multiple definitions and JOIN 100% FREE messages. I used large fonts and white-space to get a clear message across. And then let the natural flow of the site take over; putting the two definitions on opposite sides of each other (showing that they are clearly different concepts).
Now onto the next design phase.. the Press section. I personally think this is the most interesting section on the re-design. The site originally only showed three of the websites that it was featured on; however the actual site has been all over the news since it's creation five years ago; from abc, nbc all the way to fox and playboy. I wanted a way to show all of this information, but I did not want to overload the page. I wanted these featured items to be prominently displayed, but did not want to clutter the clean content alignment.
-->This turned out to be a bad idea. I got rid of the marquee completely, positioned the background centered and left it still. No more 1995 <marquee> effect lol.
I created a div and set the width to a maximum (default) and height to the height of my image. I then created a ~2000px wide background image that has a repeat-x on it meaning that I can have the largest screen. Then I wrote a quick javascript to move the image at a rate of 1px per 60 milliseconds (after some playing around this seems to be the less "glitchy" speed). This turned out to look so much better than before.
I ended the page (under the page break) with the latest blog entry and created custom banners for the "party" and "book" ads. Finally I created a footer with a similar color and gradient to the header strip. I Placed company information and pertinent links here.
Feedback is always appreciated, please let me know what you all think. If you guys have any questions feel free to ask away. I will be glad to answer anything regarding this design and how it was accomplished!
I have been on these forums for awhile, posting new websites that I do. I love the feedback that I get from all of you, so I wanted to share my latest creation.
This website has been around for around 5 years and has always looked about the same. Here is a screenshot taken right before I implemented the re-design changes: Image - TinyPic - Free Image Hosting, Photo Sharing & Video Hosting
This is the current website: http://www.seekingarrangement.com Everything has been re-vamped, the internal UI, as well as the landing pages / external UI.
If you want to know the details of the Re-Design, read on!
Here are some of concepts behind my changes:
First off the key to this site is that it has been around for 5 years. With over 900,000 members I can't just drop all of the branding that those 5 years have done, so I have to make to make this site modern but still keep with the major characteristics of the website. Basically, keep the logo, branding images, and refine the message so it is clear.
The first thing I noticed is that the site was extremely small sitting at around 700px wide. I generally like to keep a site to 960px. This is the easiest number to break down, and it looks great on 1024x768 and degrades fairly well for smaller 800x600 resolution screens. Also, I am a big fan of mathematics; many of you may already understand the "golden ratio" (if not read up!).. It is a concept that has been used in architecture and art for years. having the site at 960px makes it much much easier to achieve this ratio and have a clean, lovely looking site.
The overall theme of the original design was White and Red. The creator of the original design knew that red was key to getting attention, but what he didn't think of is that overusing that red makes the user's eyes get lost. The site also had tons of white-space and the actual content was cramped and had very small text. I kept the white background, but took this re-design opportunity to bring in some greys and blacks (actually blue-blacks NEVER USE #000!!). I removed all of the Red colors (above the page break). Now the only red seen on the site are the join now buttons, the most important page.
The next thing was the navigation. The bright red nav background definitely drew the eye to the navigation, but there were so many options that users tend to get lost, not knowing which page will provide the best solution. I noticed that many of these information pages could possibly be grouped into single pages. First I needed to see what links are used more often.
I ended up looking into analytics to see exactly which pages are viewed most; I found the following most viewed pages: 1) Join Now 2) Whats an arrangement and 3) How it works. Powered with this valuable information I changed up the navigation completely, putting the less used links on the top (smaller), and placing the most viewed links in a large easy to see spot.
Finally, the main content was missing a "message". It was fairly easy to get lost in the multiple definitions and JOIN 100% FREE messages. I used large fonts and white-space to get a clear message across. And then let the natural flow of the site take over; putting the two definitions on opposite sides of each other (showing that they are clearly different concepts).
Now onto the next design phase.. the Press section. I personally think this is the most interesting section on the re-design. The site originally only showed three of the websites that it was featured on; however the actual site has been all over the news since it's creation five years ago; from abc, nbc all the way to fox and playboy. I wanted a way to show all of this information, but I did not want to overload the page. I wanted these featured items to be prominently displayed, but did not want to clutter the clean content alignment.
-->This turned out to be a bad idea. I got rid of the marquee completely, positioned the background centered and left it still. No more 1995 <marquee> effect lol.
I created a div and set the width to a maximum (default) and height to the height of my image. I then created a ~2000px wide background image that has a repeat-x on it meaning that I can have the largest screen. Then I wrote a quick javascript to move the image at a rate of 1px per 60 milliseconds (after some playing around this seems to be the less "glitchy" speed). This turned out to look so much better than before.
I ended the page (under the page break) with the latest blog entry and created custom banners for the "party" and "book" ads. Finally I created a footer with a similar color and gradient to the header strip. I Placed company information and pertinent links here.
Feedback is always appreciated, please let me know what you all think. If you guys have any questions feel free to ask away. I will be glad to answer anything regarding this design and how it was accomplished!
www.OFFLINEMARKETINGFORUM.com (Register Now)