it-swarm.com.de

Vor- und Nachteile von PSD-Modellen gegenüber HTML-Modellen

Ich habe kürzlich einige Artikel ( dieser und dieser ) gelesen, die mir die Augen für HTML-Modelle öffnen, im Gegensatz zu den üblichen PSD-Modellen.

In dem Artikel zitieren sie bestimmte Profis:

  • Änderungen sind viel schneller (einschließlich Änderungen an Farben und teilweise an Schriftarten).
  • Wenn Sie die Seite als HTML auslegen, zeigen Sie dem Kunden etwas, das dem Endprodukt viel näher kommt.
  • Sie können die Auswirkungen eines Flüssigkeitslayouts sehen, indem Sie die Größe des Fensters ändern.

Nachteile:

  • Nicht alle visuellen Designer können ein Modell in HTML erstellen. Es muss eine Zwei-Personen-Aufgabe sein. Eine HTML-Person und eine Photoshop-Person.

Was sehen Sie als Vor-/Nachteile für beide Ansätze?

24
milesmeow

Wenn Sie eine Website oder Anwendung erstellen, sind HTML-Modelle weit überlegen, da Sie das Modell in einem Format entwerfen, das dem Endprodukt so nahe wie möglich kommt. Auf diese Weise können Sie Erwartungen viel einfacher festlegen, Sie beschränken sich auf das, was im Endprodukt möglich ist, und es bietet eine viel größere Flexibilität.

Diese Konvention wird allmählich als "Design im Browser" bekannt. Das Entwerfen im Browser umgeht die Wasserfallmethode von Natur aus. Photoshop-Modelle stellen eine Barriere zwischen dem visuellen Designer und dem Interaktions-/UX-Designer dar: Die Person, die in Photoshop arbeitet, kann weit entfernt sein und vollständig an die visuelle Wiedergabetreue denken, ohne das Endprodukt und die damit verbundenen Einschränkungen des Browsers zu berücksichtigen. Sobald das Photoshop-Modell fertig ist, wird es dem UX-Team "übergeben", um mit der nächsten Stufe fortzufahren. Dies fördert keinen iterativen, Feedback-orientierten Prozess.

Ich habe vor ein paar Monaten einen Blog-Beitrag über diese Philosophie geschrieben, die wir beim Aufbau unseres Prototyping-Tools verwendet haben. Hier sind einige Artikel, auf die ich dort verwiesen habe und die nützlich sein können (einschließlich des Artikels von Megan Fisher, auf den Sie verlinkt haben):

Andere Designer und Entwickler stimmen ihm zu:

  • 37signals ’ Warum wir Photoshop überspringen erklärt ihren Vorgang: Photoshop-Modelle sind nicht interaktiv; Sie geben Ihnen kein Gefühl für den Fluss der App. Sie ermutigen Sie, sich zu früh auf Details zu konzentrieren.
  • Der Artikel von Meagan Fisher auf 24ways.org Machen Sie Ihr Mockup in Markup spricht mehr über Clarkes Prinzipien und erklärt, wie Designer mit der HTML-Struktur beginnen können, um schnell über mehrere Seitenlayouts zu iterieren.
  • Diese 12 Tipps zum Entwerfen im Browser bei Design Shack bieten ebenfalls einige gute Einblicke.
18
Rahul

Es ist ein Treueproblem.

Der Haken ist, dass jedes Dokument eine höhere Wiedergabetreue aufweisen kann als das andere, je nachdem, worauf Sie sich konzentrieren.

Ein HTML-Prototyp ist wirklich die einzige Möglichkeit, eine Interaktion von selbst mäßiger Komplexität wirklich zu verspotten. Es gibt einfach keine Möglichkeit, das Interaktionsdesign in einer PSD-Datei vollständig zu dokumentieren.

Wenn Sie sich dagegen in einer Umgebung befinden, in der das visuelle Design ständig optimiert/verbessert/durchlaufen wird, ist die PSD möglicherweise das bessere Dokument, um die visuellen Designelemente zu verarbeiten.

Letztendlich denke ich nicht, dass es auf PSD vs. HTML ankommt. Sie benötigen beide in unterschiedlichen Mengen, abhängig von den Besonderheiten Ihrer Anforderungen auf Projekt- und Teammitgliedsbasis.

13
DA01

Ein möglicher Nachteil bei der Verwendung von HTML-Modellen besteht darin, dass der Client glauben könnte, Sie hätten die Anwendung fertiggestellt - selbst wenn Sie ihm gesagt haben, was es ist.

Im Ernst, ich kenne Leute - sowohl Kunden als auch Manager -, die beim Betrachten eines Modells mit den Tools, die Sie normalerweise zum Erstellen des eigentlichen Produkts verwenden, glauben, dass Sie den größten Teil der Arbeit erledigt haben, und sind überrascht, wenn Sie sagen, dass weitere 6 erforderlich sind Wochen (oder wie lange auch immer), um die Arbeit tatsächlich zu erledigen.

Wenn die Modelle einen Schritt entfernt werden, kann dies helfen, dieses Missverständnis zu beseitigen.

Ein dynamisches Modell ermöglicht es Ihnen und dem Client jedoch, besser zu verstehen, wie das System funktioniert und wie Sie durch die Anwendung navigieren.

7
ChrisF

Es ist nicht die Aufgabe des visuellen Designers , interaktive Modelle vorzubereiten, sondern die des UI/UX-Designers . Richtig - oft sind sie ein und dasselbe, hauptsächlich aus Budgetgründen, aber ihre Jobs sind sehr unterschiedlich.

Ihre Frage könnte tatsächlich als statische vs. dynamische Modelle umformuliert werden.

Meiner Meinung nach sind dynamische Modelle statischen Modellen fast immer überlegen:

Der Hauptgrund meiner Meinung nach ist, dass sie für genaue Usability-Tests verwendet werden können. Die Vorstellung, dass Sie etwas tun, unterscheidet sich stark von der tatsächlichen Ausführung, der Realisierung der Zeit, der Anzahl der Klicks, der Bewegung usw. echtes Gefühl des Flusses im System.

Nichts ist jedoch ohne Preis - das Erstellen eines dynamischen Modells erfordert normalerweise erheblich mehr Zeit. Darüber hinaus werden beim Kunden höhere Erwartungen geweckt. Wenn Sie eine Taste drücken und etwas im System tun, erwarten Sie, dass alle Tasten die gleiche Leistung erbringen (und einige sind möglicherweise für das Hauptszenario weniger relevant).

Mit einem statischen Modell ist es möglicherweise auch einfacher, Kunden und Entwickler durch die Anwendungsfälle zu führen - Sie zeigen einfach die Bildschirme einzeln im "Richtig" an "Bestellen Sie und stellen Sie sicher, dass alle Anwendungsfälle wie beabsichtigt abgedeckt sind. Bei Verwendung einer dynamischen Version können die Benutzer möglicherweise "zu viel" Freiheit haben, sodass sie wichtige Anwendungsfälle usw. verpassen.

Übrigens - Sie müssen kein Programmierer sein, um HTML-Modelle zu erstellen. Es gibt viele Tools (zum Beispiel Axure, Balsamic, Flair Builder und viele andere), mit denen Nicht-Programmierer solche Modelle erstellen können.

5
Dan Barak

Mit der zunehmenden Beliebtheit von Responsive Design macht es sogar mehr Sinn, ein dynamisches Modell (vermutlich HTML) zu verwenden. Beim Entwerfen des anfänglichen groben Layouts ändere ich ständig die Größe des Browsers, um zu sehen, wie das Layout in vielen Breiten funktioniert.

Der Versuch, ein responsives Design mit einem statischen Bild anzugeben, ist nicht möglich, und es mit mehreren statischen Bildern auszudrücken, ist zeitaufwändig und übermäßig komplex.

2
obelia

Anekdotische Antwort

Ich habe kürzlich an einer Site gearbeitet, auf der die Hauptvorlage in Photoshop entworfen wurde (die ich als "PS" bezeichnen werde), aber die einzelnen Abschnitte der Site mussten noch entworfen werden. Ich habe an mehreren Abschnitten mit einigen nicht standardmäßigen UI-Anforderungen gearbeitet und musste mich entscheiden, ob ich sie in Photoshop verspotten oder nur mit HTML/CSS ausführen wollte. Ich entschied mich für Letzteres und war SEHR dankbar dafür.

Eigentlich habe ich den Seiteninhalt und die Navigationselemente in HTML markiert. Sobald ich das hatte, fing ich gerade an, mit CSS zu spielen und zu sehen, was funktionierte. Ich konnte sehr schnell mehrere völlig unterschiedliche Layouts erstellen und diese sofort in einem Browser testen. Es gab mehrere Optionen, von denen ich wusste, dass sie fast nicht sofort funktionieren würden und die ich schnell aufgeben konnte (wo ich normalerweise das Design in PS fertiggestellt hätte). Ich konnte auch interaktive Elemente (Einblenden/Ausblenden/usw.) hinzufügen, die in Photoshop nicht möglich gewesen wären.

Es gibt einige Dinge, die einfach gehen Weg schneller in HTML vs PS, zum Beispiel Tabellen. Das visuelle Entwerfen von Tabellen in PS mit variablem Textinhalt in den Zellen und Überschriften erfordert einige echte Anstrengungen. Es ist super schnell in HTML und Sie sehen tatsächlich, wie es wirklich aussehen wird.

Das bringt Sie natürlich nur so weit, weil Sie mit CSS nicht alles machen können. Ich kehrte gelegentlich zu Photoshop zurück und erstellte das eine oder andere Bild für einen bestimmten Teil, aber zum größten Teil war ich überrascht zu sehen, wie viel ich nur mit CSS tun konnte.

Meine Einstellung

Ich werde dies immer noch von Fall zu Fall prüfen. Aber ich werde mich in Zukunft definitiv zu HTML-Modellen neigen.

2
jessegavin

Wenn ich recht habe, glaube ich, dass VB ursprünglich geschrieben wurde, um schnell einige Modelle zu erstellen ... In diesem Sinne würde ich sagen, dass die "richtige" Antwort wahrscheinlich ist den Weg der HTML-Modelle gehen.

Ich bin jedoch dabei, während der Eingabe Modelle für ein neues Produkt zu erstellen, und ehrlich gesagt glaube ich nicht, dass sich der Aufwand für die Erstellung von HTML-Modellen, die so gut aussehen wie im PSD-Format, lohnt. Wenn ein Textentwickler ein komplexes Layout oder ein Bild usw. genau dort anzeigt, wo Sie es möchten, dauert es bei einem komplexen Layout-Design länger als bei einem Photoshop-Künstler mit ähnlichen Fähigkeiten.

Wenn Sie mehr als nur Text und einfache Designs erstellen möchten, werden Sie wahrscheinlich Photoshop (oder ähnliche Grafikpakete) verwenden, um diese Designarbeiten auszuführen. Warum sollten Sie sich die Mühe machen, die Angelegenheit zu komplizieren?

Zugegeben, wenn es eine echte Rechtfertigung für die Verwendung interaktiver Modelle gibt (z. B. eine große Benutzergruppe, um zu demonstrieren, wie eine bestimmte interaktive Anzeige Ihrer Meinung nach funktioniert), lohnt sich der zusätzliche Aufwand.

Aber wenn Sie einem Kunden nur zeigen, wie Ihrer Meinung nach mehrere Fenster einer Anwendung aussehen sollten, gibt es meiner Meinung nach keine Rechtfertigung für den zusätzlichen Aufwand?

1
Sk93