Having neglected the blog for several months now, I was long overdue a blog post, but thankfully I  finally have something worth blogging about. This time, the subject is prototyping, a topic which often leads to lively debates amongst those who design and build stuff for web/desktop/mobile.

Before I delve in, a bit of background.

My interest in prototyping is based on two realisations that have dawned on me (and many others) over the past few years.

• Building a functional prototype, without being bound by technology or medium is hard. Whether you use basic or complex prototyping tools, the results are *never* quite as good as they could be.

• The results you get when using prototypes as communication tools with clients, stakeholders and users are often very favourable. Yet prototypes are still quite rare, often forsaken for flat wireframes which are ambiguous and ill conceived.

Prototypes are simply better at conveying the dynamic and interactive nature of the products and services designed and developed in the field of Interaction Design. Annoyingly, quite a lot of interaction design is still delivered in rigid and flat documents that fail to inspire. This is detrimental not only to the people who pay our salaries, but to the profession as a whole.

There’s got to be a better way?

Last Friday and Saturday I was fortunate enough to attend UX Bootcamp (organised by Leisa Reichelt) on the topic of Prototyping in Code. The Bootcamp aimed to provide a guidance into how to best approach prototyping using HTML, CSS and JQuery, which are pretty much the lingua franca of the web.

The Bootcamp itself was very informal and provided the ideal environment in which to get stuck in and tinker, with expert guidance provided by Peter Gasston and Anna Debenham (as well as copious amounts of tea and coffee). I would recommend attending this Bootcamp if you’re looking to learn how to begin prototyping in code.

I have taken some time to summarise my experiences along with some links – as provided on the day -  and hope that this will help anyone thinking about prototyping in code to give it a go.

Getting started

CSS is your friend! Frameworks/Boilerplates are an easy way to start prototyping quickly. Below is choice selection of some popular ones:

• Skeleton boilerplate
• 320 and up  for mobile first
• Blueprint CSS  provides a flexible grid, basic typography and styling.

Frameworks allow you to get up and running fast. It’s up to you to find ones that suit what you are trying to do, and become familiar with how they work.

Tips & Tricks

• Frameworks can help you define layout using grids & columns (we used Blueprint CSS).
• Consider using columns layouts when you get started. A 24 column layout for example is very flexible, because it can be divided by 2, 4, 6 and 12, therefore accommodating UI elements of various sizes.
•  Identifying all the different UI elements of your design will guide how you choose to build your prototype, and guide how you will write your markup.

This is particularly important. Think of it as an architect’s blueprint. It will help you write your HTML in a clear and logical manner.

•  The <div> element is your BFF. It is the most useful for creating layouts.
•  Nested divs can be used to define sub layouts for things like headers, sidebars, footers.
•   Semantic HMTL elements such as <form> allow you to quickly mock up functional prototypes using stock components with basic styling. Further styling can be added by simply adjusting CSS attributes for the <form> class.

Getting layout right first time is nigh on impossible, so it is very much a case of trial and error. There are some links below which can make this process easier (Espresso is particularly excellent).

•  JQuery can then be used to add interactions very simply using  JQuery library interactions.
•  CSS3 can then be used to style your prototype to the degree of fidelity you desire. CSS is fully fledged, allowing visual effects ranging from drop shadows to animations.

JQuery can be a bit tricky at first. The syntax in which it is written in is not particularly user friendly, but once you get the hang of it, it is very powerful, and makes your prototypes come alive.

 
Tools to help you on your way

•  Use tools like Espresso (paid) or JSFiddle (free) to code & preview your work as you go.
•  Use tools like Hipster Ipsum or Lorempixel  to populate dummy content on your prototype.
•  Use debugging consoles such as Mozilla’s Firebug add-on  or Chrome’s built in Inspector (right click “Inspect element”)
• Comment your code, and indent properly. Trust me, it helps LOADS.

It goes without saying, that once you become more adept at writing your own markup and code, you needn’t use boilerplates, but go freestyle and knock up whatever works best for you.

Takeaway lessons

• Boilerplates can help speed up the process by allowing the user to get stuck in without needing to define any CSS before starting. The need for boilerplates decreases as your technical skill improves.
•  Learning to prototype in markup and code not only provides all the insight that prototyping in general provides, but helps give an initial technical insight into how developers  can  tackle challenges before commencing build. One caveat however, is that prototype code should probably not be re-used, unless you’re some kind of savant.
•  Prototyping in markup and code allows many different ways to solve a problem.
•  HTML, CSS and Javascript are the lingua franca of the web, as well as being open and accessible.  Prototypes will work natively on mobile, tablets , desktop machines and TVs. No need for porting, using proprietary technology or hacky workarounds.
•  CSS style guides can be stored centrally and any updates will cascade to any instance in which it is referenced. CSS can be crafted and updated by multiple team members, and overridden locally for localised styles.

That’s about it for this post, I hope it’s been helpful. If you have any questions or comments, feel free to hit up the comments below.

Here is the follow up to last year’s original Techno Time Machine Mix. Similarly to last year, this mix is a collection of tunes which have sat around on my PC for months on end, waiting to be mixed. Luckily, I managed to finally get a handle of Ableton Live (as I am regrettably , sans hardware) and whipped this up.

Techno Time Machine Vol.2 by dnfisher

For the chin strokers:

Tracklist:

1. Juho Kahilainen -Sleeping with the Lizards (Bpitch Control)
2. Sunshine Jones – If you wouldn’t mind (Tiger Stripes Remix) (King Street Sounds)
3. Shonky – Coco feel and love shonk (Contexterrior)
4. Martin Eyerer, Oliver Koletzki – Pulse your hands (Audiofly X) (Kling Klong)
5. Federico Grazzini – Tokyo (Aloe Records)
6. Popof – Blow me down (Mistakes Music)
7. Anton Pieete – Handsome (100% Pure)
8. Funkwerkstatt – Sonde 03054 (Superfancy Recordings)
9. Butch – On the line (Oxia remix) (Great Stuff Recordings)
10. Koen Groeneveld – Wake Turbulence (Abzolut (Spinnin))
11. FPS – Bad Habits (Dataworx Digital)

All tracks can be found on Beatport.

Enjoy.

The video below shows a very interesting and seamless implementation of a ‘fling’ gesture (on a Pioneer WWS-DT101 Discussion Table), which allows a user to flick content to nearby devices (wall mounted TV in this case), regardless of their orientation. This is an important problem to solve, as a device marketed as a discussion table doesn’t really work, if only people on one side of the table can meaningfully see the subject being discussed.

I have no doubt that the ‘Flick’ gesture to transfer content to other devices will become mainstream relatively soon, as the concept of it works equally well between laptops/tablets/mobiles and televisions. This subject is of particular interest to me, as my university dissertation dealt primarily with these issues.

I had the chance to take a few pictures of Derwent Tower AKA ‘The Dunston Rocket’ in Gateshead during my Easter break last week.

Despite it’s hard edges, gigantic flying buttresses and robust concrete frame, I have always been enthralled by the building. I can’t help but marvel at the optimism af the time when this building and the now defunct Trinity Square car park (of Get Carter fame) were designed and built. These buildings were supposed to embody the sentiment of progress and prosperity in what was a sombre post war decade.

Unfortunately, the Derwent tower is now in the early stages of demolition, so I was glad to get some images of it, as well as the PhotoSynth above for posterity.

A note about Photosynth; If you have an iPhone/iPod, download it now. It’s probably the best implementation of Augmented Reality, by overlaying a guide over a live view to help construct a 360 degree panorama. The stitching algorithm however does not like low light situations, and areas which lack texture, as results can be very poor at times.

It has been revealed that Apple iPhones secretly log the locations of devices on a system file which is held on the device and also synced across to the machine which holds it’s parent iTunes account. This file is very easily accessible and has raised some fears about privacy, and the motivations behind Apple’s inclusion of this functionality, and moreso why they did not chose to disclose it.

The map above shows the locations logged by my device in the last 15 months. I am not too worried about anyone know my location, as I i’m well aware, not many really care where i’ve been.

Despite the privacy concerns, I actually don’t think it’s much of an issue, if you think about how much we are tracked anyway with credit cards, oyster cards, CCTV etc.

As it turns out, this location harvesting functionality has been well documented, and is not shared with Apple or affiliates in any way shape or form.

It appears that the the media have yet again caused mass hysteria distorting the truth over something relatively trivial.

If you wish to see what locations your phone has logged, go to this website, and download the app. Works for Mac OSX.

petewarden.github.com/iPhoneTracker/

Or more accurately, video. This timelapse by Terje Sorgjerd is nothing short of breathtaking. Perhaps i’ve been watching too much of Carl Sagan’s Cosmos, but I always find seeing things like this utterly humbling. There’s nothing like a bit of perspective to remind you that some things are simply not worth worrying too much about.

The Mountain from Terje Sorgjerd on Vimeo.

Not quite a personality as you or I know, but more like the perceived notion of what someone is like, except that this time, that someone is actually a machine. This video represents a wonderful insight into all the nuances that went into designing the public face of Watson, the IBM research machine which went onto win the Jeopardy gameshow in the United States.

Some aspects of Watson’s voice carry echoes of Kubrick’s HAL9000, which to some extent, had many of the same criteria to fulfil.

A few images from the amazing Eden Project, taken last Autumn.

Full set over at Flickr

An interesting TED talk about the emotional bonds humans form with technology.

This video shows how technology which has been around for years (in your electric toothbrush, and cordless kettle) can make electric cars feasible in urban areas. Note: the video has no sound.

While I appreciate that the cost of rolling out infrastructure to support a new paradigm of personal transportation is a limiting factor, I question the motives of large corporations, and of our governments, and their vested interest in keeping us dependant on petroleum.

I sincerely hope that innovation culture in business and increasing enthusiasm and support for technology amongst consumers in first and third world countries will help make this a reality over the next few decades.