Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Website-Konzeption: Mobile first und responsive Sites

Wireframes

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Wireframes stellen ein wichtiges Werkzeug eines Konzeptors dar. Diese Skizzen konkretisieren die zuvor erarbeiteten Ideen aus der Scribble-Phase und legen Größenverhältnisse, relative Position und exakte Funktion der Seitenelemente fest.
03:32

Transkript

Wireframes sind das Universalwerkzeug des Konzepters. Die Wireframes konkretisieren die Ideen aus der Scribble-Phase. Das heißt, was Sie vorher auf Papier gezeichnet haben, wird jetzt in eine noch konkretere Form überführt. Wireframe bedeutet "Drahtgittermodell" und man sieht hier gut, wie sozusagen die einzelnen Elemente Ihrer Website platziert werden, wie groß sie sind. Sie sehen zum Beispiel, ob sie zu groß oder zu klein sind. Weil Sie am Bildschirm arbeiten und mit echten Pixeln umgehen. Die grundlegende Struktur der Website wird damit dargestellt. Sie legen also Position und Größe nicht fest, aber Sie geben eine Idee, wie es ungefähr sein könnte. Es ist also noch kein fertiges Design, das Sie machen, Sie lenken nicht ab, indem Sie eine Gestaltung haben, sondern Sie versuchen eben, eine "Röntgenansicht" Ihrer Website zu zeigen. Ein gleiches Wireframe kann in der Gestaltung sehr unterschiedlich umgesetzt werden. Es kann sehr verspielt oder ganz streng sein. Das alles ist mit einem Wireframe noch nicht festgelegt. Als Tools für Wireframes steht Ihnen eine riesige Palette an Möglichkeiten zur Verfügung. Das kann Illustrator sein, Programme wie Axure, Balsamiq heißen die, OmniGraffle, ein beliebiges Zeichenprogramm, es gilt aber einfach wie bei der Kamera, die beste Kamera ist die, die man dabei hat. So gilt, das beste Tool für Wireframes ist das, was Sie benutzen. Das kann auch Photoshop sein, wenn Sie möchten, und sich damit einfach sehr wohl fühlen. Einfach und kostenlos sind Präsentationsprogramme. PowerPoint oder Keynote hat fast jeder. Jeder kann da mitmachen und sozusagen hier in das Wireframe mit einsteigen. Webdienste für das Wireframe gibt es sehr viele. Die Guten kosten alle, das heißt, man muss normalerweise ein Abonnement abschließen, bei fast allen ist aber ein kostenloser Account möglich. MockFlow wäre da zum Beispiel zu nennen, dafür brauchen Sie Flash, funktioniert auch sehr gut. Eine Alternative ist Lucidchart, das funktioniert ohne Flash, der ist auch ganz in Ordnung. Eine weitere sehr beliebte Alternative ist Balsamiq. Balsamiq funktioniert online auch mit Flash. Es gibt aber auch eine App, die Sie sich herunterladen können, wo Sie offline arbeiten können, die ohne Flash funktioniert. Diese kostet 80 Euro und Sie müssen online ein Abo abschließen. Der Goldstandard für das Wireframing ist sicher Axure. Das ist ein Programm, was ca. 500 Euro für die ProVersion kostet, es bietet aber auch am meisten. Es ist hochkomplex, bietet dafür aber auch Dokumentationsmöglichkeiten und einen Export von HTML. Das ist nicht dafür gedacht, dass Sie am Ende Ihre fertige Seite exportieren, aber Sie haben einen für Tests verwendbaren Prototypen. Der kleine Nachteil außer dem Preis ist, Sie brauchen eine Weile, bis Sie das Programm verstanden haben, sich eingearbeitet haben und diese ganzen komplexen Funktionen bedienen können. Eine kostenlose Alternative möchte ich Ihnen noch zeigen. Das ist Pencil und ist Open Source, Es ist schnell installiert, funktioniert gut, und wer sich mit dem Programm anfreunden kann, der ist damit sicher ganz gut bedient. Ebenfalls gut geeignet für das Wireframing sind Grafikprogramme. InDesign ist beliebt, Visio, Sie können OmniGraffle verwenden oder eine Tablet-App.

Website-Konzeption: Mobile first und responsive Sites

Konzipieren Sie Websites, die für unterschiedlichste Geräte – vom Smartphone bis zum Fernseher – geeignet sind und lernen Sie die Werkzeuge und Programme kennen, die hier zum Einsatz kommen.

1 Std. 32 min (18 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Exklusiv für Abo-Kunden
Erscheinungsdatum:17.12.2014
Aktualisiert am:14.07.2017

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!