Notebook

As you may know, I've been working on an html prototyping toolkit that's in its infancy, and available to play with in pre-release form here on Konigi. What you also may know is that I hope to put the code in a repository so that people can contribute UI component markup/css/js to it, but what I've got is not mature enough yet.

A few people have already started sharing their ideas and tips with me and I've felt like it's kind of a waste to have some of these discussions happen offline, so I want to step out and start these discussions in a wider venue.

I've created the HTML Prototyping Google group so that those of us who are interested in going deep on HTML wireframes or prototypes can talk about what we're doing and how we're doing it. Hopefully we'll give each other advice and find ways to learn new techniques or refine our craft. The group is NOT intended to focus on what I'm doing with the protokit, but is there for anyone who's using any method to do HTML prototyping. I will be there every day to monitor and participate.

I will look at every member that comes through this group and promise to try to keep the discussion on topic and keep flaming, trolls, spamming, and advertising from littering the list. So if you're interested, sign up and introduce yourself.

Let's go.

Basil Safwat does a very thorough comparison of the the tabs in Mac Safari and Chrome, pointing out the subtleties in the close button positioning and behavior. While Mac close icons are on the left by convention, Chrome positions them to the right of the tab and keeps them visible, while Safari positions them to the left and only displays the close icon on hover. I initially had to relearn the close button position because Firefox also places them on the right. Both handle tab resizing in a way that allows you to close multiple tabs while keeping the cursor in one position while clicking the close icon repeatedly.

Check out theinvisibl for the screenshots and complete deconstruction.

Build It With Me is a free site that connects like-minded designers & developers with the same goal: create cool & useful apps.

Getting funding for your app idea is hard and often unrealistic. Most of the time you may just need to connect with a partner who has a skill set you lack to finish off your app. This is where Build It With Me is comes in, connecting you to those people. Skip the funding. Build It With Me will help you bootstrap your ideas into actual apps.

Check it.

The Plan

I've been thinking of two things a lot with the holidays arriving. The first is, how can I provide a discount on Konigi stuff to my friends who use the notepads and sketchbooks. The second is, how can I find a way to make my Christmastime donations interesting. When I was an avid Lala trader a few years ago, I tried to see if I could get one of the many CDs sleeves I marked back and vowed to make my donations coincide with the event. I never got a sleeve back, but made the donations anyway and was included in a WashPost article because I tend do end of year charitable giving.

Last year I ran a discount code for Black Friday/Cyber Monday. This year, however, I thought I would forego a discount and instead donate 50% of all sales revenue--not just profit, but all sales-- to 2 charities. I figure the cost of these little sketchbooks and tools is not so great, and we can all give a little while getting something back. The donations will be made to 2 local organizations devoted to fighting poverty and hunger.

The Beneficiaries


Robin Hood is an organization that gives 100% of donations to poverty-fighting organizations with programs focussing on Early Childhood, Education, Jobs & Economic Security, and Survival, and uses sound investment principles to sustain in its philanthropic mission.


The New York Food Bank organizes food, information and support for community survival and dignity. Working to end food poverty and increase access to affordable, nutritious food for low-income New Yorkers throughout the five boroughs, the Food Bank's initiatives focus on direct services, food sourcing and distribution, nutrition and health education, financial empowerment, disaster relief and policy and research.

Participate

Thanks for participating with me. When you buy one of the Konigi products in the store, you are making a small contribution to these philanthropic organizations . I will be doing an update to the icons to help entice you to make your purchase. I feel fortunate to have something to trade for dollars in donations, and to have the help of my friends and readers.

Google launched a new behavior on the search page that hides everything but the logo and search form on load, and fades in the rest of the surrounding interface when the user moves the mouse. The idea is to give focus to search for the primary use case, where a user hits the page and starts typing without moving the mouse. They talk about the new behavior on the Google Blog.

Nick Finck's holiday gift ideas for UX designers is an annual blog entry that I hope to look forward to for years to come, and not just because he lists Konigi among the great list of suggestions. :)

[I]t is once again time for the gifts for user experience geeks post for the 2009 holiday season. Just like last year this list is a collection of items I have come across over the last year that would make the ideal gifts for UX geeks like Information Architects, Usability Specialists, Interaction Designers, and even Web Designers.

Balsamiq announced that Mockups now supports export of multiple canvases to a single PDF that includes links. This means that your multi-canvas mockups can now be used as click through prototypes in Acrobat. Download the demo PDF file for a test drive.

I just discovered Touch User Interface, a blog that reports regularly on touch interface projects, and provides links to resources related to designing for touch screen interfaces.

This is a demo of an HTML Prototyping Toolkit that I've assembled from a few open source libraries. The idea is to create something super light so you can sketch your wireframes in HTML.

Using Templates

I'm using a jQuery template for creating columns in a grid.

Columns look like this:

{cols}  <-- grid layout container
  {col12} <-- 12 unit column
  {/col}  <-- closed column
  {col12last}  <-- 12 unit column
                   last in container
  {/col}
{/cols}  <-- end of container

You can try out the prototypes I'm playing with here:

http://www.konigi.com/protokit/projects/tsi-proteus/index.html

If you have Firebug, inspect the page to see what the templates are building.

Works with ixEdit

As I said above, this is meant to be super light and uses existing libraries. I'll start posting the code when it's cleaner.

This an article from March 09 by Kevin Vigneault of Viget that explores some techniques using Javascript to create more usable password inputs in forms. The ideas range from using a checkbox or button to temporarily show the password or changing type from text to password when the input is not in focus. Great ideas.

If you're interested in this topic, you might also want to check out Chris Dary's experiments with password masking.

Leah Culver discusses the design of hybrid sign up / login forms, showing a few examples and the final form as implemented for Leafy Chat. Uses the familiar I'm a customer/I'm new here radios that we know from Amazon, but positions it before the password field, which I find an improvement over the Amazon implementation. Lots of ideas in the comments.