Daily Bytes

I was feeling bored so I did this template mockup:



Does it look alright or is it a bit to much CTT style? (private joke)

I decided to change the old design into something fresher (in fact this is kind of a rip-off of the default wordpress template). I have no idea if it's working with IE.

This is all still a work in progress so expect some minor tweaks in the next few days.

By the way this design change is a result of a type B procrastination event.

Even though my first post about my new Powerbook wasn't exactly a praising one, there are a good handful of things I just love in Mac OS X. One of them is the incredible amount of unobtruvise eye candy. I'll just mention a few examples:

• Exposé - The best invention since sliced bread. Not enough to stop missing linux virtual desktops but a genuine brilliant idea (quicktime video).
• Desktop Manager - Mac OS X doesn't come with virtual desktops by default but there are a couple of add-ons that help the common linux switcher feel right at home. Desktop Manager seems to be the best alternative so far and its transitions are just plain beautiful (quicktime video). Virtue seems to be a good alternative but unfortunately it doesn't work in Tiger. Some things I miss are the ability to associate applications to a desktop or to have applications that show in every desktop and having different docks in each desktop.
  
• Genie Effect - Just another example of the extreme care apple took with the visual aspect of Mac OS X. The Genie Effect is both nice and useless :-) When minimizing windows they appear to be sucked into a bottle just like the genie of Aladdin. If you press shift while minimizing you can see the effect in glorious slow motion (screenshot).
  

This is what CSS (with a touch of JavaScript) is all about. Achieving this effect with a table based layout would be nearly impossible.

Try the demo by changing the width of your browser to less than 800 pixels.

Mozilla website has been redesigned. Nice work!

A nice color scheme generator.

The Web Style Guide has a lot of great info on building web sites, but this paragraph just pisses me off:

Web Style Guide: One of the visual properties that Cascading Style Sheets are meant to describe is how elements are positioned on the page. Style sheet positioning allows designers to set margins, to position text and images on the page relative to one another, to hide and show elements, and to stack elements so they overlay one another. In theory, style sheet positioning should provide all the design control needed to lay out visually appealing and legible Web pages. In practice, however, browser inconsistencies have rendered style sheet positioning useless, at least for the time being. Though the W3C specifications for style sheet positioning contain most of the tools needed for good design, Microsoft and Netscape have done a particularly poor job of implementing them, so that properties such as borders and margins display quite differently from browser to browser. If you are creating a site for a diverse audience you should steer clear of style sheet positioning for now and design your pages using layout tables as described below. If standards compliance is a priority, use style sheet positioning for page layout, but keep your layouts simple and be ready to accept variability across browsers and platforms.

Standards compliance should always be a priority, and these guys should know it.

Just finished a new Color Picker based on the FreeDesktop Desktop ColorScheme Specification document.

First I'm using a complimentary color scheme composed of 3 different colors. One for background and two for the foreground.

In this colorscheme several ( 2, 3 or 4 ) colors selected so that thay are on opposing sides of the color wheel - for example blue and yellow, red and cyan. Looks that employ such colorscheme usually convey bold and vibrant impression.

The color wheel normally lets to choose the hue component of a color and sometimes also lets you choose the saturation of that same color. Colors can be seen as composed by three components (hue, saturation and lightness).

Hue: Attribute of visual sensation according to which an area appears to be similar to one of the perceived colours: red, yellow, green and blue, or to a combination of two of them.

Lightness: The brightness of an area judged relative to the brightness of a similarly illuminated area that appears to be white or highly transmitting.

Saturation: Colorfulness of an area judged in proportion to its brightness.

So we will use a color wheel to choose hue (as an angle between 0 and 360 degrees) and saturation (as the distance to the center from 0 to 1).

Having chosen the hue of our first color we now have to choose the hue of the other 2. We will do this by adding and subtracting 120 degrees from it. This way each hue is separated by the same ammount from the next color's hue.

The FreeDesktop specification also talks about cold and warm colors:

Colors with hues between green and purple ( values of 120 to 300 ) are considered "cold" while the rest of the colors are considered "warm". One important application of it is that cold colors do not look very good while oversaturated. They tend to look garrish and irritating, so it is generally recommended to desaturate cold colors, to produce more soothing color scheme. At the same time warm colors look their best when oversaturated.

So what we will do is correct the saturation of warm and cold colors so that cold colors have a maximum of 0.4 saturation and warm colors have a minimum of 0.6 saturation.

Next we will choose the lightness of each color. According to the specs:

From the ergonomics perspective it is preferred that foreground interface elements, such as text, should be in stark contrast with background. There are two way to achieve that: hue contrast and brightness contrast (chromatic and achromatic). Human eye has about 5 times higher sesitivity to achromatic differences then to chromatic, therefore achromatic contrast between background and foreground is preferred.

To figure out contrasting color for given background color we should its Lightness value. If Lightness is in upper 50% of the range, then contrasting color will be dark, otherwise - light. Even if Lightness in the middle of the range, it is still preffered to use very dark or very bright contrasting color, instead of using hue contrast.

So what we'll do is allow the user to choose the lightness used for background and foreground colors.

Now that we have the 3 color components we can try out different combinations and see which one looks better.

Just for the record I've been doing some experiments with color harmonies: method 1 and method 2.

Method 1 - You can choose the hue and saturation from a color wheel. Then select the number of colors you want to generate and the lightness. The page will then generate as much colors as requested with the same saturation and lightness and with equally spaced hues around the color wheel, starting on the selected hue.

Method 2 - Chose the hue from the color wheel, and then choose the saturation and lightness for each of the 3 colors. Each color will have its hue separated by 120 degrees from the next one.

Results still suck ... The theory behind the curtains is here.

Update: New method that I don't feel like explaining right now :-P

Following PTG's idea I decided to use the same technic he used in the Elastic Lawn design at this same blog. From now on my design should cope better with font changes. Ctrl++, Ctrl+- ahoy!