<- Older :: Newer ->

Posts Tagged "design"

10 Nov 2009

Another blog? Photo Journal.

Tags: , , ,

I’ve always felt a bit bad, spamming this blog with photography. So I had an idea of creating an extra, photo blog, which would mainly showcase my photography and would be updated more often.

In decided to do it in a simple manner.

  • I wanted a simple, dark design, emphasising photographs.
  • I wanted Flickr to be the source of my photos, so I don’t need to reupload them.
  • More precisely, I want to be able to make a post right from flickr photo page.
  • I decided on using an online blogging platform to avoid the hassle of management and software updates.

In the end, I decided to use Blogger, as it allows me to create my own template and can comply with the above needs.

The result of a couple of hours work:
Proudly presenting Dušan Smolnikar: Photo Journal.

No Comments

29 Apr 2008

Study calendar

Tags: , ,

My recent typographic homework was creating a study calendar for our faculty. We got a bunch of dates (faculty-related as well as red-letter days) and the following requirements:

  • 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.

1 Comment

14 Apr 2008

Do we really want multi-column layouts?

Tags: , , ,

We’ve all read a magazine or a newspaper before. Noticed how text is usually split into multiple columns? Ever wondered why? Some folks figured that a human being can’t cope with really long lines of text and so decided that ideally, lines of text should contain about 60 characters. This is short enough for the reader to easily find the next line of text and still long enough to prevent constant transitions from line to line. And since newspaper formats are quite large and no-one would ever read them, if lines of text spanned the whole page, they decided to split text up in columns. And we like it that way.

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.

4 Comments

02 Apr 2008

Has hell frozen over?

Tags:

Back in summer of 2002 I got contacted by the guys at Slo-Tech, asking me to redesign their aging website. Back then I was designing websites with about 2 views per day, while Slo-Tech was already approaching around 15000 unique visitors each day, so this was quite big to me. A few others also contributed, so I had to make it big. Young and inexperienced as I was, and considering the design trends of the days, I came up with this:

Slo-Tech redesign #1 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.

Slo-Tech redesign #2 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…

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

 

Slo-Tech redesign #4 April 2005 - More structure has been given to the design, making it look more compact.

 

Slo-Tech redesign #5 November 2005 - Different menus and darker colors

 

Slo-Tech redesign #6 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.

4 Comments

09 Mar 2008

Typographic composition

Tags: , ,

This half-year in the faculty is killing me. There’s just too much going on and too little time - hence, I haven’t been updating my blog much lately.

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 estAlea 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 rollrock and roll
Groovy, rolling, etc.

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

Pijte boljso vodoPijte 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 bruteEt 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.

No Comments

12 Feb 2008

Google images are evil

Tags: ,

Yesterday a friend showed me a redesign of a popular website and inquired wether I was a part of it. It was the first time I’ve seen the new design, so he sent me a fairly familiar picture from it - an old illustration of mine, flipped and colorized. An obvious rip. I don’t like people stealing my work and I don’t think anybody does.

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:

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

1 Comment