Wireframes & Mockups: 

Was zeichnet Wireframes und Mockups aus?

Wireframes und Mockups sind keinesfalls das Selbe, jedoch erfüllen Sie bei gestalterischen Projekten häufig den gleichen Nutzen. Insbesondere bei digitalen Projekten, wie beispielsweise einem geplanten Onlineshop, bieten Wireframes und Mockups eine kostengünstige Möglichkeit, das Vorhaben noch vor der eigentlichen Entwicklung zu visualisieren.

Wireframes, Mockups, Click Dummys und Prototypen sind letztlich vereinfachte Abstraktionen des übergeordneten Ziels, mit jeweils unterschiedlichen Detailgraden. Dabei ist ein Wireframe, häufig auch schlicht Skizze genannt, eine stark vereinfachte Repräsentation der zukünftigen Webseite. Das primäre Ziel ist es, die Positionierung und Struktur des Contents und der Funktionselemente zu visualisieren, gleichzeitig jedoch möglichst wenig gestalterische Elemente vorzugeben. Wireframes sind insbesondere in der Kommunikation mit Entwicklern und in frühen Projektstadien sehr hilfreich, da sie eine schnelle erste Veranschaulichung des Entwicklungsvorhabens darstellen.

Mockups hingegen sind wesentlich detailreicher als Wireframes und berücksichtigen bereits die gestalterische Umsetzung des Corporate Designs. Die Erstellung dauert entsprechend etwas länger als das Wireframing, weshalb Mockups üblicherweise erst dann erstellt werden, wenn die Umsetzung des Projekts bereits wahrscheinlicher geworden ist. Mockups sind besonders hilfreich für die Kommunikation mit Frontend-Entwicklern, beteiligten Abteilungen oder Dienstleistern und für die Kommunikation mit der Geschäftsführung. In der Regel sind Mockups weiterhin statische Designs bzw. Abbilder der zukünftigen Webseite (ähnlich wie ein Screenshot), jedoch lassen sie sich mit Hilfe einiger Tools auch dynamisch gestalten, sodass z.B. einzelne Schaltflächen klickbar gemacht werden. Man spricht in diesem Zusammenhang auch häufig von Click Dummys oder Prototypen.

Welchen Nutzen haben Wireframes & Mockups?

Wireframes und Mockups sollten grundsätzlich zu jedem Digitalprojekt und unbedingt vor dem Start der eigentlichen Entwicklung erstellt werden. Einfach mal eben mit der Entwicklung eines komplexen Digitalprojekts loszulegen wäre in etwa so, als würde ein Automobilhersteller mit der Produktion seines neuen Automodells loslegen, ohne sich zuvor eine Vorstellung vom Design, den Elementen und den Funktionen des künftigen Autos Gedanken gemacht zu haben. 

Wireframes und Mockups bieten eine kostengünstige Möglichkeit bereits vor Projektbeginn das Commitment der relevanten Interessensgruppen (sog. Stakeholder) einzuholen und das Konzept bzw. die Strategie zu validieren. So können sie beispielsweise auch dazu benutzt werden, das mögliche Endprodukt in Form eines Prototypen vom Kunden testen und bewerten zu lassen. Auf diese Weise lässt sich die Wahrscheinlichkeit einer teuren Fehlentwicklung weitestgehend reduzieren.

Auch die beteiligten Entwickler sind in der Regel froh über jede umzusetzende Anforderung, welche nicht nur mit Worten sondern auch bildhaft beschrieben wurde. Hierdurch spart das Projektteam zudem jede Menge Zeit und Kosten ein, welche ansonsten häufig durch diverse Rückfrage- und Abstimmungsschleifen entstehen würde.

Wie ID2C helfen kann…

🗹  Strategie-Workshops
🗹  Anforderungs-Workshops
🗹  Persona-Entwicklung
🗹  Erstellung von Wireframes
🗹  Erstellung von Mockups
🗹  Erstellung von Click Dummys
🗹  …

Corporate Webseiten

Die Corporate Webseite bzw. Homepage eines Unternehmens ist das digitale Aushängeschild eines Unternehmens. Lieferanten, Wettbewerber, Investoren, mögliche Kunden und interessierte Bewerber recherchieren heutzutage als erstes die Corporate Webseite bevor Sie sich näher mit dem Angebot des Unternehmens beschäftigen oder beispielsweise eine Bewerbung erwägen.

Landingpages & Co

Eine Landingpage ist eine weitestgehend autarke Webseite, welche einem speziellen Nutzen dient. Landing Pages sollen Kunden durch eine auf den Zweck spezialisierte Gestaltung zu einer Handlung (engl. Conversion), z.B. zum Kauf eines Produktes oder einer Dienstleistung, bewegen. In der Regel werden die passenden Kundengruppen auf diese zielorientierte Marketingseite durch einen Klick auf eine extern geschaltete Werbeanzeige geleitet.

Teaser & Banner

Teaser und Banner stellen auf jeglichem Onlineauftritt ein zentrales Werbe- und Informationselement dar, sowohl auf der eigenen Webseite, im eigenen Shop oder auf Partnerseiten und als Werbeelement auf verschiedensten Netzwerken. Die originäre Aufgabe eines Teaser oder Banners besteht darin, den Leser zur Handlung (engl. Conversion) in Form des Weiterlesens, Klickens oder Kaufens zu bewegen.

Wireframes & Mockups

Wireframes und Mockups sind keinesfalls das Selbe, jedoch erfüllen Sie bei gestalterischen Projekten häufig den gleichen Nutzen. Insbesondere bei digitalen Projekten, wie beispielsweise einem geplanten Onlineshop, bieten Wireframes und Mockups eine kostengünstige Möglichkeit, das Vorhaben noch vor der eigentlichen Entwicklung zu visualisieren.

Sie haben ein Projekt? Challenge Accepted!

Einsatzszenarien

Für Ihr Unternehmen

als Freelancer für einzelne Aufgaben

Für Ihr eigenes Projekt

als freier Mitarbeiter in Ihrem Team

Für Ihre Agentur

als Ergänzung in Ihrem Kundenprojekt

Für Unternehmen

Separate Einzelaufträge/-Tätigkeiten ohne Projektcharakter

Design & Gestaltung
Beratung & Konzeption
Workshops & Co
Projektmitarbeit
Projektmanagement
Anforderungsmanagement
Product Ownership

Einsatz als...

Freelancer mit einzelnen Aufgaben für Ihr Unternehmen, z.B. für:

Corporate Designs
Webdesign (Webseiten & Shops)
UX / Usability Optimierung
Print / Werbung (offline & online)
Produkt- &Verpackungsdesign

Preis / Zahlung

Sie haben die freie Wahl bei der Bezahlung

🗹 Festpreis (nach Lieferung)
🗹 Stundenbasis (monatlich)

Nach Ihrer unverbindlichen Anfrage über das Kontaktformular erhalten Sie innerhalb von 24 h ein Angebot.

Für Projekte

Definierte Rolle/Aufgabe innerhalb Ihres eigenen Projekts

Design & Gestaltung
Beratung & Konzeption
Workshops & Co
Projektmitarbeit
Projektmanagement
Anforderungsmanagement
Product Ownership

Einsatz als...

Freier Mitarbeiter in Ihrem eigenen Projekt, z.B. für:

Corporate Designs
Webdesign (Webseiten & Shops)
UX / Usability Optimierung
Print / Werbung (offline & online)
Produkt- &Verpackungsdesign
Projektberatung / -Assistenz
Projektmitarbeit
Projektmanagement
Anforderungsmanagement / PO

Preis / Zahlung

Fragen Sie gleich nach einem passenden Angebot

🗹 Stundenbasis (monatlich)

Nach Ihrer unverbindlichen Anfrage über das Kontaktformular erhalten Sie innerhalb von 24 h ein Angebot.

Für Agenturen

Definierte Rolle/Aufgabe innerhalb Ihres Kundenprojekts

Design & Gestaltung
Beratung & Konzeption
Workshops & Co
Projektmitarbeit
Projektmanagement
Anforderungsmanagement
Product Ownership

Einsatz als...

Ergänzung in Ihrem Kundenprojekt, z.B. für:

Corporate Designs
Webdesign (Webseiten & Shops)
UX / Usability Optimierung
Print / Werbung (offline & online)
Produkt- &Verpackungsdesign
Projektberatung / -Assistenz
Projektmitarbeit
Projektmanagement
Anforderungsmanagement / PO
Teilprojektleitung
Workshop-Unterstützung

Preis / Zahlung

Fragen Sie gleich nach einem passenden Angebot

🗹 Stundenbasis (monatlich)

Nach Ihrer unverbindlichen Anfrage über das Kontaktformular erhalten Sie innerhalb von 24 h ein Angebot.