Wie kann man einer Website einen Mockup-Look geben?

Bearbeiten zur Verdeutlichung Vielen Dank für die vorhandenen Antworten. Ich fürchte, Sie haben meine Frage falsch verstanden. Ich möchte keine Mockups erstellen (ich habe einige, aber sie sind für meinen aktuellen Zweck nicht geeignet). Ich möchte ein Tool (möglicherweise etwas so Einfaches wie ein frei verfügbares CSS-Design), das meine vorhandene, funktionierende, halb fertige ASP MVC-Site wie ein Mockup aussehen lässt.


Der Chef meines Chefs hat entschieden, dass ich meinen Stakeholdern den aktuellen Stand meiner Arbeit zeigen muss, damit sie ein Gefühl für die Webanwendung bekommen, die ich für sie entwickle. Es handelt sich um eine Entwicklung auf der grünen Wiese, sodass die Benutzer keine Erwartungen aus dem Kontakt mit früheren Versionen haben. Er möchte, dass es zumindest ein bisschen anklickbar ist, also kann ich nicht gehen und die Mockups posten, mit denen ich arbeite. Es muss eine lauffähige Version der aktuellen Entwicklungsstufe sein.

Ich möchte dem vielbeschäftigten, kritischen Manager der mittleren Ebene unmissverständlich klarmachen, dass das, was er sieht, nicht das ist, was er bekommen wird, sondern eine frühe Skizze davon. Es ist eine sehr heikle Angelegenheit, denn meine Bewerbung erhöht den Papierkram des Managers. Daher sind sie dem Projekt bereits feindlich gesinnt und neigen dazu, den Prototyp schlecht zu sehen, aus der Designqualität auf die zu erwartende Anwendungsqualität zu schließen und das Fehlen der Vitalfunktionen zu beklagen, deren Implementierung noch nicht begonnen hat.

Dazu möchte ich meiner Seite ein handgezeichnetes Aussehen verleihen, genau wie typische Mockups. Es sollte aus der Ferne "Ich bin eine grobe Skizze" rufen, damit niemand es jemals mit der Realität verwechseln kann.

Was sind gute Möglichkeiten, um einen solchen Look zu kreieren? Gibt es einen effizienteren Weg, als mein eigenes Mockup-CSS von Hand zu erstellen? Meine Zeit, die ich in eine solche Aufgabe investieren kann, ist stark begrenzt, und ich bin auch unerfahren in der Gestaltung. Ich brauche kein perfektes Aussehen, und die Seiten sind nicht kompliziert, also je einfacher die Lösung, desto besser.

Einige Produkte bieten Ihnen die Möglichkeit, interaktive Prototypen zu erstellen, die ein "skizzenhaftes" oder "handgezeichnetes" Aussehen haben, das genau das ist, wonach Sie suchen. Axure zum Beispiel hat einige native Funktionen und einige Bibliotheken von Drittanbietern, die Ihnen die gewünschten Ergebnisse liefern: 90percentofeverything.com/2009/11/05/…
Ein weiteres Mock-up-Tool ist Balsamiq . Es ist ein einfaches Drag-and-Drop-System mit einer Reihe von vorgefertigten Elementen, um Ihre Modellseite zu füllen
Hier ist ein weiterer Dienst, der für Sie funktionieren könnte: invisionapp.com . Ihre Website konzentriert sich ganz auf die Freigabeseite des Prototypings, aber wenn ich mich erinnere, als ich vor einiger Zeit darauf gestoßen bin, haben sie die Möglichkeit, Bereiche Ihres Modells zu ziehen und wirklich schnell und einfach Interaktivität hinzuzufügen. Grundsätzlich können Sie eine Reihe von Screenshots Ihrer Website haben und sie miteinander verknüpfen, um die Interaktionen zwischen Seiten usw. vorzutäuschen ...
Eigentlich könnten Sie ein echtes Mockup erstellen, es kacheln und die Teile als Bilder in Ihrem Webdesign verwenden. Übrigens border-imagekann die neue CSS-Eigenschaft flexible Elemente mit skizzenartigen Rändern zulassen.

Antworten (3)

Das erste, was mir in den Sinn kommt, ist die Verwendung eines Wireframing-Tools wie Balsamiq , um das Mock-up zu erstellen. Dies gibt ihm ein sehr "unvollständiges" Gefühl:

Balsamiq-Mockup-Elemente

Leider glaube ich nicht, dass Sie funktionierendes HTML/CSS aus Balsamiq exportieren können, also würde ich stattdessen ihren Stil als Inspiration verwenden, um Ihr "Mockup-CSS" zu generieren.

Wahrscheinlich liegt es daran, dass ich mich täglich mit Photoshop beschäftige, aber das Schachbrettmuster immer als etwas Unvollständiges assoziiere.

Schachbrettmuster

Wenn nicht, dann würde vielleicht eine Art Raster für den Hintergrund helfen, ein unfertiges Aussehen zu vermitteln.

Ein Beispiel für so etwas, das ich in der Vergangenheit gesehen habe, ist der alte Stil für Stack Exchange-Beta-Sites:

SE Beta-Sites im alten Stil

Es ist sehr schwach, aber Sie können sehen, dass sie neben anderen Stilelementen ein Gitter als Hintergrund verwendet haben, um ihm ein sehr unfertiges Aussehen zu verleihen.

Ähnlich wie Balsamiq ist Wireframe Sketcher. Es ermöglicht die Anklickbarkeit.

Ein anderes ähnliches Programm, aber Open Source und kostenlos, ist Pencil .