Vlado Varbanov - Webdesigner, Front-end developer - Blog - Web & Graphic Design

Blog

Getting beyond the digital with modeling clay

Getting beyond the digital with modeling clay

A couple months ago I was working with great team on project for creating website and selling a learning software for kids. We started first with a team from 3-5 people, 2 months later we was about 30. I had to design the grids and actual vision of this website. The the UI for the online shop and actual back-end system for the software.

The website was separated on a couple of parts, one of them was for kids and their parents. I browsed a lot of the showcases of websites for kids as well some best practices for that li one on the Smashing magazine. I had to create a lot of pictograms and icons, showing different type of information and action that can be taken. Starting as usual with Illustrator and Photoshop, warm bright colors smooth edges ....

icons, assets for skillado websote

I’ve created a lot of screens with that type of graphics and in some moment I realized that should be some completely different level and type of distinguishing symbols bringing some emphasis to some of the screens of the web site. The decision came - I need to use something from real world, not digitally created or stylized - materials that kids love and cam model, draw alphabets. First choice was chalks….

a picture of chalks from DeviantART picked for reference

This was not suite enough and I moved forward with modeling clay. The dilemma came - should I use digital techniques for creating such materials as modeling clay. I did some search for references and brushes and some experiments of creating clay. The details on such material as plasticine are many - there some fingerprints, dirt, specific crack, which are hard to represent with filters, brushes and textures. That brought me to the decision to real pictures from this real material. I bought couple of packs with different colors and also had some used piece from my son. I toked the pictures with mobile phone then masks, a lot of adjustment layers in photoshop and ...the initial result:

width="672"

width="672"

After cut and resize with more color adjustments here is and the applying of the symbols in current UI of the website:

some simple buttons

...in parents section

width="672"

width="388"

...combined with digitally created elements

width="672"

...in confirmation mails.

width="640"

It’s always very inspiring to use materials from the real works especially from the nature. I doubt people can create even such color tomes with that temperature and hues for displays in coming years.

Posted by: vlado in Graphic & Web design
0 comment
Share:            

Comments

Leave a comment