I just finished designing the web site for Medaille College's Write Thing reading series. I guess calling it a "site" is a stretch, it is only a page. But that may change in the future.
In your...eye?
The idea for the glare-silhouette design for this page came to me while I was staring at my screen thinking: what the heck am I going to do? The audience for this page is going to be the artsy-types, but more specifically writers. How can I relate to them? I am not a creative writer, in fact often "creative" writing in my line of work is counter-productive since it leads to complexity and makes code hard to manage! So I decided to start building the html skeleton and I'd style it later.
However, as I started to code the page, I became annoyed at the glare that was coming of my screen. I have a glossy glass screen on my Lenovo N100 laptop, not one of those matte finish plastic screens that some people use. I began to have to strategically position my head to block the glare so I could see what I was typing. That planted the idea in my head. Then I thought, "Hmm... what am I doing right now..? Writing!" No, I was not writing a poem or novel, but I WAS writing something. And, most writers, I am sure, have dodged glare at one time or another, using their body to shield their screen. I liked the idea (obviously) of having the faux-glare at the top of the screen and projecting the feeling that a writer would've had as they wrote their works, which they are coming to Medaille to discuss. So I imitated glare, and added a silhouette, not too complex which would be distracting, but clear enough for you to get the idea of what was going on.
Blues...
Woohoo! I am done! Right? Not quite, I forgot about a little problem. Branding. Now, I did not TOTALLY forget about it, but I kinda-followed-guidelines-but-didn't-really. Ok, you want me to add the school's actual logo? Sure, that sounds reasonable. And... Oh... I haven't used enough blue? Well, that's a little more difficult.
Where do I start? Ok, well maybe I can change headings to blue!? No, that doesn't work. Maybe, shift the background to blue? No again. Through trial and error, and using some yellow to balance medium blue, I got it to look "Medaille-y" enough.
Gender neutral
Now I am almost happy, but I really don't like the fact that I have to choose between a male silhouette and a female silhouette. Maybe I CAN HAS BOLFZ? JavaScript to the rescue! I added a little script, referencing jQuery. I can hear it now, "Why include the overhead of loading a library like jQuery with a script so simple?" Well, in my opinion, JavaScript libraries are no longer overhead, since Google started serving them. They are cached (for all intents and purposes) forever, and are only downloaded the first time you visit any site that uses Google's AJAX Library. This brings download time to near-zero, so I no longer have a problem with using libraries even for tiny scripts like this.