{Carrer web log}

Blog about web design & development

My Side project: Pimp My Balsamiq

Wednesday, May 25, 2016 { 0 Comments }

Few years ago I made Hand Drawn Icons and someone on Hacker News commented that Icons can work great with Balsamiq hand drawn style. I reached Peldi from Balsamiq who was more than happy to endorse my Hand Drawn Icons to Balsamiq’s website. 70% of all my sales are from Balsamiq users.

Balsamiq is probably the best software for low fidelity wireframes. There is something magical about Balsamiq its hand drawn style feels just right. I wanted to make Balsmamiq even better so I Hand Drawn new 125 object wireframes, 380 icons and 36 Rage like emoticons compatible with all versions of Balsamiq. I you are Balsamiq user you will love this project.

I’m happy to present Pimp My Balsamiq

Link: Pimp My Balsamiq http://www.pimpmybalsamiq.com

Demos: Pimp My Balsamiq Demos

Hand Drawn Icons V.2

Wednesday, November 04, 2015 { 0 Comments }

Few years ago I made the first version of the Hand Drawn Icons. It started as fun project and today become big 410 + 410 icon collection. Everything is hand drawn in Photoshop using the Bamboo drawing tablet.

All the icons are in raster format simply because you can’t achieve that level of detail with the vector formats. Unfortunately the raster icons will not scale like vector icons. Beauty v.s functionality. For me the process of drawing was magical experience almost like meditation. There is some hidden beauty in the hand drawn art, so un-perfect yet pleasing and beautiful.



Illustrator Wireframing Kit

Wednesday, October 08, 2014 { 0 Comments }

I started the Photoshop Wireframing Kit as un supplement for wireframing for the people who use Photoshop as primary design tool. I often get requests for Illustrator Wireframes, so I exported and adjusted all the shapes into Illustrator compatible format. I wanted to make Illustrator even better tool for fast prototyping.

I used the Illustrator native support for "Illustrator Symbols" for Drag & Drop functionality. So you have 350 Illustrator shapes & icon to be used for rapid illustrator prototyping.

Download Illustrator Wireframing Kit or here.

Hartija - CSS Print Framework (Update)

Wednesday, September 17, 2014 { 0 Comments }

I has been 6 years from the last Hartija update. Hartija was my first CSS Framework, I never updated it because "It simply worked" in most cases even in browsers like IE6.

I decided to add few new features and fixes and also to move everything to GitHub.

What is Hartija?

Hartija is universal printing stylesheet or best printing CSS practices all in one.

How Hartija works?

Just use it like normal CSS:

<link rel="stylesheet" href="print.css" type="text/css" media="print">


The "magic" is in media="print", this CSS file will be used by the browser only when you print. You can also use it inside CSS like @media print { .. }.

Only work you need to do is hide the stuff you don't need in the final print. Basically you hide some id and class in the CSS like: #navbar, #footer, .someClass, .otherClass { display : none; }

Download Hartija CSS Framework on GitHub

Photoshop Wireframing Kit - Update

Wednesday, March 12, 2014 { 0 Comments }

I finally had a time to update Photoshop Wireframing Kit giving the main focus on mobile app prototyping in Photoshop. All the main mobile phone and tablet shapes(Android, iPhone, iPad, Windows Phone are introduced into the Kit.


Also some demos.

I'm planing to introduce a number of now tools and apps for the Photoshop Wireframing Kit, hopefully this month.

Modern Logo Mock-ups

Thursday, November 28, 2013 { 0 Comments }

I'm happy to present my latest side project Modern Logo Mock-ups.

This project consist of 10 different Logo Mock-ups styles in other words you can present your logo in 30 different combination simulating various environments and styles.

I was working at this project almost entire 2013 and publishing different mock-ups styles on creativemarket.com.

All is done in Photoshop CS5 by using smart objects in 300 dpi resolution.

You can use the more than 50% early Black Friday and Cyber Monday discount:

Modern Logo Mock-ups

Also all my other products have 50% discount for one week period:

Hand Drawn Icons

Photoshop Wireframing Kit

Custom Logo Land

In the search of ideal line-height

Wednesday, October 23, 2013 { 0 Comments }

I love making typography experiments, browsing the internet I stumble upon one site who had 1,39em line-height (Leading). That is really unusual number for line-height. In the past I was often using the "golden" height in my CSS Typography Frameworks Azbuka and Better Readability Project but every typeface is different and using one "magic" number for all the typefaces seams wrong even that I defended that concept in the past.

I conduct several experiments in photoshop examining different typefaces in the search of common logic, searching what parameter should be using for determine the quality of good line height.

The question is what is ideal line-height size?

In my opinion that will be the minimal amount of distance between the lines where our "eye" wouldn't jump (mix) one line from the other.
In other words we will have clear track for every line in the text without confusing and mixing the lines in the reading process.

How can we determine the ideal line height?

I started with the idea of most repeated letter size in the text or the size of the small letters like a, e, i standardized with x-height.
I think that the x-height can be used like a measure for ideal line height. That is the safe distance between the lines based on most repeated letter size.

So the formula is quite simple:

line-height = font-size + x-height

Helvetica, Arial 1.52
Futura 1.51
Georgia 1.48
Lucida Grande 1.53
Optima 1.47
Palatino 1.47
PT Serif 1.50
Times New Roman 1.45
Verdana 1.55
Tahoma 1.55

Other things to consider font-size is "not" font size, what I mean in the english alphabet the longest letters may be smaller then the font size, example the letter "j" in Helvetica probably the highest letter is english alphabet is only 93px in 100px font. Based on this calculation 93px the height of the j letter + 52px the height of the x letter is 145px line height for Helvetica.

The point of this article is know your font and alphabet and apply the line-height based that font.

RSS IconTwitter icon Twitter icon Twitter icon

About Me <<<

Name: Vladimir Carrer
vladocar [at] gmail.com
Location: Verona, Italy
I'm a web designer, developer, teacher, speaker, generally web addicted ...

My projects <<<

§§Previous Posts <<<

Hand Drawn Icons
Photoshop Wireframing Kit Ad

§Archives <<<

Other Profiles <<<

View Vladimir Carrer's profile on LinkedIn

Content is licensed under a Creative Commons Public Domain License