Kukui Cup Redsign Challenges

So we've hit a bump on the road to redesigning the Kukui Cup Page. Its basically a "one step forward, two steps back" kind of deal. Last week, we had a crash course in responsive web design and more or less got a working page that nicely responds to the browser size, however the aesthetics of the page were horrendous. The white background and the neutral colored widget boxes made the site look bland and overall, boring. Because of this, production of the actual responsiveness to the page has come to a stop, and an overall redesign of the page aesthetics has begun.

Each of us were responsible to submit our own mockups as to what we felt the Kukui Cup page should look like. For my design, picking out a new color palette was the hardest part. The process of finding contrary colors that had a "natural, earthy" feel to it was quite difficult without running into a puke colored green or a poop colored brown. I personally have only dabbed into webdesign and graphic arts, and along with working with a graphic arts major a few years back, I learned quite a bit about Adobe Photoshop and was able to use that to create my mockup. My inspiration for my design was to keep it organized, making especially the navigation bar seem like it was one in the same with the page, by having it be part of the overall layout and not have it in it's own box floating around in space somewhere. However, with my new concept, comes new challenges. A lot of images are involved including the "tabbed" navigation bar. Making all of those responsive may be a bit of a challenge since we haven't got a working fluid image yet, but it is definitely doable.

Overall, the page came out to nearly what I wanted it, and modifications can always be made. If I can somehow get a hold of my old coworker and talk to him about color schemes that would help a lot since not many (if any) of us know anything about graphic design. If not, research about contrary colors would have to be done and I'm not sure how successful that would be. Here is what the page looked like after the first redesign.

However, after meeting with the group, and learning new constraint, especially how the "Quest" bar worked, changes to the left side bar had to be changed because a lot of text would be displayed when the "Quest" bar is used. After some redesign the page looks like this.