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

Iancul.com — Hardest Thing, Designing My Own Website

November 12, 2010, 9:49 AM

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

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

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!

favicon

335

Comments:

An excellent approach, Iancu. I always felt, when designing books, that I had more control over the micro-details. But you’ve shown a great example of having the same control and consideration, with web/mobile use in mind.

You mention Georgia — it is excellent because of its property of a large size-on-body. Are you considering using Webfonts? — which have the same property — making them ideal for non-print reading.

Georgia is a great typeface, has been for a while now. But I wonder, if you’re taking the book-level approach to control, look how many typographic options there are now!

And I should talk — still using Akzidenz and things sort of like it. Hats off.

Oh, and the “inkan,” you know I have to love it, for personal reasons.

Clean cut design, just like a diamond!

Thanks, Adam. I love book design and I’ve always wanted to do that more. Fortunately, web design is growing up by the year, so good typography is not constrained to print anymore.

I wanted to use Webfonts or Typekit in the begining, but they didn’t work well on most platforms at the time I started the design process (and they didn’t work on iPhones either :P). So I went with Georgia, mostly because of its excellent qualities as a screen typeface, but also because I thought good design should not rely on the typeface itself but on the way it is used. Many great typographers say that if a typeface draws attention on itself and not on what’s written with it, the designer has failed.

Glad you like the ‘inkan’, it gave me quite a headache to make it fit in with the rest of the design :)

favicon

We are really proud of the website too! You would make a good account manager too, for sure :)

I’m glad, it really was a challenge for us all. Thank you again.
I’ll keep your advice about the account managing talent in mind, in case I don’t find a job as a designer in London :))

favicon

Yes, I’m familiar with the principle. :)

I think it applies to text whose purpose, as Emil Ruder put it, “is one and that is to communicate.”

For larger sizes, I suspect Webfonts, particularly custom ones, will play a larger role in making brands more distinctive. But here’s what I’ll do — when the time is right, I’ll give my own site a redesign and see how that goes.

What you’re doing is great. And, yes, branding one’s self is challenging. It creates questions of self-identity.

The mark with the fude (brush-pen), yeah I just like it. Of course you know a fude is cut and actually stamped, such as for authorizing official documents — but when I go to sumi-e class, I usually brush the signature. Like what you made. It’s all very nice. And functional, too, which is not trivial.

(Is this a double-post? Received no confirmation after pressing ‘POST” before. If it is not a double post, please don’t mind these thoughts, thank you!)

Im-peccable, says Silvester.

You left me no choice but to steal some of your ideas while building my very own hybrid website. Just because I can’t say I had them berfore, now can I? :-)

I agree with you Adam, when it comes to making your mark (either as a company or as an individual), especially in retail or print, using a distinctive — or better yet, a custom — typeface is ome of the best things you can do. Erik Spiekermann rightfully said that all you need is a good colour and a custom typeface — Tate and Macmillan are the first that come to mind.

I know about fude, also about the stamps used by print houses to sign japanese prints, that’s where I got the idea first. But brushing it is a lot more satisfying, they’re never quite the same :)

Thanks again for your appreciation. Cheers!

favicon

We agree with each other so much.

As well as Spiekermann on “all you need,” — Weingart: “all you need is Times and Akzidenz.” Well, yeah, I guess I have more needs. I’m needy. Thinking of going for a kind of Deco look, or like those posters where it’s just one matchstick and some really fat hand-made lettering. Like what Satan would use for a business card, but kind of more colorful and friendly. Know why? Cause I like the way it looks. Ha.

Hand-made elements, oh-so-missing from the digital scene. Think about a torn paper. How many people would google “torn paper filter” before printing something, tearing it up, and shooting a photo? Right?

Your appreciation for Japanese prints, we didn’t talk about that much. I’d love to talk with you about the Shin-hanga movement, since you mention it and have written about it before. I’m sure you know more about it than me or anyone else I know. Did you know in Japan most people are not “into” the arts, most haven’t traveled far from their home town?? Ironic.

Well, I’ll let you get back to the letters. You know, the letters that agencies should be sending you /now/ about an informational interview in the UK. Aside from agencies run by the blind or mentally challenged. Oh, and companies should also be sending you letters so you can do the same as an agency at less cost and keep 100%. Aside from companies run by the blind or mentally challenged.

Talk soon.

@picsel: Go ahead, nobody really invents anything, we just give something we’ve seen a different point of view :)

favicon

Adam, you’re far too kind — if only one or two London Creative Directors would share your opinion and do something about it, I’d be more than happy :)

I do like to stick to the classic typefaces, but you can’t rely on them all the time —
some brands are just meant for a good, differentiating typeface. I love Mr Vignelli’s work, but sticking to just Bodoni and Helvetica is not for me and neither is Carson or Sagmeister’s approach, also an extreme.

Hand-made stuff always had it’s unquestionable charm and it’s indeed a shame we don’t see more genuine hand-made projects. Most creatives are too lazy to get off their asses and go to the cut-n-paste table and do something without Google.

About japanese prints — the shin-hanga ones bring something new compared to the old ones: the light. I’m always baffled by their beauty. Even though the techniques are pretty much the same as on the old ones, the shin-hanga prints manage to glow, to shine like nothing I’ve ever seen (not even at impressionists — maybe just at Van Gogh, but his are something out of this world anyway). I wrote some years ago about my favourite shin-hanga painters (just a small bit, I should do a more thorough one soon).

Ah, wait, there is someplace else I’ve seen light like in the shin-hanga prints — the movies of Makoto Shinkai. Definitely give him a try :)

Always a pleasure, Adam — Thank you.

favicon

excelent post! miss u iancu! greeting from bucharest!

@Artpi:
Well mate, I have a good couch and great beer in the fridge, you can drop by anytime, you know that :D Cheers!

favicon

You should be proud of the design, Iancu. Clean. Stylish. Love how you’ve altered the image and margin capacities.

A lifetime paid .ro domain? I wonder if females (with a longer life expectancy) are charged a little more.

You know what’d be a great addition? Installing the “subscribe to comments” plugin.

I’m happy that you like it, David — you know how it is, after a while you get so used to your own things that you can’t tell if they’re good or not anymore :)

I had the “subscribe to comments” plugin in plans, but got axed during testing. I know they’d be useful, I use them a lot on other websites. I’ll try to fix this somehow.

Thanks for your comments, much appreciated.
Cheers!
Iancu

favicon

You did right on many things, first 14 pt body text i don’t know why people use whitespace but ignore base font size, its hard for people to read with glasses on. second obviously use of whitespace and lots of it :) if you are going for a typographical design you have to use large margins to not make it cluttered. third grid really really like it though i don’t know about 960 gird because i have been using blueprint for that but may be i am too used to of it. i do see advantage of 20 px gutter though.

i wanted this to put outside the list, so here it goes – my favorite part is Typeface you chose. serif over sans serif, too many people going for sans serif these days but if you choose to go with the flow you don’t standout. i really love the serif typefaces they are traditional and yet relevant today and not just in books.

last but not least, the book feel. it really is a great idea to use book as look&feel of the site than a magazine which many are going for. i think if you are not a multi-authored blog/site but if you are writing some great in-depth researched articles it should feel like a book rather than a magazine. because essentially its a one man research on select topics not columns written by multiple writers on verity.

there are some things that i think would imporve more, how about using sans-serif for buttons and smaller text, footer font size is a bit hard to read especially because of its white over black contrast, there could be use of custom fonts for headings and quotes using either css fontface or sifr etc.

overall i am fascinated to find this website, looking forward to read more in-depth articles on real world cases.

Thank you for your thoughts & appreciations Rajesh, very kind of you. I’m sorry I don’t know which buttons you’re refering to. Footer legibility depends on the platform too, I know the whole website looks a bit less nice on Windows systems, but that can’t be helped, unfortunately. I did consider using Typekit typefaces for titles and quotes, but at that time they didn’t work on iPhones so I decided the best solution is still the trusted Georgia (plus, I took it as a personal challenge: a good designer should be able to make good design with common elements).

Thank you for reading, best wishes.
Iancu

favicon

Have your say: English please