Da die neue Website oder App zu Beginn nicht viel mehr als ein Gedankenkonstrukt ist, sind visualisierte Gestaltungskonzepte als Basis für die spätere technische Umsetzung unverzichtbar. Nur so können Sie einen Kunden von der geplanten Homepage bzw. Anwendung überzeugen oder Programmierern vermitteln, wie das Webprojekt später funktionieren und aussehen soll. Außerdem entdecken Sie unter Umständen bereits im Vorhinein Unstimmigkeiten, die Sie in der Folge beseitigen können. Zwei Begriffe, die in diesem Zusammenhang immer wieder fallen, sind „Mock-up“ und „Wireframe“. Was steckt genau hinter diesen beiden verschiedenen Entwurfstypen?
Der Begriff Wireframe stammt aus dem Englischen und bedeutet so viel wie „Drahtgerüst“. Ein Webanwendungs- oder Website-Wireframe bietet die Möglichkeit, das zugrundeliegende Konzept grafisch darzustellen, noch bevor der eigentliche Quellcode programmiert wird. Es geht einzig darum, die Beziehungen der verschiedenen Elemente und somit die Struktur des Webprojekts greifbar zu machen. Wireframes sind also im Prinzip Skizzen, die die Funktionalität und das Layout beschreiben. Sie stellen Entwürfe
des geplanten Webprojekts dar und sollen dazu beitragen, die Nutzererfahrung des Endprodukts bereits zu diesem frühen Entwicklungsstadium zu optimieren. Die grafische Darstellung und der geplante Content spielen in Wireframes hingegen keinerlei Rolle, denn dieser Entwurfstyp setzt ausschließlich den Rahmen für die spätere Ausarbeitung des Designs und enthält nur Platzhalter für Texte und Bilder. Je nach Umfang und Einsatzzweck werden Wireframes klassisch per Hand gezeichnet oder digital mithilfe von Präsentations- oder Bildbearbeitungsprogrammen erstellt.
Der Terminus Mock-up entspringt ebenfalls der englischen Sprache und bedeutet so viel wie „Attrappe“ oder „Lehrmodell“. Auch dieser Entwurfsansatz dient der Visualisierung des geplanten Webprojekt-Konzepts und ergänzt Wireframes durch Designelemente, weshalb sie häufig auch auf diesen aufbauen. Mit einem App- oder Website-Mock-up wird also nicht einfach nur das grundlegende Layout inklusive Beschreibung der Funktionen und Platzhalter für Inhalte präsentiert, sondern auch bereits die erste Fassung des späteren Designs. Zu diesem Zweck wird bei der Erstellung eines Mock-ups mit
gearbeitet, die dem Layout Leben einhauchen und einen guten Einblick verschaffen, wie das Webprojekt am Ende im Browser bzw. auf den verschiedenen Displays aussehen könnte. Zur Erstellung von Mock-ups dienen gewöhnliche Grafikprogramme wie Photoshop. Darüber hinaus gibt es auch spezifische Mock-up-Tools wie Balsamiq, mit deren Hilfe Sie nicht nur unkompliziert verschiedene Seiten erzeugen, sondern auch mit Verlinkungen versehen können. Solche komplexen Mock-ups ähneln stark den interaktiven Prototypen (Click-Dummies), die allerdings bereits erste Codierungen auf Basis von HTML, CSS und Co. enthalten.
Indem Sie bereits zu einem frühen Stadium der Webprojekt-Konzeptionierung zu Visualisierungsmitteln greifen, steigern Sie Ihre Erfolgsaussichten enorm. Arbeiten Sie im Team, kommen Sie so wesentlich schneller auf einen gemeinsamen Nenner. Haben Sie einen externen Webentwickler mit der Programmierung beauftragt, können Sie Ihre Vorstellungen kaum besser präsentieren. Ferner wird er Ihnen schneller sagen können, welche Funktionen realisierbar sind oder Probleme aufwerfen und wo es in Sachen Usability der geplanten Webpräsenz hakt. Zuletzt sind die zu Papier gebrachten Entwürfe auch die beste Möglichkeit, Ihre App oder Website Kunden und Investoren vorzustellen.
Im Übrigen muss der Weg von der Idee über die Visualisierung bis hin zur Programmierung nicht immer über beide Entwurfstypen führen. Es gibt einige Szenarien, in denen ein Wireframe bereits ausreicht: Planen Sie beispielsweise nur eine neue interaktive Unterseite eines bestehenden Webprojekts, ist die Anfertigung eines Mock-ups überflüssig, da das Design ja zum Großteil bereits vorgegeben ist. Ähnlich verhält es sich bei der Erweiterung von Webapplikationen. Ein Wireframe ist außerdem die beste Visualisierungsform, wenn Sie einen Grafiker damit beauftragt haben, das Design zu erstellen und ihm dabei maximalen Freiraum gewähren möchten.
Spätestens wenn es darauf ankommt, die eigenen Vorstellungen der grafischen Elemente zu präsentieren, kommen Sie an einem Mock-up allerdings nicht vorbei. Je tiefer Sie zuvor bei Ihrem Wireframe-Entwurf ins Detail gegangen sind, desto einfacher haben Sie es bei der Erstellung dieser vorläufigen Designvorlage. Ein wesentlich größerer Aufwand und höhere Kosten sind logischerweise mit den mehrteiligen, interaktiven Mock-ups samt Seiten- und Linkstruktur verbunden. In bestimmten Fällen können diese allerdings die Notwendigkeit codebasierten Prototypen erübrigen.
Mit dem immer stärker in den Fokus tretenden Responsive Webdesign hat sich auch die Komplexität von Wireframes und Mock-ups grundsätzlich erhöht. War früher eine einzige Skizze absolut ausreichend, gehört heute die Anfertigung mehrerer Versionen für die unterschiedlichen Displaygrößen quasi zum Pflichtprogramm. Hinzu kommen funktionale Unterschiede wie Eingabemittel (Maus, Tastatur, Touchscreen) und verschiedene technische Voraussetzungen (Datenübertragung etc.), die ebenfalls bei der Konzept-Visualisierung berücksichtigt werden müssen.
Die veränderten Rahmenbedingungen haben dazu geführt, dass heute wesentlich häufiger auf ein Mock-up verzichtet und lieber sofort ein responsiver Prototyp erstellt wird, der automatisch die Eigenheiten mehrerer Geräte abdeckt. Allerdings haben auch die Software-Entwickler von Wireframe- und Mock-up-Tools auf die Veränderungen des Marktes reagiert und die Erstellung verschiedener Versionen eines Entwurfs vereinfacht. Wer sein Wireframe per Hand zeichnen möchte, dem bleibt allerdings nichts anderes übrig, als Entwurf um Entwurf einzeln zu erstellen.
Die besten Mock-up- und Wireframe-Tools finden Sie hier.
Ihnen fehlt noch ein Favicon für Ihre Website? Mit dem kostenlosen Favicon-Generator von IONOS können Sie sich im Handumdrehen ein eigenes Homepage-Logo generieren!
Statt eine Website selbst zu erstellen, haben Sie auch die Option, eine fertige Homepage zu kaufen. Dadurch sparen Sie Arbeitsaufwand und erhalten eine komplette Webpräsenz inklusive bestehendem Besucher- bzw. Kundenstamm. Doch welche Risiken sind mit dem Kauf einer fertigen Website verbunden? Und mit welchen Kosten müssen Sie rechnen?
Das Internet wird zunehmend mobiler. Ein Trend, der Webseitenbetreiber vor neue Herausforderungen stellt. Noch immer finden sich im Netz zahlreiche Online-Angebote, die sich auf Smartphones und Tablets nur eingeschränkt darstellen lassen. Seit Googles Mobile Update müssen diese mit signifikanten Sichtbarkeitsverlusten rechnen. Doch mit separaten mobilen Webseiten, adaptiven und responsiven Layouts...
Wussten Sie, dass Sie Ihre Homepage anmelden können, um bei Google, Bing und Yahoo gefunden zu werden? Die Suchmaschinenanbieter bieten Webseitenbetreibern die Möglichkeit, URLs einzureichen, die in den Suchindex aufgenommen werden sollen. Wir zeigen Ihnen, wie Sie Ihre Website bei Google und Co anmelden und so die Sichtbarkeit Ihres Projekts im Internet erhöhen.
Bis ein Webprojekt so aussieht, wie es der Nutzer am Ende zu sehen bekommt, gehen Designer und Entwickler einen langen Weg. Denn von der ersten Idee bis zum fertigen Produkt muss man viele wichtige Entscheidungen treffen, Pläne schmieden und unter Umständen noch einmal ganz von vorne beginnen. Ein wichtiges Hilfsmittel sind sogenannte Mock-ups und Wireframes, die schon in einer frühen...
Die Entwicklung neuer digitaler Produkte kann zur teuren Investition werden. Wie lässt sich im Vorfeld abschätzen, ob sich die Mühe lohnt? Beziehen Sie Ihre Nutzer mit in die Produktentwicklung ein. User-Centered Design nennt sich dieser Ansatz, von dem Unternehmen und Kunden gleichermaßen profitieren.
