m (→Techniken) |
|||
| (20 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
=Kombinat elektronische Medien= | =[http://www.kombinat-medien.de Kombinat - elektronische Medien]= | ||
==Das Projekt, die Idee und Motivation== | ==Das Projekt, die Idee und Motivation== | ||
Als kleiner Internet-Startup läuft man schnell in die Falle einer Ich-Seite. | 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 | 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. | 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 | 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 [ | 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 [ | 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 [ | 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== | ==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. | 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: [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. | |||
==Techniken== | ==Techniken== | ||
* Html und CSS | * Html und CSS | ||
* Javascript und JQuery ein Javascript-Framework | * 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== | ==Die Entwicklung vom Logo zum Web-Design== | ||
| Line 25: | Line 27: | ||
[[File:Logo.jpg|thumb|left|Kombinat elektronische Medien Logo]] | [[File:Logo.jpg|thumb|left|Kombinat elektronische Medien Logo]] | ||
Das Logo enthält sowohl den Aspekt | 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 | 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 | 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. | Dieses Feature soll später, mit Html5 und Javascript, umgesetzt werden. | ||
| Line 39: | Line 41: | ||
</gallery> | </gallery> | ||
====horizontale Navigation==== | ====horizontale Navigation==== | ||
======lose Kopplung an Inhaltsbereich====== | |||
<gallery> | <gallery> | ||
File:henry4.jpg| | File:henry4.jpg|horizontaler Entwurf | ||
File:henry5.jpg| | File:henry5.jpg|mit orangem Farbfluss | ||
File:henry7.jpg| | File:henry7.jpg|mit blauem Farbfluss | ||
</gallery> | </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> | <gallery> | ||
File:henry8.jpg | File:henry8.jpg | ||
File:henry9.jpg | File:henry9.jpg | ||
File:henry10.jpg | File:henry10.jpg | ||
File:henry11.jpg | File:henry11.jpg | ||
</gallery> | </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=== | ===Design-Skizzen=== | ||
<gallery> | <gallery> | ||
File: | File:rahn skizze1.jpg|Studien vom Navigationskonzept | ||
File: | File:rahn skizze2.jpg|Studien vom Navigationskonzept | ||
</gallery> | </gallery> | ||
===Das finale Design=== | ===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== | ==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 | |||
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
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
mit Akkordion
und Moussover-Effekt für Impressum und Kontakt
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.
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
Konventionelles
- Buchstabenkommenseltenallei n; Ein typografisches Handbuch; Indra Kupferschmid; Verlag Niggli AG, Sulgen|Zürich, Limitierte Sonderauflage für FontShop Berlin