2D Design

Grundprinzipien der Gestaltung von Benutzeroberflächen (GUIs)

2013-12-30T01:29:00.001+01:00

Während das Wissen eines Designers für Programmoberflächen meist alle Interna des Programms umfasst, kennt der Benutzer oft nur die Oberfläche. Um eine benutzergeeignete Oberfläche und Bedienung – also eine hohe Usability – zu erreichen, können viele Regeln angewandt werden. Nach Jeff Johnson [1] gibt es hierfür neun einfache Regeln, die es zu beachten gilt:

Regel 1: Fokus auf den Benutzer

Der Fokus muss auf den Benutzern und ihren Aufgaben liegen – nicht auf der Technologie.
Zentrale Fragen:

Für wen ist die Software?
Was ist ihr Zweck?
Welche bereits bestehenden Probleme gilt es zu lösen?
Welche Aspekte der jetzigen Arbeitsweise werden bevorzugt und welche nicht?
Welchen Kenntnisstand haben die Benutzer?

Der Mensch als Zentrum des Interaktionsgedankens

Regel 2: Zuerst Funktion, dann Präsentation

Die Konzepte zur Funktionsweise sollen klar sein, bevor über die visuelle Präsentation nachgedacht wird. Zentrale Fragen:

Welchen Teil des Gesamtkonzepts wird der User zu sehen bekommen?
Welche Schritte werden benötigt um welche Daten einzugeben, zu betrachten und zu manipulieren?
Welche Einstellungen soll der Benutzer vornehmen können?

Ein schlichtes Design erleichtert das Verständnis der Funktionsweise.

Regel 3: Sichtweise des Benutzers

Es soll verhindert werden, dass der Benutzer zu Aktionen genötigt wird, die nicht seiner natürlichen Denk- und Handelsweise entsprechen. Durch Interviews und Beobachtungen der Benutzer kann vermieden werden, dass unnötig viele Arbeitsschritte notwendig sind, störende Dialoge entstehen und unverständliches Vokabular über programminterne Zustände verwendet wird.

Regel 4: Design für den Normalfall

Die Aufgaben die ein Benutzer am häufigsten zu bewältigen hat, sollen am einfachsten zu erreichen sein. Der Aufwand den ein Benutzer zur Bewältigung einer Aufgabe aufbringen muss, soll nicht proportional zur Komplexität sondern zur Abweichung von der Standardaufgabe wachsen.

Regel 5: Nicht ablenken

Der Benutzer soll nicht durch komplizierte Dialoge von seiner eigentlichen Aufgabe abgelenkt werden und im Kontext der Software denken müssen. Es soll immer absolut offensichtlich sein, was eine Funktion tut.

Ein zu aufwändiges Design lenkt von der eigentlichen Aufgabe ab.

Regel 6: Den Lernprozess vereinfachen

Damit dem Benutzer das Erlernen der Bedienung einfach fällt, müssen alle Beschriftungen und Icons frei von Ambiguitäten sein; Layouts sollen sich konsistent repräsentieren (z. B. soll der „OK-Button“ immer an derselben Stelle erscheinen) und Eingabefehler sollen leicht korrigierbar sein, damit der Benutzer ermutigt wird die Umgebung auszuprobieren.

Regel 7: Informationen zeigen, nicht nur Daten

Damit der Benutzer einfach aus den Daten Informationen gewinnen kann, sollen die wichtigen Daten (u.a. durch geschickt gewählten Kontrast) in den Fokus gebracht werden, Darstellungen sollen so weit es möglich ist grafisch erfolgen und bei Veränderungen durch die Bedienung soll sich so wenig wie möglich verändern (z.B. soll die Position eines Namens in einer sortierten Liste so lange gleich bleiben, bis die Umbenennung abgeschlossen ist).

Regel 8: Reaktionsfreudiges Design

Der nach vielen Studien wichtigste Faktor für die Benutzerzufriedenheit ist die Reaktionsgeschwindigkeit. Damit ist sowohl die Verzögerung zwischen Benutzeraktion und Oberflächenreaktion als auch die Wahrnehmung der Verarbeitung gemeint. Ein System, welches z.B. aktiv darstellt, wie Daten abgeholt werden, wird deutlich angenehmer wahr genommen als eines, wo dieser Prozess versteckt im Hintergrund stattfindet. Bei langläufigen Operationen soll immer angezeigt werden, wie lange die Operation noch dauert.

Benutzerelemente, die ein direktes Feedback bei der Benutzung geben, werden leichter akzeptiert.

Regel 9: Test mit dem Benutzer

Nachdem die Oberfläche erstellt wurde, helfen Tests mit den Benutzern sowohl Schwierigkeiten bei der Bedienung aufzudecken als auch die Akzeptanz seitens des Benutzers zu fördern. Weiterhin wird damit auf der Seite des Entwicklers ein Bewusstsein für die Handlungsweise des Benutzers ausgebildet.

Quellen:

[1] Johnson, Jeff ; Cerra, Diane (Hrsg.): GUI Bloopers 2.0 – Common Interface Design Don’ts and Dos. Bd. 2. Morgan Kaufmann Publishers

Photoshop-Tutorial: Arbeiten mit Eis und Schnee

2012-02-13T23:02:00.000+01:00

Wer schon einmal mit dem Finger Strichzeichnungen auf zugeschneiten Fensterscheiben gemalt hat, der weiß, dass das zwar sehr nett aussehen kann, aber auch schrecklich kalt ist. Außerdem liegt nicht jeden Tag die perfekte Menge Schnee bei perfekter Beleuchtung auf einem Auto herum. :-)

Die Lösung liefert natürlich Photoshop. Hier kann mit zwei (frei erhältlichen) Texturen und relativ geringem Arbeitsaufwand etwas sehr Schönes gemalt werden.

Dieses Tutorial ist eine Ergänzung des fantastischen Tutorials von Iceflow Studios. Das Ergebnis sieht wie folgt aus:

Ergebnis des Tutorials "Schnee und Eis"

Um ein hübsches Eis-/Schneebild zu bekommen, gibt es drei Startmöglichkeiten:

1a) Eine vorhandene Form auswählen
1b) Eine eigene Form von einem Foto erstellen
1c) Einen Text als Symbol verwenden
2) Tutorial von Iceflow Studios anwenden
3) Nachkorrekturen

1a) Eine vorhandene Form auswählen

Photoshop verfügt bereits über eine recht brauchbare Palette an Symbolen. Über den Button mit dem Formsymbol erreicht man die Symbolpalette. Diese Symbole haben den Vorteil, dass es sich um Vektorgrafiken handelt und diese somit verlustfrei skaliert werden können.


Die Symbolpalette von Photoshop.

Mit dem ausgewählten Symbol kann nun das Tutorial in Schritt 2 gestartet werden.

1b) Eine eigene Form von einem Foto erstellen

Wenn keines der dargestellten Symbole dem Gesuchten entspricht, so muss der Künstler selbst ans Werk gehen. Entweder man hat viel Geduld/Können und malt mit dem Zeichenstiftwerkzeug die gewünschte Form (oder importiert eine Vektorgrafik über den Adobe Illustrator) oder man transformiert ein Foto in eine Form.
Dazu wählt man am besten ein Foto mit einem guten Kontrast zwischen der gewünschten Form und der restlichen Umgebung. Jetzt wird mit Hilfe des Zauberstab-Werkzeugs oder des Schnellauswahlwerkzeugs die Form selektiert werden.

Selektion der Form.

Jetzt erfolgt ein Klick mit der rechten Maustaste auf die Selektion. Im erscheinenden Kontextmenü muss nun "Arbeitspfad erstellen..." gewählt werden. Je nachdem wie sauber die Selektion erfolgt ist, sollte vom Toleranzbereich (nur wenige Pixel) Gebrauch gemacht werden.
Danach muss eine neue Ebene erstellt werden, in welcher die neue Form erzeugt werden soll. Bitte darauf achten, dass die neue Ebene im Ebenenbrowser selektiert ist.
Anschließend wird in der Werkzeugleiste das "Pfadauswahl-Werkzeug" ausgewählt. Mit einem Klick der rechten Maustaste auf den Pfad wird nun über den Punkt "Vektormaske erstellen" eine Vektormaske erstellt. Mit dem Füllwerkzeug kann nun noch der Inhalt der Ebene schwarz eingefärbt werden.

Fertiges selbst erstelltes Symbol.

So sollte der Ebenenbrowser am Ende dieses Schritts aussehen.

Fertig ist das eigene Symbol für das Schneebild. Jetzt kann mit Schritt 2) fortgefahren werden.

1c) Einen Text als Symbol verwenden

An Stelle eines Symbols kann natürlich auch (wie in meinem Fall) Text verwendet werden. Dazu empfehle ich eine serifenlose Schriftart, die der natürlichen Schrift ähnelt. Es gibt zahlreiche Grunge-Schriftarten, die diesen Anforderungen genügen. Für das oben dargestellte Bild verwendete ich die frei verfügbare Schrift "Brook 23".
Nachdem der Text platziert ist, muss im Ebenenbrowser mit der rechten Maustaste auf die Textebene geklickt werden. Im erscheinenden Kontextmenü wählt man nun den Punkt "In Form umwandeln".

Eigener Text als Symbol.

So sollte der Ebenenbrowser am Ende dieses Schritts aussehen.

Fertig - der Text ist nun eine Vektorschnittmaske und kann für das Tutorial in Schritt 2) verwendet werden.

2) Tutorial von Iceflow Studios anwenden

Die textuelle Beschreibung dieses Tutorials (analog zum Video) befindet sich hier.

3) Nachkorrekturen

Am Ende des Tutorials aus Schritt 2) gibt es noch eine Kleinigkeit, die mich gestört hat. Das Endergebnis weist einen blauen Schatten auf, der das Bild unrealistisch erscheinen lässt.
Um den Effekt zu korrigieren muss erneut der Dialog "Fülloptionen" geöffnet werden.
Im Bereich "Abgeflachte Kante und Relief" sollte der Lichtermodus auf "Negativ multiplizieren" und die Farbe des Tiefenmodus auf "#6780aa" geändert werden.

Optimierte Einstellungen des Schneeeffekts.

Der blaue Rand wird nun deutlich dezenter wahrgenommen und passt sich zudem noch an den gewählten Hintergrund (egal ob Farbverlauf oder Eistextur) an.

Fertig ist die eigene Eis-/Schneekreation!

Metro-Design mit Photoshop - Tutorial

2012-01-20T13:16:00.000+01:00

Wer heute noch denkt, dass "Metro" ein Untergrundtransportmittel in Paris ist, hat definitiv nicht mitbekommen, dass Windows 8 in den Startlöchern steht und dabei eine brandneue Benutzeroberfläche anbietet. In diesem Artikel werden die Merkmale von Metro beschrieben und in einem Photoshop-Tutorial die Erstellung des Designs nachvollzogen.

Anders bei "Aero" von Windows 7 wird diesmal nicht bloß ein wenig mit Effekten wie Transparenz und Spiegelung gespielt. Das Ziel des neuen Designs ist ein totalitär veränderte Wahrnehmung der Oberfläche. Da die Anzahl der Tablet-PCs und Geräte mit Touch-Bedienung rapide zunimmt, wurde diese Bedienphilosophie von Anfang an durchweg in der Konzeption berücksichtigt.

Hier ein erster Blick auf die Benutzeroberfläche "Metro" von Microsofts Windows 8:

Die neue Benutzeroberfläche "Metro" von Windows 8 (Beta).

Merkmale von Metro

Bei "Metro" handelt es sich um ein typographisches Design. Die Schriften stehen also im Vordergrund und werden als Ersatz für aufwändige Icons eingesetzt.
Alle Elemente sind kachelartig angeordnet - jede Kachel folgt dabei einem unsichtbaren Raster, damit die Fluchtlinien stimmig sind. Die Icons, wenn überhaupt vorhanden, werden nur noch minimalistisch dargestellt.

Die Sidebar (rechts) bietet Zugriff auf Einstellungen wie Desktophintergrund, Kachelabstand sowie die Auswahl der sichtbaren Widgets und Verknüpfungen. Ich habe die Bedienung an einem Touch-Monitor ausprobiert: Das Verschieben der Kacheln und das Wischen des Schirms (um zu den weiteren, nicht sichtbaren Widgets zu wechseln) funktionieren problemlos. Allerdings wünsche ich mir mehr Einstellungsmöglichkeiten und im Versuch haben die Widgets nur partiell meine getätigten Einstellungen beibehalten.

Die Metro-Oberfläche befindet sich (genau wie Windows 8 selbst) noch in der Entwicklungsphase. Der Fortschritt kann im (wirklich interessant geschriebenen) Blog des Microsoft-Entwicklerteams nachvollzogen werden.

Metro-Design mit Photoshop erstellen - Kurztutorial

Aus Interesse habe ich das Metro-Design mit Photoshop nachgebildet und ein wenig interpretiert. Das Ergbnis dieses Tutorials sieht am Ende wie folgt aus:

Ergebnis des PhotoShop-Tutorials "Metro-Design".

Schritt 1: Vorbereitungen - Überschrift und Raster

Ich erstelle ein neues Photoshop-Dokument mit der gewünschten Größe (z.B. 1024x768) und wähle eine Auflösung von 72 DPI.
Danach suche ich mir eine serifenlose, schlanke Schriftart (Century Gothic) für die Hauptüberschrift aus und platziere sie großzügig skaliert oben links am Bildschirmrand.
Anschließend muss das Raster für die Kacheln erstellt werden. Um die Rastereinheiten erkennen zu können und einen Rahmen zu bilden ich platziere ein sehr großes graues Rechteck auf der Arbeitsfläche. Jetzt wähle ich eine Rechteckform und ziehe diese mit gedrückter Shift-Taste zu einem Quadrat mit einer Seitenlänge von ca. 6cm (1). Jetzt dupliziere ich das Quadrat und färbe die Kopie neu ein (die Kopie muss in der Ebenenansicht über dem Original liegen).

Schritt 0: Erstellen einer Rastereinheit.

Jetzt ändere ich die Breite des Rechtecks so lange, bis das Rechteck das Quadrat genau halbiert (2). Dann überlege ich mir, welchen Kachelabstand ich haben möchte. Bei einem Kachelabstand von 16 Pixeln mache ich das Rechteck weitere 8 Pixel schmaler.
Das so gewonnene Rechteck benenne ich "Rasterelement" und erstelle ein Duplikat davon. Das Duplikat ("Rasterelement Kopie") verschiebe ich so lange seitlich, bis es die andere Hälfte meines Quadrats ausfüllt. Das Quadrat beinhaltet also zwei jeweils auf den Kanten liegende Rechtecke mit einem Spalt dazwischen (3).
Das Quadrat blende ich nun aus (4). Die zwei Rasterelemente dupliziere ich und platziere sie rechts neben dem Original. Dabei halte ich genau denselben Abstand zum linken Paar ein, wie auch der Abstand zwischen den beiden Rasterelementen groß ist. Dieser Abstand muss auch für den vertikalen Abstand eingehalten werden. Durch weiteres Duplizieren erhalte ich so am Ende ein großes Raster wie in der folgenden Abbildung.

Schritt 1: Raster erstellen.

Schritt 2: Die Sidebar

Für die Sidebar wähle ich einen starken Grauton (#595959) als Hintergrundfarbe. Mit perfekten Kreisen forme ich Schaltflächen, auf denen ich einfache Symbole mit niedrigem Detailgrad platziere. An Stelle von Kreisen würden rechteckige Elemente vermutlich besser passen, aber zumindest an dieser Stelle möchte ich mich vom Original abheben.
Ebenso habe ich oben rechts ein Viertel eines Kreises platziert - dies soll die "Schließen"-Schaltfläche werden. Sie ist groß gewählt, da viele (otpische) Touch-Displays Probleme mit der Fingererkennung in den Eckpunkten haben.

Schritt 2: Sidebar ergänzen.

Schritt 3: Die Kacheln

Jetzt wird das Raster mit den Kacheln gefüllt.Ich überlege mir, welche Elemente mein Startbildschirm enthalten soll und wieviel Platz diese jeweils benötigen.
Ich blende das Quadrat aus Schritt 1 wieder ein und dupliziere es. Ich lege die Duplikate passend auf das Raster und färbe jedes Kachelelement einzeln ein. Die Farben wähle ich dunkel genug, damit ich später einen weißen Text darauf platzieren kann.Wie im folgenden Bild zu sehen, kann die Fläche sich beliebig ausbreiten - es muss nur die Rasterung eingehalten werden.

Schritt 3: Kachelung wählen.

Schritt 4: Texte und Symbole

Die Kacheln wirken noch recht leblos. Mit Hilfe von einfachen Symbolen und sehr großen Schriftzügen garniere ich die Schaltflächen.
Bei Metro gibt es vier Arten von Schaltflächen:
a: große Symbole ohne Text
b: mittelgroße Symbole mit wenig Text, der hervorgehoben wird
c: kleine Symbole mit mehr Text
d: großes Bild ohne Symbole oder Text

Die Hervorhebung des Textes (Fall "b") bewirke ich durch das Platzieren eines schmalen schwarzen Rechtecks unter dem Text. Die Deckkraft setze ich auf 55% und die Füllmethode setze ich auf "Ineinanderkopieren".
Die Überschriften müssen zwar derselben serifenlosen Schriftart angehören, können aber verschiedene Schriftgrößen und Zeichenabstände haben. Microsoft spielt bei dem Design absichtlich mit verschiedenen Schriftgrößen pro Widget.

Schritt 4: Texte und Symbole ergänzen.

Schritt 5: Farbverlauf (optional)

Das originale Metro-Design besitzt keine Farbverläufe auf den Buttons. Ich bin jedoch ein Fan von dezenten Farbverläufen und finde diese Variante eine Spur hübscher.
Um den dezenten Farbverlauf zu bewirken, wähle ich eine der Kachelformen aus und öffne über das Kontextmenü das Menü "Fülloptionen...". In den Fülloptionen (= "Ebenenstil") aktiviere ich den Punkt "Verlaufsüberlagerung" und wähle als Füllmethode "Hart mischen" bei einer Deckkraft von 35%. Der Verlauf sollte einen Übergang von weiß zu transparent beinhalten. Ich spiele mit dem Slider "Skalieren", bis der Verlauf meinen Wünschen entspricht und achte darauf, dass der Verlaufswinkel exakt 90° beträgt.

Fülloptionen für den Farbverlauf.

Wenn ich den Dialog schließe, sieht das fertige Ergebnis wie folgt aus:

Schritt 5: Farbverlauf ergänzen (optional).

Produkte im Apple-Style darstellen mit Photoshop

2010-10-17T17:04:00.003+02:00

Wer einmal einen Blick auf den Apple Store geworfen hat, der stellt fest, dass alle Produkte so aussehen, als ob sie auf einer glatt polierten Glasplatte stehen würden, in der sie sich spiegeln.
In diesem Tutorial wird in sieben einfachen Schritten beschrieben, wie man mit Hilfe von Photoshop diesen Effekt ganz einfach selber hinbekommt.

Schritt 1 – Datei vorbereiten

Wählen Sie ein Motiv, welches frei gestellt ist (sich also auf einem weißen Hintergrund befindet) oder sich einfach frei stellen lässt. Da es bereits eine Vielzahl von solchen Apple-Produktbildern gibt, habe ich mich hier für die Abbildung meines HTC Desires entschieden.
Platzieren Sie es so, dass nach unten hin etwas Platz frei ist.

Schritt 2 – Bild duplizieren

Zunächst muss die Ebene dupliziert werden. Klicken Sie dazu mit der rechten Maustaste auf die Ebene und wählen Sie “Ebene duplizieren”. In dem erscheinenden Dialog vergeben Sie den Namen “Spiegelung”. Schieben Sie die Ebene “Spiegelung” unter die Originalebene. Schieben Sie die Spiegelung möglichst dicht an das Original.
Es macht übrigens nichts, wenn die Spiegelungsebene dabei über die Arbeitsfläche von Photoshop hinaus ragt. Sollten Sie sich grob verschätzt haben und es ist nicht mehr genügend Platz für eine Spiegelung, so können Sie die Arbeitsfläche einfach über “Bild –> Arbeitsfläche…” vergrößern.

Schritt 3 – Bild spiegeln

Noch sieht die Konstellation nicht wie eine Spiegelung aus. Kippen Sie die Spiegelungsebene, indem Sie diese markieren und anschließend auf “Bearbeiten –> Transformieren –> Vertikal spiegeln” klicken. Wenn sich nun das Original verändert haben sollte, so hatten Sie die falsche Ebene markiert.

Schritt 4 – Ebenenmaske hinzu fügen

Die Spiegelung ist noch etwas unschön, da sie am Bildrand abrupt endet. Damit sie in einem weichen Verlauf ausgeblendet wird, benötigen wir zunächst eine Ebenenmaske.
Klicken Sie dazu im Ebenenbrowser zuerst auf die Ebene “Spiegelung” und danach unten auf das Symbol mit dem kleinen Kreis im Rechteck. Als Ergebnis ist im Ebenenbrowser nun in der Ebene “Spiegelung” ein weißes Maskenfeld hinzu gekommen.

Schritt 5 – Transparenzeffekt anwenden

Noch hat sich auf dem Bild nichts verändert. Das liegt daran, dass die Ebenenmaske noch nichts maskiert. Ebenenmasken kann man sich so vorstellen, dass man eine transparente Folie über das eigene Bild legt. Die Bereiche, die weiß sind, werden angezeigt; die schwarzen Bereiche ausgeblendet.
Da wir einen weichen Übergang ins Leere erzeugen wollen, verwenden wir einen Farbverlauf, den wir auf die Ebenenmaske malen.
Klicken Sie dazu im Ebenenbrowser zuerst auf die Ebene “Spiegelung” und dann auf den kleinen weißen Kasten der Ebenenmaske.

Wählen Sie jetzt in der Werkzeugleiste das Verlaufswerkzeug aus. Wenn Sie es nicht sehen können, so hat es sich hinter dem Farbeimer/Füllwerkzeug versteckt. Klicken Sie auf das Icon mit dem horizontalen Verlauf und stellen Sie sicher, dass links ein Verlauf von weiß nach schwarz zu sehen ist.

Jetzt muss der Verlauf noch gezeichnet werden. Ziehen Sie dazu mit der linken Maustaste eine gerade Linie von oben nach unten. Je länger die gezogene Linie ist, um so weicher ist der Verlauf. Um sicher zu stellen, dass der Verlauf wirklich senkrecht verläuft, können Sie beim Ziehen die Shift-Taste gedrückt halten. Wenn es beim ersten Mal nicht klappt, kann man es gleich noch einmal versuchen. Wichtig ist nur, dass oben im Werkzeugmenü der Modus “normal” ausgewählt ist.
Als Ergebnis sollte die Spiegelung sich in ein sanftes Nichts auflösen und der Farbverlauf in der Ebenenmaske sichtbar sein.

Schritt 6 – Unschärfe hinzu fügen

Auch wenn die Spiegelung jetzt schon vorhanden ist, so ist sie noch nicht perfekt. Üblicherweise werden Objekte durch die Brechung des Lichts und weitere physikalische Gegebenheiten (Staub, Kratzer usw.) nicht wirklich perfekt gespiegelt. Dies lässt sich durch ein wenig Weichzeichnen abbilden.
Klicken Sie dazu auf die Ebene “Spiegelung”. Achten Sie darauf, dass wirklich die Ebene und nicht die Ebenenmaske markiert ist. Klicken Sie nun in der Menüleiste auf “Filter –> Weichzeichnungsfilter –> Gaußscher Weichzeichner”.
Legen Sie einen kleinen Wert (etwa. 0,6 Pixel) fest, damit eine minimale Unschärfe entsteht und bestätigen Sie den Dialog.

Schritt 7 – Helligkeit anpassen

Zuletzt kann die Deckkraft der Spiegelung noch etwas reduziert werden, damit die natürliche Diffusion von Oberflächen simuliert wird.
Klicken Sie dazu erneut auf die Ebene “Spiegelung” und schieben Sie die Deckkraft auf ca. 85 Prozent.

Das Bild wird abgeschlossen, indem zum Schluss eine Ebene als Hintergrund hinzu gefügt wird. Achten Sie darauf, dass die Hintergrundebene die unterste im Ebenenbrowser ist.

Frisches Design für grüne IT

2010-06-17T11:10:00.000+02:00

"GreenIT" ist neben Cloud Computing die Modeerscheinung schlechthin bei IT-Dienstleistern. Damit die grüne Firmenphilosophie auch als klares Statement den Kunden gezeigt wird, muss auch die Firmenwebseite angepasst werden.
Einige verzieren daher ihre Webseiten mit vereinzelten grünen Blättern oder fügen einen hervor stechenden, grün gefärbten Link zu den umweltfreundlichen Service-Leistungen ein. Andere stellen gleich die ganze Webseite auf den grünen Weg um.

So habe ich auch im Auftrag der Firma Comp4U EDV-Anlagen GmbH in Langen die Firmenwebseite von einem schwarz/weiß/grauen Design auf ein grün/weißes Design umgehoben. Als Orientierung dienten andere professionelle grüne Webseiten wie der Apple-Store http://www.gravis.de und http://www.actebis.com.

Das grüne Design von Comp4U.

Technik

Als CMS kam erneut das sehr leistungsfähige OpenSource-System "Joomla!" zum Einsatz. In Ergänzung mit vielen Erweiterungen für eine verbesserte Menüführung oder SEO-Maßnahmen und dem eingekauften Basisdesign namens JA Kyanite II der Firma JoomlArt wurde so Stück für Stück eine individuelle Webseite geschaffen.
Das Design wurde manuell so angepasst, dass es auf den bekanntesten Browsern stabil läuft. Dazu waren mehrschichtige Eingriffe in verschiedene Style-Vorlagen sowie den PHP-Code notwendig.

Designrichtlinien

Die frühere Webseite bestand aus genau einer großen Navigationsleiste. Um die Seite ansprechender und intuitiv bedienbar zu gestalten, wurden die Menüpunkte sorgfältig aufgesplittet. Auf einer großen Navigationsleiste sind die Dienstleistungen abgebildet, während auf einer kleinere Leiste die peripheren Interessenspunkte dargestellt werden.

Darf es etwas mehr sein?

Ein wichtiger Bestandteil bei Webseiten ist das "bei Laune halten" des Besuchers. Dazu muss dieser zu jeder Zeit wissen, wo er sich gerade befindet, wie er wieder zurück kommt und was ihn noch alles erwartet. Zu diesem Zweck wurden Breadcrumps eingefügt (kleine Links welche die Tiefe der Navigation abbilden) und tagbezogene dynamische Linkvorschläge in die Webseite integriert. Wenn man sich also im Menüpunkt "Speicher" befindet, so erscheinen auch Links zu Backup-Lösungen, Festplatten usw.
Erfahrungsgemäß betrachtet der Großteil der Besucher bloß die Startseite. Umso wichtiger ist es, dass diese einen runden Eindruck macht und den Eindruck vermittelt, dass es sich immer wieder lohnt, vorbei zu schauen. Zu diesem Zweck wurde ein Bereich für firmeninterne News und ein weiterer mit "externen News" (z.B. von heise.de) eingefügt.

Eyecatcher

Da die Startseite oftmals auch einfach nur geöffnet wird, ohne dass eine Recherche im Vordergrund steht (sprich: der Besucher schaut einfach nur auf die Webseite), sollte auch eine Animation integriert werden. Zu diesem Zweck habe ich viele grüne Motive gesammelt und sie mit Slogans versehen, die zum Motto "Green IT" passen. Damit diese animiert werden, griff ich zu dem Flash-Plugin "Monoslideshow". Dieses Tool werde ich in späteren Blogbeiträgen noch einmal vorstellen.

Bildverarbeitung, Wolken und ein Picnik im Grünen

2010-04-03T01:10:00.002+02:00

Viele Menschen benutzen Photoshop nur, um einfache Arbeiten, wie bspw. Farbkorrekturen oder kleine Retuschearbeiten an ihren Lieblingsfotos vorzunehmen. Photoshop ist zwar der König unter den Grafikprogrammen, aber es kostet auch königlich viel Geld.
Wer einfach, kostenlos und mit guter Qualität Bildverarbeitung betreiben will, kann auch zu der Online-Lösung "Picnik" greifen. Dabei handelt es sich um eine der ersten Applikationen aus einer Wolke (engl.: cloud), die bequem aus dem Netz heraus gestartet werden kann.

Funktionsweise

Der Start ist einfach. Nach dem Besuch von www.picnik.com erwartet einen ein freundlicher "Upload"-Button - nicht einmal eine Registrierung ist nötig. Kaum wurde das Bild hochgeladen, lädt der umfangreiche Editor zum Ausprobieren der vielen Funktionen ein. Die Funktionen sind nach Anwendungsbereich gruppiert und können alle rückgängig gemacht werden.
So findet man Im Tab "Bearbeiten" die gängigen Methoden wie z.B. Zuschneiden, Vergrößern/Verkleinern, Nachbelichten, usw. Im Tab "Erstellen" kann der Benutzer kreativ werden und eine Palette von Filtern auf das Foto anwenden. Auch kleinere Retuschearbeiten wie Weichzeichnen, Pixelkorrekturen und ähnliches lassen sich auswählen.
Wer es dramatisch mag, kann auch seinem Bild einen Rahmen verpassen oder gar virtuelle Aufkleber anbringen. Zum Schluss bietet der Tab "Speichern" eine Fülle an Optionen. So kann der Benutzer dort das Dateiformat, die Dateigröße sowie den Kompressionsgrad des bearbeiteten Bildes festlegen. Weitere Funktionen wie das Versenden der Kreation via E-Mail dürfen natürlich auch nicht fehlen.

Kritik

Picnik ist eine fantastische Lösung, um Fotos "schnell zu bearbeiten" - bspw. um sie für eBay mit wenig Aufwand aufzuwerten oder in das richtige Format zu bekommen. Es kann jedoch keineswegs Programme wie Photoshop ersetzen, da z.B. kein Ebenenbrowser vorhanden ist und die Kreation vor allem für die häufigsten Bildmanipulationen optimiert wurde. Weiterhin kosten viele Filter Geld (sie sind mit dem Wort "Premium" markiert). Bedenkt man, dass dieser wunderbare Dienst aus der Wolke nun von Google aufgekauft wurde, so mache ich mir ein wenig Sorgen, wie im Laufe der Zeit die hochgeladenen Bilder verwertet werden...
Erwähnenswert ist noch, dass die Webseite am Besten mit dem IE7/IE8 aufgerufen werden sollte, da es bei mir im Firefox (v3.5 unter Windows 7) mehrfach zu Abstürzen kam, wenn man viele Veränderungen vornimmt.

Fazit

Trotz der kleinen Wermutstropfen ist Picnik allemal einen Blick wert. Es ist überraschend, wie performant Bildverarbeitung im Internet sein kann und mit welch einfachen Schritten sich herzeigbare Ergebnisse präsentieren lassen. Weiterhin ist diese Webseite ein Paradebeispiel für gute Usability: Intuitive Bedienung, freundliches Design, variable Controlgröße, Undo-Funktionen, Echtzeitvorschau, Unterstützung für viele Sprachen, uvm.
Wenn das Web sich weiter so entwickelt, freue ich mich auf das "richtige" Web 2.0!

Gesellschaft für Industriemontage in neuem Gewand

2010-03-17T23:34:00.000+01:00

Im Auftrag der Firma Comp4U habe ich für GFI - die Gesellschaft für Industriemontage - ein Redesign der Firmenwebseite vorgenommen.
Da sowohl Farbgebung als auch Layout direkt von einem etwas betagtem Printlayout stammten, wurde im Rahmen eines Redesigns komplett neu angefangen. Da es eine Reihe von Symbolen gibt, die bereits auf vielen Visitenkarten und Briefbögen abgebildet sind, mussten diese in die Designüberlegungen mit einbezogen werden.
Insgesamt macht die Webseite einen dezenten und professionellen Eindruck. Übersichtsseiten im Blog-Stil ermöglichen einen schnellen Themenüberblick und verleiten zum Weiterlesen.
Das ehemals sehr dicht gedrängte Print-Layout wurde durch ein lockeres Erscheinungsbild ersetzt. Abgerundet durch neue Features wie ein Kontaktformular, Exportfunktionen und ein professionelles Impressum wird dem Benutzer so eine freundliche und klare Webseite geboten.

Auch hierbei kam Joomla! zum Einsatz, welches mir durch die geschickte Vorformatierung des Templates viel Arbeit abgenommen hat. Mit etwas Nachkorrektur waren auch schnell die unterschiedlichen Interpretationen der Browser (was ist eine Aufzählung, wo wird das Icon platziert, etc.) vereint worden, so dass das Erscheinungsbild mit allen gängigen Browsern ästhetisch und homogen wirkt.
www.gfi-montage.de

Neue Webseite für Fallou Sy - Joomla vs. Wordpress

2010-03-01T22:37:00.004+01:00

Mein Freund und Trommellehrer Fallou Sy brauchte eine neue Webseite um sich und seine Projekte zu präsentieren. Ein Bekannter hatte ihm früher eine Webseite zusammengehackt, aber das Vorhaben ist im Sand verlaufen.

Damit überhaupt etwas zu sehen war, hatten wir uns kurzfristig für die Erweiterung seines Wordpress-Accounts entschieden. Immerhin können mit Wordpress nicht nur Blogs sondern auch Webseiten erstellt werden. Leider bringt Wordpress aber auch Negatives mit sich: Nutzt man das kostenlose Portal, um sich einen solchen Blog erstellen zu lassen, so spürt man schnell die Ambitionen des Online-Wordpress-Teams: Geld verdienen.

Wordpress erlaubt es zwar dem Benutzer, eines von fünf Designs auszuwählen - angepasst werden können diese aber nur gegen Geld. Selbst das eigens geschriebene CSS-Template darf nur gegen Geld auf die Webseite angewandt werden.
In den fertigen (fünf) Templates sind die Editierfunktionen auch arg eingeschränkt - so kann beispielsweise nur grob ein eigenes Bild in die Seitennavigation implementiert werden.

Als Ergebnis erhält man eine Webseite mit einem Design, welches mind. 5 Mio. andere Menschen verwenden, einen hakeligen Editor, seltsame Bildverknüpfungen und das Gefühl, für die eigene Leistung auch noch zahlen zu müssen. Es mag sein, dass die installierbare WordPress-Variante mehr kann und eleganter ist - hier stütze ich mich ausschließlich auf das Online-Angebot von www.wordpress.com.

Das konnte kein Dauerzustand bleiben. Über Schlagzeilen in Webzeitschriften bin ich dabei auf Joomla! gestoßen. Joomla! ist ein kostenloses Blogging-System, welches auch als CMS eingesetzt werden kann. Dazu benötigt man nur einen Server, der PHP 4.x/5.x unterstützt und eine MySQL-Datenbank.

Nachdem ich es installiert hatte, war die Einarbeitung eine leichte Sache - man sucht sich eines von ca. 5000 Templates aus, die die Gemeinde bereitwillig kostenlos in ganzen Template-Galerien veröffentlicht, passt dieses optisch nach seinen Wünschen an, integriert die (ebenfalls kostenlosen) Module für etwas mehr Funktionalität und schon ist eine erste individuelle Webseite entstanden.

Ich will gar nicht bestreiten, dass es wichtig ist, CSS und auch etwas PHP zu beherrschen - dennoch habe ich in Joomla! eine wunderbar solide Basis gefunden, um Webseiten zu erstellen.

Im Falle von Fallou Sy ist auf diese Weise eine Webseite entstanden, die ihm persönlich die Wartung seiner Inhalte und News (in Form eines Blogs) ermöglicht, ein Gästebuch enthält und sogar eine dynamische Galerie beinhaltet. Viele weitere Mikrofunktionen runden das Bild einer professionellen Webseite ab.
Das Ergebnis kann man unter www.fallou-sy.de betrachten.

Ich für meinen Teil werde mich noch weiter in Joomla! einarbeiten und bald ein kurzes Tutorial zu Joomla! veröffentlichen. Ebenso folgen bald weitere Webseiten, die ich mit Joomla! bereits umsetze.

Webseiten mit Hilfe von Google-Blogs erstellen

2009-10-23T20:08:00.001+02:00

Wie im letzten Post erwähnt, habe ich meine statischen Themenwebseiten in mehreren Blogs realisiert. Der Hauptgrund für dieses Vorhaben bestand für mich hauptsächlich in einer nicht mehr so starren Struktur, so dass es mir mit Hilfe der Blogs möglich ist, Beiträge zu verschiedenen Themen "einfach so" schreiben zu können, ohne mich dabei all zu sehr von einer umgebenden Struktur beinflussen lassen zu müssen.
In diesem Beitrag beschreibe ich, welche Erfahrungen ich mit den Google Blogs als Blogsystem gemacht habe.

Das Layout

Die Einstiegsseite von www.blogger.com zum Erstellen eines neuen Blogs bietet eine überschaubare Anzahl von Templates an, die jeweils in bis zu vier Variationen vorliegen. Einige sehen wirklich gut aus - man darf nur nicht vergessen, dass exakt dieses Layout sich bereits bei ein paar Millionen weiterer Nutzer größerer Beliebtheit erfreut.
Im Reiter "Layout" gibt es den Unterpunkt "Seitenelemente" - dahinter verbirgt sich die Möglichkeit, die Gadgets von Google zu verwalten und somit die Blog-Elemente kreativ anzuordnen. Da Google den Layout-Editor so gestaltet hat, dass er intuitiv bedienbar und idiotensicher ist, gibt es nur beschränkten Handlungsspielraum.

So ist es zwar möglich, mit Hilfe eines Gadgets ein Bild in den Rand des Blogs zu integrieren, allerdings kann dieses Gadget nur einmal im Layout-Manager verwendet werden. Die Gadgets selbst sind ganz ordentlich - Standards wie Tag-Clouds, Blog-Archiv und RSS-Feeds können ebenso verwendet werden, wie weitere Gadgets von Drittanbietern oder HTML-Code der wiederum alle Arten von Gadgets oder Widgets erlaubt.

Farbgebung und Schriftauswahl

Immerhin gibt es die Möglichkeit, im etwas sparsam gestalteten Einstellungsmenü ein paar der Farben und Schriftarten anzupassen. Ein Assistent hilft dabei, harmonierende Farben zu finden und eine Vorschau zeigt, wie das Endprodukt der Schöpfung aussehen wird.

Leider ist die Anpassung der Farbgebung auf die Farben und Schriften beschränkt, die im Template als Variablen vordefiniert worden sind. Möchte man z. B. die Hintergrundfarbe des Headers ändern und ist dieser nicht in den Einstellungen definiert, muss man über "Layout"-"HTML bearbeiten" den HTML-Code des Templates nach dem HEX-Code der Hintergrundfarbe durchforsten. Ist diese dann angepasst, gibt es die nächste böse Überaschung: die schönen runden Ecken bleiben in der der alten Farbe und fallen nun negativ auf. Der Grund ist, dass die Ecken als Bilder fest auf einem Server von Google herum liegen. Abhilfe ist nur möglich, wenn man die Bilder der Ecken herunter lädt, einfärbt und auf seinen eigenen Server hochlädt, damit man anschließend im HTML-Template auf die eigene URL zeigen lassen kann. Dann erst ist der Hintergrund des Headers wirklich geändert worden. Ziemlich viel Aufwand für eine so kleine Sache, finde ich.

Erstellen von Blogs

Doch wie sieht es mit dem Erstellen der Blogs aus? Es gibt unter "Posting"-> "Neuer Post" die Möglichkeit, den Text seiner Wahl in einen WYSIWYG-Editor einzugeben. Der Editor bietet eine Vorschau-Funktion sowie die Möglichkeit, den HTML-Text selber einzugeben.

Dieser Schritt ist auch oft nötig, da selbst so etwas wichtiges wie das Festlegen von Überschriften nicht im Editor vorgesehen ist - man darf aber immerhin zwischen fünf verschiedenen Schriftgrößen wählen. Schade, dass Google sich hier nicht an das Standardverfahren (Überschriften von H1 - H8) hält.
Immerhin bietet der WYSIWYG-Editor ein einfaches Werkzeug an, um Bilder in den Blog einzufügen. Ist das Bild eingefügt, kann man zwischen vier vordefinierten Bildgrößen wählen und bestimmen, ob das Bild linksbündig, rechtsbündig oder zentriert ausgerichtet werden soll. Das klappt ganz gut - allerdings darf man niemals vergessen, dass der Blog später eine ganz andere Breite als das Editorfenster aufweist. So wird das Bild, das eben noch elegant Text um sich hat fließen lassen, schnell zum Platzhirsch und entfremdet den Text.
Auch die Vorschaufunktion hilft da nicht viel weiter, da sie nicht alle Stile des Templates aufnimmt und somit immer eine etwas verzerrte Variante des späteren Erscheinungsbildes darstellt.
Ebenfalls extrem ungünstig ist das in meinen Augen nicht deterministische Verhalten der Bildverlinkung. Bilder werden automatisch mit einem Anker und HREF-Tag umschlossen. Dabei zeigt der Link entweder auf das Bild selbst oder auf eine Möglichkeit, den Blog anzupassen (wenn man sich angemeldet hat). Der Link auf das Bild ist unschön, da das Bild "nackt" im selben Fenster wie der Blog angezeigt wird und es keinen Button gibt, der den Benutzer wieder zurück zum Blog führt. Ein einfaches JAVA-Skript, welches das Bild als Popup oder schwebenden DIV in seiner vollen Pracht anzeigt, wäre nicht so schwer gewesen. Auf diese Weise muss ich nach jedem Blog-Post die Links aus den Bildern entfernen...

Diese Webseite

Im Rahmen dieser Webseite habe ich mir ein Template ausgesucht, die Farben angepasst, die bescheidenen Layoutfunktionen so gut es geht ausgereizt und anschließend eine HTML-Portalseite gestaltet, welche die Blog-Header als Wiedererkennungsmerkmal aufnimmt. Die Hintergrundfarben habe ich absichtlich etwas dezenter gewählt, damit die Farben der Blog-Header besser zur Geltung kommen. Das Design basiert vollständig auf CSS und DIV-Layern.

Die eigene Webseite - Konzepte der Vergangenheit

2009-09-25T00:29:00.004+02:00

Auch wenn man einige Kundenprojekte erstellt und anderen Menschen bei vielen Webseiten geholfen hat: Am schwierigsten ist die Konzeptionierung der eigenen Webseite. Es gibt so viele Ideen, die umgesetzt werden wollen, so viele Layouts, die ausprobiert werden wollen und so viele innovative Technologien, die ihren Weg in das Web finden sollen.

Ich wollte nie eine Webseite erstellen, die sich nur einem Thema widmet, sondern immer möglichst alle Interessengebiete repräsentiert wissen. Da diese sich stark voneinander abheben, stand immer die Idee einer Hauptseite im Raum, von welcher dann auf die einzelnen Themenseiten verwiesen wird. Diese konnten dann ihr eigenes Design finden und schafften einen Rahmen, um die Ideen zu kanalisieren.

Wie an dem blauen Screenshot der Startseite zu erkennen ist, gab es einfach zu viele Ideen mit zu vielen verschiedenen Designs - die Seite wirkt schrecklich überladen und unübersichtlich. Zudem wird der Benutzer mit der blauen Farbe förmlich erschlagen.

Im Bereich "Philosophie" wollte ich Schritt für Schritt philosophische Ideen und Konzepte von der Antike bis zur Moderne aufgreifen und erörtern. Dass ich mir durch die statische HTML-Navigation Möglichkeiten für eine spätere Erweiterung des Themenumfangs verbauen würde, habe ich zu spät bemerkt. Ideen, die nicht ins Schema passten, wurden verworfen oder in Unterseiten "versteckt".

Ähnliche Probleme bildeten sich bei der Gestaltung des Bereichs "Design" ab. Ich wollte mich "trauen", eine Webseite mit weißem Hintergrund zu gestalten, doch durch den Einsatz von zu vielen Stilmitteln im Hauptmenü und einer etwas unvorteilhaften Einteilung kam dieses Projekt schnell zum Erliegen. Einzig eine statisch erschaffene Galerie mit 3D-Bildern wurde tatsächlich umgesetzt.

Nachdem diese "Webseite" einige Jahre unverändert im Web verharrte, entdeckte ich kürzlich für mich das Mittel der Blogs, um Inhalte von einander zu trennen und doch einen gemeinsamen Nenner zu schaffen. Zudem haben Blogs den Vorteil, dass man Artikel über das schreiben kann, was einen derzeit beschäftigt - ohne sich an einer vorher definierten Struktur ausrichten zu müssen.

Aktuell besteht mein Plan in einer Ausweitung der Blogs um die restlichen Themen die mich interessieren - in der Hoffnung, dass Google in seinen Blogs zukünftig etwas mehr Freiheiten bzgl. der Gestaltung zulässt. Ich bin gespannt, wie es weiter geht.

Spätere Webseiten

2009-09-24T22:03:00.002+02:00

Nachdem dann einige Jahre ins Land gewandert waren und HTML, JavaScript, CSS und die Methoden der objektorientierten dynamischen Programmierung keine Zauberworte mehr waren, erblickten neue Webseiten das Licht.

Die erste größere Webseite mit serverseitiger Ausführung habe ich im Rahmen meines ersten Praxisprojektes für die Firma Comp4U erstellt. Die Anforderung definierte sich in einer Webseite, deren Inhalte zu jeder Zeit vom Management geändert werden können ohne dass dabei versehentlich das Design zu Schaden kommt. Weiterhin sollte die Startseite gleichzeitig Wiedererkennungspotential besitzen und bei jedem Aufruf neue Inhalte dynamisch generieren. Die Inhaltsseiten sollten sich schnell aufbauen und bzgl. Struktur sowie Position in der Navigationsleiste leicht anpassen lassen.
Die Webseite habe ich als ASP.NET - Webseite mit der Sprache VB.NET im .NET-Framework v2.0 aufgesetzt und komplett so erstellt, dass jedes Element - von den Inhaltsseiten und Newsbereichen über die Bilder in Menüs bis hin zu den Attributen der Nachrichten und Werbeinhalte in dem von mir entwickelten, online zugänglichen Content Management System angepasst werden können.
Eine ziemlich umfassende Arbeit mit vielen Stolpersteinen und den Schwierigkeiten durch den überhaupt ersten Kontakt mit ASP.NET im eigentlichen Sinne - dennoch war es ein fantastisches Projekt. Das Design hat sich etwas geändert, da die Firmenfarben sich geändert haben, aber es schlägt noch das alte Herz in ihr...
http://www.comp4u.de

Ein ebenfalls interessanter Auftrag war das ReDesign einer Webseite für eine Gaststätte. Die vorherige Webseite wurde mit sehr rudimentären Mitteln erstellt und bestandhauptsächlich aus zwei Frames, deren Inhalt den Kontrastfarben grellgrün und hellrot erlegen war.
Da die Farben zum Image des Kunden gehören und ebenfalls auf Visitenkarten gedruckt wurden, musste eine elegante Lösung gefunden werden. Diese bestand in der Kreation von einem freundlichen Gelb, welches sich als Kontur um die roten Schriften legt und somit deutlich augenfreundlicher erscheint. Die Buttons wurden selbst erstellt und nehmen den verspielten Stil des Logos auf. Ein Button stellt sogar das Gesicht des Kochs und Leiters des Restaurants dar.
Als besonderes Feature bietet diese Webseite eine aktive Seite, die der Besitzer des Restaurants (welches übrigens wunderbar leckere und urige Gerichte anbietet) jederzeit mit einem von mir entwickelten Tool ändern kann. So können problemlos Videos von YouTube, ein Spruch des Tages, ein Bild der Woche sowie eine ganze Flash-Galerie angepasst und ausgetauscht werden.
http://schoene-aussicht-stettbach.de

Die ersten Webseiten

2009-09-23T23:38:00.007+02:00

Nachdem man sich in zahllosen HTML-Versuchen und den ersten Kämpfen mit CSS einen ersten Erfahrungsschatz angeeignet hat, dauert es meist nicht lange, bis die erste Webseite für jemanden erstellt werden soll. Oft werden dabei Erfahrungen gesammelt, die den wackeren Webmaster glauben lassen, er habe nun zum ersten Mal eine Webseite erstellt, da plötzlich der "Faktor Kunde" eine große Rolle im Entwicklungsprozess spielt.

Die erste Webseite, die eine präsentable Form angenommen hat, wurde für die Malawi-Hilfsorganisation GEAMOC e.V. erstellt. Ziel der Webseite ist die Vorstellung der Tätigkeiten, die Erklärung der Vorzüge einer Mitgliedschaft oder die Verdeutlichung der Freuden einer Patenschaft für ein Waisenkind.
Da abzusehen war, dass die Webseite viele Inhaltsseiten erhalten würde, nachdem das Design erstellt war, habe ich mit Hilfe von Dreamweaver ein Template erstellt. Da für die Webseite weder ein aktiver Server vorhanden war, noch ich damit (damals) etwas hätte anfangen können, hat das mit HTML und CSS erstellte Template bis heute gute Dienste geleistet. Das Design orientiert sich an den lehmigen und staubigen Straßen von Malawi, die das Vorankommen mit Hilfe von herkömmlichen Automobilen nahezu unmöglich machen.
http://www.geamoc.de

Bald darauf folgte eine Webseite für das Floristikgeschäft Blumen Tiele. Ursprünglich war der Webauftritt nur in Form einer etwas größeren Visitenkarte gedacht, doch schon bald erwies sich die Zusammenarbeit als so erfolgreich, dass das gesamte Produktportfolio in die Webseite aufgenommen wurde. Auch hier wurde mit einfachen HTML- und CSS-Gestaltungsmitteln dem Anspruch, eine "frische" Webseite zu erhalten, versucht gerecht zu werden. Ein Löwenanteil der Arbeit bestand in der optischen Aufwertung der vielen Digitalfotos, welche für das Produktportfolio angefertigt worden waren.

http://www.blumentiele.de