Templaterie Blog

Ausschlaggebend für diesen Entwurf war ein Bild von einer temporären Ausstellung, um genauer zu sein einer Video-Installation. Das Bild das zu sehen ist stammt jedoch von stock.xchng. Statt dem virtuellen Inneren eines Flugzeugmodels mit Gliederpuppe und einem Flugzeug im Flugzeug, ist ein Tunnel zu sehen. Die wesentlichen grafischen Elemente sind sich im wesentlichen Ahnlich. Es entsteht ein Raster das sich auf frühgotische Fenster abbilden lässt, mit den Bogen, der Unterteilung des Bildausschnittes in mehrere kleinere Rechtecke.

Das Design ist nichts wildes, doch es hat seine kleinen Reize.

Filed under: Design
No Comments

Gleich zwei Faktoren zwingen dieses Design in einen festen Rahmen. Das ist die Diagonale des Horizonts und die Perspektive des Sandes, bei dem mehr und mehr Details erkennbar werden, bis zuletzt jedes einzelne Sandkorn zu unterscheiden wäre. Um möglichst kleine Hintergrundgrafiken zu haben, wurde der Bussard aus dem Bild heraus genommen, so dass das JPG mit einer deutlich stärkeren Kompression abgespeichert werden konnte. Einmal davon abgesehen, dass der Bussard sich mitten im Bild befindet und damit im Text stünde. Der Stand ist damit auf unter 20 KB geschrumpft. Auch wenn der Entwurf insgesamt einen ordentichen Eindruck macht, zähle ich diesen Entwurf wegen seiner Starre zu den schwächeren Entwürfen.

Bildquelle: Photocase.de User 1100

Nachtrag:
Das Vorschaubild habe ich wieder im ursprünglichen Entwurf belassen, während die überarbeitete Fassung auf den perspektivisch verjüngenden Sand aus dem Foto mit den typischen Unebenheiten verzichtet, dafür aber die Möglichkeit schafft die Maße des Originalfotos ignorieren zu können und nur noch den Bussard und eine Andeutung von der Wasserbewegung aus dem Originalfoto zurückbehält, damit der Entwurf die gesamte Fläche des zur Verfügung stehenden Viewports nutzen kann. Es ist im übrigen nun auch kein Problem mittels Schatten dienen Rahmen zu ergänzen, würde dieser vermisst.

Filed under: Design
No Comments

Die Website hat Ihr Vorbild in den Modetaschen mit dem geschlungenen C im Muster, das aus markenrechtlichen Gründen hier nicht gernannt wird, weil die Marke meinen könnte ich wollte ebendiese ausbeuten … sooon Quatsch. Die Makre hat ein Lebensgefühl geprägt und steht für ein kulturelles Phänomen und nur als solches hätte ich es erwähnt. Doch Internetrecht lehrt uns, solche Marken nicht mehr namentlich zu benennen. Sie sind die Namenlosen mit den scharfen teueren Anwälten.

Doch an dieser Stelle solle es nicht um dämliche Markenverfechter gehen sondern um das Design.

Neben dem von den alten Griechen entliehenen Motiv ist für dieses Design der schwache Kontrast und der Effekt, der entsteht, wenn bei diesem schwachen Kontrast das Muster invertiert wird. Es fällt kaum auf, dass in der linken Spalte das Muster im dunkleren Grau vor hellem Grund steht und in der breiten rechten Spalte ein helles Muster vor einem dunkleren Grund. Es macht für mich den Reiz dieses Designs aus.

Filed under: Design
No Comments

Dieser Entwurf ist schlicht und doch irgendwie grandios. Der Entwurf zählt zu meinen Favoriten, vorallem auch weil er leicht umzusetzen sein wird.

Filed under: Design
No Comments

Ein nettes Spiel mit vor und Hintergrund und mit der Wiederholung von Motiven. Es ist ebenfalls ein Entwurf der 2004 entstand. Das Bild stammt von dem Photocase-User derMatze. Es ist ein fantastisches Bild und ist maßgeblich für den Farbraum und das Design bestimmend.

Filed under: Design
No Comments

Bildquelle: Rolf van Melis, http://www.photosforfree.de

[Nachtrag]
Als der Entwurf entstand war die 800×600-Auflösung die gängige, da heute jedoch 800×600 nicht die übliche Fenstergröße ist, bedurfte es eines kleinen Touch-up. Wieder ist der Originalentwurf in der Vorschau. (Rettungsschwimmbox stammt von aboutpixel.de von Peter Ehmann, der Lattenzaun aus einem Bild von August Macke)

Auch in diesem Entwurf kommt der Verlauf mit Rastern zum Tragen. Ein Schwierigkeit mit Bildern ist, dass diese sich A nicht dem Viewport anpassen und B wenn sie wenigstens Teilweise viewportfüllend sein sollen, ziemliche Drumms sind. Diese Website bildet daher im Hintergrund nur die Grundfarben nach und das Bild selbst ist in drei Spalten unterteilt. Nun können je nach Viewport und Auflösung die Spalten den Raum einnehmen. In der rechten Spalte ist außerdem eine kleine Figur, keine 10 Pixel hoch. Im Frühjahr 2004 hatte ich noch eine andere Technik entdeckt und mich darin ausgetobt:

Es entstanden einige Minibilder die Pixel für Pixel zusammen-”geklickt”.

Es waren diese Bilder, die mich lehrten mit Pixelrastern Verläufe zu gestalten. Diese Bilder haben eine ganz eigene Qualität.

In einem gewissen Rahmen sind so sogar Mini-Gif-Filme möglich … (more…)

Filed under: Design
No Comments

Dieser Website-Entwurf entstand in erster Linie um den damaligen Sitestil zu immitieren. Der Entwurf entstand 2004. Rund um mich herum waren Layout-Tabellen state of the art. Die Gegenposition war noch schwach, aber auch schon damals war für diese Site keine Tabelle vorgesehen. Das Layout hat nicht an Charme verloren und hat gute Chancen noch umgesetzt zu werden … irgendwann … wobei ich mich in Photoshop wie unschwer an der Fülle der ‘noch’ nicht umgesetzten Photoshop-Entwürfe für Websites erkennbar ist, deutlich wohler fühle. Es ist einfach ohne diesen Frust, wenn man Sites aufbaut und dann überer mehrere Browser hinweg testet, nur um festzustellen, dass die Welt so schön wäre, würden die Standards in einigen Bereichen einheitlich von allen Browsern gleich interpretiert werden … Auch frage ich mich wo die Designer in den Gremien des W3C sind. Diverse Definitionen vermisse ich nun schon eine Ewigkeit. Das eine oder andere kommt zwar mit CSS3. Es ist aber immer noch so, dass man viele Ideen einfach in die Tonne gibt, weil diese sich nicht vernünftig umsetzen lassen, auch wenn auf CSS Playground so manches gezeigt wird, dass es geht, so haben diese Demos keinen wirklich praktischen Nutzen, insbesondere wenn es darum geht, diese dem ungeübten Nutzer in einem CMS zur Verfügung zu stellen.

Als erfahrener Webdesigner verzichtet man schlicht auf einige Gestaltungsvarianten, weil man weiß, dass diese im Web mehr Probleme schaffen als lösen. Die Layout-Tabelle war und ist nicht umsonst eine beliebte Gestaltungsmethode. Doch die Einfachheit und die Gliederung wie im Grafikdesign in feste Raster, die mit einer Layout-Tabelle gegeben ist, limitiert den Designer im Web sehr stark. Dies ist einer der Gründe, warum ich die Layout-Tabelle als Methode meide. Ein anderer ist die Tatsache, dass selbst der Quelltext für Menschen lesbar wird und auf das wesentliche … auf Inhalte reduziert wird.

Filed under: Design
No Comments

Die Besonderheit bei diesem Entwurf ist der Verlauf. Etwas, das insbesondere in der Verkleinerung nicht erkennbar ist. Der Verlauf wurde nicht über eine Anderung des Farbwertes erreicht, sondern durch ein Pixelraster. Zur Verdeutlichung habe ich einen Ausschnitt aus der Grafik flach anthrazithgrau eingefärbt. Bemerkenswert, wie durch die Wahl des Rasters und relative Farbnähe das Raster vor dem Auge verschwimmt und zu einem weichen Farbverlauf zusammenfließt. Je stärker der Kontrast, desto stärker ist das Raster erkennbar. Da i.R. die Farbmischung via Raster in separaten Schichten über mehrere Grafiken in einer Website keinen praktischen Nutzen hat, war dies ein einmaliges Experiment. Insbesondere, da mit transparenten PNG-Dateien die Transparenz seit 2004 sich verändert … nungut erst jetzt 2007 bzw. 2008 wird der M$IE6 soweit ausgestorben sein, dass transparente PNG reinen Gewissens ohne besondere Extrawürste wird eingesetzt werden können.

Filed under: Design
No Comments

Der Entwurf stammt aus dem Jahr 2004. Ich wollte damals ein Trompe L’oil, eine Augentäuscher-Website entwerfen. Der Entwurf ist so angelegt, dass in jedem Fall der Rahmen sich dem Monitor anpasst. Der Plan ist da doch umgesetzt ist dieser Entwurf noch nicht und angesichts seiner eingegrenzten Verwertbarkeit wurde dieser Entwurf schon oft zurückgestellt. Zumindest aber wird dieser Entwurf nicht alt.

Nachtrag: Die auffälligste Anderung sind die Insekten. Da ich die Bildquellen nicht mehr eineindeutig zuordnen kann und nur weiß, dass ich diese benutzen darf aber für die Übertragbarkeit bzw. der Sicherstellung, dass Sie diese ihnen bereits vom Urheber übertragen wurde, ich die Quelle angeben muss, haben die Insekten sich nun etwas geändert. Siehe TC-0079 C in der Galerie der Templaterie (im Shop). Natürlich können die Insekten auch ganz weggelassen oder gegen Motive passend zum Business ausgetauscht werden. Wer will kann ja einmal durchzählen wieviele Dinge im Screenshot sich gegenüber dem Entwurf geändert hat. Wobei es nicht schwer ist, diese Seite wie die Skizze hier umzusetzen, sollte jemand das Template erwerben wollen aber dieses Layout vorziehen. Nur die Insekten müsste derjenige dann auf eigenes Risiko verwenden.

Filed under: Design
1 Comment

Klicke auf das Bild für eine Ansicht 1024×640

Als ich im September in München einen Vortrag zu guten Webseiten hielt, da behauptete ein Co-Referent, dass Bäckerseiten nicht blau sein dürfen. Das ist so nicht richtig. Milka wäre kaum ein solcher Erfolg geworden, hätte Milka nicht mit bestehenden Farbvorstellungen gebrochen. Jedes Design ist ein Statement und auch für Bäckerseiten kann es gute Gründe geben, Blau als Firmenfarbe zu wählen, zum Beispiel wenn es klar zum Ausdruck bringen möchte, dass es eine Bäckerei mit guter bayrischer Tradition ist.

Dieser Website-Entwurf zeigt meines Erachtens ein Design, dessen sich keine Bäckerei schämen muss und das anderen guten Bäckerseiten in nichts nachsteht. Es ist bedauerlich, dass in der Verkleinerung einige Details zum Nachteil der Vorschau verwischen, daher ist der Entwurf auch in Originalgröße vorhanden. Ich würde mich freuen, wenn auch andere Designer zeigen, dass Bäckerseiten nicht immer in Herbstfarben Gelb, Braun oder Orange bzw. Beige daherkommen müssen. Insbesondere gute Siteentwürfe mit Blau als führende Farbe zeigen die Freiheit, die Unternehmen in der Farbwahl haben, wenn Design von Profis im Spiel ist.

Bildquelle: Brotkorb auf stock.xchng

Filed under: Design, Webmarketing
No Comments