Layout erstellen
lima-city → Forum → Die eigene Homepage → Grafikdesign
ansatz
aufteilung
beispiel
besucher
design
elemente
farbe
fragen
grafik
inhalt
layout
login
meinst
men
sage
sekunde
test
toll aussehen
typografie
verstehe
-
Hallo,
ich frage mich, wie man ein gutes Layout erstellt. Ich sage bewusst nicht Design, weil ich schon etwas gesucht habe, und als Design verstehe ich dann immer hochkomplizierte Gimp oder Photoshop-Dateien, die "geslict" werden und dann ganz kompliziert ganz toll aussehen.
Ich will weniger. Einfach ein bisschen interressanter. Das, was ich momentan so zu stande bringe ist qualitativ aehnlich wie dies hier:
http://lagerhaus.milten.lima-city.de/designshow/
Was ja bisschen langweilig, wenn nicht sehr langweilig aussieht.
Wie erstellt man ein interessantes, nicht so extremst kompliziertes Layout (oder Design, wie ihr wollt?) Es soll ja nicht perfekt, sondern einfach untere Mittelklasse sein
MfG lagerhaus -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Ich verstehe nicht ganz was du meinst, willst du ein Design erstellt bekommen?
Dann adde mich bitte mal in icq, 309-065-203, willst du wissen wie man tolle Designs erstellt?
gfx4ever.de
Lg,
Yannik -
Ich verstehe nicht ganz was du meinst, willst du ein Design erstellt bekommen?
...
Wenn mich nicht alles täuscht, dann:
lagerhaus schrieb:
...ich frage mich, wie man ein gutes Layout erstellt. Ich sage bewusst nicht Design, weil ich schon etwas gesucht habe, und als Design verstehe ich dann immer hochkomplizierte Gimp oder Photoshop-Dateien, die 'geslict' werden und dann ganz kompliziert ganz toll aussehen.
...
Schlussfolgerung: nein, will lagerhaus nicht.
Mal ein paar grundsätzliche Worte vorab:
Als "Design" bezeichnet man in diesem Zusammenhang wohl am ehesten das allgemeine Erscheinungsbild einer Webseite, speziell aber eines Logos oder bestimmter, einzelner Grafiken.
Ein "Layout" ist dagegen die "Aufteilung" oder eher "Verteilung" von Inhalten auf einer Fläche, seien es Fotos in einer Zeitschrift oder eben Inhalte einer HTML-Seite.
Ausgangsproblem:
Wie erstelle ich ein einfaches, nicht allzu anspruchsvolles, aber nicht langweilig wirkendes Layout?
Dazu sollte man ein paar grundsätzliche Überlegungen anstellen, die ich hier mal am Beispiel meiner eigenen Website (siehe Signatur) durchkauen werde.
- Welches Thema soll die Seite haben?
->Verbindung mit verschiedenen Hobbies, allen voran rettungsdienstliche Arbeit, Cartoonzeichnen und Fotografie)
- Welche Unter-Themen, Ideen und vor allem Farben assoziiere ich mit diesem Thema?
->weiß und (tagesleucht)rot als Farben des Rettungsdienstes, Polaroids und Zettel als Designelemente
- Welche Funktionen soll die Seite später beinhalten?
-> Neben einem Blog vor allem umfangreiche Galerien, ein Forum etc.
- Wenn eine Community geplant ist, wo lege ich die Zugangs (login-)Formulare hin?
->Extra-Spalte an der linken oder rechten Seite; Kann zusätzlich für optionales Menü oder andere Inhalte genutzt werden
Problemlösung: verschiedene Ansätze
- Farbkonzept: Umsetzung möglichst vieler geplanter Farbkombinationen; Verwendung von harmonierenden Farben. ACHTUNG: Text-Lesbarkeit muss immer gewährleistet bleiben!
- Aufteilung: Spaltenlayout? 1-, 2- oder 3-spaltig? mit waagerechter Navigation als Blickfang? Fester Header oder mitscrollender Header? mögliche Werbeplätze für Bannerwerbung? Platzbedarf für Community-Optionen wie Login und Usermenü(s)?
Blogroll/Rss-Feeds?
- Typografie (Schriftbild): (Anpassung über CSS!)
->Zeitungsstil (Serifenschriftarten wie z.B. Times)? ->> impliziert Seriösität, Informatiionsgehalt der Seite sollte aber möglichst hoch sein, Texte wirken so formatiert schnell langweilig oder sind als lange Texte schwer lesbar.
->Blog-Schriftarten? (allen voran Trebuchet MS) ->> nicht auf allen Systemen einsetzbar, Ersatzschrift muss eingeplant werden; assoziiert beim Leser den Informationsgehalt eines Weblogs, verbindet interessanten Schriftstil mit relativ guter Lesbarkeit.
Kombination der Ansätze
- "Scribble" (Zeichnung, Skizze) auf Papier anfertigen und die wichtigsten Designelemente und Positionierung von Boxen, Containern etc. dort festhalten;
Zierlinien einplanen, möglichst wenige Grafiken einsetzen, die nur unnötig die Ladezeiten verlängern
- Scribble detailgetreu in HTML und CSS umsetzen - ein WYSIWYG-Editor hilft dabei ungemein!!
- CSS anpassen, bis alle Details eingetragen sind
zu guter Letzt: Testphase!!
- testen, testen, testen - Bedienung, Übersicht, Stimmen on anderen Besuchern einholen.
- sogenannter 10-Sekunden-Test: Wenn ein Besucher nicht innerhalb der ersten 5-10 Sekunden verstanden hat, was das Thema der Seite ist, und wie er sich auf ihr zuerchtfindet, verlässt der Besucher verärgert die Seite! Also selbst ausprobieren, einen guten Freund einspannen, abwarten, was passiert. Fällt die Seite im test durch, überarbeiten und von vorne anfangen!! Aber nicht entmutigen lassen...
- Layout soweit wie nötig anpassen....Navigationselemente so positionieren, dass sie klar erkennbar und leicht zugänglich sind; Elemente gegenseitig als Gliederung einsetzen (z.B. waagerechte Navigationsleiste als optische und funktionelle trennung des Headers vom Body), immer auch an lange Fließtexte und Bilder im Text denken (Blindtexte zum Testen gibts über Google...ich sage nur "lorem ipsum dolor sit amet" usw... wer kennt es nicht...)
wenn alles klappt: Glückwunsch!
Gratulation, du hast ein eigenes Layout erstellt! Erzähle möglichst vielen Leuten davon, damit sich die arbeit auch gelohnt hat und sie deine Seite besuchen! ;)
was kann ich tun, um ein Layout noch besser zu machen?
- Beherzige den Spruch: WENIGER IST MEHR! nimm ihn wörtlich.
So wenig Grafiken wie möglich, so viele wie nötig. Je weniger Grafiken, desto mehr gut genutzte Ladezeit.
- Je weniger überflüssige Elemente auf der seite, desto klarer die Navigation, also desto mehr Nutzen.
- Je weniger Farben, desto mehr verärgerte User! Nutze Komplementärfarben, um Kontrastflächen zu schaffen und gliedere so deine Seite!
- Je weniger Flächen, desto mehr Inhalte in den einzelnen Flächen - richtig, aber nicht übertreiben. Lange Texte am besten abkürzen und mit einem "weiter lesen" Link versehen....
das könnte man noch ewig so fortführen.
Grundsätzlich gilt also:
- Klares Konzept entwickeln und überall strikt daran halten...stichwort: "Corporate Identity" (steigert den Wiedererkennungswert der Seite)
- Farbwahl so abwechslungsreich und augenschonend und lesbar wie möglich halten
- Textanordnung und Typografie auf Layout abstimmen.
Meine Damen und Herren, ich komme zum Schluss:
Konkret also in deinem Beispiel, lagerhaus:
Mach's bunter. ;)
und bau eine Headergrafik ein...
Viel Spaß beim Lesen und Nachprüfen (siehe Sig)..
Schönen Abend noch
Gruß
Sven
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
