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 ....

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….

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:

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

...in parents section

...combined with digitally created elements

...in confirmation mails.

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.

I know from my experience that making such a clothes is easy. They are elastic and can be easily clued with lighter for example. 2 hours of making black, blue and grey jackets, dresses, fashion bags, shirts ties, coats, trousers and even hand clocks…

All of these nicely decorated with various elements cut from red paper such as hearts, 5 spikes communist stars, crowns and many more. It was fun, but the culmination was when we visit the local supermarket dressed up like that.

Pictures with the the staff and then go to the bar…..

some pictures?...

When the moment came - to be on my dear sister’s wedding I’ve decide give on one of the small details more live. As a graphic and web designer I’ve decided to bring attention to the paper wedding invitation as this thing in many of the cases stays long time as a bringing sweet memories. I don’t know the modern tendencies in wedding business - they probably already making a website for the wedding and e- invitations, but I’ve decided to go on traditional way. By the way if is true about the wedding websites - it would be easier for me to do that instead dialing with the paper.

Anyway the paper invitation supposed to be in two plans with folding and some physical and symbolical depth. See the wireframe model.

Ok now I had idea about the mechanism now - the symbolism. On the first plan off course we going to have the newlyweds with some doodles and flower brushes and maybe gentle and subtle gradient or just light color effects. The hard part was that either she or he gave me pictures taken street photo machine - nice eh..?

Here we go - the two birds. Now since I saw this it was clear for me that there will be a lot of techniques, brushes and photo collage, which is always challenge for me. Now starting with the bride head I had to add wedding dress, wedding bouquet and ... body! I needed 3/4 plan from their faces and had to find similar poses from images stocks.

Yeah I needed face to face poses and found these ones. Now cutting the heads and some touch ups. See the result for the groom and don;t by scary.

And now the bride….

...some experiments

There was work with skin tones mainly over the necks and a lot of color matching. I also added strong re-touch over the face skin. As you can see the result so far - we have both birds dressed and with bodies.

Ok - Now the main idea was they to stay face to face on left and right of the first plan. As we having and second plan in mid are I draw free shape marked for cut - right - we need hole to see the second plan. And off course we have back of the card with invitation message. In the first plan and the back of the card there will be a lot of brushes, flowers and light gentle color spots. Since they are from two different cities with rich historical and cultural past I’ve decided to make a mix from 2-3 of emblematic cultural and historical monuments from both cities and to put it on the middle plan. Watch me…

Wedding card Front with the cut for second plan.

Before to show the second plan result I must guide through the process of realizing the collage between emblematic cross dome one of a kind church from my city and the Bolkans biggest fortress “Tsarevets” from the early mid centuries in the Old Bulgarian capital. Starting with church source file:

You can see some effects…wait for the brushes, but before that the Fortress on Tsarevets hill:

Same here, but you can see that the source photo was really bad.

Second which will be visible from the first plan paper cut.

Back of the card with invitation message.

And the final preview

All these printed on heavy relief hight quality cream paper and same but lighter for the envelopes bring really nice impression.

Hope you’re enjoy the process.

Pictures are taken with my phone in poor light (night lamp actually)

As a current user of Mac Pro I really can’t hide my sympathy about their Operating system. I respect their professional solutions as well. As for the other fancy stuff for daily usage and entertainment they make no difference for me that any other company.

So at a glance I don’t see amy changes on the product design - Aluminum case like the previous generation with stylish look and easy access to every part. I really like the cooler system of these cases.

This time however the apple engineers really has done some impressive hardware improvements.

The graphic system is going to be really powerful. A standard equipment with ATI Radeon HD 5770 with 1GB of GDDR - Wow!

Storage system - well here is interesting as they announced that the storages will be Solid State Drives. This is really new I personally to say I didn’t expect that way directions. I’ve always considered the Raptor technology for more faster, but obviously I was wrong about that. Anyway in normal work you always getting to the point of using virtual memory file no matter how many chips you put on the memory slots.

CPU - 4, 8, 12 cores Power - that will really rocks, but honestly nothing new here as they are still Xeon architecture - I just wondering why they not using new Intel i7 processors. Anyway everyone who already worked with Pro series know that this is enough power for doing a lot of things.

There is a lot of tweaks in memory access - direct accessing memory technology, which decreases the latency, which really good.

Overall I’ll be jealous for those guys, who purchased this machine because mine is still up and running . Especially if you combine this good deal with one of the new Apple Cinema Display. You have to wait ‘till September, but it is probably worth it as I can see a lot of build in gadgets and new advanced technologies.
EDIT:
Good editor review can be found on ComputerShopper

Just like the Apple magic mouse , which I personally test it and have to say that is not worth it especially for professional work. It is not such ergonomic as a mouse have to be for 6-10 hours everyday working. Is has some really nice features, but still don’t think this is the mouse for professional users.

For mouse I personally picked MX™ 1100 Cordless Laser Mouse . Much more ergonomics and very comfortable grip and functions.

Anyway - enough with mouses lets get back on the track pads. I can’t imagine how can you be able to draw something with trackpad and what kind of software you have to use? I saw pretty nice and fast drawing technique using Apple iPad and you can watch it here, but how do I suppose to play with vectors lets say…

It is probably have some really good benefits for browsing or quick photo manipulation, but still it can’t fits to me like tool for everyday work.

At least one thing is sure - you’ll never get in problem with your wrist like usually happens after long using of different mouse devices…

Off course you always get to the really important factor - price. I found pretty good models from Sony DRBT21GB On Ear Stereo Bluetooth Headphones, Nokia BH-503 and Plantronics BackBeat 903 Bluetooth wireless stereo headphones (here will not talk about Jabo and models that have a couple of times bigger price).

I’ve tried Nokia BH-503 in a store and was really amazed. The sound was awesome and the product design fitted really nicely to the ears and head.  After some digging in the internet I found that there is a big price difference between this same model. Some dialers offering Nokia BH-503 from ~$100 (70-80 Euro here in Europe) and some in the Amazon and DialExtreme had prices from $25 - $35.

I hate to make decision only on the price, but this time I bought the cheapest version. I knew that I will get the Chinese replica of the original assessor and expected to be with very bad quality.
I was amazed how close to the original is headset Nokia BH-503!  Really!

The materials, the color, buttons and most important the SOUND! This is first time that I met a replica almost like the original. I know that the materials are different, I’m feeling that the weight of the headset is a little bit higher (they don’t work for jogging), the package and additional accessories. I’m not such a sound expert, but I very like the sound.

So if you decide to make such a choice - I think it;s worth it - it is 3-4 time price difference !
Before that my advice is to take a look of these really useful feedbacks with video and photos.

...oh and one more think - the sound of the build -in microphone is not quite good - I’m sure this is not like this in the original one - at least think that Nokia can’t do such compromise.

Here is some technical data:

 
• Weight 105g (not sure about that for the replica)
 
• Dimensions 150x75x155mm.
 
• Talk time up to 11h
 
• Music time up to 11h
 
• Stand by time up to 210h
 
• Operating temperature -15C up to +55C
 
• Interfaces Bluetooth 2.0 with EDR
 
• Headset Profile (HSP)
 
• Handsfree Profile (HFP)
 
• Advanced Audio Distribution Profile (A2DP)
 
• Audio Video Remote Control Profile (AVRCP)
 
• Operating rangeup to 10m
 
• Security Encrypted link

Here is some pictures of my alternatives, which I’m still think they are better even that the original Nokia BH-503 and their prices are very close by the way.

Sony:

Plantronics:

This is a draft that was from a project for interior design in night bar. The dimensions are 70 x 200 centimeters. There is no such good detail, but as I mentioned this is designed to be on the wall with dull backlights and and actually to bee just a part of the interior. I left the composition without colors so you easily can add a color tone to it.

    Download it here and enjoy    

Archiduchesse.com

Smashing style - I love it. It is really good way to highlight the products using bright, saturated colors and to put in the back the interface of the site

Headict.com

Impressive hand drawing and approach on the product. I very like the footer of this site as well.

Z e-shop

No so rich in design, but I really like the minimalistic approach and calm colours.

From rounded corners with css in Tim Van Damme’s blog I was following the other version using javascript and more specifically JQuery in this case I was decided to play with this using my favorite Mootools website.

Making a image with rounded corners CSS effect seems to be really easy in browsers that supports CSS3, but what about the Internet Explorer?

Coding this website I’ve tried to simulate the effect, covering the IE, which have lack of support on border-radius property.

With technique described in above articles I will just do the rounded corners with Mootools. So we have the initial image in our document like img src=”“....

In this case I’m using hook class=“am” or some class name, where in the next javascript code we will using it to handle the array of images with this class name.
.rounded {
-webkit-border-radius: 11px;
-moz-border-radius: 11px;
border-radius: 11px;
display: block;
clear: both;
margin-bottom: 1em;
}

This is the declaration of the .rounded class name in our styles

Now using Mootools we going to grab the .am class names and inject it in a div element with class name ‘rouded’,  set the child image element of the div class to opacity:0 like so
.rounded img {
opacity: 0;
}

and set the background of the div wrapper to our actual image src. All this manipulations in mootools:

window.addEvent(‘domready’, function(){
$$('img.am').each(function(ele, index){
var spanWrap = new Element('div', {
'class': 'rounded',
'styles': {
'background-image': 'url('+ele.get('src')+')',
'height': ele.get('height').toString()+'px',
'width': ele.get('width').toString()+'px'
}
});
spanWrap.wraps(ele);
});
});


By doing this in the head of the page we will get this output for all images with class=“am”

Almost all done - we have rounded corners and ability to drag and drop (save) the actual image.

Now - what about the IE? This technique is not working in IE 6, 7 and even 8. To make it working we can do two things -
Including a behavior property for the .rounded like so:
.rouded{
....
behavior: url(border-radius.htc);
.....
}

which have some drawbacks described here and most important it does not work in IE8.

So I have to come with “old school” solution doing a image sprite with my rounded corners cuts -  and then add some extra div’s to my .rounded element wrapper:
window.addEvent(‘domready’, function(){
$$('img.am').each(function(ele, index){
var spanWrap = new Element('div', {
'class': 'rounded',
'styles': {
'background-image': 'url('+ele.get('src')+')',
'height': ele.get('height').toString()+'px',
'width': ele.get('width').toString()+'px'
}
});
if (Browser.Engine.trident) {
var c_top_left = new Element('div', {
'class' : 'corner',
'id' : "top_left"
});
var c_top_right = new Element(‘div’, {
'class' : 'corner',
'id' : "top_right"
});
var c_bottom_left = new Element(‘div’, {
'class' : 'corner',
'id' : "bottom_left"
});
var c_bottom_right = new Element(‘div’, {
'class' : 'corner',
'id' : "bottom_right"
});
spanWrap.wraps(ele);
c_top_left.inject(spanWrap, ‘bottom’);
c_top_right.inject(spanWrap, ‘bottom’);
c_bottom_left.inject(spanWrap, ‘bottom’);
c_bottom_right.inject(spanWrap, ‘bottom’);
} else {
spanWrap.wraps(ele);
}
});
});


It’s a bit long and not well optimized but this way with mootools I just use conditionals to see if the browser is IE and then creating 4 divs, holding the each corner of my sprite image. Al four div are absolutely position inside our Wrapper div.rouded - here is the css:


div.corner {
position: absolute;
width: 12px;
height: 12px;
background: url(http://vlado1.com/images/corners.png) no-repeat;
} #top_left {
top: 0;
left: 0;
} #top_right {
top: 0;
right: 0;
background-position: -12px 0;
} #bottom_left {
bottom: 0;
left: 0;
background-position: 0 -14px;
} #bottom_right {
bottom: 0;
right: 0;
background-position: -12px -14px;
}

That way we have different output for IE :

First of all I’m extremely glad to be able to share with you my professional and personal stuff and will really appreciate to get feedback from you.

For those who doesn’t know - I’m a web designer and front-end developer, working closely with other specialists from internet marketing and development area to accomplish professional work.

My name is Vladimir Varbanov and I’m located in Sofia, Bulgaria. As you probably know my country is well known as good outsourcing destination, not only because of the geographical location, but also for the rich design and development communities here.

In my blog I’ll try to keep you informed about almost every aspect of creating an internet presence. Starting from inspiration, planning, communicating, designing, developing and promoting your website I’ll try to publish handy advises about how to make a better website.

There is a few categories on the right hand side, where I’ll try to cover some basics from my professional field - web design. My plans are to publish various tips & tricks for developing accessible websites not only on the technical level, but also on how to spot,  approach and collaborate with clients who very often don’t really know what they are looking for.

Freebies section will be updated with useful stuff for designers - vector and raster brushes, textures, vector illustrations, icons, actions - everything from my every day work and internet browsing so - get it in your RSS channels.

My interests and thoughts (such as life style, hobbies, fashion, music) will be shared in “Personal” section. I can’t promise everything in category will in English - hope you guys don’t get angry..