IFD:WebApps/Rahn

Kombinat - elektronische Medien

Das Projekt, die Idee und Motivation

Als kleiner Internet-Startup läuft man schnell in die Falle einer Ich-Seite. Man will Informationen über sich selbst und sein Schaffen präsentieren, aber auch eigene Projekte und Technologien. Zumeist wird das dann eine bunte Mischung aus einer Ich-Seite, einem Blog und einer Firmenpräsentation. Alles irgendwie, aber nicht gut. So ist es auch mir ergangen, deswegen will ich in dem Projekt versuchen die einzelnen Teile meines „Ich“ zu trennen und besser zu präsentieren. Zuerst musste ein Name für die Firma gefunden werden, weil der Name einer Firma, die so heißt wie ihr einziger Mitarbeiter, nicht wirklich vertrauenerweckend ist. Deswegen, auch weil ich in der ehemaligen DDR geboren und aufgewachsen bin, kam mir der Name „Kombinat - elektronische Medien“, in den Sinn.

Für mich strahlt das Wort Kombinat eine gewisse Ehrlichkeit und Vertrauen aus, welches 2 wichtige Eckpfeiler meiner Philosophie sind. Ich muss niemandem etwas verkaufen, was er nicht braucht. Dies kann ich machen, da ich noch ein anderes Standbein habe. Deswegen geht meine Akquise oft in Richtung Unternehmensberatung. Viele Projekte sind dabei vielleicht bisher nicht heraus gesprungen, dennoch sollte man die Macht von positiver Mundpropaganda nicht unterschätzen. Lieber verdiene ich etwas weniger oder mache ein Projekt nicht, wenn ich dann dafür auch jeden Abend beruhigt schlafen kann.

Des weiteren steht Kombinat ja auch für eine gewisse strukturelle Größe, welche heute oft mit Netzwerk beworben wird. Aber seien wir mal ehrlich, wer möchte heute noch sein Geld in ein Netzwerk investieren? Es gibt also weitere Kleinunternehmer an die ich Module oder Arbeiten outsource, die ich in gewisser Weise, zu meinem Kombinat, zugehörig sehe.

Schlagwörter für mein Projekt, die es für das Design umzusetzen gilt, wären also: Ehrlichkeit, Vertrauen, DDR/Osten (keine Ostalgie), elektronische Medien, Elektronik, Medium

Ziel

Das Ziel des Projektes ist es, die Vermischung von Blog, Firmenseite und Ich-Seite, aufzulösen und zu separieren. Das bedeutet, dass alle 3 Teile ihre Daseinsberechtigung behalten sollen, aber über eigene Domains und Designs klar getrennt sind.

Umgesetzt ist davon die Firmenseite unter: www.kombinat-medien.de und der Blog unter: blog.henryrahn.de. Der Blog ist mit Wordpress, mit einem freien Theme, umgesetzt und muss noch mit Inhalten gefüllt werden. Auf eine Ich-Seite wurde verzichtet.

Techniken

• Html und CSS
• Javascript und JQuery ein Javascript-Framework
• (für den Blog) PHP und MySQL
• (für den Blog) CMS in Form von Wordpress

Die Entwicklung vom Logo zum Web-Design

Das Logo

Kombinat elektronische Medien Logo

Das Logo enthält sowohl den Aspekt „Ost“, also das personifizierte Vertrauen, zumindest laut meiner Erfahrung. Dies ist durch die „Trabant“-Schrift gegeben. Um den Part „elektronische Medien“ auch im Logo darzustellen habe ich mich für die Schriftart „DotMatrix“ entschieden. Hier soll der Eindruck eines alten Computers (z.B. ein Robotron an welchem ich selbst noch meine ersten Computer-Erfahrungen gemacht habe) erweckt werden, bei dem „elektronische Medien“ auf dem Terminal geschrieben steht.

Hierzu war auch eine Idee, den Text „elektronische Medien“ über einen Flash-Film mit Tastatur-Geräuschen im Hintergrund, live „schreiben“ zu lassen wenn die Seite geladen wird. So sollten auch zusätzlich noch in dieser Zeile die jeweiligen Untermenüs „geschrieben“ werden. Diese Idee wurde aber verworfen, bzw. zurückgestellt, da Flash nicht komplett plattformunabhängig ist und Nutzer ohne Administrator-Berechtigung, für ihren PC, von diesem Feature ausschließt. Dieses Feature soll später, mit Html5 und Javascript, umgesetzt werden.

Design-Entwicklungen

vertikale Navigation

• 

  vertikale Navigation

• 

  mit Akkordion

• 

  und Moussover-Effekt für Impressum und Kontakt

horizontale Navigation

lose Kopplung an Inhaltsbereich

• 

  horizontaler Entwurf

• 

  mit orangem Farbfluss

• 

  mit blauem Farbfluss

Zuerst erfolgten ein paar Farbversuche, hier mit freiem Inhaltsbereich. Die Entscheidung fiel auf das Blau, da man dadurch eher den Eindruck gewinnt, dass Strom durch die abstrahierte Platine geflossen ist, bzw. fließt.

Inhaltsbereich an Navigation gekoppelt

• 
• 
• 
• 

Neben der Verbesserung an der Navigation, wurden auch die Kategorien an sich überarbeitet. Die einzelnen Menüpunkte sollten sich dadurch vom Web-"Einheitsbrei" abheben und zum "anklicken" verführen.

Design-Skizzen

• 

  Studien vom Navigationskonzept

• 

  Studien vom Navigationskonzept

Das finale Design

Das finale Design kann man sich, unter: www.kombinat-medien.de, ansehen. Für das finale Design, wurde versucht die DotMatrix-Schriftart für die Navigation zu benutzen, leider mit mäßigem Erfolg. Denn viele Schriften, die man sich kostenlos unter FontSquirrel herunterladen kann sehen erst ab einer Schriftgröße von 16-18 Pixeln wirklich lesbar aus. Dies war auch mit der DotMatrix-Schrift so. Dort gibt es einen Testdrive um sich die Schriften anzusehen, dieser funktioniert aber leider nur mit einem PHP-Modul zur Bildgenerierung. Selbst mit einem solchen freien Modul wurden Tests gemacht, welche ein noch schlechteres Ergebnis lieferten als die ohnehin schon sehr schlecht leserlichen Exporte aus Photoshop. Nun gab es nur 2 Möglichkeiten, entweder die Schrift für die Navigation zwischen 16 und 18 Pixel groß machen, oder eine der Standard-Schriftarten für die Navigation zu benutzen. Bei der ersten Möglichkeit war die Schrift der Navigation viel zu Groß. Deswegen wurde die Schriftart Verdana, für die Navigation und den Text, gewählt. Diese wird auch im Buch "Buchstabenkommenseltenallei n" als eine von 5 sehr gut lesbaren Bildschirmschriften beschrieben.

Durch die Verwendung der Standardschrift, wurde hierdurch auch die Benutzung der Seite, ohne Javascript, natürlich mit Effekt-Abstrichen, ermöglicht.

Neben der Schrift-Findung, war die Einbindung von Technologien zur Nutzerinteraktion ein Thema. Hier wurde dann, neben der Eigenkreation, der sehr technisch wirkenden Navigation, JQuery in Form eines Akkordions eingebunden. Dieses Akkordion, für das eigene UI-Icons gemacht wurden, geht eine wirklich gute Symbiose mit der Toggle-Navigation ein. Dadurch wirkt der Internetauftritt sehr aufgeräumt und trotzdem technisch wie aus einem Guss.

Nützliches

• PHP-FontGenerator
• Webocton Editor
• Alles über das JQuery Accordion
• mobile Apps mit Appcelerator Titanium (open source)
• das T3N Magazin ist einen RSS-Feed wert!

Quellen

aus dem Web

• SelfHTML
• JQuery

Konventionelles

• Buchstabenkommenseltenallei n; Ein typografisches Handbuch; Indra Kupferschmid; Verlag Niggli AG, Sulgen|Zürich, Limitierte Sonderauflage für FontShop Berlin