Homepage | Webdesign

Auf sehr vielen Websites findet man die Saubermann – Optik mit dem spiegelnden Effekt. Im Gegensatz zum Grunge Design ist der Look mit dem Lichteffekt schon kalter Kaffee, sieht aber immer noch nett aus, denke ich. Solange es nicht übertrieben wird, ist es doch ein netter Effekt.

So habe ich eben das “alte” Logo mit diesem Effekt versehen. Wie das geht, ist recht einfach und benötigt wenige Arbeitsschritte im Adobe Photoshop CS3.

1. In meinem Fall habe ich das Logo im Illustrator erzeugt. Da der Effekt besser und einfacher im Photoshop funktioniert, habe ich die Grafik als 72dpi – Bild in das Photoshop-Format *.psd exportiert.
2. Im Photoshop geöffnet, sollte man darauf achten, das sich der Schriftzug und der Hintergrund auf eigenen Ebenen befinden. Ferner muss der Schriftzug frei gestellt ist.
3. Sollte der Text noch als Textebene vorliegen, so muss dieser gerastet werden.
4. Nun dupliziert man die Ebene mit dem Schriftzug und spiegelt über das Menü Bearbeiten -> Transformieren -> “vertikal spiegeln” diese Ebene.
5. Nun schiebt man diese Ebene soweit nach unten, das sie sich unmittelbar unter der ersten Ebene befindet.
6. Auf der Ebene mit dem gespiegelten Text erzeugt man eine Ebenenmaske.
7. Über das Verlaufswerkzeug erzeugt man im Maskierungsmodus einen Verlauf mit der Farb- Standardeinstellung schwarz / weiß. Der Verlauf sollte von oben nach unten gehen, wobei er im Bereich der “echten” Schrift anfangen und im Bereich der “Spiegelschrift” enden sollte.
8. Nach dem Umschalten zurück in den Standardmodus kann man eine Auswahl sehen, diese löscht man und schon ist der Spiegeleffekt schon recht realistisch.
9. Um es etwas besser wirken zu lassen, kann man die Deckkraft der “Spiegel-Ebene” auf einen Wert zwischen 30% und 60% setzen. Das ist nun – wie so oft bei grafischen Arbeiten Geschmackssache.
10. Nun kann man noch mit der Füllmethode spielen, bei meinem Logo brachte dies aber nichts, da die Schriftart aus zwei unterschiedlichen Farben besteht.

Natürlich muss das Logo dann noch als *.gif (oder *.jpg) datei gesichert werden und auf den Server hoch gespielt werden. Im WordPress muss es dann in der header.php eingebunden werden und ggf. die CSS Datei angepasst werden.

So sieht dann der spiegelnde Effekt aus:

So kann es aussehen, wenn der Spiegeleffekt verwendet wurde

Eine oft unterschätzte Eigenschaft muss jede Homepage haben: Sie muss benutzbar sein, schön aussehen genügt sicher nicht. Wie in dem Buch “Don’t make me think” beschrieben, sollte eine Homepage so gestaltet sein, das jeder Besucher sie möglichst ohne langes Nachdenken benutzen kann. Man sollte sofort erkennen können, wo man klicken kann, wo der Inhalt steht und was ggf. Werbung ist.

Dazu gehört natürlich auch, das die Begriffe, die Verwendung finden, leicht verständlich sind. Wenn man eine Website erstellt, die Franzosen als Zielgruppe hat, sollte man keine norwegischen Texte verwenden, sondern in der Landessprache der Franzosen schreiben. Das klingt zwar logisch und man mag meinen, das es eine Selbstverständlichkeit sei, doch die Realität sieht erschreckend oft anders aus. Ich beobachte dieses Phänomen sehr häufig bei Hardware und Software – Herstellern. Hier werden die Produkte, die man kaufen soll in deutscher Sprache angepriesen. Hier werden ausführliche Produktbeschreibungen, aufwendige Animationen und kleine Filmchen gezeigt. Doch wenn man sich zum Support bewegt, wird es oft englisch. Ok, man darf in der heutigen Zeit davon ausgehen, das die englische Sprache kein Hindernis mehr sein muss, doch im Sinne der Benutzerfreundlichkeit (und der besseren Dienstleistung nach dem Kauf eines Produktes) wäre es angebracht, wenn auch hier die Inhalte in der Sprache zu lesen wären, wie sie beim Kauf waren.

Es wäre unfair, über andere Seiten zu meckern, wenn man auf der eigenen diese Grundsätze nicht beachtet. Daher habe ich heute die Lightbox – Schaltflächen (auf englisch: Buttons) “eingedeutscht”. In dem Original-Script werden die Buttons als *.gif-Datei mitgeliefert. Diese haben aber von Haus aus englische Texte. Ok, close und next versteht man sicher noch sehr leicht, doch mit “prev” kann es ggf. schon etwas schwieriger werden. Wer englisch versteht, weiss, das es “previous” – also vorhergehend bedeuten soll.

So baut man im Photoshop die Buttons um

Ich arbeite mit Dreamweaver und habe die Buttons (drei Gif-Dateien) ausfindig gemacht und diese dann im Photoshop geöffnet.

1. Zunächst habe ich die Datei “closelabel.gif” geöffnet.
2. Um eine Gif-Datei bearbeiten zu können, muss sie über den Menüpunkt Bild -> Modus in eine RGB – Datei umgewandet werden.
3. Im Ebenen – Fenster habe ich eine Ebene hinzugefügt und diese mit weisser Farbe komplett gefüllt.
4. Mit dem Textwerkzeug den Text “schliessen” geschrieben, den Text innerhalb des Bildes ausgerichtet und unterstrichen formatiert. Der Besucher interpretiert unterstrichenen Text als Link, den er anklicken kann und das soll er ja auch, wenn er das Bild nicht mehr sehen möchte.
5. Nun habe ich das Bild über Datei – > Für Web speichern als closelabel.gif gespeichert wobei ich die alte Datei überschrieben habe.
6. Mit den beiden Buttons next und prev habe ich es im Prinzip genauso gemacht, nur das ich beide GIF – Bilder aus einer Photoshop – Datei erstellt habe, denn die beiden Bilder sind gleich groß. So kann man sich ein paar Arbeitsschritte sparen.
7. Zum Schluss müssen die Bilder auf den Server hochgespielt werden. Beim nächsten Aufruf der Lightbox – Funktion, also dem Anklicken eines Bildes werden die Schaltflächen in deutscher Sprache dargestellt.

So ist diese deutsche Homepage dem Zustand einer fertigen Website ein kleines Stück näher gekommen.

Seit gerstern Abend ist ein grobes Layout zu sehen. Ich entschied mich für die “klassische” Variante, die in vielen Blog Verwendung findet – dem zweispaltigen Aufbau. In der CSS (Cascading Style Sheets) – Datei habe ich 4 <div> – Container erstellt, die die 4 erkennbaren Bereiche dieser Seite darstellen.

1. Der Header Container: Der breite Balken, indem sich das “Logo” und die Hauptüberschrift befindet. In der CSS Datei sind im Wesentlichen die Hintergrundfarbe und die Aussenmaße definiert.
2. Der “Post” Container: In diesem (hellblau unterlegtem) Bereich befinden sich die eigentlichen Inhalte wie dieser Text. Dieser Container stellt die linke Spalte des Layouts dar.
3. Ein weiterer <div> – Container namens “Sidebar”. Diesen habe ich zunächst mit einem schwarzen Rahmen und grau eingefärbten Hintergrund versehen. Die Sidebar dient in erster Linier der Navigation. Hier werden also künftig sämtliche Links zu den einzelnen Seiten, die Suchfunktion, der Kalender, das Archiv und vermutlich weitere Inhalte folgen.
4. Ebenfalls grau hinterlegt habe ich den 4. Container namens “footer”. Wie auf einem Briefbogen oder einer Broschüre haben auch Webseiten eine Fusszeile.

Da sich das Layout in nächster Zeit ändern wird, habe ich zwei Screenshots erstellt, die den optischen Vergleich zu späteren Arbeitsständen zu lassen.

Ok, diese Seite wird kaum einen Design Wettbewerb gewinnen, aber das auch abseits der sauberen Webseiten, die häufig sehr änlich aussehen, ehr mit schmutzigen “Tricks” gearbeitet wird, zeigt der Trend “Grunge Webdesign”. Wie auf Dr. Web zu sehen, arbeiten eine ganze Reihe an kreativen Webdesignern mit zunächst eher als verpönt geltenden Techniken. Weg von dem Saubermann – Look – hin zu schmutzig und verschmiert wirkenden Seiten.

Eine häufig anzutreffende Form ist das vergilbte Papier, welches als Hintergrund dient. Natürlich muss das “Papier” auf der Seite festgeklebt sein – hierzu dient oft Tesafilm. Manchmal auch eine Büroklammer…

Der Rest vom Kaffee, der unten an der Tasse babbte, hinterlässt natürlich einen braunen Rand auf der Seite, genauso die locker angepinnten Notizzettel. Ferner werden häufig handschriftliche Texte verwendet wie auch die aus der Schulzeit unbeliebten Eselsohren.

Kurzum: Grunge Webdesign lässt sich hervorragend kreativ nutzen und verleiht einer Website einen sehr eigenes Aussehen. Auch wenn so mancher es als Internet Müll bezeichnen würde, Grunge Design ist mehr als salonfähig und ganz nebenbei eine willkommene Abwechlung in dem oft einheitlichen Glanz und Glamour-Look des Web 2.0.

Wer gestern etwas verwirrt war beim Anklicken des Links “So sah es bisher aus” sah auf den ersten Blick nur ein Bild (Screenshot) der Seite, wie sie bis gersten aussah.

Seit heute habe ich ein Zusatzprogramm namens “Lightbox” aktiviert. Diese kleine Script verhilft das Öffnen von Bilder in grosser Darstellung mit einer netten Animation. Wenn man die Bilder anklickt, bekommt man nicht nur das Bild, sondern auch zwei Schaltflächen gezeigt, die eine einfache Vorwärts / Rückwärts – Navigation durch die kleine Bildergalerie ermöglichen.

Ein Beispiel kann man sehen, wenn man eines der folgenden Bilder klickt:

So, in den nächsten Tagen werde ich mich an das eigentliche Design der Website machen. Bevor die Farben definiert werden, kommt das grobe Layout dran. Mehr dazu im nächsten Beitrag.

Auf der Suche nach dem richtigen Logo für diese Seite bin ich noch nicht so richtig fündig geworden, bzw. der richtige Einfall kam noch nicht, aber im Gegensatz zu offiziellen Projekten kann ich hier einfach mal ein schnell im Illustrator erstelltes “Logo” einbinden. Ob es bei den Farben bleiben wird, weiss ich noch nicht, aber ein wenig Farbe ist schon mal nett, oder?

So sah es bisher aus – ohne Logo

In diesem Fall habe ich ein blaues Rechteck aufgezogen und mit einer Schriftweite von 50% den Text in unterschiedlicher Farbe platziert. Logos haben häufig klare, einfache Formen und glänzen weniger mit grafischen Tricks, sondern sollen in erster Linie nur eines: Für Produkte oder Firmen dienen sie als unverwechselbares Wiedererkennungsmerkmal und Identifikationswerkzeug.

Da es sich hier (noch) um eine Seite handelt, die keine grossen Anforderungen hat, kann das Logo – wenn man es denn so nennen möchte – erstmal so lassen.

Wenn man up to date im Web 2.0 sein will, müsste man leicht plastisch wirkende Schriftzüge mit nach unten spiegelnder Darstellung wählen. Ob der auch als “Aqua-Look” bezeichnete Trend immer das Beste sein muss, sei einmal dahin gestellt. Ich bin halt ein Freund von klaren Kontrasten und weniger grafische Spielereien, obwohl ich da im Laufe der Zeit einiges zeigen werde.

Verbesserungsvorschläge zum Logo?

Bevor die nächsten Arbeitsschritte am Design dieser Homepage folgen, möchte ich meinen Besuchern ein Video, welches ich eben durch den RSS Feed von Maclife entdeckt habe, nicht vorenthalten.

Ich will nicht ausschließen, das in Zukunft noch weitere Infos zu den Produkten rund um den angebissenen Apfel erscheinen werden

In Erster Linie wird es hier aber um die Entstehung der Website gehen.