Ich habe gerade ein freiberufliches Projekt bekommen, um die Benutzeroberfläche für eine Website zu entwerfen. Kann mir jemand sagen, welches Layout (Dimension) verwendet wird, um ein Website-Frontend in Photoshop zu entwerfen? Welche Grundabmessungen werden verwendet?
Bildschirmgröße
Höhere Bildschirmauflösungen lassen schließlich alles kleiner wirken.
Ein sehr kleiner Prozentsatz der Internetnutzer verwendet immer noch ältere Auflösungen wie das einst beliebte 800×600.
Websites mit einer Breite von 720 Pixeln erscheinen auf Bildschirmen mit hoher Auflösung sehr klein und lassen keinen Platz für eine Seitenleiste. Jetzt bleiben die meisten Websites etwa 960 Pixel breit. Einige Websites sind sogar auf die neueste Technologie mit viel breiteren Websites ausgerichtet.
| Website | Max-Width |
|-------------------------+-----------|
| Stack Exchange Websites | 980px |
| facebook.com | 980px |
| yahoo.com | 990px |
| msn.com | 970px |
| wikipedia.com | 100% |
| walmart.com | 720px |
| bestbuy.com | 790px |
| apple.com | 985px |
Obwohl es wichtig ist, die neuesten Geräte zu berücksichtigen, glaube ich, dass die optimale Website-Breite immer noch 960 Pixel breit ist. Diese Breite ist für die meisten Geräte geeignet und sorgt dafür, dass Ihre Website sowohl auf 1024px- als auch auf 1366px-Breitbildschirmen gut passt.
960 ist teilbar durch 2, 3, 4, 5, 6, 8, 10, 12 und 15. Es ist ein Traum, eine perfekte Grid-Site zu erstellen. Dies führt zu der beliebten Ressource namens „960 Grid System“.
Lesbarkeit
Ein Blog, eine Nachrichtenseite oder jede andere Art von inhaltsgesteuerter Seite berücksichtigt dann die Lesbarkeit.
„Die ideale Zeilenlänge für das Textlayout orientiert sich an der Physiologie des menschlichen Auges. Bei normalem Leseabstand beträgt der Gesichtsfeldbogen nur wenige Zentimeter – etwa die Breite einer gut gestalteten Textspalte oder etwa 12 Wörter pro Zeile.“
Sowohl die Lesegeschwindigkeit als auch die Merkfähigkeit sinken mit zunehmender Spaltenbreite. Es ist viel schwieriger, eine breite Seite zu lesen, als eine schmale Textspalte zu lesen. Berücksichtigen Sie für den Webdesigner Schriftgröße und Auflösung. In den meisten Fällen liegt eine sichere Breite für eine Lesespalte zwischen 400 und 700 Pixel, und die Wahl der richtigen Schriftgröße wird Ihren Lesern sehr helfen.
Die eigentliche Frage ist nicht "welche Dokumentgröße?" sondern "welche Dokumentenbreite?".
Ich würde empfehlen, das Design mit 1440 Pixel x 900 Pixel auszuführen. Auf diese Weise befinden Sie sich im Durchschnitt der Browsergrößen (setzen Sie einige Anleitungen auf 1000 Pixel für kleinere Browser und das iPad).
Stoppen Sie Ihr Design nicht bei 1000 px, stoppen Sie Ihren Inhalt bei 1000 px.
Normalerweise beginne ich mit dieser Größe, dann steigere ich meine Größe entsprechend meinem Inhalt. Denken Sie daran, dass Sie nicht für alle Benutzer die gleiche Größe haben können, da sie alle eine unterschiedliche Browsergröße / unterschiedliche Bildschirmauflösung haben.
Sie sollten ein Raster in Ihrem Design verwenden, es ist nicht erforderlich, aber es würde Ihnen in mehreren Dingen helfen:
(Sie können ein Photoshop-Plugin installieren, um ein Raster zu generieren, oder eine .psd-Datei mit allen Anleitungen herunterladen.)
Eine Zusammenfassung der Browsergrößen von 2014 finden Sie hier (und achten Sie darauf, andere hohe zu überprüfen ).
Üblicherweise surfen Benutzer jetzt mit einem Browser, der auf 1024 x 768 oder höher eingestellt ist. Es ist im Allgemeinen akzeptabel, 1000 Pixel als maximale Breite zu verwenden
Ich verwende meistens Mockups mit einer Breite von 1100 Pixeln, selbst wenn ich für eine Auflösung von 1024 Pixeln entwerfe. Ich habe Hilfslinien innerhalb des Modells für 1000 Pixel eingerichtet. Da der gesamte Inhalt bei mir ankommt, kann die Höhe variieren.
sobald du http://960.gs/ auscheckst
Scott
4dgaurav
Hübscher Nerd