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!

Share This

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?

Share This

Of course you can also let your imagination fly and come up with unusual ways to present your images. A BriefMessage, for examples, features a big image not only as a main element of each post, but the entire site as well. Displaying post’s metadata on top of the image seamlessly integrates the pictures with the overall design of the site. Jason Santa Maria aligned a huge image, 495 x 863 px to the left of the content on his recently re-designed site.

As part of my meticulous design series, I now present you with eight different ways to style images in your site.

1. CSS Drop Shadows

Ads Of The World is a site that’s all about visuals, so it’s not surprising that it pays attention to how the images are presented to viewers. All images here are wrapped in a frame with a drop shadow at the bottom. There is an extensive tutorial on A List Apart that teaches how to add flexible CSS drop shadows to your images. Ads Of The World has done it a bit differently: 3×3 px shadow.gif is tiled horisontally, and applied to the A tag, while the image itself is styled with borders, background colour and padding. Notice how the colours change when you mouseover the image.

.node-image .image a {
background:transparent url(images/shadow.gif) repeat-x;
}

.node-image .image img {
background:#E4EEF7;
border-color:#D9D9D9;
border-style:solid;
border-width:0pt 1px;
padding:12px;
}
.node-image .content a:hover img {
background:#FFE8CC;
}

2. Background image

SimpleBits approach is very simple yet effective and expandable: it’s using a tiled background image and padded picture. SimpleBits’ choice of the background image is hardly noticeable, looking more like a solid colour, however it doesn’t mean that you can’t experiment with more daring images to be used as a background.

div.photo img {
background:#E0E0D5 url(../img/bitstream/noise-earth.gif) repeat;
padding:1em;
width:49em;
}

3. background+border-top/bottom+padding

Nitram+nunca has come up with an interesting touch with its presentation of images: it’s displaying only the top and bottom borders in addition to the background colour and padding around the image. Different colours for the two borders make the pictures look embossed to the site.

.main .entry img {
background:#D9CFBD;
border-bottom:1px solid #FEFEFD;
border-top:1px solid #C9C5B3;
padding:5px 6px 6px;
}

4. Decorative Image Captions

DesignIntellection initiates a new way in using image captions with a semi-transparent layer at the top of the image. First of all, the DIV container with the class “post-image” is set with a position: relative, which allows an absolute positioning with the “title-date” span inside that DIV.

.post-image {
position: relative;
}

.post-image span.title-date {
background:transparent url(images/tnsp-black-65.png) repeat scroll 0pt 50%;
color:#FFFFFF;
font: 11px/16px Helvetica,Arial,sans-serif;
margin:5px 0pt 0pt;
padding:5px 10px 5px 74px;
position:absolute;
left:0pt;
top:0pt;
}

#main .post-image p img {
border:5px solid #E7E2DF;
}

5. Dashed borders

Image styling on Antiphrasis is not at all complicated, but combined with a few delicate details it looks very effective. The images itself are simply padded with a dashed border, but because the majority of pictures there are transparent PNGs, they look very impressive, especially when you mouseover them and the background “flashes” at you with a different colour and the light dashed border turns orange and solid.

.article-img {
border:1px dashed #9EA8A8;
padding:10px;
}

.article-img-link:hover img {
background-color:#506262;
border:1px solid #F07800;
}

Cameron Moll also uses a dashed border on his site, with no frills — just a padded image on a white background.

.picC {
background:#FFFFFF;
border:1px dashed #999999;
padding:4px;
}

6. Book-like image captions

Kyle is using various techniques to style different kinds of images on Warpspire: featured post image is prominently displayed in the site’s header; some images in the posts have no accompanying captions, while others appear with book-like captions.

.figure {
background:#F5F5F5;
border:1px solid #DDDDDD;
line-height:0pt;
margin:19px 0pt 1em;
padding:2px;
text-align:center;
}

.figure small {
background:#DDDDDD;
color:#666666;
display:block;
font-size:10px;
line-height:12px;
margin:2px 0pt 0pt;
padding:5px 7px;
text-align:left;
}

You can get inspired by more images with captions over at Elements Of Design.

7. Images with Fixed Backgrounds

If you can prepare and always resize your images with the same width, you could apply a fixed fancy background image underneath. CarnivaleDuVin, for example, is showcasing the images in an ornate frame.

.entry img.hdr {
background:transparent url(../images/hdr-img.jpg) no-repeat;
margin:-8px 0pt 0pt -12px;
padding:24px 25px;
}

The Ernest Hemingway Collection on the other hand is featuring pictures framed like photos with shadows.

Recently Nick La posted a comprehensive tutorial on how to style images with CSS and set them within some very impressive frames.

8. Digital Image Editing

You can also go with a completely different route and style your images not with CSS but in any digital editing image software that you can get your hands on.

Jacob Caas cleverly crops all main post images in a shape of a pencil, similar to the one in his logo. John Boardley beautifully decorates the images on iLoveTypography with white on black captions.

Looking at all those original ideas helped me to choose how I would be styling images on Inspiration Bit after the re-design. Have you seen some other interesting ways in formatting images on the Web?

Share This

Last night I was reading 37Signals’ post Web designers should do their own HTML/CSS, where it was claimed that all designers should get their hands dirty with HTML and CSS rather than handing off their Photoshop mockups to “html monkeys” and expect them to do the coding part. A few days prior to that 37Signals published another post that caused a massive stir — Why we skip Photoshop — where they explained why they skip mockups in Photoshop and from a paper sketch go straight to HTML/CSS.

I can’t say that I absolutely disagree with what Signal vs. Noise had to say about their design process, however I don’t fully concur with them either. For site designs like 37Signals you definitely don’t need Photoshop to do the mockup, although you still need some graphic tool to create that blue gradient image at the top. Yet for other sites with a more elaborate visual design I doubt you can go very far without the initial mockup.

I wonder what is the right definition of a Web designer? (Wikipedia has a definition for Web design, but nothing on a Web designer). 37signals titled the post “Web designers should do their own HTML/CSS”. Of course, web designers should know and code in HTML/CSS, otherwise they can’t be called WEB designers, or can they? After reading their article it looks like Graphic designers who create visual designs for web sites are called Web Designers. To me that doesn’t sound right.

Zeldman once said “Let there be web divisions”, pleading the companies to stop separating the web team members into IT and Marketing departments. I think the same applies to the definition of a Web Designer—it’s a person that designs a web site. And a web site is not a static work of art, it’s an interactive medium. A Web designer must know how to put a web site together, hence must have HTML/CSS skills. To me a Web designer is a link between a Graphic designer and a Web developer.

On the other hand, it doesn’t mean that all Graphic artists who design visual interfaces for web sites should know HTML/CSS. They do have to be provided with a set of guidelines and requirements for the site, they do need to know the Web as a medium to deliver their work for, and recognize that it is very different from Print. However, they do not need to be able to take their design and implement it in HTML/CSS.

Those who do take time to learn and refine their XHTML & CSS skills stop being just Graphic designers and become Web Designers who are highly sought after because they possess a rare combination of being a creative artist and pedantic coder.

Having said that I realize the true question in 37Signals article: who is a better fit for a web site design—a Graphic Designer who doesn’t know HTML/CSS or a Web Designer who designs a site while keeping all the coding challenges in mind?

Most companies I know or worked for always bring a design studio or a Graphic designer on board to design a mockup for the site, which is then delivered to front-end programmers for the actual implementation on the Web.

Now, I have to be honest with you: there were many times when I was getting very frustrated when working with a mockup that was clearly designed by non-Web designers. Once in a while there were design elements that were impossible to duplicate with HTML & CSS, in such cases the mockups were sent back and getting altered to function on the Web. Other times I only thought that I won’t be able to achieve the same effect when in fact I’d eventually get it to work beautifully in all browsers.

Conversely, when designing a web site myself I can’t help but question every design element in my mind against the limited possibilities of HTML/CSS and cross-browser issues: will I end up with too many nested divs, will I be able to get it working in IE. Graphic designers who are not familiar with the coding caveats and are not afraid of breaking the conventional Web layouts, bring fresh unique designs that stand out, and by setting new challenges for Web designers they help to take Web site design to the next step.

Who do you think started questioning the use of HTML tables, frames, popularized Flash? If everyone followed 37signals advice to learn HTML tables and design the sites accordingly, we would’ve still lived in the WebCave Age.

Of course, it’s up to the company or individual to decide whether to hire a Graphic designer to deliver a mockup for the site and then pass it on to a Web designer, or hire a Web designer who’s also an excellent Graphic designer. It also depends on what kind of web sites one favours or needs. Fortunately, you don’t need to be a Photoshop or Illustrator genius to design a beautiful web site (many minimalistic web sites with exquisite typography prove that). Similarly, you don’t need to be an HTML & CSS guru to design a usable and functional web site, just find the right Web designer to collaborate with and put your creative ideas into an elegant code.

Ironically or not, but only a few days after the “learn HTML/CSS” article, 37signals posted a job announcement, looking for a designer
who wants to kick their ass and change their game. Is it because they now find their in-house Web Designers who skip Photoshop and code directly in HTML&CSS to be a little bit boring? Whatever it is, I think a re-design of 37Signals site is long overdue.

What do you think about all this? What is your definition of a Web designer? What is your approach to Web design?

Share This

As soon as I read David Airey’s post on 33 minutes with 33 logos, where he joined a number of other bloggers who shared their days or mornings, surrounded by brands, I grabbed my camera and started snapping away. Originally I thought of recording only how my three-year-old daughter is getting brainwashed with brands from such a young age. She already knows all the labels and packaging that she sees on a daily basis, and points at “her” brand of yogurt or milk at the store: “That’s my yogurt, mama.”

In order to spare you from too much scrolling, I present only the first eight minutes of her morning routine that includes washing and eating, while staying in her pj’s:

Huh, that’s some powerful brandwashing my daughter undergoes every morning.

Share This

It’s been awhile since I sneaked behind the scenes of web sites with stunning typography. But today you’ll be getting a double dose of digital inspiration from me: by checking out my first guest appearance on Typesites, where I put Rob Goodlatte’s site under my trusty microscope, and of course, by sticking to my site investigation on Inspiration Bit.
If you missed my previous installments in this series, you can still catch up with us by checking out Part One, Part Two and Part Three on going Behind The Scenes Of Exquisite Web Typography.

After seeing Designr, the personal portfolio site of a talented designer from Italy, I’m starting to think that all portfolio sites should stick to one page only format. Take a look at Piotr Fedorczyk’s web site: it includes all the essentials for a portfolio site—About section, selected work, portfolio examples, contact form and even a social profile. A gentle colour scheme, beautiful typography, intuitive navigation, some jQuery trickery and lots of creativity make this one pager a joy to look at and explore.

The first thing that catches the eye on Designr is the use of a charming Balmoral typeface for its logo. Piotr follows it up with a site description that’s perfectly matched in a classic Baskerville italic. In fact the entire page’s font is based on Baskerville with the fall-back font Palatino Linotype.
body {
font-family: Baskerville,’palatino linotype’,'times new roman’,serif;
}

Speaking of CSS: believe me, I’ve seen my share of CSS code, with myriads of code styling ways, but I never came across of such a semantically beautiful documentation of a stylesheet as the one by Fedorczyk. It makes studying the code so much simpler. You be the judge:

Due to its extremely light contrast the diamond-shaped background doesn’t interfere with the dark grey writing, and actually adds interest to the simple two-column layout. The headlines are displayed in blue all-caps on a very light grey background, with a thin dark border underneath.

The gorgeous drop caps deserve an extra attention. The first capital letter of each section is separated from the rest of the content and displayed on an ornate light background image:
.miniatura {
background:transparent url(/img/dcap-backg.gif) no-repeat scroll center;
display:inline;
float:left;
font-size:3em;
line-height:0.8em;
margin:0.05em 0.14em -0.01em 0pt;
}


The bulleted list is styled with lovely blue asterisks, and the text is reduced in size. After clicking on any link on Fedorczyk’s page you’ll discover another fascinating trick: all visited links are styled with a tiny blue checked mark in the background. What an ingenious touch, now it’s so easy to see which links I visited—they’re all displayed as “checked”.

a:visited {
background:transparent url(/img/checked.gif) no-repeat scroll right center;
margin-right:2px;
padding-right:17px;
}

And to recap, here’s an example of how your content would look like if you apply Designr styles:

Once you’re done studying all that typographic goodness on Designr, check out some very impressive jQuery effects, like the expanding description below each of the Selected Works on mouseover. Toggle on the “Show Entire Folio” button reveals a striking portfolio that Piotr is deservingly proud of.

I really like how he presented the examples of his work: long picture fragments are linking to the larger size images on Flickr, each work is dated and accompanied with useful details like the type of work (poster or a website), links and small description that sometimes is followed up with a small note in italic.

I can add only one thing to this review: if Piotr Fedorczyk was able to produce such a visually stunning and quality body of work in just 2 years, I can’t wait to see what else he’ll have for us in store.

What do you think?

Share This

When designing a web site some designers start with the looks, the style, the feel, when in fact they should be thinking about a very important factor—Information Architecture—the art and science of organizing and labeling any system, be it a web site or a database.

A traditional web site design process always starts with laying out a sitemap and wireframes. Why should the blog’s design be any different? In most cases the site’s information architecture will actually dictate the direction for the site’s design.

There were definitely changes in the way people organize information on their blogs. The readers are no longer limited to the standard about-contact pages, blogrolls, categories, archives, the most popular-recent posts/comments and ads. More and more blogs nowadays display side posts with their bookmarks and latest activities from social networking sites. Some blogs even bring readers on board to contribute the best articles from all over the blogiverse. Two of the most notable examples where community was invited to be a part of the site’s content are Quipsologies (from the Community) and Noupe (DesignNews).

Nobody can deny the fact that there is lots of information that we want to share with the rest of the world or use as a promotion, so it is very important to pay an extra attention to how we structure our blogs without adding a clutter to the site.

In organizing the information architecture of a blog it is also important to know how readers behave when visiting an unknown site, and think outside of being the authors of our blogs.

One of the most frequently displayed links on blogs are categories and archives. I too have them on my sidebar, though won’t be keeping them in my blog’s new design anymore, thanks to Chris Pearson’s enlightening article on What Every Blogger Needs to Know About Categories, where he warns us that:

By giving users a list of categories to browse on your site, you are creating a psychological conundrum that usually leaves them with a severe case of analysis paralysis.
…
As far as blogs are concerned, categories are the single biggest contributor to both page bloat and link dilution, two of the most abominable SEO sins.

Pearson’s article makes a lot of sense, and he supports it with his own blog’s information architecture: the sidebar contains only four lists with the Latest Articles, Must Reads, Improve Your Blog and Worth A Look, while the Topics(categories) and Monthly Archive are kept on a single page—Archives.

Once again, while thinking about the Information Architecture for Inspiration Bit, I did some research and want to share with you what I found on how other blogs organize their site’s information flow.

1. Creative Curio

Lauren has just launched her blog’s fresh new design. It looks amazing, so make sure to visit her site and share your thoughts and opinion on her blog’s new look. She’s still working on adding more features to her site and polishing a few details, but I already like how she added her social networking links in the footer, and displaying the Related posts, along with the calls to sharing and subscribing to her blog at the end of each article. Lauren has also spent a considerable amount of time putting together a very helpful Graphic Design Glossary which she links to from her main navigation menu.

2. DesignView

Andy Rutledge is a brilliant designer, no doubt about that, and his design articles contain so much value that there’s no need to advertise the RSS feed on his blog with big icons or fancy styling. Andy places only two simple links to his Articles feed—at the beginning of his huge triple footer and at the bottom in the Colophon section, along with the author’s short bio, contact and link to his company site. There are lots of small, but memorable details like the decreasing font size in the excerpts for the three most recent posts on the home page; various bits of articles from the Web in a section, cleverly titled as Ephemera; minimalistic but highly user-friendly and space-efficient switching tabs in a large footer that features Andy’s articles on various topics. Nothing distracts the reader’s eye when reading an article on the site, as there are no sidebars, at the end of the post visitors can browse through the same tabbed Archive we saw on the homepage.

3. HellYeahDude.com

Patrick Algrim’s site design is all about grids, organization, minimalism. Some of the interesting details that stand out are the small navigation in the search box area, the fact that Patrick’s photo along with a short bio appears only when previewing a single post (something to consider for blogs with multiple authors), the comments area is aligned with the rest of the large footer section, making it look more as a part of the site’s overall information architecture rather than a continuation of the post. On the home page the Discussion section is replaced with the Most Recent posts from the Archive. Even the ads placement on the blog was carefully calculated: small images with sponsor ads look more like portfolio thumbnails, and at first I haven’t even noticed that there are TLA ads in the left bottom section of the site.

4. AIGA

If even for some smaller sites an efficient Information Architecture can present a challenge, how do large sites with a complex data structure like news sites, portals, deal with it? American Institute of Graphic Arts (AIGA) has managed it masterfully. There are a few organizational tricks that even smaller web sites can find valuable and applicable to their structure. AIGA’s homepage is filled with tons of information: a featured most recent article is followed with four previous articles along with short excerpts, five most recently commented and popular posts appear after, design jobs, design archive and a calendar of events complete the left section of the page; while the login area, search bar, news and sponsored ads are all displayed in a sidebar. Once we click to read an article all the extra curriculum data disappears, including the footer, and is replaced only with the information relevant to the particular article—Related Images, Content, Event, and a small tabbed section with the recently commented and popular posts.

5. Jontangerine

Jon Tan’s personal site is all about paying attention to details—from exquisite typography to an elegant and user-friendly information architecture. The two sidebars on the homepage are uncluttered and contain only a short bio on the left and a collection of “Curious Asides” with a last link that takes to another page that displays “Stubs via Del.ico.us”, “Moments via Twitter”, “Photos via Flickr” that we can all subscribe to. Both homepage and single post’s page feature a large three-columns section above the footer with interchanging sections: the featured articles, comments, conferences and “Snippets from the Silo” with some very helpful design tutorials/articles are on the homepage, while the latest posts, comments and blogroll on the single post page. Article’s page is once again uncluttered: Jon displays some post-related meta data at the top of the sidebar and once in awhile an auxiliary related data, appears on either sides of the article, making the experience similar to reading a textbook.

6. Astheria

If you thought of Andy Rutledge’s and Jon Tan’s sites being very minimalistic, check out these next two blogs. Astheria is designed by Kyle Meyer, who explained the reasons behind his blog’s super minimalistic design being the result of frustration when “every time I come across a website and am forced to bump the text size up or wait for all of the imagery to load up so that I can enjoy the content“. On Astheria the content definitely gets the royal treatment: the homepage features the most recent post, with a huge font size set in 4.4em, two columns with five latest articles and posts (not sure though how does Kyle determine what is what), a single line footer with the subscribe link, a very simple menu (with a link to archives that features all articles in a chronological order) and even a simpler logo. The single post’s page once again starts with a huge headline and ends with a collection of Related Reading links and social bookmark — no sidebars, no footers in sight.

7. Andrew Ricmann’s Perspectives

If Kyle has placed a tiny logo on Astheria, Andrew decided that the HTML title of the blog is sufficient for readers to see the blog’s name. He also ruled against having a dedicated homepage on his blog, and greets visitors with a full article, completed with a comment form and readers’ comments that start somewhere in the middle of the post in a right sidebar. The navigational menu comes with a drop down list for archives and categories. A similar drop down appears in the post’s breadcrumbs.

8. Warpspire

Kyle Neath’s impressive tricks start with a usage of an image underneath the Featured Article, which can be swapped with the Blog’s Archive, or Experiences or links from Interwebs when you click on the menu items in the “30 Second Tour” section below the banner-like image. I also like how you can switch between listing Tips/Resources, Reviews and Marks—very space efficient. When viewing a single post, the reader can check out the Hot Topics on the sidebar or visit Kyle’s other projects.

9. I Love Typography

What can be said about John Boardley’s beautiful site that hasn’t been said yet. Recently John updated the look of iLT’s main navigation to make it more prominent amongst the site’s rich information architecture. ILoveTypography is one of a few sites that display a complete list of all articles ever written on a sidebar. With twice per week posting schedule John has managed to publish over 100 posts in less than a year of iLT’s existence. However, not everyone can get away with such a long list of past posts on a sidebar, unless you tend to publish very long articles that are so characteristic for iLT. John even created a long list with his favourite typefaces on the second sidebar of the site that’s updated with new type names/links every month.

10. A List Apart

Of course, everyone knows this mecca for all designers and developers, but it’s worth taking a second look at ALA’s information architecture. If this site has managed to handle elegantly its vast amount of articles and pages, then no personal blog has any excuse for a poor site structure and navigation. There are four ways how a reader can navigate A List Apart: viewing a complete list of articles by clicking on the first menu item—Articles; clicking on Topics provides us with a short list of the site’s main topics (that also appear on the sidebar) along with a description and links to subtopics; clicking on linked topics in the breadcrumbs of a particular article we read; searching ALA via search box.

11. Bearskinrug

Kevin Cornell’s site is not only pleasing to look at, but also a joy to browse and explore. The content area of the homepage is split into three columns: the first column is reserved for the actual article, the second column features three latest articles, the last column starts with a ravishing search box, followed with the list of Recent Links where Kevin shares interesting snippets from the Web. On a single post page, the content in the last two columns is replaced by Comments in the middle, and on the far right the Recent Articles are presented as little thumbnails with post’s title and date placed into ALT and TITLE attributes of the corresponding image. Also make sure to check the tabbed section on the right of Bearskinrug’s Store section—such an artful solution to display tabs as illustrations.

12. Rob Goodlatte

Rob Goodlatte’s stunning web site utilizes various navigational elements—top menu, right sidebar and big footer area. The most recent posts gets the spotlight on the homepage and is followed by four previous posts split into two columns. The content of the sidebar changes depending on whether you’re on the homepage or reading a post. The footer always displays the latest tweets, features three posts from four categories and links to Rob’s social activities. I really like how he displays three most popular posts on the single post’s sidebar—the text links are indented with “-9999px” and instead replaced with the images of well-crafted magazine-like titles.

13. Designing The News

Dave Bowker’s elegant site sports a three-column layout with a very minimalistic middle column, where he displays only a limited post related meta data, which give lots of breathing room to articles on the site. The last column showcases links to other sites divided into five different sections. I especially like the way Dave’s portfolio page is organized.

14. Veerle

Veerle’s blog is one of the most well-known web sites on the Web. She’s got lots to offer to her readers: art projects, tutorials, articles, workshops, job ads. There’s certainly lots of information on the site, but Veerle has victoriously dealt with the complex structure by integrating various navigation options for her readers and visually separating the main content of the site from the auxiliary data. As soon as you switch to the single post view the complex structure is replaced with a simple user-friendly layout, where the article gets the prominent spotlight on the site.

15. Design Adaptions

Recently Charity’s site has received a fabulous makeover. I really like her implementation of the data organization on her blog. Depending on whether you’re on the homepage or reading an article on the single post page, the surrounding navigation aids you in finding a relevant and valuable information and keep you glued to the site, exploring it. The homepage features a horisontal row with the photos from Flickr, followed by the set of external links that encourage visits to other sites. Even though the tabbed section stays on a single post page, Charity complements it with the “possible related” posts. The footer links are changed as well, and turned into a showcase of the most popular posts from three different categories.

16. RA Project

When browsing RA Project you can sense that Ronald Huereca has put a considerable amount of thought into improving a user experience on this site, after all the site’s purpose is to place readers first. The homepage features an excerpt from the most recent article, that’s complemented with the list of five recent articles on the right. AJAX carousel is a geeky and quick way to present readers with a whole bunch of recent articles that they can easily browse. Three articles from different categories are featured below with the list of related posts. The footer presents readers with a short about section, del.icio.us links and Readers First award recipient. Since it is a multi-authored blog, Ronald cleverly displays the author’s short bio before each post, followed by a number of links from the same category as the post, and more articles from the same author.

What other sites would you include to this list? How do you browse other blogs as a reader? What are the first things you look at after reading the post that you liked? What do you find most frustrating when browsing an unknown to you site for the first time? What would you like to see on a web site that you visit regularly?

Share This

I wonder if the idea for Twitter came to guys from Obvious after watching that so popular but oh, so annoying Budweiser Wassup commercial back in 2006? Twitter’s simple question “What are you doing?” clearly resembles the one The Bud fans were asking each other.

Who could know that in less than two years such a plain idea of sharing with the world what we’re doing at the moment will turn into a craze where blogging and Harry Potter fail in comparison. Looks like everyone has at least opened an account on Twitter and tried to join the world of micro-blogging. But what can be said in 140 characters or less other than “enjoying a hot cup of java with Baileys”?

Apparently a lot. Humans are very curious and clever creatures, who can create something out of nothing, or turn an unassuming personal communication tool into a powerful marketing and political machine. (Would somebody enlighten @hillaryclinton please, that she needs to at least pretend she’s following some of her followers, or follow the steps of @BarackObama, who follows everyone who follows him?)

There are many tutorials written on how to use Twitter for marketing. Copyblogger has even announced a Twitter writing contest, challenging everyone to write a story exactly 140 characters long. If Hemnigway’s shortest story ever was only six words or 35 characters long, and hundreds of others have tried to follow his steps on Wired, someone should be able to write a novella with 140 characters.

So what is it about Twitter that attracts so many people? Why should we consider opening a Twitter account? CommonCraft did an interesting and entertaining video tutorial on Twitter in Plain English. Though it only covers personal and social aspects of Twitter, it is a good introduction on how someone can start his addiction to Twitter. Oh, yes, there’s already a new term — twitterholic — along with the heated debates on whether a post to Twitter should be spelled twit or tweet.

As for myself, I’m still trying to uncover the Twitter magic that excites thousands of its fans. I couldn’t keep reminding myself to visit my online Twitter page to twit, so I’ve installed several third-party Twitter applications that I found convenient:

1. TwitterBar

   This add-on allows you to post to Twitter from Firefox’s address bar.
   
   Clicking on a small grey/green icon that sits at the end of the address bar will post your twit along with the displayed URI, and you can hover your mouse over the icon to see how many characters you have left.

2. TwitterFox

   This Firefox extension “adds a tiny icon on the status bar that notifies you when your friends update their tweets. Also it has a small text input field to update your tweets”. I like how easy it is here to click and reply to someone’s twit and also click on the tab to see all replies to my twits.

3. MoodBlast

   This is a standalone menubar application that allows you to “blast” your mood, thoughts, activities not only to Twitter but to a number of other apps that makes it really helpful to be on top of your online social life with various social networking sites and IMs like Facebook, Jaiku, Skype, iChat, Tumblr, Prownce. MoodBlast comes with a hand full of useful features, make sure to check out the how-to Screencast on Cicrle Six Design

4. TwitterFeed

   
   Even if you don’t have time to twit, adding your blog’s feed to Twitter will give your site an extra exposure, and to your followers a quick way to check your most recent post.

Hopefully, those four apps mentioned above will improve my Twitter experience and make it less time consuming and more efficient. There are many other popular Twitter apps, which one did you find helpful for your twittering needs?

One thing I’m still trying to figure out is how some people can keep up with following hundreds of other Twitter users? Do you really read everyone’s twits? How much time do you spend on Twitter then?

What are your thoughts on Twitter? What do you like or dislike about it? Do you consider yourself being a twitterholic, or do you find yourself wondering what’s with all that Twitter buzz? How do you use Twitter? What do you twit about? How do you present yourself on Twitter — are you extending your blogging personality or revealing more of who you are and what you do when you’re not “wired”?

Finally, if you like to follow me and my progress to becoming a Twitterholic, or on the contrary, giving up on Twitter, then feel free to do so. You know I always welcome new friends.

Share This

It’s been awhile since I shared with you my ideas for the re-design of Inspiration Bit. Unfortunately, the makeover had to be pushed on a back burner due to many other obligations and lack of time. However, since starting from last week I went solo and building my own business, I definitely need to make my blog’s re-design a priority. So I’m back to the “drawing board”, searching for more sources of inspiration on meticulous design details.

With this post I’m starting from the area of a blog that’s often left ignored — headline, date, author data and number of comments. Take a look at the 16 exquisitely crafted headlines below. It’s obvious that the designers have put lots of thought and payed a very close attention in getting them to perfectly fit the design and add a distinct character to the site’s look and feel.

I called them “dramatic” because some of them indeed appear rather theatrical though not being too showy, others seem to be emerging from antique pages of books or magazines, while others simply manifest themselves with a bold statement without the use of Impact.

1. BEARSKINRUG

Talented illustrator and designer Kevin Cornell most probably loves theatre, just check out his Shakespearean comic and, of course, the site’s design that looks more like a washed out old poster where every little detail was carefully thought out.
I also really like the way he displays the site comments in the adjacent to the post column.
Both the post’s heading and the date are using Georgia, although the title is displayed in a much larger (font-size: 160%) size and italicized. With just a little touch like adding an “elaborate” divider as a background image to the paragraph with the date, he makes it stand out among regular looking headlines on other blogs. Add to that a special treatment for links to previous and next posts: first, Kevin is not displaying those post titles, second, because of that he can safely replace the text with image links that glow on mouse hover (note that he’s still keeping the text link alternatives by moving them outside the windows area: text-indent:-9999px;).

2. VIGET-INSPIRE

First of all, I hope that designers from Viget Labs will one day write a tutorial on how they achieved such perfect watercolour drawings for their site. They continued with the watercolour theme and even “washed out” the pictures of the authors.
The author’s name, along with the categories, cleverly listed as “on the topic of…”, are displayed in 0.85 em all caps Georgia with letter-spacing: 3px, and look very different from the post’s title that uses the same Georgia face, though sized as 1.8 em. The date and the number of comments are displayed in Verdana.
The gentle lines underneath the title, authors and dates section actually all come from a single image, that’s called from the DIV after the title’s H2 tag, but raised with a negative margin so that the title too shows up above the understated dividers of the background.

3. DESIGN*SPONGE

If for some reason you haven’t visited this site yet, please, do yourself a favour and spend at least 15 minutes there. I guarantee you’ll get hooked with those DIY projects, sneak peaks at other people’s room decors, before & after transformations, and so much more.
A rather interesting approach on using HTML tables for building the structural carcass of the site, and only then going with DIV tags for further details. Once again we see one attractive background image underneath the category/date/title/ sections. An interesting detail is that there are eight different background images (as far as I could deduct) that alternate (according to an unknown to me formula). Everything is displayed in Georgia, but in different sizes and styling — uppercase for the categories, but lowercase and italic for the larger titles.

4. KHMERANG

Thankfully, Mr. Khmerang has written a tutorial on how he achieved that worn type for the headlines. Rather than using sIFR where Flash is replacing the text, the text stays untouched but is “covered” with a worn image.

5. TYPESITES

Typesites is a new blog (launched in January, 2008 by Kyle Meyer) that offers a “weekly showcase of websites with interesting typographic design”. I’ve discovered this site only a couple of weeks ago, after my own “investigations” on sites with exquisite web typography. Kyle used Helvetica Bold for the headlines and Helvetica Neue in a much smaller size for all the byline details like the date, author’s name and the number of comments. He achieved a very dramatic effect by displaying them on an almost black background (#181818), with the text set either in white or bright yellow (#FFD200) — so simple, yet so effective.

6. I LOVE TYPOGRAPHY

Of course, it is expected to see type magic in action on a site that belongs to none other but Mr. Typography himself. Aside from the outstanding content, John’s superb eye on typography and focus on details cannot leave us disappointed. The post’s title is set in large Georgia, while a clever addition of a byline, à la 2nd title, set in Lucida Grande with an elegant branch divider in the background image, makes the articles look designed more for a book than a site.

The date treatment is very simple, yet attractive with the bigger number in red (#CC0000) and so perfectly aligned with the comments are. The trick used to display the comments is quite ingenious — the raised numbers with the opening curly brace are set inside the SUPerscript, the closing curly brace is displayed in a big size, while the word ‘comments’ inherits the parent style:

<span class="bigdate"><sup> {74</sup></span>
comments <span class=”bigdate”>}</span>

7. GROW COLLECTIVE

Grow Collective was designed by Jon Tan, whose personal site was featured in my series on going behind the scenes of exquisite Web typography. So it’s not surprising to see beautiful type treatment on Jon’s company site.

Everything is set with lots of breathing room that makes the beginning of every article very open and inviting. The title is set in Georgia, in a rich coffee colour (#331100), the summary below is displayed in italicized grey (#999999) Georgia. The rest of the auxiliary data (author’s name, comments, categories, tags) is set in small Verdana.

8. A LIST APART

I’ve already dissected this stunningly designed site in my behind the scenes of web typography series, so I won’t be repeating myself on how to achieve the headline effects of A List Apart, but I just couldn’t omit listing this site here as well.

9. BLISSFULLY AWARE

Designed by Joshua Lane, this site looks more like a menu of a high-end restaurant, so the use of decorative elements fits the style very well. All text in the post header is displayed using Georgia, and is distinguished with the use of different sizes and styles. An interesting detail here is that to achieve the pale, fading text effect Joshua is using CSS property opacity rather than picking a pale font colour. For the previous/next entry links he specified text colour to be white, but with opacity:0.25, however the entry’s byline (with the author, date and comments) is not using the opacity feature anymore, it’s set with colour: #E6D9BF.

10. ROB WEYCHERT

As Rob Weychert himself confessed, the design of this site was inspired by his love of “the densely ornate editorial layouts from the late nineteenth and early twentieth centuries”. Despite relying on only one font, Georgia, Rob’s use of different colours (#000033 for the title and #993333 for the date), styles (all caps vs. normal), sizes and an unusual alignment (the date is set with a specified width and floated to the left, allowing the content to wrap around it), made the header section of the posts highly attractive. When you mouse over the prev/next links, the title of the linked posts will popup, so you can see what they link to.

11. CAMERON MOLL

If you rather go with something simple, you would appreciate a classic look of Cameron Moll’s style. Add a decorative divider above the title, stick to Georgia, use letter spacing to control the look (letter-spacing:-1px; was used for the headline) and add special characters before/after the date. One thing I’m missing in Cameron’s headline treatment is the absence of a link — I have to scroll all the way down to find the permalink or click to read the comments.

12. MATT NORTHAM

Matt is playing with two fonts — Times and Verdana — to style the post’s header. The decorative swooshes before and after the date are separate images. The date text itself is set with letter-spacing:0.33em, all caps Verdana in bold. The headline is displayed in a bold big lowercased Times. All the additional meta data once again is set in Verdana.

13. COUDAL PARTNERS

Even though Coudal Partners is not a blog, the way Coudal has styled the headlines can be easily adopted for blogs. The difference in sizes between the two titles is striking. Interestingly enough, H4 was used for the large headlines, while H1 is used for the smaller additional title, displayed in Gill Sans. I also liked the use of two colours in the top title.

14. LADY OMEGA

Can you find a more dramatic site than this one? To achieve a similar effect on your blog you should set the title in Georgia, in dark pink (#EA3690) on a black background, add some cute icons before/after all the auxiliary data below the post, float the date to left and style it as you like.

15. WEB DESIGNER WALL

Even though it’s a very popular site and most of you frequently visit it, I had to feature it here as well. A simple watercolour brush stroke in the background makes the header look artsy, and the comments cloud only adds the magic feel to the site.

16. SHAUN INMAN

It is impossible to talk about the type treatment for headlines and skip sIFR (Scalable Inman Flash Replacement) technique. And what a better site to show as an example than Shaun Inman’s (the originator of sIFR) own blog. Shaun uses Univers 59 Ultra Condensed typeface in the Flash replacement, with a striking alteration in colours for the words in headlines. I’m not too crazy about the disappearing headlines on mouse over, but I do like the minimal modern look of the site.

Hope you found those examples inspiring. What other sites would you add to this list of dramatic headlines?

Share This

Well, looks like I’m going solo sooner than it’s been planned. How soon? Since yesterday. What I’ve learned about the corporate world in the last few months I wouldn’t find in any book. It is a crazy, unreliable world out there, full of uncertainties. And although I’ve got my plate full with concerns at the moment, my future somehow doesn’t feel as unpredictable — at least I know that it all depends on the way I conduct my business. And even though Her Majesty Luck plays a substantial role in the outcome, I don’t have to rely on anyone else telling me what I can and cannot do.

So if you’re a designer, feel free to pass on any graphic/web design or programming jobs that you might need to share the workload on, if you are looking for a designer/programmer, at the moment I’m available, though it can change at any time (check my business site for more details on the kind of work I do)… I already emerged myself fully into the new business life style, and have been having client meetings since yesterday, and even managed to score a new client. However, things are not going perfectly well. And there’s something that I wanted to discuss with you about and get your feedback.

Two days after the initial meeting with my new client, who wanted me to design a web site for her business, things slightly changed. She talked with her business partner about getting the site done by me, when all of sudden her partner remembered about her friend who just got her site done for a similar business as theirs for only $200. How did she manage that? By simply purchasing one of the ready-to-use template packages (complete with the “cool” moving, fading in and out images in Flash). So my new client confessed to me that even though she realizes that it’s not good news for me, at this moment that’s all she can afford for a site, and to be honest, she really likes that site and wants something very similar, a simple one, with nothing more than what her competitor’s site has.

Ok, it’s not the first time I’ve had to deal with clients who were wondering why am I charging for a web design so much more than the cost of those cheaper, but in their opinion, very impressive templates? So I went on explaining to her about the disadvantages of having an entire web site done in Flash, about the poor visibility of such sites on Google and other search engines, about the time when she would need to update that site - the images and text, the fact that her site will look so much similar to the one by her competitor, and so on.

Her reasoning was that at the moment she doesn’t really care, she just needs to have a simple site up and running, so that her customers can go online and check some things if needed, and that most importantly she just doesn’t have a budget for anything more than $200.

Usually I just turn my back on such businesses as politely as I can, but this case was different. I really like the type of business she’s running. Through the nature of her business she’s supporting many local businesses run by mompreneurs, promotes the awareness of environmental issues, and expands the line of organic products in the store. So I’ve tried to educate her some more on what kind of a site her business actually needs, and what she’ll be missing on if choosing to go with a pre-made site template. I’ve also added that I’m willing to give her a big discount just because I like her business and would like to support her.

In the end I did manage to convince her to re-think her decision and go with a custom designed site by me. I will also help her with the hosting, domain registration and everything else that needs to be taken care of to get her site up and running. We’ve re-negotiated on a price, she did raise her budget limit, and even though it would probably be the cheapest site I’ve ever designed, I’m okay with that. She’s got good business connections, she already referred another business to me for designing their site, plus this project will allow me to solidify my “foot” in the market niche that she’s in, and the one that I’m very keen in working with. In addition to that, I’m also starting a new business venture (if it works out I’ll tell you all about it later) and she’s helping me out with that.

Plus, because of the low budget for this project I’m not going to spend as much time designing and developing the site than I would spend on higher-end sites. It doesn’t mean that I’ll be turning out a cheap-looking rubbish (I won’t be able to get away with that anyway, nor would I want to “sign” my business name under that site’s “design by” credit section), but I won’t be going over the top trying all kinds of design and programming tricks to add the glamour and functionality that this site doesn’t really need.

Now, I’d really appreciate your input on this, from both sides — designers and businesses who had their sites designed or are considering on getting one done in a near future. Why any self-respected business should never go with pre-made templates, be it for a site, logo or business card? If, however you think that templates, or cheap design deals, are the way to go for businesses on a tight budget, please share with us your reasoning behind that?

I’ve dug out an interesting article written by Chris Pearson almost 2 years ago on how much a site/blog design should cost and his experience when dealing with the customers and project costs. It generated 327 comments, so obviously this is a hot topic for discussions at any given time. David Airey also wrote on this subject matter and even managed to confuse some of his readers who thought that he is charging only $100 for a logo design.

While I don’t really want to go into project pricing, I would love to hear your thoughts on design costs vs. values and why is it okay for dentists, lawyers and a number of other highly-paid professions to charge $200-300/hour for their services, why is it okay to shell out $100-150/hour to an interior designer, but it is a sin to pay that much money to a web/graphic designer? And what’s even more intriguing and interesting to find out is why we never question and simply accept the high prices of dentists, lawyers, psychiatrists, interior decorators, plumbers… but behave so differently when it comes to building our brand name awareness in print and online? What do you think should happen in order to change people’s mindset on design costs and values? Or do you think that nothing should change, that it is the way it should stay, that there are no reasons why designers should get paid any more than those working night shifts at 24 hour drive-thrus?

Share This