Food for thought‘[...] do not think that good design can make a poor product good, whether the product be a machine, a building, a promotional brochure or a business man. But [...] good design can materially help make a good product reach its full potential. In short, [...] good design is good business.’
Thomas J. Watson Jr., IBM CEO — Hardest Thing, Designing My Own Website

November 12, 2010, 9:49 AM


Designing your own identity must be the hardest thing for a designer — the old shoemaker saying still holds, after all. The first version of this site was made almost five years ago, mostly in Photoshop since I didn’t know enough Dreamweaver or HTML. It was a fresh graduate’s portfolio, with half of the works being school projects while the other half being done for a few small agencies I’ve worked for during college. It did its job, though, allowing me to move from Cluj to Bucharest and start working as an Art Director (my CD at that time, Avi (Octavian Giosanu), had much greater confidence in my skills than I did). The domain of that website was, an abbreviation of my name. After serving its purpose, I closed the portfolio and started a blog, mostly because it seemed a good exercise in writing and clearing my ideas about design and other things.

THE DOMAIN NAME came just a year and a half ago, in January, 2009. While ibarbar is a short name, it’s less memorable and sometimes difficult to understand. And I wanted a more ‘serious’ website, hence the .com instead of the lifetime-paid .ro. Iancul is obviously based on my name, Iancu, the ‘l’ being the Romanian definite article, just like ‘the’ is in English. I wasn’t very sure about adding so much emphasis on my name, but I went with it because the .com domain was available and the six letters were much easier to design as a Japanese-like stamp, an idea I’ve been playing with for a long time. It also reads as Iancool, which I’m sometimes called, but I can’t really remember if it was before or after the website :).


While obviously functioning as a logo, I like to see it more as an inkan or hanko, a japanese type of stamp (wiki). The idea came from my passion for Japanese prints, on which artists and publishers used to sign their names with different types of stamps (everyone knows Hokusai, but I’m a big fan of the Shin-hanga movement, as I’ve written before). I’ve drawn many versions, all using a fude-pen, a wonderful drawing tool, which allowed me to keep a personal, hand-drawn feel to it. All the crisp, unmodulated-line versions I’ve made looked cold, unballanced, soul-less. The only exception is the website’s favicon and the ending blog posts slug — the small size makes it work. So, while it’s not exactly a logo, it works like one in several ways, just as a handwritten signature sometimes does.


Being a big fan of the International Typographic Style, I first wanted a Vignelli-like website — you know, Helvetica on a well-built grid (my german blood longed for it). But almost all the big design blogs used this approach (well, at least at the time I started designing my website): ex-NYTimes-Design-Director Khoi’s excellent Subtraction, Antonio Carusone’s AisleOne and The Grid System (go figure), David Airey’s LogoDesignLove or his just-launched Identity Designed (don’t be fooled by the serifed titles). Clearly, no matter how much I loved Müller-Brockmann, I had to do something different.

… maybe it was time to go back to the roots, book design.

Still using a Swiss-style grid (you can’t beat your own stuborness, you can only work around it), I started drawing Georgia-based layouts, thinking that if everybody’s doing modernist pages, maybe I should follow Mr. Tschihold‘s example and go back to the roots, book design. Wasn’t before long that I settled on the idea of having each blog post or case study (as I wanted the same layout for both, with minor tweaks) as a book page, with wide margins, page numbers (post’s number) and footnotes.


The top menu is as simple as possible, providing fast access to all the sections and showing what the website is mainly about. The interesting part here is the ‘More in footer’ button, which does exactly what it says, as I’ll explain in a minute. The menu is followed by a generous white space, containing the ‘logo’ and a ‘Food for thought’ quote from some of the great designers, meant to set the tone — I’m not into just posting links, pictures or videos from other websites and my work is definitely not just pretty colours and typefaces, there’s always some thinking involved, serious or not. I change the quote from time to time, as I have a small collection. On the portfolio page, the quote is replaced by the secondary menu, pointing to each case study and other work-related sections. Another difference between the blog and the portofolio is the background colour: cold, professional grey to support the works, warm brown for a comfortable feel while reading blog posts.

Whitespace. There’s never nearly enough whitespace.

Good books have wide margins, meant for your thumbs. This meant the classic sidebar had no place either on the left or the right, so I moved everything down in the footer. This allows the reader to follow the posts without any distraction. It also provides a lot of whitespace, ‘sliced’ every now and then by image captions, quotes or short but important paragraphs — these ‘tricks’ are meant to draw you into the main article, as we all fast-browse these days, scrolling down the pages and just reading here and there (a long, even column of text and images easily turns into a boring, monotone block that your eye begins to slip over without something to focus on). Of course, titles follow the same idea, starting from the left, easy to catch even if you roll your scroll wheel like a 6-shooter’s barrel when playing russian roulette. Another element that sticks out is the footer of each blog post, especially the social sharing part, since it doesn’t matter how good, witty or funny you are if the only one reading you is your girlfriend (not that’s anything wrong with that, either :) The ‘page’ ends with the post/page number and the up and down arrows that take you instantly to the top or to the footer.

Finally, the footer concentrates all the details that would usually be in the sidebar, together with an extended menu that provides access to other parts of the website that are not mentioned in the main menu. Search bar, categories, tags, featured posts, latest comments — they’re all here, helping you browse the content any way you feel like. Next to them, a short description of the website and the regular social networks links, RSS and email subscription buttons.


Based on a 960-pixel width, making use of 12 columns and supporting the 960 Grid System initiative, the grid is easy to guess, as all elements align on it with very few exceptions. Each column is 60 px wide, with 20 px gutters and 10 px margins. Even if the typography is mainly serifed, the ex-centric grid is definitely modernist, inspired by Hans Rudolf Bosshard‘s complex grid systems . Most elements are aligned on a 21 pixel-baseline grid, as the leading of the body text, but this baseline grid is more of a local one, for each ‘page’ rather than for the whole website. This is because grids are usually excellent helpers, making everything a lot faster to design, especially when dealing with multiple layouts that need to be part of a ‘family’ — but, they do have the bad habit of becoming too rigid to follow all around, every now and then. Striving to design the ‘perfect grid’ feels many times just as achievable as finding the Holy Grail.
(click on the image for the complete view)


Typography is based on the ever-reliable Georgia (designed in 1993 by Matthew Carter), supported here and there by Lucida Grande (designed by Charles Bigelow and Kris Holmes) for notes, subtitles and footnotes. There are 7 pre-set paragraph styles that cover almost all needs, but I sometimes set type in custom sizes or colours.


First paragraphs or introductions are set in Georgia Regular, 16/21 pt — They usually run along a few more lines, so I’m going to use lorem ipsum dolor sit amet, consectetuer adipiscing elit, just to add a little weight to the paragraph.

Quotes or other important ideas that I want to underline are set in Georgia, mostly italic, 16/21 pt, grey — as you can see, they have the same width as the body text, but they start right from the left side of the page, just like titles.


Body text is set in Georgia Regular, 14/21 pt. That’s a little on the larger side, since I think there’s too many tiny-written design websites. A 12 pt line might be more than readable on paper, but on screen that’s a totally different story.

Lists are of several kinds:

  1. Numbered lists, indented from the main body.
  2. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip.
  3. Consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

then there’s the

  • Bulleted list style, that has the same indent as the numbered lists one.
  • Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip.

and the third,

  • em-dash lists style, again with the same indent, but using em-dashes instead of bullets (wouldn’t have guessed it, right? :P).

Other styles include inside quotes — the real ones, actually, as I tend to use the other italic style more as an attention drawer, as it can’t support long quotes, like this one:

All of us who do creative work, we get into it because we have good taste. But there is this gap. For the first couple years you make stuff, it’s just not that good. It’s trying to be good, it has potential, but it’s not. But your taste, the thing that got you into the game, is still killer. And your taste is why your work disappoints you. A lot of people never get past this phase, they quit. Most people I know who do interesting, creative work went through years of this. We know our work doesn’t have this special thing that we want it to have. We all go through this. And if you are just starting out or you are still in this phase, you gotta know it’s normal and the most important thing you can do is do a lot of work … It is only by going through a volume of work that you will close that gap, and your work will be as good as your ambitions … It’s gonna take awhile … You’ve just gotta fight your way through.

— Ira Glass

and finally, the notes style, almost always at the end of the article, also sharing the style with captions and texts in the website’s footer:

Notes are set in Lucida Grande, 12/16 pt — I’ll have to use that lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat again, just to make my point.

Whew! Now that we got text styles out of the way, on to…


Grids are usually built with type in mind — they’re called ‘typographic’, after all — but being a designer’s website, images are just as important, so there are several presets that can be used.

Normal blog and portfolio images are 540 px wide, going as tall or short as necessary:

Then there are special cases when some blog images are 630 px wide and go all the way to the right margin, like in this case:

Rarely, I can use large, margin-to-margin images, that have a 780 px width:

Last but not least, there’s the small, squared image that can fit in the left side whitespace column. It’s size can vary, but only up to 220 px, over the 3 columns. Here’s an example (with some quotes, just to make it more interesting):

“Often people forget,” he elaborates, “that how clever you are with the latest technology is not the point. The equivalent would be like someone coming up to you and saying ‘Have you seen this book? It’s printed on great paper!
The true challenge is what messages are you putting over? How do you want people to feel about the work you’re doing? It’s a dialog. It’s never a monolog. Wherever possible, we’ve consciously tried to make sure that visual communication is an open-ended process.
If I manage to create a situation where someone had to think twice about something they’re doing, I would call that a success. I think the objects I leave behind are not the legacy I’m interested in. It’s whether I can leave behind a thought process.”

— Neville Brody


One thing I’ve always wrestled with is writing constantly on the blog. Some of the WordPress templates I’ve used in the past had post-per-month counters, but their Archive system was rudimentary. So the new design is meant to do two things: first, helping readers that browse the website’s history with reading the titles fast and checking which posts have more comments, and second, giving me a clear view of how many posts I’ve written each month.


Spread from "The Typographic Grid", by Hans Rudolf Bosshard.

One of my favourite books to look for type & grid inspiration is “The Typographic Grid”, written by Hans Rudolf Bosshard. Some say it’s the second part to Müller-Brockmann’s “Grid Systems”. Either way, it’s a wonderful book with plenty to learn from and admire. It’s here I admired the beauty of flush left titles with body texts begining just from the middle of the page and large, extremely letter-spaced titles (not set in all-caps, mind you).

As for website examples, I must admit I had a too-large list of good links (just go to Siteinspire and you won’t know which one to check out first). However, there were a few that I’ve kept coming back to more than often. First of all, Cristian -Kit- Paul’s Kit·blog, an excellent showcase of Leica photography (it used to be more about design, but lately it has become an impressive photo-blog — read his colophon). Second, Khoi Vinh’s Subtraction, a classic already, and Aegir Hallmundur’s Ministry of Type, also a beauty. Miles Newlyn’s website (designed by Gabi Toth), Erik Spiekermann’s blog, Frank Chimero‘s, Jeffrey Zeldman‘s, Brian Hoff‘s and A List Apart also had their good share of influence. Ah, and Edenspiekermann‘s, one of the best websites around.

Last but not least, this website wouldn’t have been online without the help from the guys at Dream Production, who patiently endured my type-obsessed feedbacks and coded this website. If you need WordPress (and not only) specialists, definitely give them a call.

Thanks for reading, if you made it this far
— oh, all right, goes for the ‘skimmers’ as well :)

Feedbacks on the website’s redesign have been great, but one in particular made me very happy: Erik Spiekermann saying he loves my website. That is really something — thank you!



Best wishes to all!

December 25, 2009, 10:17 PM

May we all have a wonderful year in 2010!



Town Magazine: B&W photo+typography=perfect marriage

December 9, 2009, 1:29 PM

Wonderful spreads from the Town Magazine (1952 -1968):

You can read more about it here.

(via Things To Look At)



Steal or copy — treading the fine line

October 30, 2009, 3:41 PM

“The secret to creativity is knowing how to hide your sources”
—Albert Einstein

“Bad artists copy. Great artists steal.”
—Pablo Picasso

“Instinct […] is memory in disguise—works quite well when trained, poorly otherwise.”
Robert Bringhurst



Last night I couldn’t go to sleep before making this poster (larger here)—it stood as a sketch in my Moleskine for two days. It is one of my works for the 15th Design Challenge (the theme being a bike-day-or-ride poster with the title “I want to ride my bicycle”). The concept is great: a giant, red-striking, italic B (Futura UltraBold, of course) suggesting the word “bicycle”, helped by the small bike icon (InfoPict Two) and being part of an already very well known song line, “I want to ride my bicycle” from Queen. Add that big red letter over a black&white photo (bikes in their urban environment) and you have a clear winner. Looks great (I actually have people that can testify, so please excuse the self-praise :P)

However, this poster—most likely—wouldn’t have been born without seeing another poster three days ago, browsing Flickr. This one was made by Gabriel & Svoboda, exibited at the A:Event—larger here.


Now, the obvious troubling question is: how much is my poster mine?
Sure, they only have the big italic B in common, and the black&white poster is obviously not the first or the last one to make use of a huge, dominating letter as the main focus of its composition. Just as I’m not the first to use red Futura UltraBold over black&white photography—Barbara Kruger did this way back, and she’s in most design books so almost every designer has seen her work at some point, even if only by visiting Centre Pompidou.

Usually we don’t really remember our influences, mostly because we always filter everything we see and learn through our own personality, through our own creative talent. I didn’t think of Barbara Kruger at all when I designed the poster, I only remembered her while writing this analisys. God knows how many other influences I had. But I did know about the other poster, I specifically wrote down in my sketchbook to use the big italic B to illustrate my own ideas.

In the end, I guess it comes down to how much the work is your own, to how well you’ve managed to bring it close to your soul, to how much you believe in it. To how much you’ve “stolen” it or made it your own, as Picasso says. Do I like the poster? Of course, I’m proud of it. Is it mine? I think so. But being an intelligent person, I’m never completely sure of anything (“Only fools are 100% sure, son” “You sure, dad?” “Of course, son”).

This having been said, in commercial work there’s a pretty different story. The last thing you want is to find out that your design resembles another—your whole effort for differentiating your client can be ruined just because somebody somewhere had a similar idea. This is why market research is important, just as keeping yourself informed on other fellow designers’ work is (but this also influences your work—feel the irony?)

Come to think of it, there is this recent case that touches the same problem: Wolff Olins’ Docomo vs Pentagram’s MAD. Many hurried to cry “copy-cat”, but that’s just plain thought-less reaction. All designers, consultants and advertisers (the serious ones, that is) know how many elements are involved during a project. And we all know that you can’t reinvent the wheel. The basic shapes will remain the same, nobody can “own” them, just like T-Mobile can’t own magenta—that’s just against common sense.

(quotes reminded by Adi – RO link)



Get your own Periodic Table of Typefaces

October 9, 2009, 1:33 PM

Remember the Periodic Table of Typefaces? Well, you can print your own now—thanks to the high demand, the kind folks at Squidspot can send you the vector files—donating is of course encouraged. I surely got mine already—I couldn’t consider myself a type-fan without having this on my wall :P

You can also buy the new versions, printed silver on black or white:



"Browse less & draw more"

October 3, 2009, 7:42 PM

This is probably the best piece of advice I could ever give to a fellow designer. And I’m very very sure Mr. Milton Glaser would agree, as you can read in this interview, with Chip Kidd.

I made an iPhone wallpaper out of it, to keep it in mind as much as possible—maybe, just maybe I’ll be able to actually take this advice myself. Feel free to use it. Let me know if you like it. Thanks :)

Browse less & draw more

Browse less & draw more

And yes, nothing beats Futura. Ever.
(small hint to IKEA :P)



Power to the logos

February 11, 2009, 4:32 PM

Well, who would’ve imagined that after the last elections, even logos would turn black&proud :))

Power to the peo...tyres!

Power to the peo...tyres!

Actually, it’s just an image promoting Blender Pro, an excellent Crouwel-grid-like typeface from Gestalten. It reminds me a lot of Gridnick, published by The Foundry, another great foundry (talk about naming, heh)—their Form Sans and Serif family is wonderful as well.



Büro für Gestaltung — finest german rigour

January 9, 2009, 6:06 PM

Büro für Gestaltung means literally ‘office for design’. Quite a simple and odd name, considering that their expertise ranges from graphic design to environmental design, product design and even bits of architecture. But in the end, design is a very generous word, so it can easily encompass all work made for the benefit of men.

Few design companies have such thorough websites presenting their work. One interesting thing is that most of the team are women, a not-so-often thing in the design world, especially considering the very rational approach the company has. Not to mention their youth, another thing to admire, since they’ve been involved in so many big projects, both for big companies and state/local officials. It’s a great thing to be able to see how their design solutions were developed as a whole.

Take your time, watch and learn—steal if you can ;)




The Grid System — the org

December 4, 2008, 3:13 PM

Antonio Carusone from AisleOne decided to do the right thing and started, “the ultimate resource in grid systems”.

The website contains links, templates, books, articles, just about anything that has connections to the principles of grid designing. You Work For Them also supports this great initiative (in case you didn’t know, YWFT has some of the best design-but-not-only books for sale).

The website is grid-based, of course, and it’s a pleasure to look at (check out the up-right-side button):


The initiative also has a Flickr group, join up and share your grid creations.