Today I received my lovely stainless steel UI Stencils for designing for the web and for the iPhone.

… so I decided to take the iPhone stencil for a spin in my Moleskine sketchbook.

Amazingly, the stencil fitted almost perfectly to the grid lines in my book. So I decided to map it out and publish it here so anyone out there using a gridded Moleskine sketchbook (let’s face it they’re the coolest) can use this guide to mock up there iPhone ideas.

You might have noticed that the stencil doesn’t fit perfectly so what I’ve done is rounded it up so you can use the grid as a reference if you don’t have one of the stencils.

So I finally got my invite through and signed in to Google Wave. It was cold and lonely in there.

Hello, I whispered. Is there anyone here? I noticed a list of contacts.
Hey, there are ‘others’ I thought. But how do I know if they are in here also?
I tried waving at one of them … nothing. I pinged one of them … and waited.

Eventually I noticed that one of my friends had replied to me so I continued the thread we had created and waited for their reply … and waited. You see here’s the first problem with Wave in these early days. It’s impossible to know if any of your Wave contacts are actually online and connected to the service. It was only after careful orchestration that I was able to converse with a friend of mine and that was after a round of emails and a couple of frustrating attempts at synchronisation.

I’m not sure why I found it so amazing that I could watch my friend as he typed in real-time. It’s something I’d seen many times before and in much richer ways. Still, it was impressive. The main thing my brain had trouble dealing with was whether the tool was an instant messaging device or an email alternative. It’s kind of both but with disadvantages in both camps. As an IM tool it is very easy to lose yourself in the thread and just as easy to insert your new messages elsewhere which completely loses the thread. For the same reasons it is confusing as an email alternative but this is perhaps where it’s strengths lie. What I mean by this is that despite being a bit confusing as an email alternative because of the way it allows you to insert messages anywhere in the thread this is why Google Wave will become a popular way to generate collaborative ‘conversations’ that sit somewhere between email and more static documents. How many times have you filled your in-box with small conversational emails between you and your friends? You could have used tweets or IM but needed a record of the thread and also needed something a bit richer … hey, who wants to see this YouTube video of a kitten being shot out of a cannon?! If this is you then you are going to love Google Wave.

There are some advancements I would like to see though. As mentioned, being able to draft your messages in IM mode would simply involve committing the draft after a carriage return instead of pressing the ‘done’ button, which is a pain when you are used to using your keyboard. Not sure of shortcuts as yet. Maybe IM mode should also prevent you from inserting messages mid-thread to maintain its temporal trait. I’d also like to be able to collapse the thread like a Tree structure. This will also help people transition to the non-linear dialogue that Google Wave proposes.

Another major headache in these early days is the lack of notification that your contacts are online. I have found a couple of options so far …

http://thatsmith.com/2009/10/google-wave-add-on-for-firefox – Thanks Chad.

and there’s an app for your OS X Menu bar but you need to build it yourself in XCode … which was great! Grab that here … http://github.com/hiroshi/unofficial-Google-Wave-Notifier/downloads

Overall I can see that GWave will definitely become an integral part of my intercourse especially in business. I can foresee a BaseCamp plugin that will allow me to publish and maintain messages and ToDo items as a Wave with annotated screengrabs and casts.

UPDATE: It looks like there will be a Google Wave extension for synching Waves to Basecamp … and it will be called ‘Campy’. All the extensions so far seem to follow this convention with ‘Growly’ also allowing Growl style notifications of updates to a wave. Read more on this here.

ANOTHER UPDATE: In answer to Seb’s question regarding new edits you can see if an edit is new and unread by the green border on the left side of the field. These tally to become the number of unread edits rather like unread emails in your in-box.

Keith Lang from Skitch sent me this tip …

… and a link to a great extension for your mac that allows you to choose a hex in the Apple colour-picker dialogue.
Thanks Keith.

I recently discovered Skitch and have been raving about it as an Image Markup application. I’ve now also discovered that the Aviary suite also has an Image Markup tool called Falcon that works inside the browser and is coupled with a Firefox extension called Talon for quickly accessing the tools required to do a snapshot. This got me very excited as although I love Skitch for what it does and how well it does it the allure of doing the same thing completely in the browser was too much to ignore. So I’ve done some tests and here are my thoughts.

The Aviary Firefox plugin is great and allows you to launch your Aviary apps via a neat little menu bar button (although I wish it stuck to the design of the other buttons). The snapshot options allow you to choose a section of the screen, the visible area and also the entire page including the complete drop. This is also available in another plugin called Screengrab! and was a very useful way of viewing the design of a site outside of the browser. You can grab sites you admire. Like this one.

The first thing I noticed was that after selecting my snapshot area and hitting the save button it launched Aviary’s default Image editor Phoenix. I then had to save and create a file to open in Falcon. When I did eventually get to edit my image in Falcon I found it to be pretty much the same as Skitch as far as toolset and styling. Performance wasn’t as fast as Skitch overall but this is due to the Flash player and being inside the browser. Personally, this is the biggest issue though. For what I need to do with a tool like this the overall experience was too time consuming and I will be sticking to Skitch for the time being.

This is not to say that the Aviary suite will not be used. It’s important to remember that the Aviary snap will allow you to quickly get a screengrab into a very powerful suite of applications so if your work involves a bit more than just making notes and drawing arrows then this will be the better option. For example, if you were a designer working on some branding ideas and had snapped a logo you liked for inspiration you could very quickly get that snapshot into Raven (Aviary’s vector editor) and draw some curves out over the logo; rapidly generating some ideas for use later. Photographers could grab a snapshot of a photo from a site and open it in Peacock (the effects editor) so they could quickly play with some effects and ideas to use in their own work.

Aviary – I would allow users to login via the Firefox extension and set Falcon as an option when opening your snapshot.
Skitch – something I’d like to see in your tool as it stands is the ability to select an area or the entire snap and scale it up WITHOUT interpolation. I need to zoom in to show individual pixels sometimes.

Another feature I would love to see in any of these tools is the ability to draw a rect around an area of the snapshot and automatically render the rect’s dimensions in pixels next to the rect area. Sometimes I want to measure an area of the screen. The same kind of tool for stamping out the HEX colour of the pixel I’ve clicked on with an accompanying arrow or crosshair. This would be a great way for designers to deliver their designs to developers with dimensions and colour values all set out for them.

http://aviary.com/tools

http://skitch.com

UPDATE:
doodle.png on Aviary.
The plugin is available here.

Finally a cross-browser, cross-os browser testing platform …

BrowserLab provides web designers exact renderings of their web pages in multiple browsers and operating systems, on demand. BrowserLab is a powerful solution for cross-browser compatibility testing, featuring multiple viewing and comparison tools, as well as customizable preferences. Since BrowserLab is an online service, it can be accessed from virtually any computer connected to the web. Also, Adobe Dreamweaver® CS4 software users have access to additional functionality such as testing local and active content.

Now I wonder if it will also allow for multiple plugin configurations.

https://browserlab.adobe.com/index.html#
http://labs.adobe.com/technologies/browserlab/

I discovered Skitch a few days ago now and it has suddenly become completely invaluable to me. Skitch is a screen-grab app for OS X that allows you to quickly annotate and sketch on your grab before quickly uploading it to their site (or Flickr, FTP etc) and then link to or embed it into a blog. Note the use of the word ‘quickly’ there. That’s the key to the success of this tool and why it has become a staple in my arsenal of day-to-day tools.

I use this to grab images of UI work I’m doing, annotate it, upload it and then post a link to the image within a Basecamp message for my client to look at. It’s proven really useful.

While I’m waxing lyrical about tools I’m using here’s a quick list of other great tools I’m using and couldn’t live without at the moment with a quicker reason why.

Firebug – Firefox plugin for debugging CSS, HTML and network activity as well as Actionscript logging via Thunderbolt.

PixelPerfect – overlay a comp in your browser so you can match your development to the designers vision. This saves you a lot of time and effort screen grabbing your dev in the browser and overlaying the results in Photoshop with the original design to see if it all matches correctly. It is still a bit fiddly though and I would love to see an ‘onion-skin’ mode in Apple’s Preview app so I can just sit a window over the browser to do the same thing.

Pixus – this little AIR application is the nicest set of screen calipers I’ve used yet. I did find a screen ruler AIR app called ‘rulers’ but it didn’t allow you to change the registration point which rendered it almost useless.

Evernote – I use this all the time now. Any notes, images, ideas, links etc all get clipped to my Evernote account for safe keeping. Will be the first app I buy on my iPhone when I get one too.

DropBox – store files in the cloud but drop them in there via the finder as if it was on your machine. This works just like your iDisk but allows you to quickly grab the public link and paste it into an email.

MAMP – virtual apache server and MySQL server. Just works instantly. I used to spend days trying to get this stuff to work. Now I can build Wordpress themes straight from localhost.

Basecamp – awesome Project management site online. Even if you find yourself flying solo on a project this app will help you stay organised and in control. Use it with Skitch to post grabs of your work and you will never need to clog up in-boxes again.

Versions + Beanstalk = great subversion management. I’ve tried to setup repositories in the past and have had some success but mainly headaches and have lost the files over time. Beanstalk is a site/service that gives you space to store your source code using subversion. Versions is a really nice Mac desktop app that will then allow you to manage the repositories you create. I know keep all my source code in the cloud so I don’t need to worry if my machine fails.

There’s so many more great tools being developed. Please let me know about yours.

I’ve been seeing a lot of very clever spam getting through Askimet’s net lately. At first they completely threw me and I let them go. It’s only been recently that I’ve delved deeper and realised that everything isn’t as it seems. These are comments I’ve received …

is there a FREE program that i can add alpha channels to png imagesIMPORTANT: please include a tutorial on how …

and this equally baffling one …

Interesting. Not that bad as you are saying. Keep trying. Thanks

These comments were not completely out of context to the posts they were commenting on but were contextless enough to seem … well, odd.

Digging deeper (but not too deep) revealed that the authors were an assortment of retailers and services that could only have been spam clientele. You have to hand it to the spammers though, this is very clever spamming. They seem to be able to generate the comments based on other comments on the same subjects or are able to structure generic comments that fit the tone of the post.

Pearl has a similar problem and a great church sign image here.

Thom James has an interesting post on a similar and much less perceptible comment spamming technique here.

Anyway, I’ve installed reCaptcha to try and stop this. ReCapthcha has a novel way of using the data that users input …

reCAPTCHA improves the process of digitizing books by sending words that cannot be read by computers to the Web in the form of CAPTCHAs for humans to decipher. More specifically, each word that cannot be read correctly by OCR is placed on an image and used as a CAPTCHA. This is possible because most OCR programs alert you when a word cannot be read correctly.

But if a computer can’t read such a CAPTCHA, how does the system know the correct answer to the puzzle? Here’s how: Each new word that cannot be read correctly by OCR is given to a user in conjunction with another word for which the answer is already known. The user is then asked to read both words. If they solve the one for which the answer is known, the system assumes their answer is correct for the new one. The system then gives the new image to a number of other people to determine, with higher confidence, whether the original answer was correct.

Finally, Photoshop Express has arrived with 2GB of space available if you want to pay for it. It’s only in Beta at the mo and has a warning that it may be slow for non-US residents, why this would be the case is unclear as it seemed to work fine for me here in London.

Following on from yesterdays post; I don’t think Picnik has anything to fear from PS-X (?) as it doesn’t have the ‘fun’ features that Picnik has although it does plug into your Flickr library as well.

Adobe have also released Premiere Express via partners like MTV but I’m unsure if there’ll be a stand-alone-browser version. Let’s hope so.

Let’s also hope Adobe release more browser-based apps like Illustrator Express and Dreamweaver Express perhaps. There’s no reason why not.

PhotoBox has been one of those photo printing services that’s been hanging around looking kinda interesting but always too much of a hassle for me to start using. I’ve always hung on in there for Flickr to sort itself out and finally partner with someone in the UK to produce Photo Books and Posters as easily as Moo do. Well, today I noticed that PhotoBox had had a facelift so I took a chance and had a peek. I discovered that they know not only import photos from my Flickr account but they have also partnered up with Picnik so you can edit your pics, add effects and titles so you can really get creative with your publishing. The best bit though … compared to other services, they’re pretty reasonably priced too. Excellent.