I’ve been kind of obsessed with color since I started web design.
Picking the colors for the new site was a huge mental undertaking, and I think I’ve got something I’m kinda happy with for now. Let me introduce you to my colors:
| #FF4F03 | This is the primary color used on the site. Let’s just say I have the hex code memorized. It’s the link color, and the navbar and most orange things are based off of it in some way. That picture of the tech table on the front page is tinted with this color. It’s kind of everywhere. | |
| #F02311 | This red is used very sparingly, on the line that divides the main content from the sidebar, and as the text shadow and underline for the H3 headings. The most interesting thing about this color is that on colourlovers.com it has been named as “Sex on the Floor”. | |
| #FB8400 | This orange carried over from the old site, kind of by accident. I had finished the site but was still unhappy with the colors I chose for the H2 heading. When I was updating the blog colors it looked so much better than what I was about to replace it with that I kept it. | |
| #666666 | I like grays a lot. I also like grays that have hex codes that are easy to remember. You will see this is a pattern. This is my default medium gray, it’s also used on the H1 headings. | |
| #333333 | This is my favorite gray. It was used a lot on the old site. All the “black” text on the site is actually this color. | |
| #4D4D4D | This one is my 2nd-favorite gray. It’s around here and there, mostly for text. It’s most prominent as the H3 heading (with that “Sex on the Floor” color as text shadow). | |
| #F6F6F6 | This was a new one for me. It’s only used on the front page for the box that I call “topfeatures.” That box used to be a darker color but when I used the orange mentioned above for the headings it looked muddy, so I needed something that was not quite white but would allow the headings to pop. |
As I mentioned, I use ColourLovers.com to find new interesting color combinations and to play with palettes. It’s a cool site.
Likin’ that website. Might use it to help out with my designs. Did you use adobe?
[Reply]
Comment by WoodworkerPlus — October 13, 2009 @ 3:08 pm
I used Photoshop for pretty much all the graphic stuff. The logo itself was done in Illustrator. That was the first time I’ve ever bothered to use it for anything cause I wanted to have it as a vector-based graphic so it can scale to any size without losing clarity — you know, for when it’s on a billboard! ;-)
But mostly I use Photoshop. I try to keep the number of images on the site to a minimum and do most stuff with code. The only graphics used in the layout are the title logo, three different shades of the carbon fiber pattern, two different shades of the diamond bullet points, and a 1-pixel wide image that’s used to give the navbar a little bit of a gradient. It would be prettier with more graphics, but I wanted it to load fast and be scalable to pretty much any size browser window. The biggest trick I did with that is the tech table image on the front page — it fades off into black at the right side so it still appears to scale when the window expands.
[Reply]
Comment by KP — October 13, 2009 @ 3:17 pm