Wie erstellen Sie ein Mockup/Bild für das Design einer Kunden-Website?

Sie haben zwei Hauptoptionen als Workflow (obwohl dies, wie DA01 betonte, nur einige von vielen möglichen sind):

• Erstellen Sie die Mockups in Photoshop oder einer ähnlichen Software und erstellen Sie sie dann manuell in HTML/CSS neu;

• Erstellen Sie das Design direkt in HTML/CSS.

Bei Option 1 würden Sie im Wesentlichen die Photoshop-Datei als Referenz verwenden, hauptsächlich um Entfernungen und Schriftgrößen zu berechnen. Sie können Assets speichern, um sie später zu verwenden (wie Sie bereits erwähnt haben, sind Bilder das beste Beispiel), aber es gäbe keine Automatisierung. Bei Option 2 würden Sie Ihre Webseite direkt codieren, denn es gibt nichts Besseres, um zu sehen, wie eine Website funktioniert, als die tatsächlich erforderliche Technologie zu verwenden.

Beide Ansätze würden davon profitieren, zuvor Wireframes erstellt zu haben (wie auch in den Kommentaren erwähnt, Stift und Papier reichen normalerweise aus!).

Für alle Grafikdesigner, die auch Webdesign machen.

Webdesign ist eine spezialisierte Branche. Es ist kein "zusätzliches". Das gleiche wie Druckdesign für Flachbettdruckmaschinen, Logodesign, Motion Graphics usw. Das bedeutet im Grunde, dass Sie ... spezialisiert sein müssen.

Wie erstellen Sie Client-Design-Mockups zur Überprüfung?

Meine 2 Cent von einer vorherigen Frage: Wie präsentieren Sie Wireframes und Designs für lange One-Page-Websites?

Können HTML-/CSS-Eigenschaften aus einem in Photoshop oder Illustrator erstellten Website-Seitenmodell extrahiert werden?

Ja, einige Eigenschaften können aus Photoshop extrahiert werden ... die schlechten. Lassen Sie mich erklären.

Fast jedes Programm (ich frage mich warum) versucht, die direkteste Methode zu verwenden, zum Beispiel erzeugt die Verwendung der alten Slices einen obskuren Code, der Tabellen verwendet, was eine interessante Option für Newsletter ist, aber nicht für Webdesign.

Oder es werden „absolute Position“-Elemente produziert, was bei modernen Workflows für Responsive Design nicht zutrifft.

Auf einer WordPress-Vorlage werden die Dinge komplizierter. Der Code ist fast nutzlos, da eine Vorlage in den PHP-Dateien selbst codiert werden muss.

Werden sie in Illustrator/Photoshop erstellt und die Bilder dann zur Verwendung mit der neuen Website extrahiert?

Nur einige Elemente, wie Logos, die richtige Größe zum Zuschneiden von Fotos.

Aber ein Webcoder wird versuchen, die Ressourcen zu optimieren. Wenn Sie eine gelbe Ebene als Hintergrund verwenden, wird sie als gelbe Bitmap exportiert, was völlig irrelevant ist, wenn Sie dafür eine CSS-Eigenschaft haben.

Für alle, die heute auf der Suche nach Optionen darüber stolpern, sind AdobeXD oder Sketch Photoshop-Modellen weit überlegen, da sie clientseitig und interaktiv gemacht werden können.

XD kann über die XD-App auf ein Telefon portiert werden, aber Schriftarten müssen auf dem Telefon installiert werden, um korrekt angezeigt zu werden.

Adobe Comp ist eine mobile App, mit der Sie Mockups auf einem Telefon (keine PC-Version) erstellen und die Bildschirme als Bilder exportieren können. Diese können in die Marvel-App eingefügt werden, wo Sie schnell Links zwischen den Bildschirmen hinzufügen können, um sie für mobile Demos interaktiv zu machen.

Sketch ist gut für Webdesign und kann CSS-Stile exportieren, obwohl Photoshop meiner Meinung nach das am häufigsten verwendete Programm für Webdesigns ist, ist es nicht das beste, es ermutigt Designer, Dinge zu entwerfen, die nicht möglich sind, oder erfordert hackiges CSS, um den Effekt zu replizieren.

Die Verwendung von Skizzen oder Illustratoren schränkt Designer ein, um Designs zu erstellen, die Webtechnologien tatsächlich unterstützen.

Für echte Mockups/Prototypen versuchen Sie es mit invisionapp. Sie können eine Website/App mit Wireframes versehen und Klickereignisse dort anhängen, wo sich Ihre Schaltflächen befinden würden, und sie auf die Prototypseite bringen, damit Sie Ihrem Kunden die UX/Benutzerreise der App zeigen können

Ich schließe mich den beiden vorherigen Antworten an, Sie möchten auf jeden Fall einen nahtlosen Übergang zwischen Design und Entwicklung haben. Eine Option besteht darin, einer Standard-PSD-Vorlage mit 12 Rastern zu folgen, um das Layout zu erstellen, und es dann mit einem Coding-Compliance-Tool wie https://www.oss-usa.com/web-preflight?promo=web-preflight zu bestätigen . Eine andere Möglichkeit besteht darin, so etwas wie eine WordPress-Responsive-Vorlage zu nehmen und sie als Layoutraster in Photoshop zu verwenden.

Sie können Seiten auch von Grund auf neu entwerfen / codieren, indem Sie speziell darauf ausgerichtete Tools verwenden, aber das bedeutet, dass Sie vor Beginn des Projekts keine Kundenfreigabe für fest definierte Masterlayouts erhalten, und das kann auf der ganzen Linie chaotisch werden, wenn Layout und Funktionalität werden während der "Konstruktion" kontinuierlich angepasst.

Adobe arbeitet genau zu diesem Zweck an einer neuen Software. Project Comet steht kurz vor der ersten Beta-Version (basierend auf der erhöhten Menge an Werbung, die ich im letzten Monat gesehen habe, würde ich vermuten, dass die Beta im Februar oder März beginnen wird). Sie können sich jetzt anmelden, um Updates zum Projekt zu erhalten (siehe Link oben); Nach dem, was sie bisher gezeigt haben, wird es den Mockup-Prozess wirklich rationalisieren.

Alternativ können Sie Edge Reflow ausprobieren .
EDIT: Anscheinend haben sie dieses Projekt neben Edge Code vernichtet (nicht sicher warum; Code musste gehen, weil es mit Adobe Brackets konkurrierte, aber die einzige Adobe-Alternative zu Reflow ist Dreamweaver, ein schreckliches Programm, das sterben muss).

Können HTML-/CSS-Eigenschaften aus einem in Photoshop oder Illustrator erstellten Website-Seitenmodell extrahiert werden?

Adobes Texteditor Brackets verfügt über ein Standard-Plugin namens PSD-Extract , mit dem Sie CSS-Regeln aus einer PSD-Datei generieren können. Es wird nicht die ganze Codierungsarbeit für Sie erledigen, aber es generiert relativ sauberen und modernen Code (im Gegensatz zu schlechter/veralteter Software wie Dreamweaver, die wirklich widerlichen Code generiert.

Es gibt ein großartiges und einfaches Tool, das ich ständig für das Design verwende und das auch den Code-Export ermöglicht: Webflow , aber wenn Sie die Code-Export-Funktion nutzen möchten, müssen Sie dafür ein monatliches/jährliches Abonnement kaufen, aber es ist nicht so teuer, wenn man viel arbeitet. Oh, und Sie können den Code ziemlich einfach in WordPress konvertieren.

Ich empfehle Ihnen, überhaupt nicht die gesamte Website zu simulieren. Das führt nur zu Missverständnissen und Enttäuschungen. Vor allem bei der Erstellung einer responsiven Website, was heute offensichtlich erforderlich ist.

Ich beginne damit, dem Kunden eine leere Website-Vorlage zu zeigen, die auf einem lokalen Webserver auf meinem MacBook läuft, oder auf einem privaten Staging-Server, wenn ich mit einem Team arbeite. Ich verwende eine produktionsreife Vorlage und Handcodierung, aber Sie können auch einen Prototyp in Dreamweaver oder was auch immer Sie möchten erstellen. Der Kunde und ich sitzen zusammen und bauen die Vorlage aus, indem wir die gewünschten Seiten hinzufügen und ein wenig Inhalt hinzufügen, den sie möglicherweise bereits haben, in einigen Fällen von einer früheren Website.

Ich füge eine Klasse in meine Vorlage ein, die Elemente als Haftnotizen erscheinen lässt, und so füge ich alle Notizen für jede Seite als divs ein und füge diese Klasse hinzu, und die Tatsache, dass es sich um gelbe Blöcke mit Schlagschatten und einer Handschriftschrift handelt, macht es offensichtlich dem Kunden, dass es sich um Notizen handelt, die nicht Teil des Website-Designs sind. Und ich kann diese Klasse auf versteckt setzen, um alle Notizen auszublenden, und wir werden nicht versehentlich eine Notiz als Inhalt bereitstellen. Die Tatsache, dass die Notizen auf jeder in Bearbeitung befindlichen Seite eingeblendet werden, ist viel besser, als sie in einem Textdokument zu verstecken.

Ziemlich bald in diesem Prozess hat der Kunde bereits das Gefühl, eine neue Website zu haben. Sie können mit dem Browser arbeiten und zwischen den Seiten navigieren, sie können Notizen auf diesen Seiten sehen, die Dinge wie „Hier geht ein Kopfbild von John Smith“ sagen und so weiter. Die Seite ist wie unfertige Möbel, aber Sie können immer noch darauf sitzen und sehen, ob es bequem ist.

Und da es nur auf einem privaten Server läuft, muss ich mich nicht zu früh um die Optimierung kümmern, ich muss mich nicht um verschiedene Browser kümmern. Das kommt alles viel später.

Am Ende dieser Sitzung sende ich ihnen normalerweise eine PDF-Datei jeder Seite der Website per E-Mail. Ich habe ein AppleScript, das das automatisch macht.

Das nächste, was Sie wissen, ist, dass der Kunde wirklich aufgeregt ist, ein neues Logo zu bekommen, ein Farbschema auszuwählen, eine Schriftart auszuwählen. Dann fangen Sie an, Design-Proofs zu erstellen. Aber ich lasse sie nicht seitenweise aussehen, ich mache einfach eine Logokarte mit irgendeiner Schrift darunter, eine Navigationsleiste, alles gegen ein Farbschema. Das macht es einfach, ein paar davon zu machen: helles Logo auf dunklem, dunkles Logo auf hellem, vielleicht 3 Farbschemata, und ich zeige sie dem Kunden, wie ein Innenarchitekt Farbkarten zeigen würde. Ich gebe ihnen nicht eine ganze Seite zum Ansehen, sondern nur eine Auswahl an Stilen. Für sie ist es viel einfacher, weil sie nichts visualisieren müssen und viele Menschen keine Grafiken visualisieren können. Ich habe sie auf dem iPad gezeigt oder manchmal drucke ich einige der Proofs als Postkarten aus und lasse sie vom Kunden mischen und vergleichen. Der Kunde hat einen Kontext für diese Designnachweise, da er bereits mit der Website gearbeitet hat. Genauso wie ein Hausbesitzer bereits in einem leeren weißen Raum gestanden hat, als ihm ein Dekorateur Farbkarten zeigt.

Typischerweise begeistert eine der Karten den Kunden mehr als die anderen und das ist die, die sie wollen. Keine zweite Entwurfsrunde. Das Logo wird dann natürlich als SVG exportiert und wir ziehen es in die oberste Zeile des responsiven Rasters der Website. (Ich verwende Skeleton , was sehr einfach und leicht ist.) Die Textstile und das Farbschema aus dem Designproof werden – natürlich – in das CSS der Website eingefügt. Sie haben diesen Schritt, ein Seitenlayout im Druckstil neu zu erstellen, nicht, da es im responsiven Design kein Seitenlayout im Druckstil gibt. Sie haben im Grunde eine Spalte mit Blöcken auf einem Telefon, die auf einem größeren Bildschirm auf 2 oder 3 Spalten (oder wie viele Sie möchten) erweitert werden können. Sie legen Textgrößen nicht nach Geschmack fest, sondern danach, was auf jedem Gerät lesbar ist.

Zu diesem Zeitpunkt hat der Client – ​​hoffentlich – auch weitere Inhalte bereit, also laden wir diese ebenfalls ein und ersetzen die darin enthaltenen Notizen.

Dann setze ich mich mit dem Kunden zusammen und wir gehen die Website noch einmal durch, konzentrieren uns auf den Inhalt, fügen noch ein paar Notizen hinzu, vielleicht eine zusätzliche Seite.

Basierend auf ihrem Inhalt könnte ich vorschlagen, dass wir einige Animationen machen, ein paar Stock-Fotos hinzufügen, einige Call-to-Action-Blöcke für wichtige Seiten erstellen (die auf größeren Bildschirmen in die zweite Spalte gehen und auf einem Telefon am Ende der Bildlaufleiste erscheinen .) Die Designenergie fließt in die Erstellung/Verbesserung von Inhalten auf einer tatsächlichen Website. Wir sind weit vor dem Start und arbeiten dennoch so, wie wir nach dem Start arbeiten würden, um die Website zu verbessern. Es wird überhaupt nicht viel Energie verschwendet. Anstatt ihnen Mockups von imaginären Website-Elementen zu zeigen, die sie vielleicht wollen oder nicht wollen, sehen wir uns ihren tatsächlichen Inhalt an und sagen: Wir können Benutzer mit einem Satz von 3 beschreibenden Inline-Schaltflächen zu diesen 3 wichtigen Seiten führen. Oder: Wir können diese Fotogalerie als große, immersive Diashow machen, die automatisch abläuft und auch Vor- und Zurück-Schaltflächen bietet. Oder:

Eine Schlüsselsache bei diesem Prozess ist, dass Sie den Kunden nicht überfordern, indem Sie ihn bitten, eine Menge Dinge zu visualisieren. Sie zeigen ihnen die In-Progress-Seite und Sie zeigen ihnen Designnachweise von Elementen und dann fügen Sie dieses Element dort ein und gehen zum nächsten Ding über. Sie fragen nach Inhalten oder Informationen und fügen sie in die Website ein. Sie schlagen hier auf dieser Seite ein Widget oder eine Animation für diesen Spot vor und bauen es dann.

Das kleine Layout, das es gibt, hängt davon ab, das responsive Raster so zu verwalten, dass Ihre Elemente die richtige Größe füreinander haben. Sie arbeiten hauptsächlich an dem Abstand zwischen den Elementen und ihrer relativen Größe zueinander und legen sie nicht im Browserfenster an, von dem Sie keine Ahnung haben, wie groß es sein wird oder welche Form es haben wird.

Wenn Sie die Website so erhalten haben, dass sie im Grunde startbereit ist, wechseln Sie zu diesem Zeitpunkt zu einer Bereitstellungsdenkweise und optimieren, verschieben Sie das Ganze möglicherweise auf einen bestimmten Server und / oder ein bestimmtes CMS, das der Kunde wünscht. All die Dinge, die nichts daran ändern, wie es aussieht und sich anfühlt. Aber Sie verschwenden keine Mühe, denn die Aufgabe ist einfach, ein vorhandenes Webdokument zu verbessern und zu optimieren, das bereits voller Inhalt ist.

Das Beste daran ist, dass der Kunde das Gefühl hat, Teil des Webentwicklungsteams zu sein, weil er beobachtet hat, wie sich die Website aus dem Nichts entwickelt hat. Ich habe ihnen kein „fertiges“ Mockup gezeigt, das sie glauben ließ, die Website sei bereits am ersten Tag erstellt worden. Sie sahen sie leer, sie sahen sie mit Notizen darauf, sie sahen sie, als das Logo zum ersten Mal eingefügt wurde, sie sah es, als die Farben und der Typ gestylt wurden. Sie müssen ihnen nicht erklären, dass viel Arbeit darin steckt, sie haben gesehen, dass die Arbeit Stück für Stück in der Browseransicht passiert. Wenn sie den bereitgestellten Standort sehen, sind sie stolz darauf.

In der Vergangenheit äußerte ein Kunde seine Enttäuschung darüber, dass eine gestartete Website genau so aussieht wie das Mockup, das er Wochen zuvor gesehen hatte. [Sound of mind blowing.] Das ist eine Schlüsselsache: Sie müssen verstehen, dass der Kunde kein Grafikdesigner, kein Webentwickler ist und möglicherweise nicht einmal wirklich regelmäßig irgendein Dokument erstellt. Sie können ihnen nicht unbedingt Lorem ipsum zeigen und erwarten, dass sie etwas Gutes daraus ziehen. Sie können ihnen kein Modell zeigen, das wie eine 8,5 x 11-Seite aussieht, und sich dann wundern, wenn sie enttäuscht sind, nur den oberen Teil dieser Seite in einem Webbrowser auf ihrem Computer zu sehen. Aber wenn Sie ihnen ein rohes Stück Marmor zeigen und sagen: Jetzt werden wir daraus etwas Maßgeschneidertes für Sie formen, basierend auf Ihren Bedürfnissen und Anforderungen – das begeistert sie meiner Erfahrung nach mehr als Mockups mit Lorem Ipsum.