Cross posting from another blog, I thought to share one more little UI / Javascript / CSS experiment. The idea was to come up a few navigation elements which can behave as both floating (fixed positioning) and scrollable at different times. As a user scrolls, these elements feel as they somewhat stick to other parts of the interface (a central container), and hence the name. Please have a look at the quick and dirty prototype and let me know your thoughts.

Whether you call it an emerging UI pattern or an experiment, the main reason why I did this was to get a better feel for the interaction in a real life project. I also wanted to convey the idea of such a navigation to the client, and visual representations such as sketches or wireframes just weren’t adequate.

Beware, the code is ugly. But then again it’s a prototype, so who cares. :)

Credits: Jakub Linowski

ILoveSketch is a 3D curve sketching system done as an academic project by a few University of Toronto students. The software tool looks like it allows designers to draw out concepts using a tablet based system while automatically approximating the drawn curves in a 3D space. Designers can easily zoom, pan, and tumble through their work space as well as make use of a few gestural interactions for deleting and redrawing lines. Unfortunately, I wasn’t able to actually find the download option to try it out. A design tool like this is perhaps geared more at industrial or product designers, and less so UI interaction designers. Nevertheless I still wanted to share it as I think it’s something really unique and perhaps a bit inspirational. Makes me wonder what a 3D UI wireframe would look like. :)

Credits: Seok-Hyung Bae, Ravin Balakrishnan, and Karan Singh

Here is a Keynote Wireframe Toolkit. For $12 you get components and support for: form inputs, scrollbars, datepicker, tabs, bread crumbs, menus, carousel, loading/progress bars, sliders, annotations, tables for tabular data, a text style guide, a modal window, the 960 Grid System, and ad units. I must say I like the interaction based annotations dealing with things such as: clicks, taps, swipes and drags. :) As Travis writes in his own words:

Apple’s Keynote for iWork is probably not on your list for wireframe/prototyping tools, but it should be. It’s ridiculously easy to use, creates gorgeous presentations, and features full suite of drawing tools and shapes.

Credits: Travis Isaacs

Briefs is a little application toolkit for iPhone based prototypes released by Rob Rhyne. The process is as follows. First, you simply use a visual design tool of your choice to export your image files as scenes or actors. You then attach actions (behaviours) to your actors (screen elements) by writing a BriefScript with the provided syntax. Once that’s done, you compile the script into a binary plist with a .brieflist extension on a Mac and copy it to the phone. Sharing the Briefcast (“brief://”) prototype is also possible by placing it on a server.

A cool idea, but there is a small catch. If I understand correctly, the whole thing is still waiting to get approved to the App Store and there is some uncertainty if it will or not get accepted. Either way, the code is also open sourced and should be available on git hub, so at least it should be available for internal development purposes. In Rob’s own words:

The Briefs toolkit was created for rapidly building & iterating design concepts. It allows one to quickly prototype those concepts and run them on iPhone OS devices. These prototypes run directly on the phone, like actual apps, but require much less time and code to produce than a prototype built using only the native APIs. Less code means faster design cycles followed by more a efficient development cycle.

Find out more at giveabrief.com.

Thinking about filling up the Experimental section of this site, I thought I’d open up the floor for willing designers to participate in generating a few new ideas. Here is what I’ve been recently thinking about:

1) How to document or represent floating / fixed positioned elements? Imagine you’re scrolling in the browser and an element stays in place.

2) How to document or represent text or element size ranges? With the introduction of min and max CSS attributes, some elements are allowed to grow to various sizes. In certain cases we might want to communicate that there is a maximum height or width allowed for text or elements.

I have a few ideas of my own on these which I will be sharing sometime soon, but I thought it would be great if more people submitted their ideas. If that happens, I could turn the next few posts into a compilation of sorts (and build up more of a community feel for this site).

If you’re interested, please submit sketches or visuals by email to wireframes AT linowski DOT ca. Rough is good. Sounds cool?

Jakub

ps. If you have other ideas for the experimental section, feel free to submit as well. :)

Last month Naview went into a beta phase. Congrats! As mentioned earlier, the tool allows designers to quickly auto generate a multi level and fully functional navigation from a text file or an XLS spreadsheet. With the new beta version, Jussi, packed in a few extra features that also allow you to test the navigation with end users and measure results. This is done through surveys that can be easily setup and tested remotely. Since the application is in beta, there is an additional “early access” plan to the already existing free plan and both provide a nice way to get a better sense of how it all works.

Give it a shot and try it out.