The UX Template has been updated (Vers. 2.2) with some minor fixes. The iPhone template was recreated using OmniGraffle drawing tools rather than imported PNGs to shrink file size. Template was converted to flat XML format rather than bundle. Guides cleaned up on all pages.
Mike Rohde has posted his sketchnotes from SXSWi.
The wireframe icons have been updated to add a bunch of new icons and crop the PNGs to 16 x 16 px. Still recession priced at $10, with lifetime free upgrades. If you own this set, go to your account page and click the "Files" link.
New icons: home, currency symbols, light bulb, hour glass, bell, rubber stamp, text tool, drawing tool, layout, calculator, medal, ribbon, puzzle piece/plugin, key, asterisk/new, wand/wizard, music, exit, pagination arrows, mobile phone, iPhone, happy face, and sad face.
For those new to this icon set, the icons are meant for creating wireframes, grayscale user interface design schematics. The downloadable file gives you an OmniGraffle stencil and a folder of PNGs.
Find out more about the wireframe icons.
Leah Buley lists Adaptive Path's favorite sketch tools.
There’s an interesting shift happening in user experience design. After years of making documents that look like they are FEBE (for engineers, by engineers), we’re seeing increasing evidence of the human hand in our own work. Why are sketches and drawing suddenly so prevalent? Well, for one, they can save a lot of time and mitigate the risk of building the wrong thing. But we’re also finding that drawn elements magically invite people into the process and make ideas proliferate.
Whatever the reasons, sketching and drawing seem to be emerging as the next must-have skills for user experience professionals. If you’ve been wanting to beef up your sketching chops, this newsletter is for you. In it, I share my toolkit for sketching like a pro — even if you aren’t one.
Incidentally, I like the Pentel Sign Pen for thick lines and Microns for thinner lines rather than the Sharpie for sketchbook work, but for working big you can't beat the Sharpie. Great suggestions.
http://www.adaptivepath.com/ideas/newsletter/archives/031109/index.php
Google's Chrome Experiments lab showcases some interesting uses of Javascript.
We think JavaScript is awesome. We also think browsers are awesome. Indeed, when we talk about them, we say they are the cat's meow – which is an American expression meaning AWESOME.
In light of these deeply held beliefs, we created this site to showcase cool experiments for both JavaScript and web browsers.
These experiments were created by designers and programmers from around the world. Their work is making the web faster, more fun, and more open – the same spirit in which we built Google Chrome.
Some pretty slick stuff in there. Check it out. You won't need Chrome to play with these experiments.
In the latest A List Apart, Airbag Industries' Ethan Marcotte writes about designing fluid grids, rather than using the fixed pixel methods provided by most CSS layout frameworks. Marcotte describes that the technique of calculating percentages for column widths is the same method we use for calculating font sizes in ems.
To calculate fluid grid dimensions, we first take a base font size of 100%, which is usually 16px in the majority of browsers when not altered by the user. This becomes our context variable. Then we take the fixed pixel size we want to make fluid, e.g. a width in our fixed pixel design, and divide by the context variable, which gives us a relative value for our fluid grid.
Fluid grid equation
target ÷ context = result
For example a 700px column is calculated to be 43.75em.
700 ÷ 16 = 43.75
The one minor exception to the above is that you might have to shave a pixel off your target if you experience problems with your widths in IE because of that browser's rounding behavior.
Users of 960gs may be interested in using the fluid port of that framework.
Grace Smith has posted a lengthy list of articles, applications, and resources related to wireframing.
http://www.gracesmith.co.uk/get-wireframing-the-all-in-one-guide/
Slides from the SXSWi presentation with Nick Finck, Donna Spencer, and myself. The slides cover our introductory overview of wireframes, which led to our 1/2 hour discussion panel afterwards.
I'm a regular reader of Emily Chang's eHub, one of my sources for learning about interesting web app and services. Emily recently launced a new showcase of interesting finds with PicoCool.
A global community dedicated to uncovering the cool, whether in art, design, environment, culture, architecture, fashion, travel or technology. Our community finds and shares tiny bytes and unique content from the world of peer media, social networks and subcultures. We discover upcoming designs, cool products, micro-trends, subcultures, artists, human experiences, innovations, philosophies, technologies, and more.
Somewhere in the undiscovered and the mundane lives real brilliance. PicoCool is about uncovering these microscopic moments when things first begin.
