Amir Chaudhry

thoughts, comments & general ramblings

Wireframe demos for OCaml.org

Making mockups

Over the last few months, I've been working on various aspects of the OCaml.org design project. This covers things like the design, information architecture and how to incorporate new functionality. One of the methods for thinking through these was to put together a bunch of wireframes using Balsamiq and use these to express (and generate) ideas as well as get feedback quickly.

If you haven't used wireframes before, think of them as a slightly more advanced form of sketching things out on a whiteboard. The best aspect is that it's far quicker, easier and cheaper to iterate using wireframes than on an actual website. As you'll see below, you can also convey a lot of information about how a site might work by showing people a clickable demo.

I want to make this work public and I thought the best way would be to show you some screencasts of how the upcoming OCaml.org website might work and also make the demo available to all of you. The three videos below cover three aspects of the site and I'd encourage you to go through them in order (about 16 minutes in total). Apologies if my screen isn't particularly clear in the videos but you can visit the demo for yourself and see things in more detail (link and info on feedback at the end of this post).

Video walkthroughs

For those who'd like to watch the videos back-to-back and scaled to fit your browser window, you can view the Vimeo album in 'couchmode'. Otherwise, individual videos are embedded below (total time 16m17s).

Public wireframe demo

A demo you can interact with can be found at OCaml.org wireframe demo and image files for each page are available on the github ocaml.org wiki. Please bear in mind the following:

  • Not everything that looks like it might be clickable actually is (and vice versa). There'll be a toggle on the bottom right of the browser window that will highlight what can be clicked.

  • There are parts of the site which are 'work in progress' and are marked as such.

  • The designs you see aren't necessarily final. Your feedback will help shape our decisions and the best way to provide it is via the infrastructure mailing list.