3-25-2010 Meeting

Posted on Apr 4, 2010

This was a very informal meeting. We sat around during lunchtime and looked at my collection of [Stephenie Web Screenshots].

Here’s how I got them:

1. I googled “Random Word Generator” and found a link that looked good: watchout4snakes.com. This site will give you a random word. If you want to be more specific, you can go to their Random Word Plus page to choose how common you want the word to be and whether you want a noun, verb, adjective, etc.
2. I then took that random word and googled the word. I never searched past the first page or two, and I always ignored the Wikipedia, Dictionary and news results. I found some pretty interesting pages.
3. I then made the browser into fullscreen view (F11) and put my mouse at the top of the page so that the web address was showing. I then took a screenshot. There is a Prnt Scrn button somewhere on your keyboard.
4. I opened Paint and pasted (Ctrl+v) the screenshot into the program. I then saved the image as a .jpg image with the web address (minus the slashes) as the name. For webpages that had some interesting behavior, I sometimes took 2 screenshots so I would remember the behavior.

I saved all of the images to a folder on my server and wrote a short bit of code to display them with their filenames. You can see the [cref image-display-source-code] Post for the code to do this.

The Discussion

After looking through the images, we noticed some recurring patterns. The images we liked had the following attributes:

• Real or fake translucence – There would be a video or an image with a translucent color block over it – used for text or a menu or whatever. There were also a lot of pages with translucent borders around images or text boxes.
• Gradient – There are a lot of gradient images used for page length. Some are images that fade to a background color. Some are straight color/white or color/black gradient backgrounds.
• Dimensionality – Boxes have shadows. Buttons have a glossy appearance and shadows. Images have reflections as if on a glossy surface.
• Color Overlay – Several pages use a Watermark-looking image that is made with a color overlay in Photoshop.

We dug around and looked at some other sites like www.uky.edu. The elements we were liking were in evidence there.

Scott and I decided we’d be working on some design stuff – Scott for his conference and me for the restaurant.