Kurafire and Smashing Mag on Pagination

Faruk Ateş provides some suggestions for implementing pagination, all of which I would agree with. After the suggestion list, Ateş shows quite a few examples and discusses what's good and bad about them. There's a huge list of examples on Smashing Magazine as well, although some of them are a little fussy.

Oddly enough, while a few of the examples show the method of using an ellipsis plus the last few page numbers as a way to show number of pages, Ateş doesn't count that as a recommended practice.

Here's a screenshot of Flickr using this method. I like Flickr's as an example because it's as straightforward as ou can get with no fuss.

The practice of showing the an ellipsis plus the end pages is one of the pagination conventions I've been using for years and is one I'd add as a more explicit recommendation to the lists above.


Shades of Gray: Wireframes as Thinking Device

Will Evans discusses how he uses wireframes in his design process. The story is one you’ve probably heard before. It’s a description of concept design, using wireframes as the tool for finding the right design. One could use sketching just as well.

He’s talking about that path we take as designers to frame the problem for discussion, extrapolate solutions from that discussion, and generate possible solution concepts. He calls his process one of divergence, transformation, and covergence. This maps to a common cycle in design where there is a lot of front-loaded generation of ideas and further and further reduction of solutions as the process unfolds. There’s a great diagram in Buxton’s Sketching the User Experience on page 146 (based on Pugh’s 1990 work, Total Design) which discusses the waves of expanding and contracting generation and reduction that happens as designers find focus. The right design emerges at the end of the process of ideation and selection.

It’s interesting to read Evans’ description of his thoughts during his design process, as it mirrors what Buxton and Pugh describe. We need to hear more detailed accounts like his, that fill in the picture for other practitioners, and hopefully impress upon some of us different ways for practicing our craft.


Mac Tip: Mounting a Server Automatically

One of the things I’ve always found a chore, being a producer of graphic documents, is versioning and organizing the docs for a team. I’ve had to use different tools like Source Safe, Sharepoint, Basecamp, and just shared drives to this. One nice thing I like about working with our Traction server is that it does Webdav for document management and file versioning. That’s one of the projects I’m working on a preview release of to make the web-based interface a bit more friendly.

The thing with Webdav is that I can mount the shared folders in my Mac Finder and drag and drop tons of documents in there without going to the web site. But I don’t want to have to manually connect to the shared folder. Luckily it’s easy to have the Mac OS automatically connect to servers when you log in. Someone tweeted today wondering how you do that, so I posted a screenshot showing how I’ve set up my Mac. You can do the same thing with whatever share point or server you use.

Here’s the steps:

  1. Make sure you’re in the Finder. Connect to the server using menu Go > Connect to Server, or keyboard shortcut Command-K.
  2. With the volume mounted, open System Preferences > Accounts, and select your user account. Click the Login Items tab (you may need to click the lock icon in the lower left to edit login items).
  3. Now just drag the mounted volume from the Finder in to your System Preferences > Login Items list.

That’s it. Now your Mac should automatically try to connect to your server volume whenever you log in, and it will show up in your Finder.

Raphael JavaScript Library for Vector Graphics

Henrik pointed me to Raphaël, a nice JS library for generating interactive charts.

Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. In case you want to create your own specific chart or image crop-n-rotate widget, you can simply achieve it with this library.

Raphaël uses SVG and VML as a base for graphics creation. Because of that every created object is a DOM object so you can attach JavaScript event handlers or modify objects later. Raphaël’s goal is to provide an adapter that will make drawing cross-browser and easy.

Via tweet from Henrik Lied


typeface.js: Rendering text with Javascript, canvas, and VML

I just came across typeface.js, a type face replacement method like SIFR and FLIR, that lets you embed custom fonts in your pages using CSS. On the backend, javscript is used with or VML to draw the glyphs for your fonts.

Compared with SIFR, this suffers from some issues. Biggest one perhaps is that you can’t select text since it’s rendered as an image. Not so with SIFR. I wouldn’t go using this method for body text, but if you’re already considering doing image replacement for elements like headings, this would be a library to watch. There’s bound to be accessibility improvements in the future using methods that put invisible text over the image, or something like that.


Konigi on Twitter and Facebook

It seems it’s time to start spilling out some of the meta-discussion in my head–the monologue I guess–about what I’m doing here on Konigi. So I started to post announcements and thoughts about what I’m working on with a Konigi Twitter account.

Basically, I feel like I want to separate Konigi-specific postings from my regular Twitter stream so I can update interested readers via that account, as well as post more work in progress commentary, observations, and announcements related strictly to Konigi. So if Twitter suits you more than RSS or Email, or if you’re interested in my back-channel banter, you can get updates there.

There’s also a product page for Konigi now on Facebook.


UX London

UX London is a three-day event for user experience designers that combines a day of inspirational conference with four half days of practical, in-depth, hands-on workshops, all presented by some of the biggest names in the industry. Speakers include Don Norman, Leisa Reichelt, Dan Saffer, Luke Wroblewski, Jared Spool, Jeff Veen, Eric Reiss, and Peter Merholz. If I were in Europe I’d definitely want to be there.


Doing Sketch Iterations

These are just more illustrations of the process I’ve been using for design iterations. When I have the Konigi notebook available, I’ll be doing some screencasts to describe this process in detail, and why I felt the need to make these graph paper notebooks and pads.

What you see above:

1) Annotated UI Spec (Wireframes) after design review.

2) Sketches for design and new ideas, on the Konigi Design Notebook.

3) Refined sketches, inked and annotated on Konigi Wireframe Graph Paper.

4) The Pentax DSmobile 600 scanner I use to scan and post the sketches to our site for further discussion of design iterations and new ideas.