Ist es in Ordnung, das Layout einer Website mit einem Photoshop-Modell zu beginnen?

Question

Dies ist ein Best-Practice-Thema.

Ich sah es als eine bevorzugte Methode für einige Web-Entwickler. Anstatt das CSS-Layout von Grund auf neu zu erstellen, starten sie zunächst ein Photoshop-Mockup und dekodieren es dann in CSS.

Was halten Sie von diesem Ansatz?

Am besten zu allen,

Answer 1

Es ist schnell. Deshalb benutze ich immer diese Methode. Sie möchten nicht die Zeit damit verbringen, browserübergreifendes CSS zu erstellen, bis Sie tatsächlich auf einem Layout festgelegt sind.

Answer 2

Agile methodology würde vorschlagen, etwas in Absprache mit dem Kunden leicht geändert. Dave Thomas in Agile Web Development with Rails schlägt vor, auf Papier kritzeln. Aber alles muss besser sein, als direkt auf handgefertigte CSS zu verzichten, es sei denn, Sie wissen wirklich, was Sie wollen.

ich darüber nachdachte sagen „Geschreibsel es nicht für eine formelle Präsentation schneiden könnte“, aber die großartige SO Menge, um es in den Kommentaren schlug mich ...

Answer 3

Wenn Sie produktiv, dass die Art und Weise sind, warum nicht? Nicht jeder schafft es, sich ihre Website perfekt vorzustellen, da sie in einer Reihe von Winkeln tippen.

Ernsthafter ausgedrückt: Es ist Ihre Aufgabe, also liegt es in Ihrer Verantwortung, dies so zu tun, dass Sie es effektiv tun können.

Answer 4

Mockups sind großartig, aber ich weiß nicht, ob Photoshop die erste Sache ist, dass Sie für den Zweck, versuchen wollen würden - ganz am Anfang, wenn Sie nur ein logisches Layout für die bekommen versuchen, verschiedene Seiten der Website (vor der Verfeinerung in Bezug auf Aussehen & c), bietet ein Whiteboard mit trocken abwischbaren Markern und Post-It-Notizen für sehr schnelle, wiederholte Mock-up-Umlagerungen für die frühen Brainstorming. Sobald es eine vernünftige Übereinstimmung über eine (oder sehr wenige) mögliche Anordnung von Informationen gibt, treten dann visuell genauere Werkzeuge ins Spiel.

BTW, vergessen Sie nicht, das Whiteboard zu fotografieren, bevor Sie es ändern (irgendein anständiges Handy wird es tun, Sie versuchen nicht für hohe Qualität hier ;-) jedes Mal gibt es Ideen oder Vorschläge, die Sie vielleicht wieder besuchen möchten oder grübler in der Zukunft!

Answer 5

Beim Prototyping ist es wichtig, die richtige Genauigkeit zu wählen. This article from BoxesAndArrows bietet eine nette Einführung in die verschiedenen Optionen und deren Verwendung.

Besonders gefällt mir diese Linie durch Bill Buxton, die der Artikel zitiert: als hohe oder niedrige Treue, nur geeignete Treue

Es gibt keine solche Sache.

In this TechTalk by the Facebook Design Team, sie erwähnen, wie sie mit Photoshop in ihrem Design-Prozess (IIRC irgendwo es auf halbem Weg durch, aber ich kann nicht durch das Video zu weiterleiten scheinen).

Answer 6

Die meisten Webdesign-Grafiker arbeiten auf diese Weise.

Viele Programmierer finden es einfach Zeitverschwendung.

Es hat Vorteile und Nachteile.

Vorteile:

• Viele Grafikern grok Photoshop/Illustrator mehr, als sie tun Dreamweaver.

• Der Kunde bekommt eine Vorschau des Endprodukts, das überall funktioniert: Mac, PC, Firefox, dh, Safari, was auch immer. Das Senden einer HTML-Vorschau in frühen Produktionsphasen mit Entwicklern, die Firefox und Kunden mit MSIE verwenden, führt immer zu Problemen.
  
  Und denken Sie nicht, auf der schlauen Seite zu sein, scribbling MSIE driven html. Es ist schmerzhafter, mit nicht standardmäßigen HTML zu beginnen und auf Standard zu konvertieren, als dies auf die andere Art zu tun.
  Es gibt noch einen Haken: viele Website-Kunden neigen dazu, einen Mac zu haben und Safari verwenden. Web-Committents haben tendenziell einen stärkeren Grafik-Geschmack als der Durchschnitt, so dass die Chance, Mac-Maniacs zu treffen, in diesem Sektor höher ist als in anderen.

• Weitere Design-Alternativen können bereit sein, weniger Zeit auf jeder einzelnen verbringen. Dies könnte ein dramatischer Vorteil sein, wenn man mit düsteren Wolken von Führungskräften konfrontiert, die keine bestimmten Entscheidungsträger auf der Kundenseite haben. Alternative Modelle werden Hand in Hand weitergegeben, bis ein allgemeiner Konsens über das eine oder das andere Design erreicht ist.

Nachteile:

• „Cutting“ der Grafik-Design in HTML wird ein zusätzliche Arbeit und es ist nicht klar, wer für die zusätzliche Zeit dafür bezahlen ist.

• Es bevorzugt grafikzentrischen und starren, Design-Workflows. Kunden stimmen präventiv einer bestimmten Vorschau zu und das bekommen sie vertraglich zugesichert. Jede grafische Änderung bedeutet, dass Geld, Verhalten und Programmierung stattdessen nicht gut definiert sind, oder am schlechtesten schlecht definiert durch das Modell.

• Die Suche nach Pixel perfekte Cross-Browser-Einhaltung des Modells kann Sie verrückt machen. Wenn Sie sich mit dem Kunden auf ein bestimmtes steifes Design einigen würden, könnte dies zu einem schwerwiegenden Problem werden.

• Dirty CSS Tricks Schuh in in Ihrem Design. Mit einem HTML-Modell hätte der Kunde ein Design genehmigt, das auf Code mit weniger Tricks basiert.

Wie auch immer, ich würde nicht photoshop für eine Attrappe vorschlagen, aber inkscape. (oder Illustrator, wenn Sie Adobe durch das Verbrennen von Geldhaufen in magische Kreise um Mitternacht verehren)

Eine kritzelnde Bühne ist auch gut, während der Vertrag mit dem Kunden live zu diskutieren.

Ich bevorzuge Bleistift und Papier zu Filz-Tipps, und ich Webcam-Shot Ideen für die Archivierung und E-Mail-Weiterleitung. Wenn es zum Kritzeln kommt, macht jemand , was sich natürlicher anfühlt.

Es ist keine Option, Beispiele zu erstellen und Screenshots für grafische Referenzen zu verwenden.

Answer 7

Persönlich, und bei jedem Webdev-Unternehmen, an dem ich gearbeitet habe, habe ich immer zuerst in Photoshop geschockt. Der direkte Einstieg in CSS und Markup ist eher ein Bottom-Up-Ansatz und macht für viele Programmierer Sinn, aber in der Webentwicklung muss man bedenken, dass es Ästhetik und eine kreative Richtung gibt, der man folgen muss. Es ist nicht genug, dass Ihr Produkt funktional ist, es braucht den Input eines professionellen Kreativdirektors/Grafik-Designers, um das Produkt angenehm zu betrachten und zu verwenden.

Nach meiner Erfahrung hat das Problem immer mit Inflexibilität der Teammitglieder gerungen. Grafikdesigner, die sich auf Ästhetik konzentrieren und sich weigern, ihre Designintegrität zu gefährden; was manchmal zu unmöglichen oder extrem schwierigen und un-semantischen Layouts führt. Entwickler, die es schlicht und einfach ablehnen, die Integrität ihres Codes zu kompromittieren, wo es eine praktikable Lösung gibt - die vielleicht etwas weniger elegant ist. Der Schlüssel ist, ein kreatives Team zu haben, das mit CSS genau vertraut ist und was möglich ist und nicht möglich ist, und ein Technikerteam, das Wert auf Design und Ästhetik legt.

In meinem freiberuflichen Leben (nachdem ich den Vorteil hatte, in beiden Lagern zu arbeiten) finde ich es viel einfacher, zuerst im Photoshop zu mockieren, weil ich weiß, was ich kann und was nicht. Und Photoshop-Mockups lassen sich viel einfacher auf Client-Feedback ändern als CSS und Markup. Auch wenn Sie Ihrem Kunden ein Modell zeigen können, fühlen sie sich sicherer, weil sie wissen, dass ihr Geld in ein gut geplantes Projekt mit einer klaren Richtung fließt.

Hoffe, das hilft!

Answer 8

Ich bin ein Web-Programmierer, der HTML und CSS ziemlich gut kennt. Ich kann ein grafisches Programm für seine grundlegende Funktionalität verwenden, aber das Entwerfen einer kompletten grafischen Website ist nicht mein Ding.

Ich ließ einen Grafikdesigner sein oder ihr Grafikprogramm verwenden, um ein gut aussehendes Layout zu erstellen, und dann die Website von Hand in HTML und CSS zu codieren.

Es funktioniert für mich, und gibt meinen Kunden ein Design, das sie mögen (weil ein grafischer Entwerfer immer ein nett aussehenderes Design als die meisten Webprogrammierer machen wird).