• This would be a table calendar
• Paper size is 140 x 100 mm or smaller
• Each month should fit on one piece of paper, allowing for max 12 sheets (+1 for the title page)
• There should be some space for students to write down their notes and appointments
• It’s a study calendar and therefore starts with october and ends with september
• Design should be typographic

My first concern was the really small page size. How does one fit 31 days along with empty space besides each of them on 100 x 140 mm? i did some googling on table calendars, and found a shape I quite liked. This would allow for easy access when writting down notes, plus double my paper size (after all, a sheet of paper has two sides and we can use both!).

It took me a week o two to finish my design (not working on it all the time of course), but here it is:
Calendar - student year 2008/09
It’s best viewed in book mode enabled in your pdf viewer (2 pages, or facing pages), so you can see one month’s sheets side-by-side.

Font used is Anivers by Jos Buivenga, which is the same font I use on this website for main headings. Extra typographic elements are in Times.
I’m using two colors - black and pink, again, same as on this website. I was planning to replace the pink with a similar pantone, but forgot when working on it on the last minutes before the deadline. So the color used is C0 M80 Y15 K0.
Monthly poetry was found on this website.
Oh and it’s obviously in Slovene, along with old slovene month names

I also have the print version, if anyone is interested. Use it if you wish and do notify me if you find it useful. :-) Dates are specific to my faculty (NTF), but drop me an e-mail if you’d like a different version.

A few years later, in 2001 to be exact, w3 said “Hey, our displays are getting too wide for one line of text as well”, and so decided to include multiple column layouts in css3. Years have passed by, and today, in 2008, Mozilla browsers and Safari support this feature. I’m not sure if any other browser does as well.

So how does it work? In a block of text, a web developer can specify either an optimal width of a single column, or the number of columns. He can also specify a gap between two columns, and… not much more. Given text would then be intelligently split into multiple columns of equal heights and widths.

So what are the downsides? As we all know, there’s one huge difference between a printed page and a webpage. A printed page will always look the same, no matter who or where reads it. A webpage on the other hand won’t. Some people may read it in a bigger text size, some prefer a different font family, etc. As good of an invention as columns were, some care has to be taken while using them.

First, and one of the bigger typographer’s fears, are the so called widows and orphans. These are single (first or last) lines of paragraph, which stand alone. Even though not all that disturbing to the reader, they look odd and are never supposed to be left in a printed page. The designer should take care of them either by modifying the text or applying a different design. But who’ll take care of them on the web, where lines may split differently for me than they do for you?

Researches show that text in columns is best readable when justified (you know, not left or right aligned, but both at the same time). But justifying short lines of text can lead to a few problems, such as oversized word spacing and rivers of white. This is regulated in desktop publishing by word hyphenation (splitting a word in two lines), but css draft of it is poor and “up-in-the-air”. But also with hyphenation enabled, a designer always has to check that something ugly doesn’t come out on the final print. Again, no-one can do this for websites.

I guess both problems can be minimized with proper implementation. But I have one more up my sleeve. In newspapers, text is optimized so when you reach an end of a column, you can easily move to the next one. That’s easily done by moving your eyes and head a bit. In websites, though, you read long texts by scrolling. Nobody can guarantee you that the height of a column won’t exceed you browser window’s height. So imagine scrolling around a page with 3 columns, all twice the height of your browser window. For all I know, you might have downsized your window and enlarged your fonts to achieve this, but that can’t be an excuse for ignoring this problem. It’s gonna be a pain in the ass. Scroll down, up, down, up and down again to read one block of text? No thanks. I prefer the “down down” technique.

So I’m not really sure I want to see any columns in web pages I’m reading. Except maybe if a website can guarantee a designer that’s gonna optimize splitting text into columns considering my browser, my preferred font families, my font size and my browser window size. It’s just not something a today’s browser could do on it’s own.

The need for columns is most obvious with fluid width websites, such as wikipedia and today’s wide screen displays. Mostly because people are still buying them to run their Internet Explorer in full 1920 pixels. Too bad no operating system allows us to run two windows side by side to better utilize the screen space.

And all this brings us to why I prefer fixed-width designs. Text is just much easier to read, when someone who knows what he’s doing takes care of it’s width. Just keep in mind, optimal line length on the web is cca. 30 to 35em.

August 2002 - The first design was purple and all, but a few themes were made.

The redesign hasn’t been taken seriously then. It was not until September 2004, when a new request was made. This time, Slo-Tech had gotten a logotype and wanted a design to go with it. So I went for a white design this time.

October 2004 - The main idea was not to change the existing design too much, but to give it a fresh look.

The design, though very slowly, evolved trough time…

January 2005 - I talked to the designer of the Slo-Tech logo, who quite liked the designe, but taught me to align my texts.

April 2005 - More structure has been given to the design, making it look more compact.

November 2005 - Different menus and darker colors

January 2006 - Approaching the final look. The design has been simplified a lot.

And finally into the “final” version, which has been introduced as an april fools joke just yesterday, but kept due to positive feedback.

Even though it took almost 6 years, I believe the design has come out too soon. There is still much that needs to be done to it.

Finished or not, the design has arisen some mixed opinions - some love it and the others hate it. What can you expect after replacing a 9 year old design?

One of the biggest complaints about the redesign was the introduction of bright colors. The old design was dark (gray text on black) and people are complaining that the new white background is hurting their eyes. So I guess half of the internet, including Google, must have gone wrong with their designs. Anyway, theming is possible and the design shouldn’t have come out without the first set of themes anyway.

Two other biggy was the use of a small font size. Looking at the design right now, I must say I agree with this complaint. However, along with different color themes, selectable font size was also meant to be in the final version. So I guess it has to be finished, as well as the default font size brought up by at least a pixel.

Looking back at it, I’ve learnt quite a lot with this design. It was my first “serious” design, where I had to put usability beyond appearance. I’ve learnt a lot about web usability, accessibility, semantic code, accessible javascript and buzzwords like that. It was also my first table-less design (hooray for that!). I’m not completely happy with the final result, but it has brought me some valuable web design experience. I just wish I could properly finish it, before going live.

Besides snowboarding, what did I do there?

I took a few photos …

Tried to draw a few friends …

Posed for a photo …

And let others give a try at drawing me.

Naturally, clicking on the images will open up larger versions.

So that was fun and relaxing. But a year will pass before I get a chance to do it again. In the mean time, I think I’ve gained some inspiration for new challenges. Bring em on!

(And now I’m off for a bit of typographic homework)

One of the subjects, and my favorite one, is typography. Lessons have just started and all we’ve learnt is some history, so I’m still waiting for the real lessons. We did get some assignments though. One of them was typographic composition. Here are the rules of the game:

• Pick 3 words.
• Create a composition out of these 3 words inside a 80 x 80 mm square.
• Use only one character type, but variations (bold, italic, etc.) are possible.
• No letter deformations.
• No colors. Black only.
• Repeat at least 3 times.

I did 5 of them quickly during class with good intentions of doing some more later, at home. Lazy as I am, of course, I did only one at home. Anyway, here are 5 of them (I have decided not to share the bad one).

Alea iacta est
“The die has been cast”, famous words by Julius Caesar. I tried to create an effect of a rolling die here, EST being the die and alea and iacta working as an effect of movement.

rock and roll
Groovy, rolling, etc.

Made in china
I’m sure you’ve seen it written everywhere. Typography resembles the flag of china.

Pijte boljšo vodo
“Drink a better water” - Marketing slogan of a Slovene natural mineral water, Dana. I was going for a shape of a water drop here.

Et tu brute
“You too Brutus” - Another famous quote by Julius Caesar. These were supposedly his last words when attacked and killed by a group of senators, including his close friend Brutus (wikipedia link). I tried to show here, how Caesar raised his voice (I have no idea wether he really did this) while pointing at Brutus (word “TU”) and his passing away at the end of the sentence.

 
I’m quite happy with the results. I guess I could have done it better if I took more time, though. But it is really a nice exercise, to see just how much one can do within the given limits and using only letters.

So what was I to do? The site had no contacts written, so I wasn’t sure who to blame. I did a whois on the domain and it presented me with a name, email and some more info of the person in charge. I sent a friendly email with a few questions. I got a really quick response explaining how the designer used Google images to find appropriate artwork for the new design and this is how my illustration got in. But they replaced the image with a new one and he apologized. No hard feelings here. I’m glad this guy was so understandable of what went wrong here.

I do feel flattered if people want to use any work of mine as part of their project and I can’t remember a time when I said no to such an inquiry. But I don’t like them deciding on their own, wether it’s okay to use the image.

Though I have to admit, I have done such crimes in the past myself. Years ago. But I’ve learnt to respect people’s work and licensing. So now when I do use other people’s work I make sure I’m allowed to do so by either the author himself or by the work’s licensing, be it GPL, LGPL, CC, whatever.

So where do I find such images? Here are a few links:

• Creative Commons search for any type of work

• stock.xchng for photos

• kde-look.org, usually for icons

• Google, yes, but I usually append “GPL” or “free” to my search term, to find only appropriate results

Just make sure to always read the licensing under the exact image you would like to use. Some authors allow you to use their work as you wish, some won’t allow commercial use (they don’t want you to get paid by using their work), some would just like you to drop an email telling them you’re using their work. Most of them however, ask to be credited properly. Just read. If no licensing is given, it usually means it’s not meant for you to use the work. Move along, nothing to see there.

Oh and one more thing - not only is it not nice to “borrow” other people’s work, but it’s also illegal. After all, you’re not stealing bananas in your local supermarket, are you? :)

By default, prior to importing any certificates, Safari will fail to open https://klik.nlb.si/ and https://estudent.uni-lj.si/ won’t recognize you.

My first problem was a corrupted keychain. I’ve imported the keychain from my old system to Leopard and it seemed a bit buggy ever since, always asking me for my password, regardless of selecting “always allow”. But then I found the Keychain First Aid (It’s in the Keychain Access, in it’s application menu - the one that reads “Keychain Access”). I tried verifying my Keychain, but it failed due to login keychain not being in my home directory. Repair fixed this. Keychain seemed to actually remember things I told it to remember now.

But even after this fix I couldn’t get klik to load properly, so I just deleted my whole login keychain. You probably don’t have to do this - just remove any certificates that could play a role in the whole process. You’ll probably ind them in the login and System keychains. I also deleted Safari caches here. Just in case.

I had previously exported both my certificates via Firefox into .p12 files. So now I imported the one from NLB into keychain - Open Keychain access, click on the login keychain, then File -> Import items…

I closed Safari, opened it again and navigated to https://klik.nlb.si/. I was greeted with their certificate. I chose to always trust it and also always allow Safari to access my personal certificate from the keychain. Klik recognized me and I could log in.

Next, I imported the sigen-ca certificate (for e-student) into keychain, navigated to https://estudent.uni-lj.si, again clicked “always trust” when presented with a certificate, but I didn’t seem to get recognized. My guess is, Safari was reading the wrong one of my personal certificates.

So here comes the key part - In Keychain access, I right clicked my nlb personal certificate (the one with my name in it), and selected “New identity preference…”. Under location, I entered “https://klik.nlb.si/” and chose the correct one of the two certificates. The klik certificate is “Dusan Smolnikar”, while sigen-ca reads “DUSAN SMOLNIKAR”. Then I did the same for my sigen-ca certificate, where I entered “https://estudent.uni-lj.si” and selected the other personal certificate. I’m not sure wether the lack of trailing slash does anything, but I’ve read somewhere it makes a difference. Experiment if it doesn’t work at first. What I did here, is I matched the certificates with the correct urls, so Safari doesn’t have to guess.

Now, closing Safari and opening it again, klik and e-student both recognized me and I could log into them. I’m happy.

tip of the day/year:
While 2007 looked pretty good in serif fonts with variable number heights, 2008 does not. The over-sized 8 looks terrible. Get a new font for it.

I used this principle a lot when doing car vectorizations. After spending hours making one (The lambo took me about 30 hours I believe) all I could see in them were lines, shapes, gradients, etc. But by using them as background, I could look at them from another perspective, a perspective others would look at it. It helped me fix those small details, that make the difference.

Just yesterday I was looking for a new background for my desktop. I was googling around, searching for a nice pic, until I remembered, I have quite a collection of nice photographs - why not use my own? So I went looking for a photo of mine that I’d like to constantly look at. I decided on this one. Before, I didn’t really consider this photo as anything special (good, but not all that), but using it as a background, I’ve realized how much I really like it.

So I guess this is just the best way to judge your work - just look at it. Don’t open it in photoshop to look for any errors. It will only make you feel bad about how many there are.

Some people may also prefer printing their art and hanging it on the wall. I do this with some vector drawings, since they’re just too plain for a decent background. As long as you look at the work in a relaxed kind of way, you’ll see how it really is. If you tear it off your wall or change the desktop background in a few hours… it’s probably bad. Back to the drawing board then.

A month ago I wrote a post about web 2.0 and expressed my hate toward a web 2.0 design style. But what if everyone did things the web 2.0 way? Let’s see…

Apple

Coca Cola

National Geographic

Nike

MasterCard

See the full list