Soll ich PSDs für Desktop, Tablet und Mobile separat im Responsive Design gestalten?

Ich versuche, eine ansprechende Website in Photoshop zu entwerfen. Aber die Frage ist, sollte ich für all diese Geräte unterschiedliche PSDs entwerfen? (Desktop, Tablet, Handy)

Wenn ja, welche Seitengröße sollte ich in Photoshop für all diese Geräte wählen?

Antworten (6)

Es ist eine gute Idee, ein Designbeispiel zu erstellen, wie die Seite auf den Zielgeräten aussehen soll. Da es jedoch zu viele Bildschirmgrößen gibt, ist es nicht praktikabel, für alle ein separates Design zu erstellen.

Als Webentwickler würde ich vorschlagen, die responsive Version der Designs nur für die Homepage und für die folgenden Bildschirmgrößen zu erstellen:

Desktop : (ca. 992px, oder nach Ihrem Design)
Tablets : (768px)
Mobile : (480px)

Beachten Sie, dass die oben empfohlenen Bildschirmgrößen mit Twitter Bootstrap 3, einem beliebten responsiven Frontend-Entwicklungsframework, vergleichbar sind.

Außerdem würde ich meiner Meinung nach versuchen, zuerst mobil zu denken. Dies kann manchmal einfacher sein, als zu versuchen, alle Desktop-Elemente auf eine kleinere Größe zu reduzieren.
Können Sie erklären, warum Sie vorschlagen, 480 Pixel statt 360 Pixel für das mobile Design zu verwenden? Wenn ich ein Gerät auf seinen Darstellungsbereich teste, ist das Ergebnis immer ~360px.
@ZZZ Wenn es um das Design geht, besteht ein gängiger Ansatz darin, für 480 Pixel zu entwerfen und das Design dann bis auf 320 Pixel zu verkleinern. Dies geschieht aufgrund der unterschiedlichen Bildschirmgrößen der Handheld-Geräte, z. B. iPhone 6: 375 Pixel, iPhone 6 Plus: 414 Pixel und iPhone 5 – 320 Pixel. Daher liegt der Bereich für mobile Bildschirmgrößen zwischen 480px und 320px, was sowohl der Designer als auch der Entwickler im Auge behalten müssen

Entgegen der weit verbreiteten Meinung, „Mobile First“ zu entwerfen, würde ich empfehlen, nur Desktops mit einem 12-Spalten-Raster zu entwerfen. Lassen Sie dann die Entwickler alle mobilen Zustände mit einem standardmäßigen responsiven CSS-Framework wie Bootstrap erstellen. Das hat eine Reihe positiver Aspekte, wie wir in unserem eigenen Webentwicklungsprozess gelernt haben:

  1. Sie können Kunden nicht nur im mobilen Layout verkaufen, sie werden auf jeden Fall Tablet und Desktop sehen wollen. Sobald Sie den Weg von 3+ Layouts für jede Seite (Desktop, Tablet, Telefon) gegangen sind, werden die kreativen Stunden durch die Decke gehen.

Bereitet man hingegen ein responsives Desktop-Design vor, hat man die kreativen Stunden gut im Griff.

  1. Es gibt keine Garantie dafür, dass sorgfältig vorbereitete Mobil- und Tablet-Layouts das Layout und die Funktionalität des Standard-CSS-Frameworks genau widerspiegeln - daher entwerfen Sie möglicherweise Seiten, die möglicherweise sehr schwer zu programmieren sind, was zu einem erhöhten Entwicklungsbudget, einer überarbeiteten SOW, einem Aufkleberschock und anderen Nettigkeiten führt Klient.

Wenn Sie die Neupositionierung von Mobilgeräten und Tablets dem Ermessen der Entwickler überlassen und Best Practices in der Desktop-Designphase befolgen, ist Ihnen garantiert, dass die Entwicklung den effizientesten Weg zur Verwendung des Frameworks und seiner Module einschlägt. Zeitersparnis, Kostenersparnis, alle glücklich. Es wird sicherlich eine interne Überprüfung zwischen Designern und Entwicklern und geringfügige Anpassungen der Reaktionszustände geben, bevor die Website dem Kunden gezeigt wird, aber es ist nichts im Vergleich zu der Mühe, alle Reaktionszustände für alle Vorlagen zu entwerfen und dann zu versuchen, sie mit Pixel zu codieren perfekte Wiedergabetreue für Cross-Browser- und Cross-Plattform-Performance.

http://184.72.251.109/oss/dev/WP_core/master/grid-system/ zeigt, wie sich das reaktionsschnelle Rastersystem in verschiedenen Auflösungen verhält, und solange das Desktop-Layout dem 12-Spalten-Raster folgt, sollten Sie dies bei Tablets und Telefonen erwarten Grundrisse. Ganz oben auf der Seite befindet sich ein Link zur PSD-Datei zum Herunterladen der Desktop-Rastervorlage.

Hoffe das hilft.

Während ich Punkt 1 zustimme, ist das genau der Grund, zuerst mobil zu starten. Mobile First ermöglicht es Ihnen, den Inhalt und die Funktionalität auf das Wesentliche zu reduzieren. Zeigen Sie auf jeden Fall eine Desktop-Version davon, aber normalerweise ist es eine gute Idee, mit dem Handy zu beginnen. # 2 ist jedoch ein ausgezeichneter Punkt.

Ich stimme Max Tokman oben zu und möchte hinzufügen, dass ich als Programmierer und Designer für mein Unternehmen in die Falle getappt bin, ein mobiles Layout zu erstellen, das sehr schwer im Code zu replizieren war.

Allerdings müssen Sie auch berücksichtigen, wer die Zielgruppe sein wird. Wenn dies eine Website ist, die hauptsächlich auf einem Telefon verwendet wird, sollte diesem Design mehr Aufmerksamkeit geschenkt werden als anderen. Die meisten Websites werden trotz der Hoffnungen der Eigentümer, deren Konzepte Sie zum Leben erwecken möchten, nicht auf allen Plattformen gleichermaßen genutzt. Ausnahmen von dieser Regel gibt es natürlich immer.

Ich neige dazu, zuerst die Desktop-Version zu erstellen und dann zu entscheiden, welche Elemente für das mobile Design wichtig sind. Ein riesiges Heldenbild kann beispielsweise bei der Telefonversion weggelassen werden.

Es gibt eine neue (vor ein paar Tagen) Möglichkeit, dies zu tun. Ich habe gerade Photoshop aktualisiert und Sie werden sich vielleicht freuen zu erfahren, dass Sie jetzt mehrere Zeichenflächen in einem Photoshop-Dokument erstellen können. Auf diese Weise können Sie alle 3 Ihrer Layouts in einer Datei haben. Hier ist das Video, wie diese neue Funktion funktioniert: https://helpx.adobe.com/photoshop/how-to/design-with-artboards.html

Dies spricht nicht wirklich das Problem der Anpassung des responsiven Frameworks an. Beim Responsive Webdesign geht es nicht um unterschiedliche Designs für unterschiedliche Bildschirme, sondern um ein Design, das auf allen Bildschirmen korrekt umfließt.
Ich bin anderer Meinung, da Elemente die Priorität ändern und sich mit der Bildschirmgröße verschieben, Kunden möchten sehen, wie Designs an verschiedenen Haltepunkten aussehen. Auch sind nicht alle Webseiten prozentual flüssig aufgebaut, sondern „reaktiv“ und rasten an bestimmten Haltepunkten ein.
Ich stimme zu, dass Elemente die Priorität ändern und sich verschieben. Das ist eigentlich mein Punkt. Die Seite muss so aufgebaut sein, nicht einfach in Photoshop angelegt. Das Vertauschen der Reihenfolge von zwei Elementen in Photoshop ist trivial, aber das kann zu viel kompliziertem Codierungsaufwand führen und hätte behoben werden können, indem das Framework während des Designprozesses berücksichtigt wurde, anstatt das gesamte Design vorher zu erledigen. Damit RWD funktioniert, muss es ein kollaborativer und iterativer Prozess mit der Entwicklung sein.

Wenn Sie nach einer einfacheren Möglichkeit suchen, responsive Designs zu verwalten, und Sie ein Adobe CC-Abonnement haben, bietet Adobe ein Produkt namens Edge Reflow an , das das Entwerfen für verschiedene Auflösungen viel einfacher macht. Hier ist ein Video von Adobe dazu. Aber im Wesentlichen können Sie Ihre PSDs importieren und so manipulieren, dass sie sich bei verschiedenen Auflösungen ändern.

Edge Reflow kann Ihre Arbeit als funktionierende Website exportieren. Es ist eine gute Demo und Entwickler können hineingehen, sehen, wie alles funktioniert, und direkt daraus ziehen, was sie brauchen.

Wenn Sie dies verwenden, müssen Sie sich keine Gedanken über die Verwaltung mehrerer PSDs machen oder auf welche Größen Sie in Photoshop genau eingestellt sind.

Es ist schon eine Weile her, aber ich glaube nicht, dass es basierend auf einem bestimmten CSS-Framework neu fließt, oder?
Ich bin sicher, es geht nur um Medienanfragen. Oder habe ich die Frage nicht verstanden?
Lassen Sie mich umformulieren, verwendet es tatsächliches CSS oder ist es ein Tool zum einfachen Austauschen von PSD-Dateien? Wenn es tatsächlich CSS erstellt, könnte man das (zumindest theoretisch) als Rahmen verwenden, nehme ich an. Wenn dies nicht der Fall ist, haben Sie immer noch das Problem, dass das Design möglicherweise nicht mit dem bestimmten RWD-Framework übereinstimmt, das verwendet wird.
Ja, es macht echtes HTML und CSS und tauscht nicht nur PSD-Dateien aus.

Entwerfen Sie nur das mobile Layout. Arbeiten Sie dann mit den Entwicklern zusammen, um die Dinge nach Bedarf für andere Ansichten neu zu formulieren.

Der Grund für Mobile First ist, dass es Sie dazu zwingt, Inhalte und Funktionen auf das Notwendigste zu priorisieren. Es gibt Ihnen ein optimiertes Design, das meistens auch perfekt für den Desktop ist, wenn auch vielleicht anders angelegt.

Der Grund, mit Entwicklern zusammenzuarbeiten, um die verschiedenen Ansichten im Code zu entwerfen, liegt darin, dass der Code vorschreibt, was wohin und wie verschoben werden kann. Wenn ich mehrere PSD-Dateien für jedes Ansichtsfenster erhalte, erhalte ich meistens 3 Designs, die tatsächlich 3 verschiedene Codebasen erfordern – und nicht eine Codebasis, die den Reflow aufnehmen kann. Manchmal kann dies mit reichlich JavaScript und DOM-Neuanordnung „behoben“ werden, aber das führt, wie Sie sich vorstellen können, zu anderen großen Problemen.

Soll ich PSDs für Desktop, Tablet und Mobile separat im Responsive Design gestalten?
AntwortenHierDatenschutz-Bestimmungen1y, 0v