Leon Paternoster’s minimalistic sites have long been on my To Review list, and since then they even underwent a complete overhaul. Leon is an ardent crusader for accessible and readable web design, he’s keenly interested in typography and is irked every time he sees a web site with illegible text or where a chunk of text was saved as an image (I feel your pain there, Leon).

So it comes to no surprise to see his own sites with very minimalistic, stripped down to bare necessities, designs. He’s also released two minimalistic Wordpress themes: Into the White (which was featured on Smashing Magazine) and Velouria.

Single page beauty

The style of his personal single page web site was greatly influenced by Franz Neumann’s elegant creation of Stories & Novels. But after the initial resemblance in the layout and minimalistic design, the similarities end.

Leon Paternoster's sophisticated minimalistic homepage

The use of Adobe Garamond for the body text on Stories & Novels makes me feel I’m reading a professionally scanned copy of a beautiful book online. Leon, however, chose to go with a safer font for Web: Georgia. In fact, with the exception of the Garamond for the fancy ampersand, the entire page is set in Georgia. And I actually prefer the clearness achieved by a gray text colour and bigger font size on Leon’s site vs. the black and small text on Stories & Novels, that make the latter one appear a bit blurry on my screen.

An interesting thing to note about the different design practices is the way that red/burgundy line was achieved on those two sites: an empty DIV with a red background and 2px height on Stories & Novels vs. the dark red line set to the HTML tag with a top 0.2em border on Leon Paternoster’s.

The only critical comment I have about Leon’s personal page is the slightly excessive use of white space. I do like to see designers practice the use of negative space in their designs, but because there are no images on Leon’s page, no major distractions (I don’t count the red link lines here), lots of white space feels a bit overpowering and unnecessary. I think by slightly reducing the space above and below the site title and the introductory paragraph and a tad tightening of the line-height in the Work area, all parts of the content would tie with each other more effortlessly. What do you think?

One thing that puzzles me a bit on Leon’s homepage is the absence of the red star symbol anywhere on the page, yet it was used as a favicon for the site? I wouldn’t really mind seeing that red star appearing somewhere in the content for some additional visual interest. Perhaps Leon could add a footer text with some copyright, credits stuff, preceded with that star icon? On the other hand, why not using the logo featured on the blog as a favicon?

Blogging Swiss style

The blog link from the homepage takes us to a completely different design of Leon’s blog. The first thing that catches the eye, besides seeing the almighty Helvetica everywhere on the site, is the post excerpt on the left, set in a huge (2.5em) font size that looks more like a quote than an excerpt, with the post’s title underneath looking more like the quote’s source. At first it got me confused, thinking that this must be Leon’s most recent post. But as it turns out, the featured excerpt comes from the latest Must Read post.

Leon's blog has gone sans-serif with lots of Helvetica, unlike its parent home page that's set in Georgia

The ‘Must Read’ theme continues throughout the blog: you can see the list of Must Reads on the homepage’s right sidebar, and the Archives are starting with the list of ‘Read these first’ posts before switching into the standard chronological order.

Saying No to images

Staying true to his minimalistic ideals Leon doesn’t believe in using images to support the design (you will still see the images within the content though), so even his logo is formed with a few simple CSS strokes: red background colour and padded white lowercase initials inside the square.

The colour scheme is super minimalistic as well: grey (various shades of it) for text and hover links, blue for links. And as I mentioned before Helvetica is the main font on the site, with the exception of Georgia in italic for certain phrases with an emphasis on them and the latest Tweet in the right side of the footer, plus Garamond italic is used to style the preposition “by” in the post’s author details.

The blog is based on two columns, with a minimal dynamic content on the right sidebar that changes depending on where on the site you are: on the home page (and Search results page) you see Must Reads and Recent Posts, on single post pages you see only Recent Posts, on About page you can learn a bit more about Leon, while on the Archives page you see only a list of tags.

Even the site navigation is reduced to the minimum: there’s no contact page, only email address, so you’re only left with unadorned list of three main pages—Home, About and Archive, displayed on the right side of the header below a simple search box.

Blog Critique

My critique is going to be as minimal and laconic as the design:

• I find Helvetica set to default 16px (100%) difficult to read in long paragraphs;
• I think the lists need some breathing space between the list items;
• Would love to see more colour on the site: perhaps re-using that same red from the logo/favicon on link hovers?
• Too much Helvetica can be overwhelming, some more typographic colour wouldn’t hurt either: perhaps more Garamond treatment, more font size variations?
• Not crazy about the date/author data styling above the post (hint: Garamond would look nice here not only with ‘by’);
• Once again puzzled about the use of the star symbol as a favicon, and not seeing that star anymore on the rest of the blog.

Overall it’s a pleasingly looking user-friendly blog, where the content is the site’s main feature with no competition from design. Over to you now: what do you think of Leon Paternoster’s homepage and blog designs? Would you recommend anything to improve the site’s architecture or style, or do you like the simplicity of it and wouldn’t ask to change a thing there?

Chances are, if you work in graphic design (and this applies even if you basically live online), you’ve had a few experiences with getting something printed. Whether it’s wedding invitations or print promotion for your web presence, the day will come when you have to ask yourself: how shall I print?

Some folks go cheap. Others go local. And increasingly, nowadays, designers and businesses are deciding to go green.

Enter The Green Printer

If you’re a printer, then ‘eco-friendly’ or ‘green’ printing is the sexiest thing going on in your industry. It’s also one of those terms that can come off sounding a bit like an lumbering oxymoron. How can a process that is so resource-intensive possibly be environmentally friendly?

The whole truth is that it can’t. We may be obliged to stand up and admit to the crowd that our profession will never save the planet. That being said, printers and designers can make myriad small changes to our process in order to prevent pollution, reduce our ecological footprint, and revision our industry to be, if not the answer to all of earth’s problems, then at least part of a sustainable future.

So again the question, this time asked by the printer herself: how shall I print?

Not as easy to answer as it sounds. Every printer that’s taking steps to green their process has a different take on what qualifies as eco-friendly printing. And in an industry that’s exploding on a daily basis, what’s green today may be considered toxic tomorrow.

Let’s take a look at the debate.

The Paper Puzzle

A recycled, reusable paper bag, complete with a green mission statement, from International Paper.

The percentage of recycled content that tends to matter to consumers works in direct relation to how much it costs to print. A paper with 30% - 50% PCW will likely cost the same as regular printing, while 100% recycled paper may come at a premium.

Other green printers choose to forgo recycled paper in favor of paper made from farmed trees. Often, paper from farmed trees is milled and shipped locally, cutting down on the carbon costs of printing.

Ironically enough, when printing on recycled paper first came into vogue, many boutique printing houses were buying recycled paper from overseas – a typical (and often repeated) case of delivering the product, while kind of missing the point. Recycled paper: good. But international shipping? just not great for the old ecological footprint.

The best way to get the skinny on a printer’s paper is to trace it back to the mill that supplies it. A good rule of thumb is that if the mill and the paper are certified by the Forest Stewardship Council, you’re good to go. The benevolent FSC is the golden standard when it comes to responsible paper buying.

Design For Your Green Medium

Combine interesting textures with natural imagery to create designs that speak for the environmentally-concerned community.

Choosing to design for a matte finish is also a good way to express your eco-conscience to clients and consumers. Textured paper, and themes that identify easily as ‘earth conscious,’ instantly conveys that earthy vibe that’s so popular in eco-design right now.

Inquiring Into Inks

In the world of eco-friendly inks, the term “Low-VOC” says it all. Printer inks have traditionally been lead-based, with a high content of Volatile Organic Compounds. VOCs are basically vapors that create air pollution, and seriously affect air quality in the workplace. Lead-based inks are also toxic in general, take a long time to biodegrade, and are difficult to dispose of safely.

An eco-friendly print design doesn’t necessarily mean dull colors!

And all those rumors you’ve heard about soy and veggie inks being dull, easily faded, and difficult to work with? So ten years ago! If you want to keep it a secret, no one will ever know your designs were printed using earth-friendly inks.

But Who Does It Best?

Once you’re an expert on papers and inks, you’ll still need to choose the right printer for your project. Lithographers, screen printers, digital printers, and sheetfed offset printers will all argue that their process has the most to offer. The questions you need to ask to find the solution that works for you are:

• Is the printer replacing chemical-based processes (like platemaking) with water-based, or even waterless processes, wherever possible?
• Is the printer recycling, and using recyclable materials, wherever possible?
• Is the printer using electronic billing to eliminate paper waste?
• Is the printer working with local vendors and suppliers to cut down on their carbon footprint?
• Is the printing engaging in any extra green initiatives in the community, such as supporting clean-up efforts, investing in alternative fuel and energy sources, and contributing to green causes?

Think it might be tough to squeeze all these details out of a printer? It shouldn’t be if the printer is sincere in her effort to make a difference. If a printer is being cagey and evasive, you can bet they’re advertising a stronger green ethic than they’re actually living.

In fact, if a printer is serious about catering to a green community, they should have a ton of information readily available on their website.

All-Around Eco-Ethics

The last check point in the above list might seem a bit extreme, but the fact is that one of the best things printers and designers can do to offset their environmental impact is to be ecologically responsible in other areas of their lives.

To ‘green’ the industry, printers aren’t just thinking about recycled paper. They’re thinking about how they get to work in the morning, where the food in their cafeterias comes from, and what they can do outside of the office to make a difference.

Bring Together Green Design, And Green Living

By ‘ganging’ small print jobs together onto a single sheet of paper, printers cut down on paper waste.

• Reduce paper consumption by sending postcard mailers instead of cards in envelopes.
• Reduce ink waste by creating simple one and two color designs.
• Work with a gang-run printer to cut down on the waste paper created by a project.
• Find a local printer to cut the carbon costs of shipping.
• Stay away from foil stamps, plastic/metal hooks and latches, glues, and other add-ons that make recycling difficult.
• Design with a green message. A positive statement about environmental stewardship can be sent not just with copy and logos, but through the style and tone of your design.

As ‘green design’ comes into its own, it’s increasingly taking on a look and feel that makes it stand out from the ultra-polished, plastic looking majority. And for many businesses and consumers, it presents a very appealing alternative.

Expressing a message of environmental concern and desire for change through graphic design may be on of the most powerful things our industry can do to actually make a difference.

Like Your Mom Always Said, Just Try Your Best!

As I mentioned earlier, it’s a semi-depressing fact that green printing PROBABLY isn’t going to save the world. Even at it’s best, logistical and ethical challenges do abound, but around the office where I work, that can’t-win-don’t-try attitude isn’t allowed. Just because printing may never be perfect, it doesn’t mean we can’t constantly be trying to make improvements, brainstorming for new ideas, and challenging ourselves to print, design, and think greener every day.

As long as our industry, and every industry, continues to make the effort, rather than throwing up our hands in despair, we can but move forward into a future that is green, sustainable, and as beautiful as we all imagined it could be when we first fell in love with design.

What’s your approach on going green in your daily activities and work?

It would be hypocritical of me to say that there is something wrong in getting together and collaboratively discussing the issues and the reasons why in the XXI century we still have children dying of starvation, people dying from diseases that can be cured with the modern medicine, how come that even in civilized countries there are still people living on the streets and something as essential as health care and education is still considered a luxury for many.

By all means we must talk about it every chance we get, even if it’s once a year. But there are a few others amongst us who take it much more seriously and closer to heart and dedicate their entire life to the fight against poverty and injustice. Perhaps what the world needs is more people like Mother Theresa amongst us. This article I’m inscribing to one of such people, a remarkable person, artist, designer who devoted his life to a special project by becoming a father and brother figure to 40 kids in Zambia, thousands of miles away from his native Germany.

The first time I came across Care For Kids Farm project was a couple months ago while browsing one of the CSS galleries, and was pleasantly surprised to see such a beautiful site dedicated to such an honourable cause. Since the site was in German, I checked a couple pages via Google translation that it linked to, but then forgot all about it until a month later I stumbled upon a site dedicated to GAG—Get and Give project, soon after I discovered another beautiful GAG site, which looked very different but with a same distinctive feel to it and as it turned out was simply a September version of the site I saw in August.

That’s when my curiosity took over me and I started digging in deep to find out who is producing these amazing web sites that were featured in every imaginable CSS gallery, what GAG is all about and how is it related to Care For Kids Farm project? All I could find out about the designer was his name: Ronny Jander, no personal web sites, no bio, no social networking profiles. By then I was so enthralled by his work that I filled out a contact form on GAG web site and asked to answer some of the many questions I had. I was so happy to receive an almost immediate response from Ronny himself, but I didn’t want to just send him some questions by email, I needed to talk to him in person. So I asked for a chat and fortunately he agreed. The next day we talked for a couple hours or so. Since then we constantly keep in touch with each other, and the more I learn about him and his projects the more grateful I feel for his existence in this world and in the lives of his kids at the Care For Kids Farm orphanage.

Ronny is only 31, but he’s already managed to leave a life long legacy behind. There are forty children (ages 2 to 17) who were rescued and whose lives were forever changed because of him and his boss Joachim Schiffer, the founder of the Care For Kids Farm.

Joachim Schiffer founded a nonprofit organization Care for Kids in Zambia in 2001 by opening a small orphanage in a poor district, three children in a little house. Afterward he went to Germany and Switzerland looking for sponsors, and when he returned to Zambia he got a surprisingly big donation, which he used to buy an old house with a land and completely renovated it into a big farm. Now they’re able to grow some fruits and vegetables there, though they still struggle and could use any possible donation to feed, dress and educate their kids.

Four years ago Joachim invited Ronny to visit him in Zambia. That visit has changed Ronny’s life. He realized then that’s where he belonged, so he wrapped up his life and affairs in Germany and moved to Zambia.

So now there are four of them: Joachim Schiffer with his wife, Ronny and a maid. There are also three teachers during the day who come to teach children. There was another maid who has passed away from malaria only a few weeks ago, leaving a two year old son in the orphanage. The October version of the GAG site Ronny dedicated to her, Eunice Mwando (you can see her name inscribed in the site’s footer).

“Some of the children here still have a mother but are either very young or old and sick, unable to take a proper care for the child”, says Ronny. “But whenever they [family, parents] come to visit, they all ask the child if he/she would like to come with them and they [kids] always answer: NO, no way! That’s heartbreaking in a tearful nice way. That’s what makes me proud in life. Really! No sponsor talk. To have someone who loves you so much that you can never imagine being able to give back. We are not really an orphanage, we are like a family. We can’t go away from each other. Sounds like honey but it’s true, it’s a home”.

Whenever Ronny talks about his children, you can sense how proud he is of them, how sincere his love is for those kids. He doesn’t have his own children but considers himself as “a father and big brother to my children”. What he finds most amazing is “how they look when they come and how they look after a half a year” living at the farm—changed and happy.

In August Ronny thought of starting a GAG project. He got interested in Web Design only a year and a half ago (he was an artist in past), and thought that it “could be fun, a possibility for the kids and maybe bring in something”. He asked his boss who didn’t mind trying it out. So now every month Ronny is designing new versions of GAG web site in hopes of building up his portfolio and attracting some clients. He already built two client sites and is constantly looking for more projects to take on. His initiative is so simple yet so powerful: get a web site and give to kids at the orphanage. All the money he makes from designing web sites go straight to their fund at the Farm.

What I liked the most about Ronny’s designs is that soul-grabbing feeling they invoke. All his Care For Kids Farm and GAG designs feature one or more emotionally powerful images, with a big dramatic background and built as single page sites. When I asked how would he identify his style, he answered: “Playful. I can’t call it clean, minimalistic. What fits that fits. But when I design something then there must always be a THING, something special to me. In the September gag it’s the upside down header image. And I try saving spaces: I don’t like icons very much and prefer to let the site talk with words and very few pictures”.

What’s most amazing about it is that Ronny manages to make that Thing, so special to him, feel special to us as well. I will never forget the black & white image with two dozen kids, standing in groups (since that photo was taken, the number of children in the orphanage has doubled), or those child legs hanging down on the August version of GAG, or those slides with a girl, eagerly eating something green, but obviously something very delicious, and of course that big background image with children enjoying their creative side with colourful paints on the Care For Kids Farm web site.

Fortunately, Care For Kids Farm project has some very loyal donators from Switzerland, Germany and Zambia. Without their generous support this project could’ve not lasted all these years and provided shelter for so many kids and families in need. But I’m hoping that this article would bring more awareness and supporters to this incredible organization. So if you’re looking for a charitable organization to make a donation to, please consider Care For Kids Farm. And if you’re looking for a talented designer to build you a web site or help with your web projects, please contact Ronny and get something from GAG by giving something back to all those kids who desperately need any support they can get.

I will be dedicating a separate post describing my design process, share with you a few wordpress tricks that I’ve implemented here. For now I’ll just give you a brief overview of what had happened here in a quick guide tour:

• Taking a different approach

  I’ve wanted to design something different, if not completely new, but at least something that you don’t often see on other sites, so I aligned the entire page to the right, kept it under 800px and added a big fixed background image, which gets revealed more when you increase the size of your browser’s window. Another reason behind using that big background image is the convenience of changing it anytime I have an interesting image to add. For now I’ve used one of my old drawings in hopes of motivating myself to get back to drawing.

• Purple and Green should always be seen

  Purple and green colour combination has been my long time favourite so the decision to go with it for this blog was the easiest one to make. Later I will show the image that served as inspiration for my purple & green theme.

• Grid and lots of it

  I have a confession to make: this is my first design that’s been completely based on a heavy grid structure. At times I was thinking that I’m back to taking my Math classes, that’s how often I was catching myself with a calculator and numbers on the paper. I don’t even have a Photoshop mockup to show you, since I’ve done there very little and quickly switched to coding the entire site with HTML & CSS.

• some PHP magic

  I’ve always wanted to customize more of what’s possible with Wordpress by adding some custom PHP code. As a result you can see PHP working its magic with displaying the months of the three most recent posts in the header in Roman numerals instead of the standard Arabic ones. You can also see some custom PHP in displaying the article headlines in two iBit’s signature colours: purple and green.

• Reviving the old bits

  It’s been my long time goal to bring back some of my old posts from collecting dust in archives, so I’ve put together Selected Bits section, where I hand-pick and randomly feature some of the popular, recommended and favourite posts (as usual keeping them all under 8 bits each).

• Getting more social

  I’ve always wanted to spread more link love, so now I’ve got a blogroll here with a couple of dozen links that randomly change with every reload, so in the end only 8 of the links show up at once. I’ve also started an Asides section, though I’ll most probably be changing the way I’m currently incorporating it. And lastly, I’ve added my social networking profiles here, so if any of you feel like stalking me on Twitter, last.fm or facebook, feel free to do so.

As I mentioned, there are still many things on my to do list for Inspiration Bit: I’ll be changing the sitemap page structure, styling the Contact page, updating my about profile and presenting my portfolio. I have yet to work on iBit’s new logo. What you see right now in the header is just a temporary font and styling.

One of my favourite writers, Antoine de Saint-Exupery, once said

You know you’ve achieved perfection in design, not when you have nothing more to add, but when you have nothing more to take away.

I wonder when, if ever, will I get that feeling with Inspiration Bit’s design, how long will I be adding and removing things until I get to that perfect balance? Only time will tell. One thing I can tell now is that I’m feeling soooooo relieved that after such a long time and so many promises I managed to complete this new design. You can’t even imagine how dreadful I was, I couldn’t wait to find time and launch this new look, I couldn’t even make myself to post anything because I couldn’t stand looking at the old iBit any more (how could I keep writing about beautiful design if my own site is lacking one). So hopefully, you will forgive my longest silence ever on this blog and will click away from your RSS readers to check out iBit’s new look.

Even though I know this new design is far from being perfect and complete, but I got my wings back and can’t wait to get back to blogging, completing and publishing the numerous drafts that I’ve managed to accumulate. So stay tuned, lots of interesting and inspiring stuff is coming up on Inspiration Bit.

Ok, have your say now. What do you think of iBit’s makeover? What do you like and dislike? What would you like to see here that I haven’t thought of? Since this design is still under construction, I’d love to hear your constructive criticism so that I can incorporate it with all the upcoming changes.

And last, but not least I’d like to thank Jon Tan for building a site that was constantly open in my Tabs whenever I was working on iBit’s re-design. His SILO was an invaluable resource for calculating my font-sizes and line heights in CSS. Thank you, Jon.
There were many other sites and articles that helped me a great deal and I’ll be mentioning them all in an upcoming post on Inspiration Bit’s design process.

In order to ensure my sanity, after reading a couple of blog articles and checking out the futuristic vehicle drawings and comments, I filled out the contact form and hoped that soon someone will get back to me with the answers to my questions about the history behind the Codex Transportica, its designer(s), illustrator(s) and writer(s).

What is true?

Here’s the true story about the mysterious ‘book’ and its creators straight from the horse’s mouth.

Nick Pearson loves to doodle, and was playing with an idea of drawing some strange looking vehicles and posting them online. He did some brainstorming with the fellow members of the DonationCoder forum and the project Codex Transportica came to life.

“To keep things as flexible as possible the ‘book’ was going to require translation—thereby allowing us to write things that we could then contradict later on if we didn’t like it—we could simply say it was a bad translation first time around.”

Later on Tim Smith came on board and the two of them formed a perfect team of a designer and a writer. Nick draws a vehicle, passes the illustration over to Tim who then devises a pretty plausible description of the futuristic machine.

When is it OK to use Times New Roman?

Nick Pearson is also responsible for the design of the site. The type choice (ubiquitous Times New Roman), justified text, the gradient of the paper-like background, hand-drawn figures and icons, striking Victorian wallpaper and the gorgeous header make the site resemble a book.

Times New Roman was criticized by some as an unsuitable typeface for online reading (opting for Georgia or other faces instead). But with the right type treatment it’s possible to bring out the best of the good old Times New Roman. Two of the most effective techniques to give a non-typical look to any typeface is to experiment with leading, achieved by line-height in CSS, and white space in the form of letter-spacing in CSS.

That’s exactly how Nick Pearson made the content of his site legible and unstrained for reading online: he kept the body text at the default size of 16px but added a generous line-height of 26px. In addition he restrained the content area to 434px wide, which keeps the line lengths to the optimal 60-70 characters long.

In fact, Nick sticks to Times New Roman throughout the entire HTML copy of the site: menu links, navigational post links, article titles, comments. And everywhere Times New Roman looks different thanks to varying font sizes, letter-spacing, font-weight and colours.

How to add some authenticity to the site?

The first thing that catches the eye on Codex Transportica site is the opulent header image that resembles an antique red leather cover of the ‘book’ with the washed out embossed gold lettering and the ‘worn out’ dark patches.

Nick has re-created the ravishing ornate letters C and T from a book called “Alphabets”, published by L’Aventurine. I’ll try to get myself a copy of this book filled with stunningly drawn alphabets, which are all copyright free.

For Codex Transportica Nick has chosen the monograms designed by a 19th century German designer Karl Klimsch. I managed to locate one of his books with 2,100 Victorian Monograms on Google Books so that you could take a closer look at the amazing work by Karl Klimsch.

I also ordered a copy of this book from the local book store and will share some designs with you on Inspiration Bit as soon as the book arrives.

The lowercase letters in Codex Transportica are displayed in Birch Std that goes really well with the ornate capital letters.

All the other text in the header is displayed in a familiar Courier New, which adds authenticity to the whole mysterious ‘book’ experience on this site. I’m also very fond of the beautiful grey background wallpaper that somehow reminds me of Rudyard Kipling. I guess because of some Indian/British influence that I see in the background pictures. I asked Nick to tell me a bit more about the wallpaper:

The background to the website is a tile I managed to put together from a bad photograph of real Victorian wallpaper (I think it is Victorian).

The drawings and the writing, which is composed not without a good sense of humour, deserve a special attention. I highly recommend you to carve a bit of time for yourself to sit down and read a few chapters of Codex Transportica. You’ll get transported to a very strange future that at times feels like the society went backwards in its development, and other times you’d be left in awe at what could be possible to accomplish had the science learn the way to transform one’s phenomenal imagination into reality.

What can be improved on Codex Transportica?

Even Nick considers his site to be a “beta” and will be tweaking it as the time permits, so I’ll try offering some constructive criticism here and encourage you to do the same in the comments below.

Although I commend Nick’s decision to stick to Times New Roman throughout the HTML text of the site, I’m not crazy about the menu titles at the top, they look like typical Times New Roman on sites dated back in the 20th century. I actually tried displaying them without the added weight:bold, and to me that made the menu links look better.

Some of the book chapters list other related topics at the bottom of the article, currently they are displayed in exactly the same font style and size as the main copy of the site. I would like to see a different type treatment for those links that would allow them to standout and cause less confusion to the site’s readers.

Hopefully Nick will pay more attention to styling the comment and contact forms on the site. Right now they show up with a standard HTML treatment, default font sizes, colours and styles, and look unattended. I’d like to see them equipped with a style suitable for this blog.

I studied some underlying code of the site and it definitely needs to be cleaned out here and there: there are occasional nested divs with some redundant styling applied to them.

I do like though a few interesting programming goodies on the site, like the icon/link for displaying Random Posts on the blog, the links to the latest and oldest articles, as well as the previous and next ones, and the mobile version of the site.

What are your thoughts, suggestions for the Codex Transportica? If you’ve missed my previous articles in Exquisite Web Typography series, be sure to check the past issues: Part One, Part Two, Part Three and Part Four.

So while I’m working hard at completing the re-design of Inspiration Bit, I’m grateful to be given more opportunities to continue with my Design Critique series. This time, a very talented Simon Pascal Klein asked me to take a look at his wonderful creation—Klepas.org.

Simon Pascal is passionate about typography, and it definitely shows up in the design of his personal site. The clean layout is based on a strict four columns grid where the section in the middle spans over two columns. The typographic choice is very straightforward: most of the site’s content is displayed in Georgia, while Helvetica (with the fall-back to Verdana) is designated for auxiliary notes on the left sidebar and the introduction text in the comments area.

I like how Simon injected the site with a few personal touches like the Lion symbol on the homepage that represents his sign of birth (Leo), and the black&white photo with a cup of coffee that manifests Pascal’s love of java. He also started a very interesting sister-site inadvertently called Typenuts where he showcases some very curious and interesting typography-related finds, like the photo of “a personal letter, signed by Goethe”.

As much as I like the look and feel of Klepas.org, I would refine a number of things there:

• Déjà vu

  One of the first things that caught my attention on this site was the use of the exact same fleuron in the date treatment as the one in iLT’s byline. Perhaps had I visited Klepas.org prior to seeing iLoveTypography, I would’ve simply noted an interesting ornament that goes really well together with the medieval and understated style of the site. Personally, due to an epic popularity of ilT, I would change it with some other decorative element, while sticking to the same classical feel.

  

• An odd colour scheme

  At first it appears that Klepas is adhering to a typical minimalistic colour scheme of black & white with one accent colour that becomes increasingly popular with many sites that focus on type and achieving a rich typographic colour rather than employing various hues of chromatic colour. But upon further exploration of the site we notice that besides the prominent red, Simon Pascal is making use of other colours to differentiate links from the rest of the content: orange for hover links and purple for visited links. To me this colour scheme looks slightly odd, the purple visited links look a bit displaced, what do you think?

  

  Furthermore, I find it slightly confusing to see different link treatments in various parts of the content: some flash with a colour of orange on a hover, others simply brighten up from a light grey to a darker shade, while others display an underline.

• Shouldn’t the note be noticed?

  While I do like the attractive red fleuron that precedes the “notes” on Klepas.org, I don’t think that feature alone makes the notes distinctive enough to differentiate them from the rest of the content. Perhaps a slightly decreased font-size, or a lighter font colour, or some kind of thin line separators above and/or below the note would make the notes to stand out better.

  

• Calendar styling

  I’m not a big fan of calendars on the blog’s sidebars, but I might be in the minority here. Nevertheless, I would’ve preferred to see a more original styling for the Calendar on Klepas. I like Rob Goodlatte’s approach to showing the dated archive on the sidebar.

  Speaking of archives, one thing that I miss a lot on Klepas.org is the way to see some of the old content of the blog. I think new visitors to Klepas would really benefit from features like Related, Recommended, or most Popular posts, and Archives page (there is an Archives page for Typenuts but none for Klepas main site).

• Comment wish

  This is more of a personal preference rather than a critique, but I’d really like to see some added features that would allow me to instantly recognize the author’s responses from the rest of the comments on the blog. Right now all comments—visitors’ and Pascal’s—look the same. This is something that I’d definitely be adding in Inspiration Bit’s new design.
  

• Bulleted Lists

  While I do like the way Simon styled the hanging bullets outside of the main content column, I think the bulleted lists would become more legible and easier to read with the added margin space between the list items.

I’m not expecting all of my suggestions above to be worthy of consideration, others might be okay with the way things are right now, but I hope Simon Pascal would find some of them helpful. Overall, I really like the classic vibe that comes from Klepas.org. The auxiliary notes on the sidebar that accompany Simone’s articles help to break down the reading of usually lengthy and always interesting posts.

What are your thoughts on Klepas.org? What would you like to see improved or changed on that site?

On the other side I can’t deny and be ungrateful to the fact that there are thousands of other blogs that have a much smaller loyal following than mine. While as you can see from the Feedburner screenshot above, the rise of RSS subscribers to Inspiration Bit has been nice and steady, and with the exception of a couple of months this Spring, the numbers are continuously growing. This progress is far more significant than the actual feed count, especially given the fact that I spend much less time blogging this year than I did a year ago.

So how can bloggers increase their RSS subscription, what tips can I share with the readers? I think before finding the keys to the HOW question, it’s more important to answer the WHY and WHAT questions about RSS.

WHY

Unfortunately in a crazy race after more traffic, more subscribers, more comments many forget that bigger is not necessarily better. How many of the Top 100 blogs on Technorati list do you read on a regular basis? There are only a couple of them in my feed reader, only a dozen of them that I occasionally visit and read, another dozen that I’ve heard about but have no interest in reading, while the rest will remain unknown and unvisited for probably forever.

So why is it so pivotal to you to build your blog’s RSS feed count to thousands of subscribers, and is it that paramount to you at all? Is it the fame you are after, or the money making aspect of the blog is the one pushing you for more subscribers? Whatever it is don’t let the obsession over numbers take over the quality and the value of your posts and writing.

WHAT

What are the benefits of having a large number of subscribers, what impact does it have on a blog?

Obviously the high feed count is a great promotional tool for your blog. But with the larger audience your responsibility as a blogger grows as well. Are you ready to take on more roles and be that authority in your field of blogging? It’s very easy to fall into the trap of following the footsteps of other blogs in your quest to achieve the popularity and numbers that you crave, but is it the right path for you? Do you have what it takes (time, energy, commitment, big pool of ideas, knowledge) to stand out in the crowd, attracting new readers and keeping the existing ones happy?

HOW

By answering those questions you’ll be able to come up with your own strategies for building a solid readership around your blog. Study the tactics of your favourite blogs. Try them out on yours. See what works for you, what felt right for you?

One of the more popular and sure-fire methods to get more incoming links, comments, popularity with social networks and new readers nowadays is to publish ginormous lists of links on a certain topic. Certainly you can try that out yourself as well, but make sure you’ll follow it up with some quality original content. After all how many blogs can we handle that “smash” us with loads of links to follow and pictures to look at?

Another successful method that helps you to attract more business through your blog and gain authority in your niche is to share your business experience and knowledge with the readers, write about things you’ve learned, take them through your business processes.

The best strategy is to stop obsessing about the numbers and instead be committed to your blog’s success, be sincere and passionate what you write about. Be it the love of type or photography, the knowledge of graphic applications, the field of your study.

Ask yourself the question: “Would I subscribe to a blog like mine?”. If you’re brutally honest with yourself and your answer is yes, chances are other people would find it interesting enough to subscribe too. And so what if it takes you longer than for some other bloggers to build your loyal readership? The word of mouth, the link love and the loyalty of your readers will do the magic of spreading the word about your amazing blog. All you need to worry about is to keeping up the great work, being unique and genuine.

As for Inspiration Bit, while I do still check the feed count as soon as I turn on my computer, I’m not letting myself to be preoccupied with the numbers. I have big plans for this blog and when the time comes I’ll be ready to take it to the next level and be comfortable with the larger audience and increased responsibility.

What about you? How does your RSS saga look like?

That’s why getting feedback from everyone we can is especially crucial when we launch or re-design our own sites or branding identities. This means that every designer must possess an essential quality: don’t take criticism personally but learn from it and look at the produced work from that person’s point of view.

There are many sites and forums where we could present our work and ask for a feedback and input from others. Designers who blog can simply ask their readers’ to share their thoughts. Nevertheless, I thought of starting a new feature on Inspiration Bit: Design Critique, where I will try my best at offering a constructive criticism on the design of certain sites and hopefully my readers here will add their thoughtful suggestions as well.

Since I do not want to offend anyone, I will be reviewing the sites only with the permission or request of their authors/creators. Once I complete the re-design of this blog, I’ll present it to you with the invitation to critique every bit of it as well. If you would like me to comment on the design of your site you are more than welcome to contact me with your site details. These reviews will be completely free of charge. I do however reserve the right to choose which web sites I would be featuring in my reviews.

Now I would like to thank Sander Baumann for inspiring me to start this new series and for being the first “victim” of my Design Critique. Sander has recently re-designed his blog SEGD and asked me to comment on the design. He already received lots of insightful comments from his readers and instead of repeating some of those recommendations here I advise you to visit SEGD yourself and check out the discussions there, while I will add a few of my comments here.

Some of the readers’ suggestions Sander already took into a consideration, corrected a few design elements and currently works on improving the menu navigation.

Obviously Sander spent a significant amount of time laying out the new design down to the smallest details. As a result he came up with a beautiful minimalistic look that’s focused on readability and elegant typography.

There are a few things however that I would spend some more time polishing out:

• I’m glad that Sander is re-working the menu, the font there was not very legible. Also, since Sander’s blog is bilingual, and he posts in both Dutch and English, adding TITLE attributes in English to the Dutch menu links would be very helpful to his English-speaking readers. Adding hover effects on his menu links was a good suggestion as well.
• The text in the header on both sides of SEGD needs to be re-formatted as well, it looks too small and blurry.
  
• The big right curly bracket in the metadata area on the left sidebar feels a bit out of place, misaligned. Perhaps rather than using the curly bracket (which does remind a similar treatment on iLT) some distinct ornaments or fleurons between the date and the post metadata would appear better here?
• I’m not sure what was the reason behind italicizing the curly brackets around the number of comments on the left sidebar, but they look odd to me there
• For the bulleted lists perhaps it would be better to use small asterisks for bullets instead of the squares, to match the distinct element of the design—red asterisk.
• For the RSS section on the sidebar I would use a red RSS icon instead of the orange one. How about designing your own RSS icon? Say, simply keep only the dot and two segments in red .))
• Similarly, colour the arrow in a circle icon next to previous in red too. And perhaps create a simple envelope illustration/icon in red as well, next to about section on the sidebar.
• Rather than showing the number of RSS readers as a simple text line, I would skip the feed count here altogether (it is already displayed as the chicklet in the footer), and display a list with subscription links there (while removing the link from the Subscribe heading), like subscribe to this blog, subscribe to comments, subscribe by email.
• I’m glad that Sander introduced an additional colour to the mainly monochromatic palette. So many minimalistic designs stick with having only one accent colour in a black and white colour scheme nowadays. However, I’m not crazy about that light blueish colour for the links, it is too pale compared to the rich red. Perhaps some bright green hues, deeper blue, or even a daring shade of pink would work better.
• Rather than styling the links with the default underline, I would space them with more breathing room by setting the text-decoration: none; and adding the border-bottom attribute with specific values for border thickness, style and colour.
• While I do like the placement of numbers on the right side of the readers’ comments in a separate column, I’ve missed that detail at first. Displaying it in bold, or in red, or increasing the size a bit would make it more visible and stylish.
• I love the white on black footer, it is very bold and attractive. I wonder though if adding the hover effects to the category links would enhance the user’s experience navigating the site. What do you think?

Overall, I’m very impressed with the re-design. It’s very clean and well thought out with some interesting ideas like placing the red asterisk to distinguish the author’s replies from the rest of the comments. I applaud Sander’s choice to use elegant Meta Serif as a decorative typeface for the site.

What are your thoughts on Sander’s recent re-design? And what do you think about the Design Critique series on Inspiration Bit?

Marian draws inspiration from various sources, as different as Islamic Art and Victoriana, as vast as 14th-18th century calligraphy, styles as divergent as Baroque, Rococo and Gothic. She’s influenced a lot by the Arts & Crafts movement, old lace. Even though Marian claims that she’s not a big fan of M.C. Escher, I do find his impact on her work, especially in pieces like “The Struggle” and “An Orgy of Reading“.

There are very few Graphic Designers who managed to create a unique style in their line of work, that becomes instantly recognizable without compromising the needs, values and the image of their clients. Marian is one of such designers. Her signature intricate illustrations are painstakingly detailed and delicately beautiful.

Bantjes’s work received a huge recognition and numerous awards. Her first commercial typeface Restraint, which is more of an “ornament font which happens to contain letterforms”, was awarded with a Certificate of Excellence in Type Design from the Type Directors’ Club.

She also received a Gold Racie award for the Want It campaign that she was hired to create for Saks Fifth Avenue by Michael Bierut at Pentagram.

Stefan Sagmeister calls Bantjes “one of the most innovative typographers working today“. He likes her so much that Stefan asked Marian twice to contribute to his series “Things I have learned in my life so far”. He was so impressed with her sugar piece she did for the Fox River Paper booklet that asked to use sugar to create his phrase “If I want to explore a new direction professionally, it is helpful to try it out for myself first“.

… and here is the close up of this stunning piece of work:

Marian always pushes the boundaries of the conventional design. Check out her outstanding design of TypeCon 2007 program, that includes 80 pages with the program details and 88 speakers bios. I really like the 3D structure on the cover and the poster that’s built with letters, intricately connected with each other:

Another Marian’s work that I find very beautiful is the identity and Call for Entries that she designed for Graphex 2006 — Canada’s Biennial Design Awards, organized by the Society of Graphic Designers of Canada. She explained her choice of design with her decision “to focus on nature, and the things that we all have in common in this vast country: plants and insects“. She made the logotype from maple leaves and used all Canadian fonts.

She followed this beautiful application form with a stunningly designed Graphex catalog with a laser-cut cover that allows you to see through the underlying page of magnificent florals.

So if you happen to ask me what is it that I like the most in being Canadian, my answer would be very simple—I’m proud of this country that produced so many talented individuals: from the most gifted Canadian artist Emily Carr to the world-renowned architect Frank Gehry to the iconic jazz pianist Oscar Peterson to the eccentric Glenn Gould to the remarkable writer Margaret Atwood and to my most favourite singer-songwriters k.d.lang and Leonard Cohen. This list can go on and on and on.

If you need more reasons to visit Canada and perhaps never leave it again then check out Isabella Mori’s 26 Reasons why she’ll never leave Canada.
Happy Canada Day!

Since Meryl already has a logo designed for her site, she asked me to help with her other blog: Bionic Ear. Without providing much direction she asked me to see what can be done with the look of that site.

Bionic Ear: Before

click to see the larger image

The blog’s original design was based on a very generic template with a striped (one of the web design clichés of 2006) light grey background image at the top. The colour scheme was very washed out, the green colour for links and blue for the dates and sidebar headings didn’t quite go together well. And there was just too much of Verdana, giving very little distinction between the main content and the sidebar links.

Bionic Ear is built with Movable Type. I’ve never worked with Movable Type before, and after getting the login details, I discovered that I cannot edit CSS files on fly. Thus I was left to play with the design using my favourite Firebug.

Bionic Ear: Version One

click to see the larger image

At first I decided to experiment with Typography. I changed the tagline from Century Gothic to italic Georgia; switched the default from Verdana to Georgia, and transformed the titles with small-caps Georgia. However, Meryl preferred to stay with Verdana for the body text, and felt that small-caps won’t work with her often long titles.

Bionic Ear: Version Two

click to see the larger image

Taking Meryl’s comments into consideration, I sticked to Verdana as the main text on the site, displaying the post titles in Georgia, used all-caps Verdana for the dates and sidebar titles. I also customized the colours and background images. At first I decided to go with patterned backgrounds. I downloaded the original images and used them as guides for the shape and size of the new ones. Then I grabbed a couple of background tiles from Squidfingers and changed the colour scheme to greens and lights browns.

In order to test how my new background images look on the actual site, I’ve uploaded them to my server and used an absolute URI when linking to them in the CSS via Firebug.

click to see the larger image

This time Meryl liked the direction I was heading to, but preferred a less traditional look, confessing that she’s “more of a modern / contemporary design lover”.

Bionic Ear: Version Three — Final

click to see the larger image

In the third version I’ve kept the typography, but changed the colour scheme to blues and greens and got rid of the patterned backgrounds, sticking to solid colours. Meryl liked this version. So I updated the original CSS file with my changes, archived it with all the image files into one folder and sent the ZIP file to Meryl, who then uploaded the files to her server.

So here you go, a case study of what can be done with a few changes in CSS, by experimenting with font selections, type treatment and colours. What do you think? Do you like Bionic Ear’s makeover? What would you change in its design?