Abmessungen für die Gestaltung einer Website

Ich habe drei zusammenhängende Fragen:

  1. Wer hat in einer Digitalagentur das Sagen, wenn es um die Dimensionierung von Responsive Webdesign geht? Ist es der visuelle Designer, Entwickler, Product Owner oder alle zusammen? Welche Erfahrungen haben Sie damit gemacht?

  2. Welche Abmessungen verwenden Sie oder andere Leute heutzutage für responsives Webdesign (in Bezug auf die tatsächliche Zeichenflächenbreite , mit der Sie in Sketch beginnen)?

  3. Angenommen, Sie definieren die Haltepunkte, während Sie an Sketch arbeiten, und Sie verwenden ein 8-Punkt-Framework. Woher wissen Sie, welche Zeichenflächengrößen Sie für bestimmte Haltepunkte auswählen sollten?

Jede direkte und klare Antwort wäre sehr willkommen.

Hallo und willkommen bei GDSE! Ich freue mich auf eine Antwort hierfür. Ich bin KEIN professioneller Webdesigner, ich habe nur ein paar einfache Seiten erstellt. Es scheint obsolet, in Pixeldimensionen zu denken. Ich sehe die Webseite als "Maschine" mit einer Reihe von Designregeln (CSS), die dafür sorgen, dass der Inhalt auf jedem Bildschirm ansprechend dargestellt wird . Ein Mock-up ist nur eine Vorschau, wie die Seite auf einem bestimmten Bildschirm aussehen würde. Wenn der Benutzer die Größe des Fensters ändert, würde sich das Design entsprechend ändern. Nicht basierend auf absoluten Pixelmaßen, sondern basierend auf einer Reihe von Regeln relativ zum gegebenen Raum.

Antworten (3)

Wer hat das Sagen?

Der Markt. Die aktuelle Technologie.

In einem bestimmten Umfeld, schätze ich, der Projektmanager. Er/sie würde entscheiden, ob es für ein Projekt mit geringer Bandbreite, nur für Mobilgeräte oder für ein bestimmtes Projekt mit superhoher Auflösung benötigt wird.

Unter Ihren Entscheidungen darf der Product Owner den letzten Schuss geben (einschließlich aller Schuldzuweisungen, falls falsch). Der visuelle Designer und Entwickler kann sich mit seiner Forschung (nicht mit Meinungen) einbringen.

Wer auch immer das Sagen hat, stellen Sie sicher, dass er über die neuesten Hardwareversionen auf dem Laufenden ist. Das ist praktisch ein Fulltime-Job, um zwischen Apple, Samsung, Google und Microsoft auf dem Laufenden zu bleiben.

Es gibt keine Browser-Polizei, aber es gibt mehrere Dienste, die die neuesten, allgemein akzeptablen Dimensionen bieten. Auf creativebloq.com gibt es eine Liste von Empfehlungen mit dem Titel „Great Tools for Testing Your Responsive Web Designs“.

Breakpoints variieren typischerweise nicht in großem Maße. Geräte sind nicht plötzlich breiter oder schmaler geworden. Daher müssen Standardhaltepunkte nicht wirklich von jemandem "gesetzt" werden. Sie sollten verstanden werden.

Wenn Sie sich einige reaktionsschnelle Pakete ansehen – Bootstrap, Zurb Foundation usw. – verwenden sie alle die gleichen relativen Haltepunkte. Wenn überhaupt, würde ich als Designer fragen, ob spezielle Breakpoints benötigt werden (und warum), ansonsten verwende ich das, was ich normalerweise für x-large/large, medium und small verwende.

Was die Zeichenflächenbreite betrifft ... nicht sicher, was ich verstehe. Denken Sie am besten zuerst an Mobilgeräte . Das bedeutet, dass Sie für die kleinere Größe entwerfen und dann die Reaktionsfähigkeit des Designs für die größeren Größen anpassen.

Ich denke, mit "Zeichenflächen" meinen Sie, dass Sie eine ganze Seite / Website in einer Zeichensoftware gestalten und dann in HTML verschieben möchten. Ich habe einfach nicht so in 10 Jahren gearbeitet. Es ist mehr Ärger als es wert ist.

  • Wireframe (in der Zeichen-App aufgrund der Geschwindigkeit und Einfachheit)
  • Loose Comp basierend auf Wireframe
    • Dies geschieht in HTML, um allgemeine responsive Änderungen anzuzeigen. Es handelt sich lediglich um Divs/Boxen und Blöcke mit Dummy-Text, um die allgemeinen Bereiche, Größen und ihre Reaktion auf Änderungen zu zeigen
  • Attrappe, Lehrmodell, Simulation
    • Auch das ist HTML. Eine Zeichenanwendung kann verwendet werden, um die hier benötigten Elemente wie Fotos, Schaltflächen usw. zu erstellen. In einer Zeichenanwendung ist jedoch nie ein vollständiges Layout vorhanden.

Ich behaupte keineswegs , dass dies die einzige Möglichkeit ist, zu arbeiten. Es gibt einige Kunden, die immer noch ganzseitige Mockups wollen und dann jemand anderen das HTML/CSS für sie erstellen lassen. Und es gibt einige Designer, die einfach keine HTML/CSS-Mockups erstellen können. Da schadet es nicht.

Wenn ich Seitenmodelle in einer Zeichen-App erstellen müsste, würde ich 4 gängige Haltepunktbreiten verwenden ....

  • 320px, 425px, 768px, 960px (oder größer)
Abmessungen für die Gestaltung einer Website
AntwortenHierDatenschutz-Bestimmungen1y, 0v