9 der besten Möglichkeiten, eine Website einem Kunden zu präsentieren

Mock Up - Mit freundlicher Genehmigung von renewleeds auf Flickr

 Mock Up - Mit freundlicher Genehmigung von Renewleeds auf Flickr

Die Designphase der Erstellung einer Website ist für die meisten Webdesigner ziemlich Standard, aber wenn es darum geht, das Mock-Up einem Kunden zu präsentieren, bevor das Design geschnitten / codiert wird, treten einige Probleme auf, also ging ich raus und fragte die Community, wie sie einem Kunden ein Website-Design präsentieren.

Nachdem ich alle Antworten durchgefiltert und zusammengefasst habe, kann ich Ihnen nun 9 der besten Möglichkeiten vorstellen, einem Kunden ein Website-Design zu präsentieren, zusammen mit den Vor- und Nachteilen jeder Methode.

Die Probleme

Als Web-versierte Personen ist es ziemlich einfach, das Konzept zu verstehen und zu verstehen, dass Mock-ups einfach statische Bilder sind, die darstellen, wie eine Site aussehen würde. Was jedoch viele Webdesigner festgestellt haben, ist, dass dieses Konzept für Kunden unglaublich schwierig ist, ihren Kopf herumzuwickeln.

Wir als Designer und Kommunikatoren versuchen den Kunden klar zu machen, dass das, was sie betrachten, ein statisches und flaches Bild ihres potenziellen Site-Designs ist. Dennoch kommen viele Fragen und Kommentare von den Kunden, nachdem Sie das Design präsentiert haben, wie die, die Verne Ho von Creating Briefing und viele andere unten erlebt haben:

  • Warum funktioniert keiner der Links?
  • Wie bearbeite ich den Text dazu?
  • Warum kann ich Text nicht hervorheben?
  • Die Website ist zu klein (tritt auf, weil der Browser das Bild standardmäßig verkleinert hat)!
  • Ich mag den weißen Raum, der die Site umgibt, nicht.
  • Können wir die Site zentrieren?

Bis zu einem gewissen Grad kann ich die Verwirrung verstehen … sie betrachten etwas, das wie eine Website aussieht, die sich in einem Browser oder Bildbetrachter befindet, sich jedoch seltsamerweise nicht wie eine Website verhält … offensichtlich würde diese Tatsache Fragen aufwerfen.

Um herauszufinden, was verschiedene Webdesigner tun, um diese Probleme zu umgehen, habe ich meine Freunde auf Twitter (Follow Me) und Facebook (Add Me) gefragt, was sie tun, wenn sie einem Kunden ein Webdesign-Modell präsentieren.

Methoden zur Präsentation von Webdesign-Modellen

Mock Up - Mit freundlicher Genehmigung von _Marcel_

 Mock Up - Mit freundlicher Genehmigung von _Marcel_

gesponserte Nachricht

 Adobe Creative Cloud Rabatt

Nachdem ich Antworten von meinen Twitter / Facebook-Freunden erhalten hatte (großes Dankeschön), kam ich zu diesen 9 Methoden, wie man einem Kunden ein Webdesign-Mock-up präsentiert. In keiner bestimmten Reihenfolge:

Platzieren Sie das Bild auf einer Webseite und senden Sie ihnen einen Link.

Menschen können ein Bild wahrscheinlich besser identifizieren, wenn es so angezeigt wird, wie sie es normalerweise sehen, z. B. in einem Webbrowser.

Wenn Sie diese Methode wählen, versuchen Sie, sie zu personalisieren, indem Sie sie auf Ihren eigenen Server hochladen… verwenden Sie das Verzeichnis/clients/clientname/index.htm. Ein weiterer Tipp hier war, den kostenlosen .tk-Domainanbieter zu verwenden, damit Sie ihm einen Link wie http://clientsdomain.tk senden können, der auch recht professionell aussieht. Vielen Dank für den .tk Tipp Herbert.

Senden Sie ein JPEG oder PNG per E-Mail

Das Senden eines Modells per E-Mail ist wahrscheinlich der einfachste Weg, aber nicht immer der beste … Einige Benutzer haben kleine Bildschirmauflösungen, was bedeutet, dass das Bild verkleinert werden kann, was mehr Fragen zusammen mit den anderen, die ich oben beschrieben habe, bedeutet.

Verwenden Sie eine Art webbasierte Anwendung

gesponserte Nachricht

Die Verwendung einer webbasierten Anwendung zur Präsentation von Modellen verstärkt die Idee, dass es sich um etwas handelt, das angezeigt wird, und es handelt sich nicht um ein Live-Beispiel, das zu weniger Fragen führen kann.

Verwenden Sie die Website CodedPreview

Mit CodedPreview können Sie einfache HTML-Vorschauseiten erstellen, die zeigen, wie eine Vorlage beim Codieren aussehen soll. (Danke liamuk7 für diesen.) Versuchen Sie erneut, es so weit wie möglich zu personalisieren, zugeschnitten auf Ihren Kunden.

Erstellen Sie ein ‚Client-Studio‘

Anstatt eine Online-basierte Anwendung zu verwenden, können Sie Ihr eigenes ‚Studio‘ auf Ihrem eigenen Server einrichten, auf dem sich der Client anmelden und Mock-ups (JPGs auf einer HTML-Seite) anzeigen kann, die er genehmigt … Sie können Revisionen auf derselben Seite (neue JPGs) platzieren und nach der Genehmigung einen Link hinzufügen, um die laufende funktionale Site anzuzeigen.

Hier ist ein Beispiel von IDesignStudios. „Ich sende Clients eine E-Mail mit der URL für das Client Studio sowie ihrer Client-ID, ihrem Benutzernamen und ihrem Passwort. Sie müssen einen Benutzernamen / ein Passwort haben, um überhaupt in den ersten Bildschirm zu gelangen (mit Haftungsausschluss und Dropdown-Liste der Client-IDs). Ein Client kann nur mit seinem eigenen Client-Bereich fortfahren (wie in, alle Clients können die erste Seite mit Dropdown sehen, aber Sie können sich danach nur noch bei 1 Client-Bereich anmelden).“ Sie können einen Screenshot des Anmeldebildschirms und im Client Studio anzeigen.

Export von Mock-ups in PDF

Anstatt im JPEG- oder PNG-Format zu speichern, das nur ein Bild ist, das in der Standard-Bildbetrachtungssoftware des Kunden geöffnet werden kann, bedeutet es im PDF-Format in den meisten Fällen, dass sie die Website in Adobe Reader öffnen müssen. Dies hat den Vorteil, dass weniger Erwartungen daran bestehen, dass es wie eine Website funktioniert. Die Verwendung von Layer-Comps ist auch in PDFs nützlich, um Variationen eines Designs anzuzeigen.

Überspringen Sie Photoshop und Design in HTML

Es gibt ein paar Debatten zu diesem Thema und es kommt normalerweise darauf an, welcher Prozess Ihre Kreativität am besten ermöglicht.

Bringen Sie den Kunden dazu, in Ihr Büro zu kommen

Obwohl dies nicht immer möglich ist, ist es normalerweise der beste Weg, einem Kunden ein Web-Mock-up zu präsentieren, da Sie damit zusammen mit dem Kunden über das gesamte Projekt sprechen können. Wenn Sie diese Gelegenheit haben, nehmen Sie sie immer.

Senden Sie ihnen ein JPEG oder PNG & Bitten Sie sie, es zu drucken

Dies war nur eine Idee, die ich mir ausgedacht habe … wenn Sie ihnen ein JPEG-Modell des Designs in Originalgröße senden und sie bitten, es auszudrucken, werden sie nicht glauben, dass die Website wie gewohnt funktioniert, was wiederum weniger Fragen bedeutet. Ein Nachteil davon ist jedoch, dass die Site nicht skaliert werden kann.

Ursprüngliche Antworten

gesponserte Nachricht

 Twitter Logo - Facebook Logo

 Facebook Logo

Im Folgenden sind einige der ursprünglichen Antworten von meinen Freunden auf Twitter und Facebook … noch einmal vielen Dank. Facebook und während Sie dabei sind, treten Sie der Facebook-Gruppe Just Creative Design bei.

marioOlckers @justcreative Stealth Live-Installation auf dem Server zur Veranschaulichung des Proof-of-Concept und dann nach Eingabe und Rücksprache zurück zum Zeichenbrett.

netbramha @justcreative PNG, Wie wäre es mit dir?

brianyerkes @justcreative Speichern Sie es als JPEG und laden Sie es in ein Verzeichnis auf Ihrem Server namens /clients/clientname hoch. Machen Sie einen Index.HTML-Seite. JPG-Bild hinzufügen.

brownaddesign @justcreative Ich poste das Design einfach auf meinem Webserver in einem Verzeichnis, das ich für den Client erstelle, und sende ihm per E-Mail einen Link zur Ansicht.

marnieb @justcreative Im JPG-Format. 🙂

metalgod @justcreative Ich habe ein PDF mit Anmerkungen zusammengestellt und an den Kunden gesendet. Dann folge ich einem Anruf, um sie durchzugehen.

trisnadi @justcreative Hat der Kunde den Entwurf schon einmal gesehen? Normalerweise mache ich einen vollständigen Spaziergang, bevor ich sie anfassen oder Fragen stellen lasse.

ClarkleSparkle @justcreative E-Mail.

gesponserte Nachricht

bradsherrill @justcreative Lassen Sie den Kunden in Ihr Büro kommen und ihn im Maßstab 1: 1 anzeigen, vorzugsweise im JPEG-Format. Wenn Sie das nicht tun können, senden Sie ihnen eine E-Mail.

jessjoyce @justcreative – Wir senden / hochladen .pngs der Photoshop / Illustrator-Dokumente

spinfly321 @justcreative – Design in Photoshop und als JPG präsentieren

biwerw @justcreative – Erstellen Sie eine Webseite mit dem .jpgs der Konzepte darauf und senden Sie ihnen den Link. Hoffe das hilft.

liamuk7 @justcreative – Nur als Bild oder mit http://www.codedpreview.com

idesignstudios @justcreative – Ich gebe Kunden Zugriff auf ihr eigenes „Client Studio“ – sie können sich anmelden und Mockups anzeigen (JPGs auf einem HTML-pg), wie sie genehmigen … Ich lege Revisionen auf dieselbe Seite (neue JPGs). Nach der Genehmigung füge ich einen Link hinzu, um die laufende funktionale Site anzuzeigen.

marcoslhc @justcreative – Ich liefere im Allgemeinen einige physische Skizzen (Papier und Farbstifte) zum zweiten Treffen und digitale zum 3.

stevemoseley @justcreative – Hängt von 2 Dingen ab: projektgröße und Wählerei des Kunden. Wenn entweder – Photoshop Mockup. Wenn nicht, schneiden Sie zuerst HTML.

adellecharles @justcreative Ich speichere normalerweise für das Web und füge es in ein HTML-Dokument ein / lade es auf den Server hoch, damit der Client sehen kann

craftisan @justcreative Was ich tue, hängt vom Client ab … manchmal Live-Webvorschauen oder PDF / JPG-Modelle … meistens jpgs.

randaclay @justcreative JPG-Datei oder manchmal PDF

EliteByDesign @justcreative Normalerweise nur ein JPG per E-Mail oder auf meine Website hochgeladen. Nichts Besonderes, schließlich ist es nur ein erster Entwurf!

pointlessramble @justcreative Kleben Sie es in eine HTML-Datei mit beliebigen Hintergründen benötigt / etc.

RyanDownie @justcreative Um Modelle zu präsentieren, lege ich das Bild in ein Verzeichnis auf Server / name und füge dann ein Hintergrundbild zum vollständigen Browser hinzu

Herbert über FaceBook: Normalerweise lade ich die Website mit einer kostenlosen Domain hoch www.yourdomain.tk , es ist einfach, dass Sie den Pfad von Ihrem Hosting zur freien Domäne umleiten.

Steve via Facebook: Wir haben eine web.yourcompany.com setup und geben Sie dem Client die URL web.yourcompany.com/client.

Patrick McColley via Facebook: Normalerweise poste ich es auf meinem Server oder, wenn sie mich lassen, auf ihrem.

Weitere Diskussionen

Nachfolgend finden Sie einige weitere Artikel zum Thema Mock Ups und Präsentation.

  • Photoshop Mockups vs Kundenerwartungen
  • Verbessern Sie Ihren kreativen Prozess, besseres Design, schnellere Genehmigungen
  • Warum Kunden mehr als nur ein Mock-Up geben?
  • Lebe nach dem Modell, stirb nach dem Modell
  • Client-Website-Mockups & Comps: Machst du dir die Mühe?
  • Design-Modelle funktionieren nicht

Die bereits in diesem Artikel verlinkt sind:

  • Mock Ups verwalten
  • Beim Design geht es nicht um Werkzeuge
  • Warum überspringen wir Photoshop nicht
  • Design, Mock Ups & Werkzeuge

Also frage ich Sie, wie präsentieren Sie Ihre Webdesign-Modelle und nachdem Sie die vorgeschlagenen Methoden gesehen haben, was ist Ihrer Meinung nach der beste Weg?

Und wenn verdient, wäre ein Digg dankbar. Danke.

Leave a Reply

Deine E-Mail-Adresse wird nicht veröffentlicht.