A SMALL BACKGROUND

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 www.ibarbar.ro, 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

Iancul.com 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 :).

THE ‘STAMP’

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.

THE ‘BIG’ IDEA

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 GENERAL LOOK

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.

THE GRID

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)

THE STYLES

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.

TITLES ARE SET IN GEORGIA BOLD, 21/21 PT, ALL CAPS — WELL, IT’S ONLY 16/21 PT IN THIS PARTICULAR EXAMPLE, BUT YOU GET THE IDEA.

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.

SUBTITLES ARE SET IN LUCIDA GRANDE BOLD, 12/21 PT

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…

THE IMAGES

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

THE ARCHIVE

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.

THE INFLUENCES

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 :)

—

LATER UPDATE:
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!