Für welche Breite sollte ich beim Erstellen einer Website entwerfen? [Duplikat]

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?

Antworten (3)

Bildschirmgröße

Höhere Bildschirmauflösungen lassen schließlich alles kleiner wirken.Geben Sie hier die Bildbeschreibung ein Geben Sie hier die Bildbeschreibung ein

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.

Kein Widerspruch zu den Statistiken. Seit 2013 verwendet jedoch die Mehrheit der Webnutzer mobile Geräte, um auf Webinhalte zuzugreifen. Daher ist "99 % der Benutzer verwenden eine Breite von 1024" etwas ungenau, da der Haftungsausschluss fehlt, dass diese Benutzer Desktop- Benutzer sind, nicht alle Benutzer.
Ja! Ich unterstütze Sie darin, dass eine Breite von 960 Pixeln für eine nicht für Mobilgeräte optimierte Website in Ordnung ist. Es ist sehr wichtig, Ihre Website für mobile Geräte zu optimieren, und in diesem Fall sollte die Breite offensichtlich 100% der Breite des Geräts betragen oder eine mobile Version der Website erstellen! oder machen Sie Ihre Website reaktionsschnell mit einer maximalen Breite von 960 Pixeln. Ich dachte, als OP fragte: "Für welche Breite sollte ich beim Erstellen einer Website entwerfen?" er meinte die Geräte mit höherer Bildschirmbreite.
Quelle und Datum der Statistik?

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:

  • Haben die gleiche Spaltenbreite zwischen jedem Abschnitt, gleiche Lücke
  • Es wäre viel einfacher, es in CSS zu konvertieren, wenn Sie ein Grid-System verwenden möchten

(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 ).

Danke Stephane, ich habe das 960-Grid-Plugin installiert ... es hat wirklich geholfen. Ich versuche, UI-Design zu lernen. Danke für die Information
Wenn Sie mit der gesamten Benutzeroberfläche arbeiten, vergessen Sie nicht, "Zustände" zu entwerfen, z. B. alle Schaltflächenzustände (deaktiviert, Schweben, normal, aktiv ...). Verwenden Sie keine Ebenenüberblendung und versuchen Sie, wenn möglich, Vektorformen anstelle von Ebenen zu verwenden. Auf diese Weise wäre Ihr Design skalierbar.

Ü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