Adjusting my Design Approach

This week, while continuing work on the makahiki-rui project, I had an epiphany.  Rather than trying to "create" a decent color palette from scratch, I decided to try another approach.  When creating a palette from scratch, you have to think creatively about how different colors work together, contrast, juxtaposition, etc.  I haven't studied color theory in well over 10 years, so I did not want to go that route.  Instead, I was thinking about how awesome nature looks and the colors out there seem to complement each other very well.  So, if nature's color palette is so darn perfect, why should I try to redesign the wheel?

That's when I decided to pick a series of different Hawai'i and beach related images to work with.  Although the images I found did not have explicit copyright information, they're not all that great.  I plan to take a trip out to the beach to get some pictures with a better camera.  For now, I decided to go with an ocean cliff theme.  Something that would represent the goal of sustainable energy and friendliness to our environment, which the Kukui Cup represents.  I really liked the colors represented in the ocean.  There are lots of blues and greens, which all work well together.  Beaches are particularly interesting, as they have some nice muted browns and yellows to add to the blue sky and ocean.  I will be doing some beach themes next, but for now I decided to stick with an image of the ocean next to a cliff.  This was the base from which I implemented my test of extracting a color palette from a nature scene.

The first step towards integrating a color scheme from nature is to figure out which colors you feel represent the image.  I used a color-picker tool to sample different colors from various parts of the image.  Oddly enough, many of the colors in an image are darker than I would expect them to be.  This prompted me to be deliberate about light versus dark colors, and to get a good sampling of both.  You want some colors to be darker, so that you can use them as shadows for page objects, text, borders, or as part of a gradient effect.  You also want lighter colors to use a backgrounds for your text, and to lighten the page so that people do not feel as though they're in a dark closet when they look at your site.  Once you find colors that you like, most graphics editors have the option to add those colors to a palette, for use later in editing.  From there, you can see the RGB values of each color.  RGB stands for Red, Green, and Blue.  Those are the colors of light which your computer screen uses to mix together for each pixel to produce all the colors you see on the screen.

Now, I realize that you can use RGB values when editing colors in CSS files.  But I am a coder at heart, and I randomly felt like writing a short java app to translate a string of integer values, separated by commas, into a hexadecimal representation.

That can be found here: https://gist.github.com/1900814

After getting the color scheme figured out, I made some changes to the navigation bar, and the header area to homogenize the look and feel.  I borrowed some style inspiration from Gregory Burgess with regards to the header area.

Here's a link to what he did: http://code.google.com/p/kukuicup-rui/source/browse/trunk/CSS-Refactor/theme-2.png

All-in-all, this was a good test.  I learned how to take a better approach to color palette creation and I have some inspiration with which I can move forward to create new themes.

Issues With Design

This last week has been filled with frustration and disappointment regarding a redesign for our makahiki-rui project.  Our team was running into issues working with the current design structure of the site, which we felt was a little cumbersome for responsive design.  We then spent a good amount of time trying to come up with some image mockups for design ideas.  Suffice it to say, I have not used an image program in over 10 years.  I spent hours trying to relearn vector based images and just trying to make rectangles with curved corners proved to be an annoying task.  It sort of turned out decently anyhow, as all my design ideas and "wants" were summarily shot-down by the project leader.  At least I was spared the shame of having to present my shoddy design, since some of the other designs were really terrific.

I'll have to spend some more time in the future to relearn basic design elements and theory.  It is going to be a significant issue when it comes to making user interfaces for just about anything else that I plan to make in the future.  It is definitely a stretch, to put on an artist hat after only wearing a coder hat for the last few years.

Since I decided to leave the design aspects up to those in our team more qualified, I thought about approaching a different problem.  It was suggested that we keep most of the basic structure from the old site, but spruce it up by doing color changes to the CSS files.  The caveat being that we have specific style sheets across the site and so we wanted to have convergence with regards to the colors at least.  Thus, I created a new theme.css file and moved over all the relevant color settings.  I found most of the color settings were found in the screen.css file, which we could just as easily manipulate, but we want to have color schemes in a separate file for now.  If all goes well, we might be able to offer different color scheme which users can choose from whilst accessing our site in the future.