Riata Ranch approached me in regards to the possibility of redesigning their outdated web site. With pages worth of text on just a few pages, I had a serious challenge on my hands. Shown below are the comparisons between the original site and my redesign. See the sections in the lower half of the page for direct comparisons.
|
|
|
|
|
|
 |
|
Navigation
The original site had two menus, how confusing!
One of the first tasks that I completed was to create a CSS based layout with very simple buttons all collected into one menu. |
|
|
|
|
|
|
|
 |
|
Flash
The original site had the same picture on each page, how bland! I created a set of themed banners using high quality photography and selected client quotes in order to add a bit of variety. |
|
|
|
|
|
|
|
 |
|
Flash video
The original site had video, but it didn't have any controls. With my design I created attractive tabbed buttons and ensured that the video was streamed from the server with a simple flash interface and playhead. |
|
|
|
|
|
|
|
 |
|
Gallery
The original site had a gallery but it went off the page, in fact it was 3 pages wide! I made a grid of photos and arranged them in a nice, simple order. |
|
|
|
|
|
|
|
 |
|
Quote system
One of the toughest tasks of the project. The original site had a simple contact form, the owner then had to reply to each email by hand giving a custom quote. I designed a PHP and Flash based system that automatically provides a quote for the user based on the data that they input. |
|
|
|
|
|
|
|
 |
|
Products
I thought that the original produce page was quite ugly and disorganised. I created a simple grid for the products highlighting their attributes and included a small 3D generated image of each product to go along side. |
|
|
|
|
|
|
|
 |
|
Making the side panels
There was links to sections on the site that I felt not all viewers would benefit from reading. I condensed these into collapsible panels that I placed on the right hand side of the page. Now, someone only reads the text if its something that interests them. |
|
|
|
|
|
|
|
 |
|
Highlighting the product
The products were initially poorly highlighted, using random photographs. I created two 3D models in Flash that the user can freely rotate. Along side the 3D models is a grid showing each product's specifications, this allows viewers to easily compare the two products. |
|
|
|
|
|
|
|
 |
|
Condensing the text
There was way too much text on the main page, (3 pages worth!). I condensed all of the text into manageable 'tabs' so that only a small amount of text is ever shown at one time. The page doesn't have to refresh when changing between sections either, I feel that this has improved the overall user interface. |
|
|
|
|
|
|
|
 |
|
Flash intro
The client asked for a simple page that would allow the users to choose different sport categories. I created a simple flash intro that loads pictures at runtime, this means that they are easy to update at a later date. |
|
