Stellen Sie sich diesen Kunden vor oder denken Sie an ihn, der zu Ihnen kommt und Sie beauftragt, eine Website zu entwerfen. Es kann sein, dass Sie das Thema entwerfen müssen, das es verwenden wird, und dass es der erste Eindruck sein wird, den es bei den Tausenden oder Millionen von Menschen hinterlässt, die es besuchen werden. Wie würden Sie es ihm präsentieren? Würden Sie Screenshots von einer Website machen, auf der Sie am Design gearbeitet haben, und sie ihnen zeigen? Wäre es nicht besser, ein Web-Mock-up zu verwenden?
Warten, Wussten Sie nicht, dass es auch ein Web-Mock-up gibt? Dann interessiert Sie dieses Thema. Und eine Menge. Weil Sie Ihrer Präsentation eine bessere Präsenz verleihen und den Kunden glücklicher machen können, wenn er Bilder sieht, auf denen die Website bereits in Betrieb zu sein scheint. Und die Wahrheit ist, dass es Sie nicht so viel kosten wird, es zu tun.
Was ist ein website-mockup
Lassen Sie uns zunächst ein wenig erklären, was a Website-Mockup. Wie Sie wissen, ist ein Mockup eigentlich eine „echte Bild“-Darstellung, die zeigt, wie das Endergebnis Ihrer Arbeit aussehen würde.
Im Falle einer Website, wäre ein Bild des Ergebnisses dieser Webseite.
Diese Art von Collage Sie werden verwendet, um der Arbeit mehr Realismus zu verleihen, da es oft, wenn Sie es präsentieren, leer sein kann oder nicht hundertprozentig darstellt, was Sie getan haben. Darüber hinaus hat der Kunde eine visuellere Möglichkeit, sich ein Bild zu machen.
Und Sie werden sagen, warum zeigen Sie ihm nicht die Website, an der Sie gearbeitet haben? Es könnte gemacht werden, aber nicht als Präsentation der Arbeit, sondern Sie müssten den Client im Web navigieren lassen damit er sie gründlich kennenlernt, und oft haben sie keine Zeit dafür, also vergewissern Sie sich nicht, dass er alles gesehen hat.
Auf der anderen Seite würden Sie es mit einem Web-Mockup erreichen, weil Sie alles hervorheben würden, was Sie in diesen Bildern sehen möchten.
Wie sind sie gemacht
Nun, wie werden diese Web-Mock-Ups erstellt? Gibt es ein Programm um sie zu erstellen? Sind es Collagen aus dem Internet?
Eigentlich Es gibt mehrere kostenlose Tools dass sie Ihnen helfen können, diese zu erstellen, und dass sie Ihnen Optionen geben können, nicht nur mit den Beispielen, die wir Ihnen etwas später geben werden.
Damit könnten Sie sogar eine Sammlung davon für diesen Kunden erstellen und das Design in verschiedene Sequenzen bringen, die das Endergebnis viel besser aussehen lassen.
Diese Werkzeuge sind:
Gliffy
Dieses Tool ist online und es ist kostenlos. Damit können Sie Web-Mock-Ups erstellen, weil hat viele Schaltpläne und eine API, mit der Sie die Arbeit in wenigen Minuten erledigen können.
Tatsächlich ist es ein der am häufigsten verwendeten und das gibt Ihnen viele Möglichkeiten.
Cacoo
In diesem Fall müssen wir Sie davor warnen, obwohl wir uns auf die konzentrieren werden freier Teildas Werkzeug es wird auch bezahlt und das bedeutet wird eingeschränkter sein bei dem was du kannst.
Um eine Vorstellung zu bekommen, können Sie nur in exportieren PNG (es ist also nicht so anpassbar, wenn Sie es mit anderen Clients verwenden möchten).
Das Gute daran ist, dass Sie, wenn Sie mit einem Team arbeiten, gleichzeitig (dh in Echtzeit) zusammenarbeiten können.
Verdrahten
Verdrahten ist eines der Werkzeuge kann eine Website in eine verwandeln Drahtmodell und damit mit dem Kunden arbeiten zeigt Ihnen das Web nach Ihren Wünschen. Aber natürlich wäre es hier notwendig, ein Foto eines Computers, Tablets oder Mobiltelefons auszuwählen, um das Ergebnis dieses Programms zu montieren.
Wie Sie vielleicht erraten haben, geben Ihnen alle Tools ein Bild des Webdesigns, aber es wäre notwendig, es tatsächlich in einem echten Bild zusammenzusetzen. Dazu müssen Sie auf Fotos zugreifen, auf denen Computer, Handys, Tablets gezeigt werden, um Ihr Design darüber einzufügen und ein Foto zu erhalten, das beides vereint (und gut aussieht).
Dazu können Sie fertige Mockups verwenden oder mit einem Bildbearbeitungsprogramm selbst erstellen.
Web-Mockup, das Sie herunterladen können
Wenn Sie sich nicht zu sehr mit der Präsentation der Arbeit überfordern möchten, überlassen wir Ihnen hier einige Beispiele für Website-Mockup die Sie herunterladen und verwenden können. Sie sparen Zeit.
Realistisches Website-Mockup
Wir beginnen mit einer Szene, die jeder haben könnte. Es ist ein Schreibtisch und ein Computerbildschirm oben (Tastatur und Maus unten). Im Hintergrund ein Bücherregal mit Büchern. Dieses Bücherregal ist jedoch in Schwarz und Weiß gehalten, ebenso wie die dekorativen Elemente des Schreibtisches (weitere Bücher und eine Lampe) und die Wand, die in einem Grauton gehalten ist.
Warum? Damit der Blick auf die vom Monitor angezeigte Seite gerichtet ist. in deinem Fall könnte die Startseite der Seite sein, oder repräsentative Teile, die Sie dem Kunden zeigen möchten.
Sie laden es herunter hier.
Einfaches Website-Mockup
Eine einfachere Darstellung, bei der mit einem grauen Hintergrund (obwohl sie angepasst werden kann) kein Bildschirm angezeigt wird, in den wir die Webseite eingefügt haben.
Es fällt auf, dass, wenn Sie auf den Bildschirm schauen, dieser einen helleren und einen dunkleren Teil hat, weil es simuliert, dass das Licht darauf fällt.
Dies kann für gewünschte Teile interessant sein der Klient sieht sie ausschließlich an.
Sie laden es herunter hier.
Samsung Galaxy S5-Modell
Dies ist insbesondere ein Mockup des Samsung Galaxy S5, aber es kann perfekt für Sie sein, im selben Bild drei Teile des von Ihnen erstellten Webdesigns zu zeigen, damit der Kunde zu schätzen weiß, wie es auf einem Handy aussehen würde.
Denken Sie daran, dass Google Unternehmen jetzt mehr als nur Möglichkeiten bietet Verwenden Sie eine responsive Website, das heißt, dass es gut aussieht, egal ob Sie einen Computer, ein Tablet oder ein Handy verwenden. Daher reicht es nicht, dass es auf dem Computer gut aussieht, man muss auch auf allen anderen Plattformen dafür sorgen.
Sie können es herunterladen hier.
Modell für Tablet und Handy
In diesem Fall können Sie nicht 100 % des Webs auf einem Tablet anzeigen, aber Sie können es auf dem Handy. Und wenn Sie Ihr Design auf diesen beiden Geräten zeigen möchten, können Sie dies auch tun, damit der Kunde eine Vorstellung davon bekommt, wie es aussehen wird.
Denken Sie natürlich daran auf dem Tablet wird es im Querformat angezeigt während der mobil wird es haben vertikal. Auf diese Weise kann er sehen, wie sich Ihr Design an beide Geräte anpasst.
Du hast es hier.
Haben Sie einige Beispiele für Web-Mock-ups? Sie können sie in den Kommentaren teilen.