# Hab diese Seite gefunden und wollte fragen, wie man das machen kann!



## Kleines (17. April 2006)

Guten Tag,

heute morgen habe ich diesen Link hier gefunden:  http://browsershots.org/ gut das ist noch nichts besonderes. Dann habe ich mich auf der Seite mal ein wenig umgesehen und bin dann hier drauf gestoßen:  http://browsershots.org/recent/ dort habe ich mich dann ein wenig umgesehen und bin nach einer weile auf eine sehr coole Seite gekommen. Ich rede von dieser hier: http://browsershots.org/png/full/bf44794f45a782f50039759f8c8c3c37-pgdn1.png so jetzt bitte nicht erschrecken, was Ihr gleich dort sehen wollt. Aber das Desing finde ich einfach sehr ansprechend. 

Da ich für mein Studium auch ein Design entwickeln muss wollte ich einfach mal fragen wie man sowas macht, denn das Design finde ich schon mal recht gut gelungen. 

Könnt Ihr mir mal ein weing helfen und ein paar Infos geben?

Gruß,
Kleines


----------



## Chrisu (17. April 2006)

Hallo Kleines ;-)

Auch wenn die Vorgehensweise nicht wirklich gerade beliebt ist (zumindest war es so bei meinen Studenten die ich letztes Jahr unterrichten durfte so), sollte man sich viele Gedanken vor der Umsetzung machen. Dann wird man auch mehr Freude mit dem Ergebnis haben. Also hier ist die Vorgehensweise die ich wählen würde:

1.) Brainstorming:
Ganz wichtig, denn man muss sich ja erst mal im klaren werden, was will man überhaupt machen und für welchen Zweck soll die Webseite sein. Jede Branche ist anders. Ein Webseite für einen Geigenbauer sieht natürlich ganz anders aus als für eine Heavy Metal Band. Und auch muss man entscheiden welche Informationen sollen dargestellt werden. Sind viele Texte vorhanden, dann muss das Design auf klare und leicht lesbare Strukturen festgelegt werden. Soll die Webseite in erster Linie Interesse wecken und den Kunden zu einer Kontaktaufnahme animieren, dann kann man mit Emotionen spielen. Soll heißen, dann kann die Seite Bildlastiger und verspielter sein.

2.) Entscheidung der Farbgestaltung
Auch das ist wieder ganz wichtig. Farben drücken eine Menge aus und man kann dabei auch sehr leicht daneben greifen. Was man hierbei vor allem beachten muss ist, dass die Farben nicht nur unterschiedliche Bedeutungen haben, sondern auch in anderen Ländern ganz was anderes ausdrücken können. Bestes Beispiel sind hier jetzt Schwarz und Weiß. Bei uns steht die Farbe Schwarz für Trauer, in Asien ist das bei Weiß der Fall. Mehr Informationen dazu findet man mit Google.

3.) Raster überlegen
Meiner Meinung nach sehr elementar. Dabei gehts darum sich zu Überlegen, wie werden Texte und Bilder angeordnet. Wieviele Spalten und Zeilen soll es geben. Dabei muß man sich aber nicht immer strikt an das Raster halten. Manchmal kann es auch besser sein, wenn man mal für gestalterische Zwecke aus dem Raster ausbricht. Stichworte hierbei sind auch goldener Schnitt usw. Auch dazu findet man im Internet eine ganze Menge.

4.) jetzt wirds langsam ernst: Skizzen erstellen
Und das war bei meinen Studis am unbeliebtesten. Einfach mal den guten alten Stift und Blätter Papier rausholen und anfangen zu skizzieren. Und zwar nicht nur ein oder zwei Skizzen, sondern mehrere. Und immer wieder mal bewerten was gut und schlecht ist und dann wieder Kombinationen machen. Wenn man das gemacht hat, dann hat man einen gute Auswahl und kann sich für das beste Layout entscheiden.

5.) Und jetzt kommt das Umsetzen am Computer dran
Welches Programm man dabei nimmt ist in erster Linie egal. Nimm ein Programm mit dem du dich gut auskennst. Ich persönlich verwende am liebsten Photoshop dafür, hab aber auch schon Sachen mit Illustrator gemacht. Kommt immer drauf an wie die Webseite aussehen wird. Dabei ist es wichtig, dass man nicht alles in einer Ebene macht, sondern alles auf mehrere Ebenen verteilt. So ist es leichter machträglich Änderungen zu machen. Und anstelle des Radierer-Werkzeugs solltest du Ebenenmasken verwenden. Somit lassen sich ausgeblendete Bereiche nachher wieder herstellen.

6.) Das Design wieder zerschneiden
Dafür gibt es auch mehrere Möglichkeiten und dazu findet man im Internet eine Menge an Tutorials. Viele verwenden das Slice-Werkzeug von PS, ich persönlich bevorzuge allerdings die Methode mit Hilfslinien und dem Selecttool und dann Copy-Neu-Past-Ansatz. Aber das ist Geschmacksache. Wichtig dabei ist nur, dass man sich vorher schon mal überlegt hat wie man die Webseite aufbaut (Tabellen oder CSS) und wie das Design zerstückelt wird.

7.) wieder zusammenbauen
Hast du dein Design zerschnitten, dann geht es jetzt in einem HTML-Editor deiner Wahl wieder ans zusammenbauen. Auch hierbei gibt es mehrere Ansätze: entweder mit dem klasischen Tabellen-Layout (sind viele ineinander verschachtelte Tabellen) oder eben CSS. Meiner Meinung nach haben beide ihre Vor und Nachteile. Aber das lässt sich so schwer beantworten was für dich besser wäre. Dazu ist es wichtig zu wissen, was für eine Zielgruppe du ansprichst. Bei Technikbegeisterten oder Sehbehinderten Menschen ist sicherlich CCS zu bevorzugen, wenn du aber eine nciht so technikversierte Zielgruppe hast, musst du auch damit rechnen, dass die noch keinen so modernen Browser haben und eventuell Probleme mit CSS haben könnten. 

Naja, und wenn du alles so gemacht hast, dann solltest du eine ordentliche Webseite haben und dein Auftraggeber (in diesem Fall dein Prof) zufrieden sein ;-)
Ich hoffe, das hilft dir ein wenig weiter. Das ganze ist nur ein Leitfaden und muss nicht immer so eingehalten werden, erleichtert die Arbeit schon ungemein, da man sich dadurch viel Nacharbeit ersparen kann.

So long,
Chrisu


----------

