Wireframes fürs Webdesign Bibliothek / Vorlage zum Download

Nutze meine Wireframe Bibliothek um noch einfacher deiner neuen Webseite Struktur zu geben.

Mit einfachen Strichzeichungen kannst du losgelöst vom komplexen Webdesign die wichtigsten Elemente zusammenstellen um deinen User seine Fragen zu beantworten.

Denk immer an meinen Leitspruch beim Erstellen einer Webseite: Was ist die Frage des Users und welche Elemente brauche ich minimal um diese Frage bestmöglich zu beantworten.

Wireframe Elemente

Nur mit einem Bleistift ausgerüstet zeichne ich die kleinen Skizzen. Später ziehe ich die kleinen Bilder in Adobe XD und erstelle das Wireframe. Du kannst die Elemente auch ausdrucken und dann zusammenstellen bzw. kleben.

Du kannst die Wireframe-Bibliothek gerne nutzen. Einfach auf das Bild mit der rechten Maustaste klicken und Bild herunterladen.

Header – Logo mit Navigation

Header - Logo mit Navigation

Stage

Bühnenbereich inkl. Header, Logo, Hintergrundbild, Headline und Subtext

Wireframe Stage mit Logo, Headline und Subtext

Textblock Section

Headlin mit Text und Bild als Wireframe

Footer

einfacher Footer als Wireframe

Hintergrund-Raster

Um eigene Wireframes einfacher zu zeichnen kannst du mit diesem Hintergrundraster deine Arbeit vereinfachen. Es ist mit Rand und einem 12er Raster ausgestattet.

Hintergrund Raster zum Zeichnen von eigenen Wireframes

Die perfekte Landingpage – Vorlage für erfolgreiche Landeseiten

Nutze dieses einfache Muster um deine Landingpage erfolgreich zu gestalten

Landingpage erstellen ist einfacher mit einer guten Vorarbeit. Da sich Landseite von der Struktur oft ähnlich sind kannst du auf bewährte Konzepte zurückgreifen. Natürlich ist deine Landingpage nicht perfekt. Nach der Erstellung kommt das Feintuning z.B. durch A/B Testing.

Mit der Vorlage zur perfekten Landingpage bekommst du einen Bauplan für die wichtigsten Elemente um mehr Conversions zu erzielen. Wenn deine Website Agentur bei der Erstellung der Homepage gut gearbeitet hat findest du unter den Prototypings die Landingpage Elemente wieder. Ansonsten müssen sie programmiert / erstellt werden.

Die perfekte Landingpage
Abb: Die perfekte Landingpage

Elemente der perfekten Landingpage

Navigation

Landingpages verzichten oft auf eine Hauptnavigation, da sie den User ablenkt. Der Fokus soll nur auf dem Inhalt liegen.

Vertrauenselemente im Kopfbereich

Zeige deinen Usern schon beim ersten Eindruck, dass du ein seriöses Unternehmen bist. Viele User sind verunsichert durch Scam-Seiten oder Berichten von Betrügen im Internet. Durch die Darstellung von bekannten Vertrauenssigeln kannst du diese Ängste einfach minimieren.

Headline

Durch eine emotionale und relevante Überschrift zeigst du, dass der User hier richtig ist. Zusätzlich ziehst du ihn fast magisch in die Landingpage. Hier helfen u.a. die magischen Worte .

Heroshot als Bild oder Video

Bilder werden bevorzugt wahrgenommen, da es für unser Gehirn einfacher ist ein Bild zu entschlüsseln als Texte zu codieren. Nutzen psychologische Effekte wie den Gaze Cueing Effekt um die Wahrnehmung von Texten zu beeinflussen.

Einleitungstext

Nutze eine emphatische Einleitung um dich in das Problem des User einzufühlen.

Vorteilsauflistung

Menschen lieben es schnell das Wichtigste zu erfassen. Durch eine Auflistung von Vorteilen und der Nutzenbeschreibung kannst du die wichtigsten Punkte deiner Lösung „schmackhaft“ vermitteln.

Funktionsbeschreibung

Bei umfangreichen oder komplizierteren Produkten macht es Sinn die Funktion zu beschreiben. Im Idealfall kannst du es mit Bildern unterstützen.

Testimonials

Zeige glaubwürdige Kunden die mit deiner Lösung erfolg haben. Am besten mit vollen Namen und Telefonnummer. Gerne auch als kurzes Video.

Garantien

Kannst du für den Erfolg deiner Kunden gerade stehen? Durch eine Garantie z.B. 30 Tage Geld zurück kannst du deine Glaubwürdigkeit noch weiter untermauern.

Call to Action – CTA

Setze an strategisch wichtigen Punkten eine Handlungsaufforderung. In der Regel sind das markante Links oder Buttons.

Kontakt

Viele glauben der Footer wird nicht gelesen. Aber Erfahrungen aus hunderten von Mousetracking-Sessions zeigen, dass User den Footer lesen wenn sie noch unsicher sind oder mehr Interesse haben.