Latest revision as of 19:20, 14 March 2011

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

Quellen

aus dem Web

Konventionelles

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

@@ Line 1: / Line 1: @@
-=Kombinat elektronische Medien=
+=[http://www.kombinat-medien.de 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.
+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.
+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 [http://de.wikipedia.org/wiki/Kombinat 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.
+Für mich strahlt das Wort [[wikipedia:de:Kombinat|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 [http://de.wikipedia.org/wiki/Kombinat 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 [http://de.wikipedia.org/wiki/Outsourcing outsource], die ich in gewisser Weise, zu meinem Kombinat, zugehörig sehe.
+Des weiteren steht [[wikipedia:de:Kombinat|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 [[wikipedia:de:Outsourcing|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 [http://de.wikipedia.org/wiki/Ostalgie Ostalgie]), elektronische Medien, Elektronik, Medium
+Schlagwörter für mein Projekt, die es für das Design umzusetzen gilt, wären also: Ehrlichkeit, Vertrauen, DDR/Osten (keine [[wikipedia:de:Ostalgie|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.
-==Inhalt==
+Umgesetzt ist davon die Firmenseite unter: [http://www.kombinat-medien.de www.kombinat-medien.de] und der Blog unter: [http://blog.henryrahn.de blog.henryrahn.de]. Der Blog ist mit [http://wordpress.org/ Wordpress], mit einem freien Theme, umgesetzt und muss noch mit Inhalten gefüllt werden. Auf eine Ich-Seite wurde verzichtet.
-==Technik==
-==Die Entwicklung==
+==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===
 [[File:Logo.jpg|thumb|left|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.
+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 [http://de.wikipedia.org/wiki/Kombinat_Robotron Robotron] an welchem ich selbst noch meine ersten Computer-Erfahrungen gemacht habe) erweckt werden, bei dem "elektronische Medien" auf dem Terminal geschrieben steht.
+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 [http://de.wikipedia.org/wiki/Kombinat_Robotron 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 plattformunabhängig ist und Nutzer ohne Administrator-Berechtigung für ihre PC von diesem Feature ausschließt.
+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====
+<gallery>
+File:henry1.jpg|vertikale Navigation
+File:henry2.jpg|mit Akkordion
+File:henry3.jpg|und Moussover-Effekt für Impressum und Kontakt
+</gallery>
+====horizontale Navigation====
+======lose Kopplung an Inhaltsbereich======
+<gallery>
+File:henry4.jpg|horizontaler Entwurf
+File:henry5.jpg|mit orangem Farbfluss
+File:henry7.jpg|mit blauem Farbfluss
+</gallery>
+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======
+<gallery>
+File:henry8.jpg
+File:henry9.jpg
+File:henry10.jpg
+File:henry11.jpg
+</gallery>
+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===
+<gallery>
+File:rahn skizze1.jpg|Studien vom Navigationskonzept
+File:rahn skizze2.jpg|Studien vom Navigationskonzept
+</gallery>
-===Das erste Design===
-===Weiterentwicklungen===
 ===Das finale Design===
+Das finale Design kann man sich, unter: [http://www.kombinat-medien.de 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 [http://www.fontsquirrel.com/fontface 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==
+*[http://blog.ryanmaffit.com/web-development/php/dynamic-php-font-generator.html PHP-FontGenerator]
+*[http://scriptly.webocton.de/11/download.de.html Webocton Editor]
+*[http://jqueryui.com/demos/accordion/ Alles über das JQuery Accordion]
+*[http://www.appcelerator.com/ mobile Apps mit Appcelerator Titanium (open source)]
+*[http://www.t3n.de das T3N Magazin ist einen RSS-Feed wert!]
 ==Quellen==
+===aus dem Web===
+*[http://www.selfhtml.org/ SelfHTML]
+*[http://jquery.org/ JQuery]
+===Konventionelles===
+*Buchstabenkommenseltenallei n; Ein typografisches Handbuch; Indra Kupferschmid; Verlag Niggli AG, Sulgen|Zürich, Limitierte Sonderauflage für FontShop Berlin