Das Erstellen einer Webseite ist üblicherweise ein Prozess, der durchdacht sein muss und nicht innerhalb eines einzelnen Tages abgeschlossen ist. Man will ja gemeinhin ein tolles Design gestalten, das einzigartig ist, den Branding-Richtlinien des Unternehmens entspricht und aber trotzdem auch leicht zu erfassen und leicht navigierbar ist. Es lohnt sich deswegen, hierfür sogenannte Mockups zu erstellen. Doch was ist ein Mockup?
Ein Mockup ist ein Entwurf, der darauf abzielt, die Vision einer künftigen Webseite in möglichst grosser Detailgetreue abzubilden. Einerseits ist es damit möglich, Designmöglichkeiten im Team oder über Teams hinweg zu besprechen, möglichst viele Versionen schnell und unbeschwert zu erstellen und dann die beste auszuwählen.
Zudem macht es ein Mockup anschliessend dem Webmaster einfacher, per HTML, CSS und allenfalls jQuery oder Javascript das Design in Code umzusetzen.
Mockups sind als Instrument folglich nicht aus dem Webdesign wegzudenken. Und auch Ihnen kann es als Kunde helfen, sich über das Design Gedanken zu machen, bevor Sie als Kunde eine Webdesign-Agentur kontaktieren. Sie haben dann bereits eine Basis, auf der die genaue Gestaltung der Seite und das Vorgehen besprochen werden kann! Gemeingültige Probleme
Dies betrifft ein Problem, das die meisten Programmierer mit Designern, also den Erstellern von Mockups, haben. Und zwar kann es allenfalls sein, dass nicht alle Designs 1:1 in Code umgesetzt werden können. So sind Farbverläufe mit CSS schwer umsetzbar oder gar überhaupt nicht möglich.
Innerhalb mancher Webdesign-Agenturen (glücklicherweise nicht bei uns!) herrscht folglich ein Kleinkrieg zwischen UX-Designern und Programmierer. Das ist als kleine Erwähnung am Rande gedacht – mit der Schlussfolgerung, dass es vorteilhaft ist, bei der Endumsetzung nachsichtig zu sein. CSS und HTML können schlichtweg nicht alles, was ein Grafikprogramm kann!
Nun aber zurück zu den Mockups. Selbstverständlich wurden bis zum heutigen Tage mehrere Werkzeuge entwickelt, die das Erstellen von Entwürfen sehr einfach machen. Wir stellen im Folgenden 5 der besten davon vor:
Balsamiq Mockups ist eines der am weitesten verbreiteten Tools zum Erstellen von Mockups. Da das Programm Daten in einer Cloud speichert, können diese ganz einfach mit anderen Teilnehmern geteilt werden. Es gibt eine herunterladbare Desktop-Version, die wie Google Drive oder Dropbox über den Desktop den Zugriff auf die stets aktualisierten Daten bietet.
Bei dem Tool erstellt man zuerst grobe Entwürfe, um so das Brainstorming anzuregen. Details sind da noch nicht so wichtig. Alle Versionen sind zugreifbar, um so einen Überblick über die Entwicklung und verschiedene Ideen zu gewähren. Zudem sind über die Drag&Drop-Funktion die Entwürfe äusserst schnell erstellt. So kann man Entwürfe leicht erstellen und auch wieder verwerfen. Das Tolle daran: sie können auch auf PNG oder PDF exportiert werden.
Sobald die Entscheidung für ein Design gefallen ist, kann es im Detail ausgearbeitet werden.
Die Kosten des Tools betragen $89 Pro Nutzer.
Mockup Builder ist ein preiswertes Programm mit äusserst vielen Funktionen, über das Teams Entwürfe für Webseiten oder Apps erstellen und teilen können. Über ein typisches Menü (mit den Funktionen „Öffnen“, „Schliessen“, „Projekt speichern“, etc) können die Mockups erstellt oder bearbeitet werden.
Mit der Kommentarfunktion können individuelle Teile der Projekte kommentiert werden, was dem gegenseitigen Austausch hilft. Zudem gibt es auch eine UI-Library, über die Elemente direkt in den Bildschirm gezogen und angeordnet werden können. Im Mockup Canvas schliesslich können alle Teile des Entwurfes realistischer gestaltet werden.
Selbstverständlich können die Elemente auch verschoben und die Grösse verändert werden. Als schöner Zusatz können sie sogar übereinander gelegt werden!
Die Entwürfe können anschliessend in eine PNG- oder PDF-Datei exportiert werden. Das Programm gibt es ab nur $7 pro Monat.
Durch das Online-Tool Mockingbird ist es einfach, Entwürfe für Webseiten und Applikationen zu erstellen, zusammen zu linken und mit anderen zu teilen. Auf diese Weise kann man sich zuerst entscheiden, was man genau umsetzen will, bevor man sich an die Umsetzung macht.
Über die Funktionen wird es ein Einfaches, sich direkt mit den Kunden abzustimmen und im Team zu brainstormen. Hierdurch können bessere Produkte umgesetzt werden.
Das Programm verfügt über UI-Elemente und anpassbare Gitternetzstrukturen (Grids), die zur Gestaltung der Entwürfe verwendet werden können. Alle können je nach Bedarf verkleinert oder vergrössert werden. Genau wie bei den anderen Programmen können die einzelnen Entwürfe in PDF- oder PNG-Dateien exportiert werden.
Wenn es um die Erstellung von Mockups geht, dann müssen ganz klar auch die Grafikprogramme als Möglichkeit erwähnt werden. Zwar können diese nicht so einfach wie die oben genannten Programme von verschiedenen Nutzern bearbeitet werden, aber sie sind eine gute Möglichkeit zum Gestalten von Entwürfen oder der Endversion.
Nebst dem allseits bekannten Photoshop wird von vielen Webdesignern Adobe Fireworks verwendet. Der Vorteil des Letzteren ist, dass Entwurfssequenzen automatisch in CSS umgewandelt werden können, so dass das Programmieren der Webseite erleichtert wird. Beide Programme sind allerdings relativ kostspielig.
Wer kostenlose und trotzdem gute Programme bevorzugt, dem sei GIMP ans Herz gelegt. Das Programm bietet qualitativ recht gute Resultate und ist vergleichbar mit Photoshop.
Pencil ist ein intuitives Online-Programm zur Erstellung von Mockups, das über zahlreiche eingebaute Formkollektionen verfügt. Damit können problemlos Entwürfe und auch Flussdiagramme erstellt werden.
Die Spezialfunktion, die interessant sein dürfte, ist die Exportmöglichkeit in eine Webseite. Hierdurch können die Entwürfe online relativ realistisch betrachtet und bewertet werden. Zudem können die einzelnen Seite natürlich auch miteinander verlinkt werden.
Pencil ist gratis und somit ein super Tool für alle jene, die nicht oft Mockups erstellen müssen und deswegen keine Extraausgaben haben möchten!
Wir hoffen, dass Ihnen diese Tools etwas weiter helfen können auf dem Weg zu einer spitzen Webseite. Es ist immer vorteilhaft, schon bei der ersten Besprechung relativ genau festlegen zu können, in welche Richtung das Webdesign denn gehen sollte.
Selbstverständlich können auch wir von MIK Group gerne auf Basis unseres Erfahrungsschatzes und Fachwissens Vorschläge unterbreiten. Setzen Sie sich einfach mit unserer Agentur in Zürich in Verbindung, um unverbindlich einen Termin zu vereinbaren oder aber ein Angebot zu erhalten.
Wer in der Umgebung Zürich wohnt, dem können wir auch gerne einen persönlichen Besuch abstatten. Denn bei uns werden Kundenbetreuung und Qualität gross geschrieben!
Kontaktieren Sie uns noch heute per Email (info@mikgroup.ch) oder Telefon (+41 44 841 02 02). Wir freuen uns auf Ihre Kontaktaufnahme!
© 2012-2023, MIK Group GmbH | AGB | Impressum | Datenschutzerklärung
