Nachdem im zweiten Teil des Tutorial das Mockup für die CoffeeLove-Webseite ent­standen ist, wird es jetzt end­lich so richtig bunt, denn die Arbeit mit Photoshop und Illustrator kann end­lich beginnen. Ich werde dir zeigen, wie du bei der Gestaltung des Design-Entwurfs vor­gehen kannst, was du beachten soll­test, und mit wel­chen Tricks und Tipps du im Webdesign schneller voran kommst. Also los geht’s an die krea­tive Arbeit :-)

1. Welches Programm ist für Webdesign am besten geeignet?

Natürlich stellt sich zuerst die Frage, in wel­chem Programm man sein Webdesign erstellen soll. Photoshop ist dabei sicher die häu­figste Wahl, und viele Webdesigner arbeiten für ihre Design-Entwürfe aus­schließ­lich mit Photoshop. Da ich jedoch kein rie­siger Photoshop-Fan bin, dafür umso grö­ßerer Typografie-Fan, arbeite ich für das Gesamt-Layout lieber im Illustrator und wech­sele nur für bestimmte Webseiten-Elemente und Hintergründe in den Photoshop. Am besten du pro­bierst selbst aus, mit wel­chem Programm du besser zurecht kommst, und wählst dann deine Lieblings-Arbeitsweise aus.

Falls du keine Adobe-Programme besitzt, gibt es auch tolle kos­ten­lose Alternativen, GIMP ist z.B. eine tolle Alternative zu Photoshop, und Inkscape für Illustrator. Hier fin­dest du eine Über­sicht kos­ten­loser Programme für Webdesigner.

2. Eine Webdesign Raster-Vorlage verwenden

Ein sehr hilf­rei­cher Tipp, um leicht sau­bere Layouts gestalten gestalten zu können, ist ein Grid (Raster) zu ver­wenden. Auch das Mockup für die CoffeeLove-Webseite hatte ich ja bereits mit Hilfe des Tools MockingBird am 12-spaltigen Raster des 960 Pixel breiten Grid-Systems aus­ge­richtet. Auch wenn du das Grid-System nicht im CSS ver­wenden möch­test, kannst du die Raster-Vorlage sehr gut im Webdesign nutzen.

Du kannst dir Vorlagen für die ver­schie­densten Layout-Programme auf der Webseite des 960-Grid-Systems her­un­ter­laden. Ich habe meine Grid-Vorlage im Illustrator geöffnet.

Das Dokument ist ins­ge­samt 1020 Pixel breit, mit 30 px Seitenrand, und einer 10 Pixel-Spalte rechts und links des Grids.

Möchtest du nicht 960 Pixel als breite für deine Webseite ver­wenden, kannst du dir mit dem Tool Gridinator auch eine PNG-Gridvorlage online erstellen.

Eine Raster-Vorlage für Webdesigns als PNG-Image online erstellen.

3. Das Webdesign im Grafikprogramm vorbereiten

Als nächsten Schritt ist es hilf­reich, sich vorab alle benö­tigten Ebenen im Grafik-Programm anzu­legen. So ganz du sicher sein, dass kein krea­tives Chaos in deiner Datei ent­steht, und du wäh­rend der Arbeit am Design alle Ebenen schnell aus- und ein­blenden kannst.

Dann kannst du dir als wei­teres Hilfsmittel dein zuvor erstelltes Mockup (siehe Tutorial Teil 2) als PNG-Image in eine Hintergrundebene deiner Datei laden, und auf eine leichte Transparenz setzen. Auch das vor­be­rei­tete Farbschema für das Webdesign kannst du auf eine extra Ebene deiner Datei laden.

Die Farbtabelle und das Mockup sind hilf­reiche Referenzen wäh­rend des Design-Prozesses.

4. Den Webseiten-Hintergrund in Photoshop anlegen

Da ich plane, den Webseiten-Hintergrund mit Hilfe eines naht­losen Musters umzu­setzen (so kann ich später in der Programmerierung nur ein ganz kleines Image ver­wenden), ver­wende ich für den Hintergrund im Illustrator nur eine Arbeitsvorlage.

Diese erstelle ich mir mit dem Photoshop-Muster, dass ich später als eine Art Kachelbild (mit der CSS Background-Eigenschaft repeat) ver­wenden möchte.

Als erstes lade ich mir ein Muster mit Papierstruktur auf der Webtreats-Webseite herunter.

Um ein neues Muster in deinem Photoshop-Programm ver­wenden zu können, musst du zuerst die Datei im PAT-Format in den Ordner »Patterns« unter Programme / Adobe / Photoshop / Presets / Patterns hinein laden.

Dann legst du im Photoshop deine neue Datei für die Hintergrund-Vorlage an (bei meinem Beispiel in der Breite 1020px) und wählst unter Ebene / Neue Füllebene / den Punkt »Muster…« aus.

Der Musterebene kannst du jetzt einen Namen geben und sie bestä­tigen. Jetzt bestimmst du die Musterfüllung. Um dein neues Muster zu laden, klickst du auf den kleinen Pfeil rechts von der Musterauswahl und wählst »Muster laden…«

Wähle dann dein neues Muster aus dem Order Patterns (in dem du es zuvor ein­sor­tiert hat­test) aus. Jetzt werden deine neuen Muster eben­falls in die Auswahl geladen. Mit der Skalierung kannst du die Größe des Musters anpassen.

Ich habe bei meinem Muster noch die Deckkraft der Ebene auf 25% zurück gesetzt.

Für das Webdesign-Layout im Grafikprogramm kann ich jetzt diese Muster-Vorlage ein­setzen. Ich plat­ziere den Hintergrund also in meine Illustrator-Datei in die ange­legte Ebene »background«.

5. Den Webseiten-Header gestalten

5.1. Von oben nach unten gestalten

Ich gestalte eine Webseite eigent­lich immer von oben nach unten. Ich fange also mit dem Header an. Das hat den Vorteil, dass im Header meist der Stil einer Webseite (durch das Logo oder Grafiken) fest­ge­legt wird. Die wei­teren Elemente der Webseite gestalte ich dann anschlie­ßend im glei­chen Stil.

5.2. Vom Groben ins Feine arbeiten

Außerdem arbeite ich vom Groben ins Feine. Heißt ich gestalte erst das grobe Design kom­plett fertig (Flächen, gra­fi­sche Grundelemente, Texte). In einem zweitem Durchlauf style ich alle Elemente im Detail z.B. mit Textschatten, Transparenzen, gra­fi­schen Details oder Verläufen. Das hat den Vorteil, dass ich mich nicht zu Beginn in einem eher unwich­tigem Detail ver­liere und dann im wei­teren Design-Prozess Probleme habe, einen Gesamt-Stil für die Gestaltung zu finden.

5.3. Das Webseiten-Logo

Für die Coffee Love- Webseite habe ich das Webseiten-Logo direkt im Webdesign gestaltet. (für ein Logo, von dem es später auch als Print-Variante geben soll, ist diese Methode weniger geeignet). Da das Logo eines der aus­sa­ge­kräf­tigsten Elemente der Webseite ist, fange ich mit dem Logo an.

Der erste, grobe Entwurf des CoffeeLove-Logos.

Für den Hintergrund des Logos habe ich eine ver­spielte Vektor-Fläche gewählt, die wie ein Banner wirkt. Jede Menge hilf­reiche Vektorgrafiken für deine Layouts kannst du dir z.b. bei Vectezzy herunterladen.

Für die Logo-Schrift habe ich mich für die Free-Font Garton Medium (von Fontsquirrel) ent­schieden. Die Schrift habe ich dann mit dem Pfadtext-Werkzeug an einem Pfad ent­lang geschrieben, um die leichte Krümmung zu erzeugen.

Da ich meine im ersten Teil des Tutorials vor­be­rei­tete Farbtabelle auf einer Extra-Ebene meines Dokuments pla­ziert habe, kann ich schnell mit dem Pipetten-Werkzeug (I) die Farben für Hintergrund und Schrift des Logos anpassen.

5.4. Weitere Elemente des Headers

Zur Kontrolle kannst du jeder­zeit die Grid-Ebene einblenden.

Im nächsten Schritt habe ich eine Borte am oberen Rand der Webseite mit Hilfe einer Border-Vektorgrafik (Vektorelement von Vectezzy) erstellt. Außerdem habe ich die Punkte der Hauptnavigation rechts­bündig ange­legt. Als Schrift für die Navigations-Buttons habe ich die Free-Font Droid Serif gewählt. Für den Rollover-Effekt wähle ich das dunkle Rosa meiner Farbpalette. Zusätzlich möchte ich, den Button bei Hover unter­strei­chen. Später plane ich auch noch Textschatten für meine Buttons zuge­stalten. Die Droid-Schrift möchte ich später mit Hilfe der CSS-Eigenschaft @font-face einbinden.

6. Der Webseiten-Inhalt

Als nächstes habe ich den Contentbereich, also den Webseiten-Slider, den Introtext, und die drei Elemente Aktuelles, Menü und Twitter gestaltet. im Webdesign kann man sehr gut mit Platzhalter-Bildern (z.B. von Flickr) und mit Lorem Ipsum Text arbeiten. Den Blindtext kannst du dir z.B. von der Webseite loremipsum.de kopieren. Ich nutze sehr gerne die Google Chrome-Erweiterung »Lorem Ipsum Generator«.

Zur Kontrolle schaue ich noch einmal nach, ob alle Elemente im Grid liegen.

Den Hintergrund des Sliders habe ich leicht trans­pa­rent gesetzt. Später plane ich eine noch eine leichte Hintergrund-Grafik zu inte­grieren, die dann leicht durch­scheinen soll. Die abge­run­deten Ecken des Sliders plane ich mit CSS3 border-radius zu realisieren.

Als Link-Farbe habe ich wieder das dunkle Rosa aus­ge­wählt. Später werde ich noch Icons und Textschatten für die Über­schriften hin­zu­fügen. Der Fließtext ist in Times New Roman gesetzt. Die drei neusten Artikel möchte ich mit Vorschaubildern anzeigen lassen. Das lässt sich mit WordPress ganz leicht rea­li­sieren, und es macht die Artikel-Überschriften attrak­tiver. Das Menü soll es als PDf-Download geben und das Twitter-Element mit den neusten Tweets werde ich später in der Programmierung mit einem Twitter-Widget realisieren.

7. Der Footer

Als letztes Element der Startseite gestalte ich den Footer. Hierfür habe ich einen trans­pa­renten Hintergrund gewählt, so dass die Papierstruktur der Webseite leicht durch­scheint. Der Footer-Hintergrund soll durch­ge­hend verlaufen.

Kunden-Referenzen und Google Maps lockern den Footer optisch auf.

Als kleines Feature im Footer sollen aktu­elle Statements von zufrie­denen Kunden rechts in der Footerleiste in Sprechblasen ange­zeigt werden. Außerdem wird eine kleine Google Maps Karte in den Footer inte­griert. Die Karte ist ein wei­teres Element, das den Footer attrak­tiver aus­sehen lässt, und den Kunden schnell den Weg zum CoffeeLove-Café weist :-)

Um den Footer-Balken wieder ein wenig auf­zu­lo­ckern, habe ich die Elemente Copyright, Impressum, und WordPress-Link wieder außer­halb (bzw. unter­halb) des Footerbalkens auf das Hintergrund-Papier gesetzt.

Jetzt ist das erste, grobe Design der CoffeeLove-Startseite abge­schlossen, und das Ergebnis kann sich im Vergleich zu den Mockups aus Teil 2 des Tutorials auch schon sehen lassen.

Das CoffeeLove-Webdesign ent­wi­ckelt sich.

Im nächsten Teil des Tutorials geht es dann ans Styling des Webdesigns. Außerdem werde ich für den Headerbereich ein Hintergrundbild mit Photoshop-Pinsel und coolen Stempeln gestalten.

ich hoffe dir hat das heu­tige Tutorial gefallen, und du hast den ein oder anderen Tipp oder Trick für deine eigenen Webdesigns bekommen. Über dein Feedback und wei­tere Tipps zur Optimierung des Design-Prozesses einer Webseite in Photoshop oder Illustrator freue ich mich sehr!