Ich suche nach Ressourcen für die Erstellung von Webseiten.
Ich möchte mehr über die Vor- und Nachteile verschiedener Seitenlayouts und Techniken zum Bewegen des Auges auf einer Seite erfahren.
Ich suche nach Ressourcen für die Erstellung von Webseiten.
Ich möchte mehr über die Vor- und Nachteile verschiedener Seitenlayouts und Techniken zum Bewegen des Auges auf einer Seite erfahren.
Antworten:
Die Frage kann eine ziemlich breite Antwort haben, die Tage und Tage des Lernens erfordert, aber ich werde etwas Kurzes ausprobieren.
Sie müssen Ihr Layout nach einem unsichtbaren Raster entwerfen, wie in Papierform, also im Web, damit Sie alles in der richtigen Ausrichtung und Ordnung halten. Die Schwierigkeiten bestehen darin, dass im Web Größen und Proportionen geändert werden können und der Inhalt in vielen Aspekten dynamisch ist (Festlegen von Einstellungen, Monitorkalibrierung, Beleuchtung, Monitorgröße, Browser, Betriebssystem usw.).
Aus diesem Grund betrachten wir nicht die Proportionen zwischen den Dingen, sondern konzentrieren uns auf ein klassisches Setup. Ein klassisches Layout besteht aus Kopfzeile oben, Fußzeile unten und 3 Spalten in der Mitte (wobei links und rechts kleiner als eine Mitte sind). Dies kann eine Website mit zwei oder mehr Spalten sein. Dies hängt davon ab, wie viele Informationen Sie haben und wie viel Sie anzeigen möchten oder wie viel "Luft" (auch bekannt als: Leerraum) Sie zwischen die vorhandenen Informationen einfügen möchten .
Hinweis: Beachten Sie, dass es einige technische CSS-Einschränkungen gibt, z. B. das Ausrichten von Spalten (die sich in derselben horizontalen Zeile befinden) auf derselben Höhe, wenn sie unterschiedliche Inhalte haben, die die Spalte füllen. Die Leute versuchen, mit kreativen Lösungen zu reparieren , bis der Browser ihr CSS-Rendering auf dem neuesten Standard aktualisiert
Es gibt 4 mögliche Layouts:
1) Festes Layout: Sie definieren jedes Div in px, das in eine bestimmte Größe passt, die in einem Browser sichtbar ist (zum Beispiel in: 800x600).
pro: das design ist stabil con: je nach benutzerbildschirm kann es zu viel Leerraum geben
Bei dieser Lösung können Sie sich für links entscheiden (da Sie wissen, dass sich rechts eine große Lücke befindet und Sie mit einem grafischen Hintergrund spielen können) oder die Mitte ausrichten (indem Sie den Leerraum links und rechts teilen und seine Größe gegenüber der linken Ausrichtung verringern).
2) Fließendes Layout: Die Seite wird an die Größe des Bildschirms angepasst und der Inhalt verschoben und angepasst
Pro: Es füllt immer die Seite und hinterlässt keine unkontrollierten Leerzeichen. Con: Sie verlieren die Kontrolle über die Proportionen und das Raster, in dem Sie Ihren Inhalt positionieren (Beispiel: Ein Absatz in mehr Zeilen, die bei höheren Bildschirmauflösungen zu einem langen Satz mit einer Zeile werden.)
Technikbeispiel oder ein anderes komplexeres
3) Ursprüngliches Layout: Sie basieren auf Verstößen gegen die Regeln von Layouts und Gittern. Sie verwenden kein klassisches Spaltenlayout und basieren hauptsächlich auf Grafikdesign-Effekten wie der Anzeige von Informationen auf der gesamten Website. Sie verwenden eine absolutere Positionierung als jede andere Lösung. Gut für künstlerischen Spaß im Web oder verrücktes Portfolio und nichts weiter (ich bin nicht dagegen, aber sie erfordern Kenntnisse der Regeln der Webdesign-Kommunikation, technische und gute kreative Bemühungen).
Ich finde momentan kein Beispiel, sorry.
pro: großartige ästhetische und originelle con: Sie können dies nicht für kommerzielle Websites, für Blogs oder für Dinge mit einer großen Menge an Informationen verwenden.
4) Dynamisches festes Layout: Es ist das, was ich heutzutage für meine persönlichen Websites und für Kundenwebsites verwende, die Zeit haben, um eine Website flexibel, aber unter Kontrolle zu gestalten. Es ist nichts weiter als ein festes Layout, sondern mit einem Javascript, das ständig Ihre Bildschirmgröße überprüft (im Falle einer Größenänderung oder um festzustellen, welche Größe es ist) und das entsprechende CSS für diese Größe übergibt. Egal wie groß Ihr Bildschirm ist, Sie haben immer eine gute Kontrolle. Wenn ich beispielsweise ein 3-Spalten-Layout habe und die Größe des Browsers verkleinere, kann ich entscheiden, dass die dritte Spalte verschwindet und vor der Fußzeile am Ende des Inhalts angezeigt wird.
pro: Vollständige Kontrolle + Flexibilität con: Viel Aufwand beim Entwerfen und Debuggen von Zeit, um zu überprüfen, ob alles in Ordnung ist, und sogar vorausschauend zu denken, da Sie später in Zukunft neue Inhalte hinzufügen und alles gut funktionieren muss.
Artikel, in dem ich mich inspirieren ließ (Heutzutage macht jquery einen tollen Job mit resize (), vor 3 Jahren hatte ich ein langes langes Skript dafür :))
Ein letzter Hinweis Heutzutage gibt es einen neuen Trend bei Grafik-Webdesignern (Menschen, die mehr Grafikdesigner als Programmierer sind), dass sie mit festem Layout jede einzelne Seite ihres Blogs so gestalten, wie es das Magazin mit ihren Artikeln tut. Kreativ und gestaltet jeden Artikel mit seinem eigenen Stil.
Ein Exponent ist Jason Santa Maria
Andere Artikel:
Es gibt mehr Artikel da draußen. Suchen Sie nach "CSS-Layouts". Oder folgen Sie Orten, an denen über Benutzerfreundlichkeit und Design gesprochen wird, wie z. B. Signal gegen Rauschen
Alles, was Sie über die Zusammensetzung wissen müssen, sind Erfahrung und Studium oder Usability-Tests (Versuch und Irrtum). Stellen Sie jemanden auf Ihre Website und sehen Sie, wie er auf Ihr Design reagiert. Oder ein Eye-Tracking-Gerät :)
Ich bin Autodidakt und kann daher keine Vorschläge zu Kompositionsbüchern machen, aber ein gutes Buch über Rasterlayout kann Ihnen sehr helfen.
Wenn Sie ein gutes System für die Gestaltung von Webdesigns suchen, schauen Sie sich das 960-Rastersystem an . Es ist das, was ich für die meisten meiner Layouts verwende. Ich denke, es gibt auch eine gute Auswahl an Vorlagen für die Verwendung in verschiedenen Paketen wie Photoshop und InDesign sowie einige druckbare für alle Ihre Website-Doodling-Anforderungen.
Ein gutes Beispiel für unterschiedliche Layouts finden Sie hier: http://designshack.co.uk/articles/layouts/10-rock-solid-website-layout-examples