disturb launch kinnari.com

19.03.12 Greg Danford

Over the course of the last 6 months, we've been working with Kinnari to help them launch their new jewellery brand.

Kinnari and their community of users collaborate together to evolve jewellery designs that are tailored to each individual user's taste; the credit for being the designer of the resulting creation can be equally shared between the brand and the user.

Therefore, it's quite a different relationship to most B2C brands - obviously a transaction takes place for the production of the goods, but the bespoke nature of the journey to arrive at the purchase leaves users feeling a lot less of a consumer and more a creator.

From a digital agency's point of view, this was a fantastic project for disturb to be involved with. Firstly, we were thrilled to be awarded the job of designing the brand's identity - a process with which the brands founders were extremely closely involved. We feel that the end result is an identity that really captures the simplicity and elegance of the brand without stealing the show from the jewellery, which does a very good job of selling itself visually.

The design of the site then really fell into place. We wanted to create a sleek, uncluttered vehicle for the presentation of the visually rich content. Jason Turner, digital designer at disturb said "The first challenge in designing the Kinnari site was about finding the right balance between the branding and the jewellery. I felt that the company identity shouldn't try to compete for attention with the jewellery, because the product certainly looks good enough to sell itself and the less clutter around it the better.

"The next challenge was around the navigation of the design tool. The experience itself is fun, but we didn't want to push this too much further with the look of the various controls and options, due to the risk of devaluing the premium feel. We netted out at a place towards the 'charming' side of fun, which I think is a perfect position for Kinnari."

On the development side, the highlight of the site build for us was the creation of the Design Tool. It allows users to immerse themselves into the creation process, changing the collection, base model, finish, gemstone colour and size, while seeing an updated 3D representation of their jewellery all the way through the process, as a 360° view that they control.

The fact that the site has been built to perform equally well across many devices and platforms is, most importantly, beneficial to Kinnari's community of users because they can design across tablet devices and smart phones as well as desktop PCs. It's something that's also beneficial to disturb because it's a great demonstration of our capabilities in this area and serves us well in our quest to dispel the myth that we're only about Flash!. Without getting too into the technical side, and just for those who are interested, the front end of the site is an HTML / Javascript build, making very good use of jQuery. The back end comprises of a Symphony CMS build and integration of the REALEX payment system.

This all makes for a really slick, enjoyable experience. See what you think and have a go at designing your own jewellery at kinnari.com

Kinnari Jewellery Kinnari Design Tool Kinnari Identity Kinnari Home Screen




Illustrator Script: Save Selection Coordinates

07.03.12 George Profenza

In my previous post I mentioned JS and scripting Adobe Creative Suite applications. Starting with this post, I will release tiny tools written for various CS applications (Flash, Illustrator, Photoshop, etc.) that can make some of the tedious tasks a lot easier.

This week I share a script which allows developers pixel perfect precision when dinamically placing assets based on layouts specified by designers.

This is a pretty simple script: it saves the x,y coordinates of selected objects in Illustrator so they can be used by a developer. The most common scenario is when a designer creates a complex layout with many elements tediously placed, that need to be animated/made interactive.

One way to this is to use MovieClips in Illustrator and import them in Flash, then loop through symbols and analyze, which isn't very flexible.

The script I am sharing now gives you a few options for saving coordinates: either as XML (which can be used with HTML5, Objective-C, Java or other technologies) or as ActionScript 3.0 and the data can either be instantly copied to the clipboard for quick use, or saved to a file so it can be loaded later in an application.

You can download the script from as zxp or jsx. files(*).

To use it:

  1. Select elements inside an Illustrator document
  2. Choose File > Scripts > Save Selection Coordinates
  3. Select your options and save !

as the images on the side show. I've also recorded a quick screencast which can be viewed here.

Also, the script offers these extra options:

  • offset to top left - when selected, the original coordinates are translated so they align with the top left corner (0,0)
  • sort from centre - when selected, the order of coordinates is sorted based on the shortest distance to the centre of selection, otherwise, it's the order in which the assets were placed inside the document.

According to the xkcd graph this should be handy to someone, at some point :)

* The small print: zxp is the packaged version of the script so you can just open the file and Extension Manager do it's job. The annoying thing is I couldn't find a clean solution for a problem I had with locale and Extension Manager, so the installer will place a lot of copies of the same script just to make sure it works for all locales. If you want to install the script manually, simply download the .jsx file and place it in {Illustrator}/Presets/{locale}/Scripts, where {Illustrator} is the path of your Illustrator installation folder and {locale} is the language/locale used when installing Illustrator. If you have more elegant suggestions for the locale issue when packing scripts, please don't hesitate to post a comment.

save selection script part 1 save selection script part 2 save selection script part 3 xkcd




Streetview Stereographic

03.01.12 Max Novakovic

I came across an online demo called Streetview Stereographic and was inspired to create a short animation that 'drives' from Farringdon station past our office and to Smithfield Market. Streetview Stereographic uses WebGL and Stereographic projection on Google Street View images to create a novel effect that looks like what you are viewing is a mini planet.

As the project uses WebGL you will need a relatively new browser such as Chrome 15+ or Firefox 4+. Some interesting results:

I've seen some videos before that use Stereographic projection and thought it was a cool effect. Unfortunately, I can't remember where I saw any of them. I see lots of potential with this; the demo is open source so it could be adapted so that you can specify a route and automatically be walked you through the route in the same style as the video.

The video was made quite crudely by taking a screenshot of each frame and then stitching them together with FFmpeg.

Stonehenge Stereographic

artraffi
2012-01-09   21:23

nice pics!! i just made a video of it in berlin--> http://www.youtube.com/watch?v=oGXYEqVFclg


orgicus
2012-01-16   20:26

That's pretty sweet ! Although not the same, reminds me of Keith Peters' Polar Distortion experiments ( http://www.bit-101.com/blog/?s=polar )...Simpsons did if first :P






Visualising what people on Twitter like

08.09.11 Max Novakovic

The Twitter streaming API allows access to tweets on Twitter as they are created. I decided to experiment by writing a data-mining script that collects geo-located tweets from the streaming API that contain people saying that they 'like' something. For this post I have created two visualisations that aim to make sense of the data collected so far and display it in an easily digestible way.

The script has been running for about 5 days in total and has collected 1873 tweets; It has parsed a lot more tweets than that but a tweet is only added when it meets a certain criteria; which is that it is geo-located from the UK and contains a phrase such as 'I like', 'I love', 'I am fond of', etc...

From the data the second most 'liked' thing is Twitter itself which is un-surprising; 'My Life' is 4th and 'My vagina' is 32nd. The most liked things on Twitter are 'That song' and 'This song' which provides a very un-informative insight into the people on Twitter.

The top two images on the right are visualisations of the data. The first image is a 'Tree Map' which was quite simple to put together thanks to Google Chart Tools. The larger the square, the more likes and vice versa. Click here to view the visualisation in full. The data isn't perfect, for example, 'The' is one of the most popular things but I think overall it works quite well at extracting 'likes'.

The second visualisation is a Processing sketch that plots a users location along with what they have said they like. View a larger image of the sketch here. It doesn't really provide any insights geographically but it's a starting point for something that could have a lot more potential for spotting geographical and cultural trends. Download the code and data for the Processing sketch on the Disturb wiki here.

For now, I will leave the spider running for another month or so and then post again with some updated visualisations and hopefully some more interesting data from Twitter.

Tree map of Twitter like data Processing sketch of twitter likes plotted on to a map Pointless filler image




Merry colour blindness!

23.12.10 Max Novakovic

To keep in check with the Christmas cheer, I have been looking into colour blindness. Specifically, re-creating how people that are colour blind see things using Processing.js as my canvas.

Firstly, I created a simple sketch that creates 'Ishihara colour plates'. These are used to test people to see if they are colour blind. You can see the sketch here. The sketch takes an image, loops through every ten pixels and based on the colours of the image it places a coloured circle. The colours are various shades of orangey-brown or green. The shades are designed to be visible to most people but not to people that have Deuteranopia, Protonopia or Achromatopsia. The first image on the right is the result of putting this image through the sketch. If you can't see a slightly distorted disturb logo in green in the image, then I am afraid that you might well be colour blind.

Being able to test colour blindness is nice and all, but what if you want to see what it would be like to be colour blind? The second sketch I created takes various images and applies filters on them to re-create how people with various types of colour blindness see. You can see the sketch here. NOTE: This sketch is best viewed in Chrome or Safari - It is very slow in Firefox. It works by taking the filters found here and here and then applying them on to the image.

If you press 4 on the sketch, you can see another Ishihara colour plate that I generated using my first sketch. If you view the colour plate normally, you can see the letters "LOL WTF". If you switch to other types of colour blindness, you can see how someone that is colour blind would see the colour plate.

You can see demos and the full sources here;

Merry Christmas!

Disturb Processing.js colour blindness simulator