Synthesiser prep

I've been doing some drawings and flash tests to try and figure out how my GUI's going to look and feel for the second project. So far I've come up with this basic configuration:



There are buttons all around the edges of the screen and clicking one causes a larger panel to pop out or collapse. I've decided to use a combination of sliders and rotatable dials for adjusting properties like colour and size etc.

In terms of tests, I've created my first actionscript class for my rotatable dials (which having it in a class means I don't have to constantly duplicate code). Here's what I've come up with so far (use the dials to change the hue of the shape):

iSketch and iScribble

The next project is a "Visual Synthesiser" and I have been toying with the idea of making a more dynamic drawing or paint program where users can draw something and watch it spring to life or move in some way.

But first I have decided to look at two online collaborative drawing communities: iSketch (http://www.isketch.net) and iScribble (http://www.iscribble.net).

Both iSketch and iScribble are flash-based sites with a focus on multi-user drawing. However, iSketch acts as more of a Pictionary-esque game while iScribble is more oriented on collaborative art.

The two sites have different goals but take similar routes to get there. Both iSketch and iScribble allow user-created and official rooms. These are accessed via a main room list menu. In iSketch this menu is quite small and dwarfed in comparison to the massive Main Chat window to the left of it (which is strange because it serves little purpose at all). This means the user has to scroll quite a lot to get through the room list. iScribble's room list is a lot larger and takes up most of the screen, requiring little scrolling to navigate. Also, the iScribble swf object as a whole is about twice the size of iSketch. iSketch's size can be attributed from the 800x600 resolution prevalence in the days of Web 1.0, but there is no excuse for this nowadays when the object barely takes up a fraction of space on modern widescreen monitors.

When it comes to the drawing GUI of these sites, iScribble is the better option for drawing. In iSketch, the colour picker and other panels are minuscule and awkward to use while in iScribble they are large, nicely spread out and easy to use. iSketch offers the user the ability to drag around panels to suit their workflow while iScribble's UI is completely static and non-customisable. In terms of features, iSketch has shape and fill tools which iScribble confusingly lacks. However iScribble offers advanced blurring and smudging tools to make up for this and users have access to 3 layers to structure their drawings (though the highlighting of the current layer could be a little more obvious - often a user will accidentally draw on the wrong layer which can at times completely ruin an image).

Anatomy of the Eye final and a review

Finally finished with my Anatomy of the Eye project. Here is the end result:



I think it worked out quite well - especially the interface.

A review of the Delicious GUI:

I have recently discovered the social bookmarking site "Delicious" (http://delicious.com/) and I am finding it quite useful for saving bookmarks for use between home and uni.
The site has a very minimalist appearance which I suppose is becoming quite the norm of web interfaces (Facebook's duo-tonal boxiness comes to mind). However, this style can - at times - remind one of the more boring days of the Internet where CSS was nowhere to be seen and sites would be formatted in pure HTML.

But thankfully Delicious is immensely easy to use and it needs to be. The site acts more as a hub for other sites so there does need to be a considerable focus on immediacy and directly people to content they may be interested in.

Indeed, it could be said that Delicious' minimalist style helps to unclutter a site of predominately text and hyperlinks. And the site's use of drop-down boxes and tab-based page hierarchy (now a standard of Web 2.0) allows easy navigation.

The only real qualms I have with Delicious' GUI is their insistence with small, easily ignored search bars. For a site where you save and browse others' bookmarks, you'd expect there to be more of an emphasis on searching tags or keywords.

Anatomy of the Eye flash tests

I've been working on my Anatomy of the Eye interface in flash. Initially I came up with this:



But I wasn't so sure about the colours, so I've decided to opt for a darker approach and less hue (going for a blue and grey/black scheme):



I will work further on this and try to get the hatches to close properly as well as working on the content. So far the only real thing frustrating me has been Flash's internal tween classes, so I'm probably going to use Tweener or TweenLite in the end.

Design for Anatomy of Eye

I've been thinking about how to make my design for the first project as user-friendly as possible.

A few ideas later and I came up with the idea of having the main navigation simply very large, screen-filling buttons. When users have their mouse in the window they will be hovering over a button, making them act less like hyperlinks and more like a touch-screen interface (ie. the iPhone's large buttons for ease of touching).

I came up with something like:




Where each corner of the screen is practically an entire button.

When you click on one, the corners will sort of "open out" like a hatch and reveal the content underneath: