Getting it ON (the Screen)

Over the past few weeks I've been spending a lot of time doing two things:

1. Sketching ideas on paper
2. Writing about various things that have entered my head

As you can see, this doesn't actually afford a whole lot of time to do my work. This is something that I'm going to be working to rectify over the coming weeks, which might mean a temporary end to my random topics of discussion. So what will I be doing? Well, today I'll be looking at conversing some of my sketches into an actual wireframe.

Where We're At (and Where We're Going)

At this point, I've got a myriad of sketches relating to my Major Project posted up on my 365 Design Blog but, for some reason, none of these images have been making their way over to this blog. So I've got a load of work that simply hasn't been put up on this site which really is madness. As such I'm going to be putting focus onto two things, to get my work prepared for the Major Project Proposal in January and the Major Project itself, due this summer:

1. Pull all relevant data into my blog
2. Get the Yii Framework up and running for experimentation and development

Pulling Things Together

As I mentioned above, I've been doing a whole load of paper-based work and sketches regarding my WebApp without actually sharing them here, where I'm meant to be documenting my progress with the design and development of ReferenceIt. This work ranges from a series of sketched out wireframes to more detailed sketches having to do with elements of the branding and site elements.

When starting out with this blog post I had intended to simply link to the individual posts on my Design Blog that relate to what I've been doing but I've been noticing a frustrating trend with Tumblr lately, that it tends to be unavailable when you really need it to work. I also think that it's better to keep all the reference material for my project in one easy to access location. Below is a series of sketches, and other graphics, relating to my progress with ReferenceIt.

This is where things really started out for me. You can see this, along with an overview of some of the other images, back in my Playing with Paper article from a few weeks ago. You can see the overall idea of a site layout sketched out, along with some individual components being sketched out roughly. I further refined some of the ideas, which are covered in the next few images.

The above image is a collection of ideas that I've had in terms of branding. Regardless of medium the logo will always have the two letters that make up the encompassing brand of ReferenceIt, the r and i. The different layouts are for different mediums, with the top left sketch being aimed at iPhone iconography, as I ultimately want my WebApp to be viewable wherever the web works. The logo beneath that is the standard logo, and uses the iconography that I intend to employ across the board.

The other two sketches make up something that I am considering by way of a pseudo business card, in that it's not the kind of thing I will be handing out one a one-to-one basis. Ultimately the aim for my WebApp is to ensure that it is used and, as much as it's a WebApp, the scope of ReferenceIt goes beyond your screen, as referencing has it's roots in books.

This pseudo-card will, if I can get them produced, take the form of slim post-it notes, branded to match with the site design. On the front side there will be the simple ri logo, and a blank space. On the back will be the site's url, referenceit.org. These will, for at least the initial phase of my project, be available in bulk for people.

Why? The reasoning behind this is that it provides a method for my WebApp to enter the real world. When you are flicking through a book and need to place a marker, these will be perfect and, when it comes time to reference things, you'll be gently nudged in the direction of the WebApp to do so.

This is another of the sketches I've produced based off of the original, rough, doodle-fest. It takes the first step from sketch through to to something ready to be wire framed. It's not perfect, but it's definitely a step in the right direction.

Following on from the above point, that the sketch wasn't perfect, is an example of where I've decided to change thing, in my opinion, for the better. This is an example of how I want quotes and references to look when displayed. You can also see a little stamp in the top right corner. This is an idea I had to allow users to see the medium the quote is from, be it web, print or another source.

This is a bit of a closer look at the stamps, showing off some of the different mediums available for referencing. Ideally, to tie in with the visuals I want, these would look like they had been added using a rubber stamp.

This is a revisited version of the previous wireframes, taking things in the direction that I want them to go in. At this point I decided that I should probably try and get something digital related to my project pieced together, especially with the topic of this post...

Converting things from sketches to HTMl can be both really easy and really hard, sometimes all in one go. I've been fortunate, so far, with this but I can see it becoming an issue when it comes time to convert my wireframes into a visually designed site.

This is actually part of why I am already producing site-related elements in HTML. By producing my wireframes in HTML I am able to get the ground work for development set up. At this point it has allowed me to set up the grid that I will be using for the site itself, as well as getting some of the basic elements in place.

Throughout the vast majority of my work so far I have been focusing on what the functionality and layout of the site will be once a user has registered and logged in. In addition to realising recently that I haven't been getting nearly enough work done, I also realised there's a flaw in the approach that I have been taking. Who is going to bother registering if I don't actually provide them with a reason to. This is what the above wireframe seeks to address.

Ironically, the last photo in the series is from the start of a period of insane procrastination. It's relevant in that somewhere, in amongst all the doodle, there is a thought process behind something that Nicklas suggested I could look into using as a part of ReferenceIt. The idea is that I could make it possible to tie into one of the most common places books are bought from, Amazon, and use their system to allow users to quickly and easily reference books by visiting the Amazon page and clicking a button, in a similar fashion to what I want to do with web sites.

Fortunately, for me at least, this doesn't seem to be too difficult to implement. Amazon have their own code system that they use for their products which makes use of ASIN codes. For the vast majority of books the ASIN code that is uses is identical to the ISBN codes used by the books. This is, unfortunately, changing with ISBN switch from 10 digit codes to 13 digit codes, but I am sure that there will still be a way to convert from one to the other, and vice versa.

So I've identified that there is, for most books at least, a relation between the ASIN and ISBN codes of books... so what? Fortunately it also seems that there are developer tools available to allow for people to make use of such data. The image shows how I would like to tweak the bookmarklet I have kicking around to detect if a user is on an Amazon book page, so that it would reference either the page or, if it's an Amazon book page, the book itself.

This is one of those things that is definitely on my to-do list for further research and development, as it would prove to be another useful tool that I could make available to aid referencing and citing of work.

What's next?

As I mentioned at the beginning of my post this week, I'm going to be looking into getting the basic framework, Yii, uploaded and see what I can do about getting the basic elements of the site in place. This might take a few weeks though, as we will shortly be beginning our Live Project and multiple other deadlines are beginning to loom.