Goodbye Static FBML, Hello iFrame – An Overview of Custom Tabs for Facebook Pages

Facebook has recently upgraded Pages with a raft of new features that are aimed at helping Page owners communicate more effectively.  Amongst the new features are better ways to keep up with activity on a Page, new ways for Pages to share content, new ways for users to filter a Page’s content by relevancy and a completely new system for creating Custom Tabs.

I’ve been looking into what these updates mean for businesses and app designers and have found that the new iFrame system opens the door to bigger and better Custom Tabs.

Read the full article »

Facebook Announces More Ways to Publish to Users Who Click Like Buttons

Design Utilities – Wireframing Template

A key step in my design process is getting ideas down on paper. It doesn’t really matter where this happens, either in my lovely notebook or on sheets of A4, the key is to rapidly get ideas sketched out using good old pencil and paper.

One recent addition to my wireframing toolkit was a Fujitsu Scansnap S1500m – a great document scanner that does double sided scans very, very quickly. I’ve combined this with Evernote to get cloud based, text searchable documents that I can organise really easily.

In addition to Evernote and the Scansnap, I’ve created a custom template that I find is great for creating slightly tighter, hand-drawn wireframes.

We’ve been using this template in the office on all our recent work, with the resulting wireframes getting pinned up on the walls for review, scanned into Evernote for indexing and storage and included in documents that are shared with clients.

The template is light grey dot grid which I find is really good for guiding straight lines without getting in the way (as a more traditional squared paper may).

I don’t know if people will find it useful but I’ll share it anyway, happy days!

Notebook thoughts – A better way of making contact

As part of an upcoming pitch I have been working away from my computer to remove internet distractions and open myself up to more creative thinking.

So, armed with a trusty pencil and a lovely Moleskine Cahier gridded notebook I’ve been perched in the front atrium of the Round Foundry Media Centre jotting down my thoughts and ideas for this exciting web project.

Some of the notes I’ve made are project specific, but some of them are more widely applicable and I thought they could be of interest/use to others so here is the first in a series of posts explaining some of my thoughts.

Mailto: is dead

As part of this pitch we commissioned some remote user testing (courtesy of the great service www.whatusersdo.com) and one of the unsuspected findings was how people want to contact others when browsing the web.

The problem was this, a user saw that they needed to email someone for more information, they clicked the email address and boom, their computer went crazy! All sorts of alerts and popups from Windows Live Mail, confusion reigned and they were left struggling to work out what to do next. If emailing the person shown on the site was a goal, this user was certainly struggling to achieve it.

The problem here is that there is a huge group of users on the internet that don’t use a native mail client. Instead, services such as Yahoo, Hotmail and Gmail are the preferred choices and often people don’t setup these accounts with traditional mail clients like Thunderbird, Outlook Express or Mac Mail.

My notes on this were simply the following:

People should be able to communicate with a site’s contact without having to use their email or 3rd party software.

In short, if there is any part of your site that lists someone’s email address as a means of contact consider implementing a neat way to show them a contact form with the recipient clearly shown. The user won’t have to leave the site, open a new window or get confused by popups telling them they have to set up their mail accounts.

Think Vitamin » 20 Steps to Better Wireframing

Particle Swarm Experiment 3

The little experiment now has multiple modes and a little system for sequencing them. I think this might be as far as I take this for now, but may end up coming back to it to add some new bits and pieces.

Read the full article »

Particle Swarm Experiment part 2

I’m starting to pull the particles experiment into some form of shape now so it’s possible to visualise the underlying shape a bit better. I’ve also tightened up the colour scheme a little bit rather than just using random values.

Read the full article »

A happy accident

Whilst playing with extending the HYPE framework I stumbled across this happy accident. It’s not really what I’d intended the piece to do, but I think it looks really cool anyway.

Read the full article »

40 000 Particles with a Perlin Flow Field using Actionscript

Sounds really exciting doesn’t it but what you see below you is the result of little experiment to see how many particles my computer could handle at a decent frame-rate. I got up to 75 000 before it started to chug but for the sake of demonstration the following example only has 40 000 so that the majority of people can have a decent viewing experience.

Read the full article »

How I made the artwork for Supatronix using Flash, AS3 and the HYPE Framework

Supatronix celebrated 7 years of broken beats and bass this year and for their birthday artwork they wanted something a little bit special. The brief was for a pixelated number 7 and with my recent interest in generative art I thought it was the perfect chance to get my hands dirty and produce some artwork. I chose to use the HYPE framework for most of the job as I knew that the BitmapCanvas class would allow me to capture the image at a high enough resolution for print.

Version 1

The idea I had for the art was to set a number of squares randomly vibrating and allow them to move about the canvas area. Colours were sampled from an image that I’d made in Photoshop of a slightly pixelated number 7. The colours were updated roughly every half a second to allow the colours to bleed out from the original shape. This produced some really nice, highly detailed images but it was felt that the number was getting lost in the overall design so I started to look into other ways of bumping up the definition of the main shape.

Version 2

My first update was to set several boids swarming to different points within the target shape with colours being pulled from a the colour pool I’d set up using HYPE. To me this looked absolutely ace, but was far too abstract so another angle was needed!

Version 3

The colours struck a chord with the client though so I had made a step in the right direction there. My final tweak was to change the swarm to random placement of squares. The squares wouldn’t leave the abstract trails of the swarm, but could be given the bright colours to help the main shape stand out. This worked really nicely and created the exact effect that I was after. Several variations and sizes followed before the final design was signed off.

Producing the artwork was a great learning experience and I’m glad to say that the end product has been really well received. I’ve had several requests for high resolution versions and the next set of images for Supatronix are all going to be using a very similar style!

Gallery of designs from throughout the process

See the full gallery on Posterous