Das Planen eines Webseitendesigns in Wireframes ist super einfach, aber der nächste Schritt besteht darin, ein Raster auszuwählen und die Seite in Photoshop zu erstellen. Das ist für mich ein Minenfeld.
Wie wählen Sie ein Raster aus und entscheiden, wie Sie Ihre Seite aufbauen?
Ich interessiere mich besonders für Seiten wie Nachrichten-Websites, die viele verschiedene Arten von Informationen enthalten.
Ich finde diese Art von Layout besonders schwierig, da es sehr einfach wird, die Seite unübersichtlich und verrauscht aussehen zu lassen.
Ich würde empfehlen, dass Sie sich das GuideGuide- Plugin für Photoshop ansehen. Es kann im Handumdrehen Gitter in Ihrer bevorzugten Menge mit Dachrinnen und Reihen und den ganzen "neun Metern" erstellen.
Bei so etwas wie Bootstrap sage ich Designern immer, dass sie sich nicht darauf konzentrieren sollen, wie viele Grids es gibt. Auch die Breite ist relativ. Es kann leicht mit LESS-Variablen angepasst werden (definiert die Anzahl der Spalten, Bundstege und Breiten des Containers an unterschiedlichen Haltepunkten). Sicherlich würde es nicht schaden, mit den Standardeinstellungen zu beginnen. In diesem Fall würde ich diese Bootstrap- Rastervorlagen empfehlen .
Um das vorherige Poster zu korrigieren, ist Bootstrap nicht 960. Es ist 1170 Pixel (groß) und dann Haltepunkte bei 970 (mittel), 750 (klein) und dann flexibel unter Verwendung von responsivem Design.
Ich würde vorschlagen, dass Ihr nächster Schritt nicht darin besteht, zu Photoshop zu wechseln, sondern direkt in Ihrem Browser mit dem Entwerfen zu beginnen.
Es gibt viele Grid-basierte CSS-Frameworks, die Sie dafür verwenden können. Einige beliebte Optionen sind Foundation, Bootstrap und Skeleton. Alternativ können Sie jederzeit Ihre eigenen erstellen.
Foundation , Bootstrap und Skeleton verwenden alle Variationen eines 12-Spalten-Rasters mit Breiten zwischen 960 und 1170 Pixel.
Schauen Sie sich die Dokumentation an unter:
http://foundation.zurb.com/grid.html
http://getbootstrap.com/css/#grid
http://www.getskeleton.com/#grid
Sie haben erwähnt, dass Sie eine abwechslungsreiche Sammlung von Inhaltstypen anbieten möchten. Bis Sie einen Teil des Inhalts tatsächlich in einer realistischen Umgebung verwenden, wissen Sie möglicherweise nicht, wie er am besten angezeigt wird, und müssen die Rasterstruktur ändern, um verschiedene Layouts zu testen.
Wenn Sie Ihre Raster direkt im Code erstellen, können Sie schnelle Änderungen basierend auf dem Inhalt vornehmen.
Ich würde eine der vorherigen Antworten erläutern, indem ich Ihr Design auf Bootstrap-Vorlagen stütze. Wenn Sie zeit- und budgetbewusst sind, wählen Sie zuerst eine Technologie (HTML/Wordpress/Drupal usw.) und dann eine bereits vorhandene Vorlage für diese Technologie aus und Arbeiten Sie erst danach am Branding der Vorlage, anstatt mit der Kreativität zu beginnen und dann nach Wegen zu suchen, sie auszuführen.
Die allgemeine Regel für meine Arbeit ist, mit einem standardisierten Raster (z. B. 960 g) zu beginnen und sie in sinnvolle Spaltenzahlen aufzuteilen, normalerweise entweder 12 oder 24. Wenn Sie zunächst ein festes Raster haben, ermöglicht es eine Standardansicht, aber Sie kennen Ihre Die Spaltenanzahl ermöglicht es Ihnen, Prozentwerte für Ihre Breiten zu verwenden, wenn Sie mit dem Schreiben des Markups beginnen, um die Anpassung zu erleichtern, für flüssige, reaktive und ansprechende Layouts.
Großbuchstaben