Subscribe: Acko.net
http://acko.net/tag/ui/atom.xml
Preview: Acko.net

Acko.net





Updated: 2016-05-12T20:06:53+02:00

 



OSCMS Talk: Designer Eye for the Geek Guy/Gal

2007-02-14T00:00:00+01:00

Update: I've posted the presentation slides and a video is available as well.

I'll be attending the OSCMS conference in Sunnyvale CA at Yahoo next month. Aside from a repeat of my DrupalCon jQuery talk, (though with a bit more examples) I just submitted another proposal for a talk. It's something that I've wanted to do for a while now:

In meetings and lectures across the globe, people are made to endure hideous presentation slides featuring some of the wildest colors, clip art and typography. Many websites are so confusingly laid out, that you get dizzy from the overload of boxes, images or links. And every day, people receive resumés, invoices and ads ... *cue lightning and thunder* set in the Comic Sans font.

It's enough to make the average designer's hair turn blue, fall out, morph into a ninja and stab him/her in the eyes.

But, all hope is not lost! Contrary to popular belief, graphical design is not some arcane voodoo magic, but a straightforward discipline that values experience, reusability, elegance and good tools just like programming. Just like code, there are plenty of objective ways to measure the quality of a design. However, just like art is subjective, so may two programmers disagree on which implementation is the best. No designer is born with a genetic sense of proportion... it's just that while you were busy writing BASIC code on your C64, they were busy drawing superheroes.

I myself am an engineering geek who's never had any sort of formal design or art training, but has earned the title of "design nazi" on numerous occasions.

This session will teach geeks some basic principles about graphical design (especially on the web), from a geek perspective. This means we won't talk about "visually balanced design" but "here's a good approach to spacing". Soon, you'll be hearing the oooh's and aaah's when you don your designer hat.

You can vote on the session page if you're interested.




Farbtastic Color Picker

2006-07-14T00:00:00+02:00

jQuery Plug-in

Farbtastic is a jQuery plug-in that can add one or more color picker widgets into a page through JavaScript. Each widget is then linked to an existing element (e.g. a text field) and will update the element's value when a color is selected.

Download Farbtastic 1.2 - January 8, 2007 (License: GPL).

Demo

Farbtastic uses layered transparent PNGs to render a saturation/luminance gradient inside of a hue circle. No Flash, no pixel sized divs.

Click and drag over the selector to try it out.

Basic Usage

  1. Include farbtastic and farbtastic.css in your HTML:


See demo1.html and demo2.html for an example (jquery is not included!).

Styling

The color picker is a block-level element and is 195x195 pixels large. You can control the position by styling your placeholder (e.g. floating it).

Note that the black/white gradients inside wheel.png and mask.png were generated programmatically and cannot be recreated easily in an image editing program.

Advanced Usage

jQuery Method

$(...).farbtastic() $(...).farbtastic(callback)
This creates color pickers in the selected objects. callback is optional and can be a:
  • DOM Node, jQuery object or jQuery selector: the color picker will be linked to the selected element(s) by syncing the value (for form elements) and color (all elements).
  • Function: this function will be called whenever the user chooses a different color. It should have the following signature:

    function callback(color) { ... }

    With color the chosen color in hex representation (e.g. '#123456').

Object

$.farbtastic(placeholder) $.farbtastic(placeholder, callback)

Invoking $.farbtastic(placeholder) is the same as using $(placeholder).farbtastic() except that the Farbtastic object is returned instead of the jQuery object. This allows you to use the Farbtastic methods and properties below.

Note that there is only one Farbtastic object per placeholder. If you call $.farbtastic(placeholder) twice with the same placeholder, you will get the same object back each time.

The optional callback argument behaves exactly as for the jQuery method.

Methods

.linkTo(callback)
Allows you to set a new callback. Any existing callbacks are removed. See above for the meaning of callback.
.setColor(string)
Sets the picker color to the given color in hex representation (e.g. '#123456').
.setColor([h, s, l])
Sets the picker color to the given color in normalized HSL (0..1 scale).

Properties

.linked
The elements (jQuery object) or callback function this picker is linked to.
.color
Current color in hex representation (e.g. '#123456').
.hsl
Current color in normalized HSL (e.g. [0.3, 0.4, 0.5]).