Skip navigation

Category Archives: Web Design

I have not been around much at this blog lately and the reason is here:

For the past 2 years I have been teaching a web design class during the Spring semester. This is a course which a lot of non-design majors, particularly from our Faculty of Engineering, take together with our Visual Communication Design majors. In fact, usually the percentages go much in favor of non-designers. Last year I made small online tutorials for them, which are actually on this blog. This year I decided to take things a bit further and started a full blown dedicated blog, where I am giving them tips, showing them resources, even some tutorials and such. I am mostly basing stuff on the blogspot template editor, which I think is an absolute God-send for teaching an introductory level web design course.

I am having a really great time with this new site –  which does not mean that I forgot all about this one. I will certainly come back to it. However, for now my blogging energies seem to be focused there more than here and I hope that you will go and visit this new one also.

A friend of mine from Second Life has compiled this flickr set – and it is an absolute gem of a collection which you can see right here:


I had actually checked out issuu a long time ago but had never really uploaded anything. Today, the hung-over aftermath of a somewhat raucous New Year’s Eve, seemed to be a good time to play around with something like this. I have uploaded a few things and particularly this one presentation from 2005 which I have always rather liked and which I have never posted anywhere (image above is the link).

Issuu seems to be great, except for a few things to pay attention to: Do not use solid dark backgrounds. Black does look good – nice and shiny, but dark grays give you the most god awful moire effect. Sometimes the conversion takes forever, and there is no rhyme or reason for it that I could make out, larger files may take less than smaller stuff. Another problem is that whatever format you may choose, you seem to end up with a flip book – or at least I did. Then again, I have not checked out all of the options yet. And finally, something assembled out of landscape formatted pages looks much better than portrait type pages stuck together since rather than go by the width/height of your original upload file, Issuu seems to fit things to the screen widthwise, so anything which is too high looks really huge and clumsy.

But, all in all, it is quite a cool place to publish stuff.

There are a lot of these and unfortunately most of them do not really do what they say they will do. Basically, what is needed is an intuitive interface with highly customizable start-out templates – customizable to the extent where your site looks “yours”, that is. And – of course, they have to have a completely free plan with an option to upgrade so that you can freely experiment. I have checked out some of what is out there and two of them really seem to deliver the goods: Weebly lets you create blogs as well as websites. They have a very beautiful template gallery from which you can start out and then everything works with a simple drag and drop interface which lets you add pretty much all that you could wish for. The second one Yola works in a similar way, also very easy to use and versatile.

Both of the above will give you html/css sites. Should you wish to do a flash site however, then of course Wix is absolutely unbeatable.

And incidentally, while I was looking around I also came across these: Very nice seem to be an online, completely free video editor called JayCut and an online presentation platform called SlideRocket.

This is truly superb, and those who do not yet know of wix, better rush over there and get started right now! This is an online flash site creator that lets you build either from scratch, or by modifying a very large collection of freely available templates. The entire setup is intuitive – no need to code, no actionscript anywhere in evidence – all you do is drag and drop components, add text, images, clip art, and off you go!

Furthermore, the wix people let you publish your efforts for free under their own domain. Should you wish for your own site, and/or various other goodies such as google analytics then they have a very reasonable plan for you to upgrade as well. In the free version wix puts very small ads underneath your page and the upgrade eliminates those also. However, no sweat with regards to the ads anyway – they did not bother me in the slightest, they are that well placed and unobtrusive.

I created the 3 pages above (please click thumbnails to access) with wix. The first 2 were created through modifying pre-existent templates, the third one I did from scratch. All the images I used come from the wix library, which is surprisingly well stocked with really nice images and clip art. The first one I made took a few hours since I was also snooping around in the library, trying out all kinds of things. The two others happened in less that an hour each! That is how easy and user friendly this is!

I am wondering whether wix might not be used for educational purposes also. As in teaching a web design course which totally eliminates the irksome need to learn the underlying code of a flash site.

His gorgeous website can be viewed here:

This is the website of the advertising agency Grip Limited. It is marvelous both in its functional interface and its visual design.

Here is a comment by Hoefler & Frere-Jones who designed the Knockout typeface used throughout the website:

When we designed the Knockout type family, which celebrates the exuberance of nineteenth century wood type, we wondered: what designer would knowingly use the fonts to recall a world of quack medical cures and traveling vaudevillians? The answer, as it so often turns out to be, is “smart aleck Canadian advertising agencies.” Behold the truly excellent Grip Limited, who have created a typographic tour-de-force in Knockout (and a little Archer) that really repays scrolling in all directions. I especially like the end of the second column.

i found this nice web application that saves you from unnecessary visual elements in web sites (banners most of the time) while reading the content. it is really useful for pages that contain too many extra feature – such as newspapers or some blogs. to try, just go to hurriyet (which has an enormous number of clutter around each page)  and compare the difference between reading the same text originally and in a clean (cleared) page. first, you set the look that suits you (your vision)  then add the readability icon on your bookmark bar. whenever you need to read something without any visual inconveniences, you click that bookmark and it does the job. nice.

After dealing with a variety of students from different classes such as Project Studio, Web Design and Interaction Design last week, I took some time to put together an introductory practical guide to typography. Since I had a wide target audience in mind, you will see some very basic topics that you already know. But I hope you will also learn some new things. Please have a look and bookmark it for cases of emergency. Any kind of feedback is welcome, of course.

A wonderful collection of posters, with a great interface. Added to the Recommended Sites section.

This is the didactic story of how a web design goes straight to hell by the Oatmeal. Be careful: as funny as it may look, I, for one, can testify that this is a 98.7% accurate description of what designers have to go through in some projects. To quote Paula Scher, once more:

Mostly, designers get paid to negotiate the difficult terrain of individual egos, expectations, tastes, and aspirations of various individuals in an organization or corporation, against business needs, and constraints of the marketplace. This is a process that can take a year or more. Getting a large, diverse group of people to agree on a single new methodology for all of their corporate communications means the designer has to be a strategist, psychiatrist, diplomat, showman, and even a Svengali.

Interesting article on horizontally scrolling content and readability issues in web sites on Thinking For A Living. You should also check other articles on this site.

Bookmark this wonderful website for testing and comparing the appearance of type on screen. It includes the safe list (common fonts in Windows and Mac), Windows default list and Mac default list, in order to “make web designer’s life easier”.

Those of you wishing to design your personal portfolios, take a look at Paul Giacherio’s website. It is a brilliant example of how a gorgeously effective website can be constructed with a starkly minimalistic approach. Especially look at the “content” feed, where he uses a really big type size for the actual feed. Stunning!