Kulturmaskinen

Style & Experience Project – Kulturmaskinen

Authors: Maris Pagasts (designer), Motiejus Bagdonas (coder)

Maris and Motiejus made this cool site for Kulturmaskinen during Style & Experience project week. The main idea and purpose of the design is to attract more young people to visit the place. We used bright strong colors that grabs your attention immediately and keeps interest to explore deeper. We put emphasis on colour and keeping things simple and organized. Main layout elements are repeating through all web site pages thereby providing unity and the same rhythm for whole project.

We use colors to divide page into clear sections and to highlight important elements. The colors are connected with actual images, that represents different sides of Kulturmaskinen.

Navigation is an important part of the site. It is designed to be easy to move around. Also a colour code allows you to understand which site area you are in. We also used big strong typography elements for navigation and headings to catch and keep visitors attention.

For the technical part we used several code libraries in order to build this website faster and almost with no pain. This includes javascript jQuery, javascript Cufon, actionscript 3.0 Youtube API as well as some code snippets for extended functionality.

Those huge font faces we’re using is actually images generated by javascript library on the fly. As a result if you look up in the source, you’ll notice that there are just simple xHtml tags. There are a lot of advantages using this, but one of the most, in my opinion, is search engine readable text instead of image and/or flash (sIFR) based text.

Another very cool feature is dynamic page layout. Once the page is loaded, you’ll notice that it stretches horizontally as well as vertically through the whole browser screen. For this issue we combined several techniques, css absolute positioning and, of course, a bit help from jQuery. A lot of block elements in this page use percentage sizes and positioning.

Furthermore, we integrated some cool effects in flash. All subpages have a flash background in the content area. As you can see, there are big panoramic pictures which also streches depending on the browser screen resolution which you can scroll horizontally (with arrow buttons on the bottom right corner of the window). And one of the coolest features of the whole website, in our opinion, is that we use that .swf file as a background and the content boxes and menus are html which goes on top!!! This couldn’t be done with a help of jQuery tools. This is pretty much a brand new technique in the web design world.

Not to mention the fact that there are some videos included in flash background files (which are loading externally), there is also a video which streams straightly from youtube (in the Live Acts page).

To conclude, this site is very interactive and equipped with lots of visual information, videos and picture from actual and past events and social network tools.

You can see the website here.

Student Projects