Ja, ich weiss, leicht schmalzig und theatralisch, aber der Song schwirrt seit einigen Stunden Tagen durch meinen Kopf. Das Album an sich ist auch nicht schlecht.

Mit dem Eröffnen des Polapremium Stores in Berlin, habe ich mich gleich mit dem Eröffnungsangebot eingedeckt. Dem Polaroid 669 Film, in der Berlin Edition. Nun habe ich auch endlich meinen Scanner wieder und habe mal einige (von vielen) eingescannt. Ich steh schon irgendwie auf den Style und kann es auch eigentlich kaum erwarten, wenn das Impossible Project demnächst loslegt (zu einen hoffentlich guten Preis). Also, so far, einige Bilder. Vielleicht werde ich es demnächst auch schaffen mehr einzuscannen.

clubbing

Brandenburger Tor, 60 Jahre Grundgesetz Veranstaltung

Mrs. G

antennas to heaven

antennas 2 heaven

Der Blick von meinem Berliner Balkon

illumination

moccu ppl

Letzten Januar hat der Illustrator Olly Moss angefangen Kinofilme in minimalistisch neuzugestalten, ob dieses vorher schon jemand gemacht hat, weiss ich nicht, aber Mr. Moss Arbeit hat mich damals schon ziemlich begeistert, inzwischen sind viele weitere Illustratoren auf diesen Zug aufgesprungen und ein paar will mal hier verlinken und verbloggen. Es ist auch unbedingt zu empfehlen die Webseiten zu besuchen, ich habe immer nur eine Vorauswahl getroffen, aber es verbergen sich noch viele weitere großartige Designs hinter den Links.

Ibraheem Youssef
Ibraheem Youssef macht den Anfang mit seiner Tarantino Reihe.

Chris Thornley
Typographie und Illustration at his best.


10 weitere Poster in seinen Flickrstream

Olly Moss – Films in Black and White
Der Großmeister. Nicht mehr dazu, besucht seine Webseite!

Olly Moss – Videogame Classics

Spacesick’s “I can read Movies”
Spacesick hat sich dem Design der Penguin Buchserie angenommen und Kinofilme auf Farben und Formen reduziert.




Viele viele Viele mehr im Flickrstream

Albert Exergian
Mein neuer Liebling, wollte ich doch eigentllich nur 2-3 Beispiele von ihm bringen, hier ein ganzer Schwung. Einfach fabelhaft – bei jedem habe ich mich geärgert warum ich nicht auf sowas komme – Für noch mehr Beispiele unbedingt seine Tumblr Blog besuchen.

Seek and Speak



weitere im Portfolio

Funny Games
Kein Redesign im eigentlich Sinne, aber ein sehr schönes Poster zu dem (leider nicht ans Original heranreichende) Funny Games Remake.

Webseitenposter von Stephane Massa-Bidal
Es müssen nicht immer Filme sein…. Webseiten erfüllen auch den Zweck. Sehr abstrakt und mit Vintagefotos visualisiert. Und hübsch.

….to be continued.

Vielleicht hat es der eine oder andere schon mitbekommen, ich habe mal die Challenge vom Smashing Magazine angenommen und werde versuchen jeden Tag ein Design zu veröffentlichen. Ich bin selber gespannt wie lange ich das durchhalte, aber die ersten neun Tage haben bereits ganz gut funktioniert.

Actors rehearse their lines until they learn them perfectly. Musicians practice their songs until every note is just right. Athletes practice their particular sport so they can excel. As designers, why can’t we do the same? Ask any successful designer in the community about how they have succeeded and they will attribute much of their success to practice. I challenge you today to design something daily. Take fifteen to twenty minutes that you would normally use to surf the Web today and devote it to designing something.

Hierfür habe ich ein Tumblr Blog erstellt, welches zwar noch ein Custom Theme braucht, aber soweit ganz gut funktioniert. Hier noch ein paar Beispiele von mir, bis auf Rio ist mir aber noch nicht wirklich was gelungen. Und mehr Zeit als 30 Minuten am Tag wollte ich hierfür auch nicht opfern (bevor es noch in Arbeit endet).

Link:
#daily365 Blog auf Tumblr.
Daily Marius auf Posterous

Diesen 35mm Film (Kodak VC400, btw) habe ich im Dezember in Bremen gekauft um meinen schon oft hier angesprochenes 35mm Back für die Diana F+ zu testen. Das war somit der erste von mir gebrauchte Film. Nun 27 Bilder verschießen sich nicht so schnell, somit habe ich gefühlte 1,5 Monate gebraucht um den film vollzukriegen. Mit mäßigen Erfolg wie ich im übrigen finde. Nun, entwickelt habe ich den Film dann… in Wien, wollte auch gleich Abzüge davon haben, allerdings musste ich natürlich beim Wählen des Formates das Exotischste Format wählen. Panorama, mit belichteter Perforation. Und wer hätte das gedacht, kann keine Sau ‘n Abzug von machen.
Zwischendurch habe ich es noch in Berlin im Fotolabor “5vor8″, direkt in der Pappelallee, Prenzl’berg versucht, testweise ein Foto entwickelt, sah auch nicht schlecht aus, aber wäre mit ca. 40 Euro schon ein bisschen überteuert gewesen (Ein Bild kann man sich hier machen, wie es mal aussah. “Skyline”).
Nun, viel – vielleicht auch wenig ist seitdem passiert- inzwischen bin ich in Bremen, habe auch mal die letzten Kartons ausgepackt und da bin ich wieder mal auf diese kleine Filmdose gestoßen… “Dieses Mal, dachte ich mir… Dieses Mal krieg ich es hin” – wanderte von Photo Dose und verlangte den Film doch bitte auf CD zu bannen. (Nebenbei, die Mitarbeiter im Steintor/Bremen sind wirklich sehr zuvorkommend – wer ein bisschen über analoge Photographie fachsimplen will, ist hier scheinbar willkommen)
Nun, letzten Mittwoch die CD abgeholt, gerade angeschaut und – ich bin enttäuscht, der Film scheint offensichtlich beschädigt zu sein, schlecht geschnitten, scheinbar verzerrt und alles scheint sehr gedehnt zu sein. Dazu Staub und Risse. Sieht bei manchen ganz gut aus, alles in allem aber enttäuscht.
Lange Geschichte, Kurzer Sinn, hier ein paar noch ganz gelungene:

NIE WIEDER DEUTSCHLAND

DIANA FOTO VON DIANA

Alle Bilder finden sich hier auf Flickr.
(es ist spät in der Nacht, Rechtschreibfehler können ignoriert werden)

Achtung, der folgende Beitrag ist für Genussmenschen ein absoluter Alptraum (mit schlechter Story) und sollte auch von niemanden gelesen werden.
Das waren die ersten 24 Stunden. Bislang habe ich noch keine Veränderung in mir festgestellt, wobei ich plötzlich das Bedürfnis habe der Peta beizutreten und Pelze mit Blut zu beschmieren. Aber sonst, geht es eigentlich. Der erste Härtefall wird es wohl über Weihnachten. Und die restlichen Feiertage durchzustehen, aber was nehme ich nicht alles auf mich für…. Moment, Vegetarier? Hab ich was verpasst?

Ja, richtig, ich werde jetzt mal Vegetarier. Mal eine bestimmte undefinierte Zeit kein Fleisch essen, meinen Körper mit Vitaminen vollstopfen, Gemüsebrühen brühen und andere tolle Hippie Sachen. Evtl auch mal ein paar Kilo verlieren und mal sehen worauf das hinausläuft. Aber warum jetzt wirklich? Keine Ahnung. Aber mal sehen wohin das führt. Viel drüber bloggen werde ich jetzt nicht darüber, ich bin ja immer noch der Meinung das Vegetarier zu einer eher uninteressanten Personengruppe gehören.

So, dann bereite ich mich mal jetzt auf grenzenloses Rumgedisse vor, auf intolerante Sprüche von intoleranten Fleischessern (Ich werd es euch demnächst nicht sagen, aber ihr seid eigentlich ziemlich toll) und überlege was ich denn jetzt noch so alles vegetarisches im Haus habe. Tipps und Beschimpfungen können gerne in den Kommentaren abgelassen werden!

R U Hungry?

Gerade in meinen iPhoto Ordner entdeckt, ich kann mich nicht mehr daran erinnern wann das Foto aufgenommen wurde, aber ich find das ja schon wieder ziemlich witzig. “Cry at home, Armleuchte”… “Armleuchte”…. hihi… “Armleuchte”….

Armleuchte

Die Supergroup “Them Crooked Vultures” (Dave Grohl, Ex-Nirvana, Foo Fighters), Josh Hommes (Queens of the Stone Age) und John Paul Jones (Ex-Led Zeppelin)) kann man jetzt auch als Live Mitschnitt sehen, im WDR Rockpalast. Mir dröhnen zwar noch immer die Ohren vom Konzert letzte Woche in Berlin (Ist es ein Zeichen dass ich alt werde?), aber es war schon ein ziemliches Erlebnis diese drei Größen der Popkultur in Action zu sehen. Mein Lieblingssong kommt übrigens gleich zu Anfang, also wer sie nicht kennt, einfach mal anspielen. Und Anhören. Ohne blutende Ohren. Zum Videostream.

Tracklist:
* – Anfang -
* No One Loves Me & Neither Do I
* Dead End Friends
* Scumbag Blues
* Elephants
* Highway 1
* New Fang
* Gunman
* Bandoliers
* Mind Eraser, No Chaser
* Caligulove
* Interlude With Ludes
* Spinning In Daffodils
* Reptiles
* Warsaw Or The First Breath You Take After You Give Up
* – Interview -

Ein besserer Blogtitel fiel mir aufs erste nicht ein, Vorschläge werden aber gerne angenommen. Jedenfalls habe ich in der vorletzten Woche meine Diana endlich mal wieder mit einen guten altmodischen Mittelformat Film geladen, welches seit dem ich das 35mm Back besitze nicht mehr alltäglich ist. In diesem Fall ein Ilford 400 SX Schwarz-Weiss Film. Anschließend habe ich eigentlich nur die Leute fotografiert welche ich in Bremen und während meines Kurztripps nach Berlin getroffen habe.

Natürlich ist das das einzige Foto, wo keine Person zu sehen ist, das beste geworden, aber trotzdem, es hat sich gelohnt, ich bin schon ein bisschen begeistert. Also, hier nun eine kleine Auswahl. (Ich fühl mich gerade als würde ich Menschen zu einer Urlaubsdiashow zwingen).

Ein kleiner Belichtungsvergleich übrigens – das Bild von der Dame mit dem Kaffeebecher vor dem Kofferrraum wurde um 14 Uhr Mittags geschossen. Gefällt mir übrigens auch sehr gut.

Alle Fotos finden sich im übrigen im Flickr Set.

“Gridsysteme für CSS? Sowas braucht man doch nicht, das ist doch sowieso einfach…” – habe ich mal von einem österreichischen Mitpraktikanten gehört, gefolgt von einer langen Liste von Argumenten, welche mir fast ein schlechtes Gewissen gemacht haben, dass ich mich überhaupt damit beschäfigt habe. Aber nur “fast”, denn Gridsystem sind einfach großartig, einfach und hilfreich in jeder Hinsicht. Das System mit welchem ich mich hauptsächlich beschäftigt habe ist das 960 Gridsystem. Ein Tutorial gibt es nach dem Klick.

960 deshalb, weil hier davon ausgegangen wird dass 960px die bestmögliche Breite für die Wiedergabe auf dem Bildschirm ist. Seitdem ich ein Netbook besitze kann ich das im übrigen bestätigen, Seitliches scrollen ist absolut nervig. Ich werde mich hier nun an einem Tutorial versuchen, um darzustellen wie einfach es ist einen schnellen Webseiten Prototyp mithilfe des 960 Gridsystems zu erstellen.

Ausblick

Zuerst einmal will ich zeigen was hier versucht wird zu erreichen:

Download

Alle Dateien können hier heruntergeladen werden.

Grundlagen

Fangen wir nun mit den Basiskenntnissen an. Zuerst sollte man wissen dass das Layout in 12, 16 (und jetzt auch 24) Spalten unterteilt wird. In meinen Beispiel wird mit dem 12 Spalten System gearbeitet, welches eigentlich auch für die meisten Projekte ausreichen sollte. Diese 12 Spalten sind sind mit verschiedenen Weitenangaben unterteilt:

1. 60px
2. 140px
3. 220px
4. 300px
5. 380px
6. 460px
7. 540px
8. 620px
9. 700px
10. 780px
11. 860px
12. 940px

Auffallen wird hierbei, dass das 12 Spaltensystem nur eine Breite von 940px besitzt. Aber warum rede ich dann die ganze Zeit von 960px? Nun, es wird beim Einfügen in den HTML Code ein Seitenabstand von 10px eingerechnet (margin: 0 10px). Werden nun alle Grids in einer Reihe zusammengesetzt entsteht eine Gesamtbreite von 960px

Beispiel: Grid_3 (220px +20px) + Grid_3 (220px +20px) + Grid_6 (460px +20px) = Grid_12 (960px)

Entsprechende Layoutvorlagen zu allen entsprechenenden Grafikprogrammen sind im übrigens im Downloadpaket enthalten.

Das HTML

Gut, soviel zum Einstieg, sofern hier noch jemand mitkommt, wenn ihr bis hier hin gelesen habt, ab jetzt wird alles sehr sehr einfach. Ich habe mal folgendes HTML Grundgerüst zusammengeschrieben.

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
	<head>
		<title>Example Page for the 960 Grid System - by Florenz.co.uk</title>
	</head>
	<body>
 
	<div id="wrapper">
		<div id="header"><h1>This is a fancy title.</h1></div><!--end header -->
		<div id="navigation">
			<ul>
				<li><a href="#">Home</a></li>
				<li><a href="#">About</a></li>
				<li><a href="#">Products</a></li>
				<li><a href="#">Info</a></li>
				<li><a href="#">Imprint</a></li>
			</ul>
		</div><!--end navigation-->
			<div id="content_feature">	
			          <h2>Headline 1</h2>
			          <img src="../img/960ss.png" alt="960ss"/>
			          <p></p>
			</div><!--end content -->
 
			<div id="content">
			          <h2>Headline 2</h2>
			          <p>Content</p>
			</div><!--end content-->
 
			<div id="content">
			          <h2>Headline 3</h2>
			          <p>Content</p>
			</div><!--end content-->
 
			<div id="content">
			          <h2>Headline 4</h2>
			          <p>Content</p>
		</div><!--end content-->
 
		<div id="footer">Copyright 2009 by myself.</div><!--end footer-->
		<div class="clearing"></div> <!-- cleart den wrapper -->
	</div><!--end wrapper -->
 
	</body>
</html>

Das ganze sieht dann so aus (mit Blindtext):

Einfügen der CSS Dateien

Gut, soweit so gut, fügen wir nun die CSS Dateien aus dem Downloadpaket, sowie unsere eigenen, im Header an:

...
	        <link href="../css/style.css" media="screen" rel="stylesheet" type="text/css" />
		<link href="../css/960.css" media="screen" rel="stylesheet" type="text/css" />
		<link href="../css/reset.css" media="screen" rel="stylesheet" type="text/css" />
		<link href="../css/text.css" media="screen" rel="stylesheet" type="text/css" />
....

Neben unserer eigenen Style.css, haben wir also noch 3 zusätzliche Dateien.

• 960.css – Das Gridsystem
• reset.css – CSS welches alle Elemente auf 0 setzt
• text.css – Typographie, kann man nutzen, muss man nicht, werd ich hier aber trotzdem

Wir wir sehen, hat es schon Auswirkungen auf das Aussehen unserer Seite, da die reset.css und die text.css schon direkt eingreifen, aber Layout kann man dieses noch nicht nennen. Kein Wunder, die Klassen aus der 960.css sind noch ins Layout eingearbeitet.

Anzahl der Spalten definieren

Aber woher soll die Webseite nun wissen, ob ich nun das 12, 16 oder 24 Spalten Layout nutze? Dieses teilen wir durch das Hinzufügen der Klasse container_X im Wrapper Container mit. Wobei X für die Anzahl der Layoutspalten steht. So wird also aus…

<div id="wrapper"> ... </div>

… dann…

<div id="wrapper" class="container_12"> ... </div>

….was zu folgenden Ergebnis führt:

Zuweisen der Gridklassen

Der nächste Schritt ist nun das Zuweisen der Breite durch die Klasse .grid_X.
Beispiel:

<div id="header" class="grid_12"> ... </div> //Der Header bekommt die volle Gridbreite
<div id="navigation" class="grid_12"> ... </div> //Ebenso die Navigation
<div id="content_feature" class="grid_12"> ... </div> //Der Featurebereich bekommt dann einfach auch 12 Spalten
<div id="content" class="grid_4"> ... </div> //Contentbereiche bekommen 4 Spalten.

Rufen wir jetzt die Seite auf sehen wir folgendes Ergebnis.

Alpha und Omega

Soweit ganz einfach, aber was ist mit dem Bild? Es hängt über den Text und da soll es schon aus ästhetischen Gründen nicht hin. Dieses Problem könnte man jetzt mit floats lösen, dazu müssen nun aber Innenabstände neu positioniert werden, da wie bereits erwähnt, automatisch Seitenabstände hinzugefügt werden, ansonsten würde uns das Layout auseinanderbrechen. Aber auch hier bringt 960 Framework bereits eine Lösung mit: alpha und omega, welche zu den .grid_X Klassen hinzugefügt werden.

	<div id="content" class="grid_12">	
			<h2>Headline 1</h2>
			<img src="../img/960ss.png" class="grid_3 alpha"/>
			<p class="grid_9 omega">...Content ... .</p>
 
			</div><!--end content -->

Das Bild ist nun das alpha, heisst, dass der Abstand zur rechten Seite auf Null gesetzt wurde. Das gleiche bei omega, bloss auf der linken Seite. Und das ist dann auch schon das Endergebnis, eine saubere Seite, ohne viel Aufwand, erstellt in 5 Minuten.

Sonstiges

Das Beste, man muss sich auch nicht mehr um die üblichen IE6 Fehler kümmern, da das Layout dort genauso aussehen sollte (Was ich dank Mac allerdings nicht testen konnte).

Leider gibt es auch einen nicht ganz zu unterschätzenden Nachteil, das 960Gridsystem hat nicht ohne Grund diesen Namen, es kann NUR auf Layouts mit einer festen Breite von 960 Pixeln angepasst werden. Sofern nun andere Breiten realisiert werden, ist dieses System leider nicht einsetzbar, wobei hier aber auf diverse Generatoren für Custom Grids zurückgegriffen werden kann, Ein HTML Generator und ein CSS Generator findet sich hier. Ich habe diese beiden Beispiele nicht getestet, aber ich denke das System wird dasselbe sein.

Abschliessende Worte: Dieses war mein erstes Tutorial, sollte es hilfreich sein, hinterlasst doch einen Kommentar, quasi als Motivation. Sollte ich wesentliche Fehler gemacht habe oder ihr kennt noch bessere Einsatzmöglichkeiten für dieses System, auch nicht scheuen was zu schreiben!