Wie ich Mockups präsentiere
Früher habe ich meine Screenentwürfe für Websites meist in eine Grafikdatei gepackt, die einen Windows-XP-Firefox als Rahmen hatte, weil mir dies als vertrauteste Variante für den Kunden erschien: Die allermeisten Kunden hatten WinXP, und zum IE konnte ich mich dann doch nicht durchringen.
Seit einigen Monaten bin ich jedoch umgeschwenkt und verwende seitdem als Vorlage einen leeren Chromium unter Mac OS X. Warum dies? Nun, ich finde die graue, dezente Optik dieses Browser-Chromes extrem neutral und zurückhaltend, und lasse somit mein Werk, das eigentliche Screendesign noch deutlicher hervortreten. Darum auch der neutral-graue Desktop-Hintergrund, auf dem der Browser steht.
Außerdem kommt mir natürlich nur PNG-24 ins Haus, wenn es um Mockups geht. Das allgemein übliche Verschicken von JPGs kommt gar nicht in die Tüte!
Der dargestellte Viewport ist übrigens 1320×1060 Pixel, womit man schön zeigen kann, was mit dem Layout passiert, wenn die User doch mal einen größeren Schirm haben sollten …
Daniel am 20. Januar 2010 #
Gute Idee, ich glaube das mach ich künftig auch so.
Nur worin siehst du den Vorteil, wenn du PNGs anstelle von JPGs verschickst?
Søren am 20. Januar 2010 #
/* Ironie */ Die Datei wird größer und wirkt gewichtiger? ;)
Ich bin testweise dazu übergegangen, im Notfall (!) statische screenshots mit ein wenig CSS/JavaScript aufpoliert in ein Verzeichnis /showroom/ zu stellen, so dass der Kunde beim Aufruf seinen eigenen Browser benutzen kann und wir auf ein Chrome im Bild ganz verzichten können. Sehr schön, um zB. die Auswirkung eines groooßen Logos in Verbindung mit vielen aktivierten Symbolleisten im Browser auf den dann noch sichtbaren Bereich vom Inhalt aufzuzeigen.
Allgemein glaube ich aber fest, sehr sehr fest an die Präsentation von Website-Entwürfen in Ihrem natürlichen Habitat. Make your mockup in markup etc. Ein Navigationsgefühl lässt sich mit statischen Bildern nun mal nicht so einfach vermitteln.
Gerade gestern kam mir der markup-Vorteil wieder zugute, als ich die komplette Informationshierarchie einer Kundenseite umkrempeln wollte, und im mockup aber direkt demonstrieren konnte, wie sich eine neue erste Navigationsebene mit Flyouts-on-hover anfühlen würde. Kunde erst überzeugt, dann sogar glücklich, ich glücklich, Feierabend! ;)
Liebe Grüße aus Bonn.
Patrick am 21. Januar 2010 #
Das mache ich ähnlich. Nur dass ich ein Screenshot vom Fenster mache, da kommen dann die OSX-typischen Schatten auf transparentem Hintergrund mit, und man kann das ganze anschließend auch in einer Präsentation o.ä. verwenden. Das ganze geht so:
1) apfel + shift + 4
2) leertaste
3) gewünschtes Fenster anklicken und der Screenshot landet auf dem Desktop.
man kann auch als Standardformat für Screenshots andere Dateiformate als PNG einstellen, nämlich JPG, PDF, GIF und TIFF. Z.B. für JPG im Terminal eintippen:
~$ defaults write com.apple.screencapture type jpg
~$ killall SystemUIServer
Amtliche Nerds schauen sich mal den Terminal-Befehl ›screencapture‹ an :)
Grüße,
Patrick
erlehmann am 21. Januar 2010 #
Als Nicht-Webworker kann ich natürlich kaum mitreden, aber: Gibt es in der heutigen Welt irgendeinen <em>vernünftigen</em> Grund, derartige Bildchen als JPEG zu verschusseln ? Oder hat die Mehrzahl der teilnehmenden Mockupverschicker schlicht nicht verstanden, was das Attribut „lossy“ bedeutet ?
Julian am 22. Januar 2010 #
Patrick, dein Tipp mit der Leertaste kannte ich noch nicht. Funktioniert echt super.
Ich verschicke meine Layouts eigentlich immer als PDF. Ist zwar ein bisschen frikelig, die da schön reinzubekommen aber man hat die ganze Sammlung in einer Datei. Als Browserrahmen hab ich mich auf Safarie unter OSX eingeschossen. Der ist nicht repräsentativ, hat aber ähnliche Vorzüge wie der Chromium.
Gerrit am 22. Januar 2010 #
@Julian: PDF hat den Riesen-Nachteil, dass sie beim Öffnen der Datei eigentlich nie in 100%-Ansicht dargestellt werden, sondern immer irgendwie skaliert. Da man aber pixelgenaue Entwürfe hat, muss das unbedingt auch in 1:1 dargestellt werden.
Simon Wehr am 22. Januar 2010 #
Man kann via Acrobat natürlich einstellen, in welcher Größe ein PDF geöffnet wird. Erscheint mir trotzdem als unsicher.
Es gibt da ja noch so eine Möglichkeit, über Fireworks klickbare Dummies zu erzeugen. Läuft wohl hauptsächlich über Image-Maps. Aber das scheint ein sehr unbeliebter oder unbekannter Weg zu sein? Hast Du da Erfahrung, Gerrit?
Peter am 24. Januar 2010 #
Hmm, wie kann man denn in Chrome die Viewport-Größe einstellen? Bzw. generell die Größe des Browserfensters definieren? Und was nutzt du dafür für ein Theme? Original ist doch afaik Blau in Kombination mit den Google Farben.
Mit Firefox geht das ja relativ komfortabel per WebDeveloperToolbar oder alternativ JavaScript-Eingabe.
Gerrit am 25. Januar 2010 #
@Peter: Ich habe die Viewportgröße später im Photoshop angepasst. Und wahrscheinlich ist es gar nicht Chrome, sondern Chromium…
frank am 25. Januar 2010 #
ich bin kein grosser freund vom UI des google chrome. mich ärgert, dass linkziele (statusbar) und die suche innerhalb der website dargestellt werden.
ich hatte neulich einen schicken sticky footer einzeiler, der durch die anzeige der links im google chrome unbbrauchbar wurde.
hans am 25. Januar 2010 #
beim einstellen von 100% beim öffnen eines PDF muss man beachten das die standardauflösung 96DPI ist …
hyperkeks am 25. Januar 2010 #
Habe noch nicht verstanden was das Problem mit JPG sein soll. Bitte um Aufklärung.
Gerrit am 25. Januar 2010 #
Ich zeig’s dir
hyperkeks am 25. Januar 2010 #
Kann ich nicht nachvollziehen. Man braucht die Dateien ja nicht tot-komprimieren. Man muss ja heute weder für’s verschicken noch für die Lagerung auf Dateigrößen achten. Und mit PNG’s konnten Kunden von mir schon öfter mal nichts anfangen und haben um ein anderes Format gebeten.
Gerrit am 25. Januar 2010 #
@hyperkeks: Wenn Deine Kunden keine PNG öffnen können, dann verwenden sie vielleicht MS-DOS 6.22 oder was?
hyperkeks am 25. Januar 2010 #
Es reicht das sie glauben die Dinger nicht öffnen zu können, um nach einem anderen Format zu fragen.
Und es ist auch schon ein paar mal vorgekommen, daß man es mit einem Doppelklick versuchte und damit ein (irgendwann mal von irgendwem) installiertes Grafikprogramm geöffnet wurde, was dann zu kompletter Überforderung führte.
Aber mir scheint das auch wieder eine eher religiöse Frage zu sein. In der Praxis hatte ich mit JPG’s nie Probleme – mit anderen Formaten dagegen schon öfter.
Natürlich soll es jeder machen wie er will und womit er am besten fährt, aber eine „best practice“ gibt es dazu einfach nicht und mich stört wenn so etwas suggeriert wird und dahinter eher eine persönliche Vorliebe steckt.
Sebastian am 26. Januar 2010 #
Ich präsentiere im ersten Step auch JPGs – oder vorzugsweise – direkt die PSD-File am Bildschirm. Im zweiten Step können sich die Kunden dann einen HTML/CSS Klickdummy am Bildschirm betrachten. Funktioniert immer super!
Andy am 26. Januar 2010 #
Es geht nichts über das Präsentieren im persönlichen Gespräch – mit eigenem Laptop, vielleicht sogar mit vernünftigem Ausdruck. Dort kann man auch viel besser Fragen klären.
Abgesehen davon, dass man nie weiß, auf was für einer Maschine das jpg/pdf/png angesehen wird. Die Kunden haben teilweise grausame Monitore oder Einstellungen (gestrecktes Bild, grässliche Farben, z.T. nicht mal Truecolor…) – das ist ein viel schlimmeres Problem! Da ist es auch egal, ob man 1% Komprimierung entdeckt oder nicht. Das sehen die meisten Kunden eh nicht…
Ich kann hyperkeks‹ Problematik durchaus nachvollziehen und verschicke wenn, dann auch jpgs. :)
_Sven am 27. Januar 2010 #
Ich stecke meine Screens als PNGs in eine HTML-Seite.
Den Vorteil, den ich darin sehe ist, das der Kunde in seinem eignen Broswer seiner Wahl angucken kann. Das Browserfenster kleiner und größer ziehen kann. Und ein direktes Gefühl von seiner Webseite kriegt.
Don am 31. Januar 2010 #
… ich weiss nicht, wieviele Jahre es schon her ist, das ich vom .jpg auf .png gewechselt bin, ist aber schon ein bisschen her. Vielleicht gehörte ich zu den Ersten, die dieses Format leidenschaftlich genutz haben, ich liebe das.