Website Designvorlagen mit Screenshots

SUI webpage mock up

Designvorlagen haben noch wenig mit professionellem Webdesign zu tun. Sie dienen der Abstimmung und Kommunikation von Feedback. Hier geht es nicht um die Farbdetails oder die tollen Effekte, sondern um die besten Ideen. Screenshots sind ideal, um Ihre Ideen zu illustrieren und eine erste Designvorlage zu erstellen. Wir benutzen hier das Screen-Capture Tool Snagit. Wenn Sie Snagit noch nicht haben, finden Sie hier eine kostenlose Testversion.

Suchen Sie eine Ausgangsbasis

Erfinden Sie das Rad nicht neu. Es gibt schon eine Menge toller Beispiele im Internet und wenn Sie ein wenig suchen, dann finden Sie eine Website, die ungefähr Ihren Vorstellungen entspricht. Machen Sie einen Screenshot der gesamten Seite, auch von den Inhalten, die erst beim Scrollen sichtbar werden. Hier unser Tutorial für scrollende Bildschirmaufnahmen.

https://techsmith-13.wistia.com/medias/xmgoc1yeav?embedType=async&videoFoam=true&videoWidth=640

Illustrieren Sie Ihre Ideen mit Screenshots

Finden Sie dann visuelle Elemente, die Sie in Ihrem Design haben wollen. Beispielsweise einen Anmeldelink für einen Newsletter oder eine Anmeldeoption für die Navigationsleiste. Farbe und Fonts spielen im Moment noch keine Rolle. Konzentrieren Sie sich auf die Ideen und die Funktionen, die Sie integrieren möchten. Konkrete Beispiele sind nützlich. Wenn Sie Screenshots machen, wählen Sie mit dem Snagit Fadenkreuz genau den Bereich aus, den Sie brauchen. Mit der Lupenfunktion können Sie die Auswahl in Snagit noch perfektionieren.

Wenn Sie zuviel im Bild haben oder die Aufnahme noch ändern wollen, benutzen Sie die Bearbeitungswerkzeuge in Snagit. Mit dem Werkzeug Auswahl können Sie Objekte bewegen und den Hintergrund automatisch füllen. Auch Bildgröße und Form können geändert werden.

Snagit Fadenkreuz bei der Aufnahme

https://techsmith-13.wistia.com/medias/r2rkorgo9h?embedType=async&videoFoam=true&videoWidth=640

Fügen Sie alle Elemente zusammen

Im Snagit Editor können Sie die verschiedenen Bildelemente kombinieren. Öffnen Sie zuerst die Aufnahme, die die gesamte Website zeigt. Ziehen Sie dann alle anderen Elemente aus der Ablage auf das Bild. Positionieren Sie Ihre Bilder, bis die Vorlage Ihren Vorstellungen entspricht.

Feinabstimmung Ihres Designs

Wenn das Layout stimmt, machen Sie die Feinabstimmung. Machen Sie einen rechten Mausklick auf Ihre Vorlage und verflachen Sie alle Elemente. So werden alle visuellen Bestandteile fester Bestandteil des Bildes. Mit Smart Move können Sie immer noch alles editieren, da Snagit optische Zeichenerkennung (OCR) integriert. Wenn Smart Move aktiviert ist, können Sie in jedem Bild Text ändern, Objekte bewegen und die Position von anderen Elementen bei Bedarf ändern.

https://techsmith-13.wistia.com/medias/5yz82p43st?embedType=async&videoFoam=true&videoWidth=640

Die Farbpipette macht die exakte Farbauswahl möglich, mit dem Werkzeug Text können neue Textfelder eingefügt werden und mit dem Werkzeug Form lassen sich weitere Ideen implementieren. Mit diesen Tutorials können Sie alle Bearbeitungswerkzeuge in Snagit schnell kennenlernen.

Nach Feedback fragen

Senden Sie Ihre Designideen direkt aus Snagit an die Kollegen. Wer Snagit installiert hat, kann schnell Sprechblasen, Pfeile und andere Elemente einfügen und Feedback illustrieren.

Designvorlagen illustrieren mit Screenshots

Screenshots sind ideal, um Website Vorlagen zu entwerfen. Sie können aber auch Programmoberflächen oder andere Designs gestalten. Holen Sie sich noch heute Ihre kostenlose Snagit Testversion für professionelle Screenshotaufnahme und -bearbeitung.

Kostenlose Testversion herunterladen

TechSmith

TechSmith ist der führende Anbieter von Software für die Bildschirmaufnahme und Produktivitätslösungen für die Kommunikation im Arbeitsalltag – sei es im Büro, unterwegs oder im Homeoffice – sowie für Bild- und Videoinhalte, die sich an Kundinnen und Kunden richten. Mit unseren preisgekrönten Flaggschiffprodukten, Snagit, Camtasia und Audiate, können auch Ungeübte beeindruckende Videos und Bilder erstellen und so ihr Wissen auf effektive Weise vermitteln – für bessere Schulungen, Tutorials und die alltägliche Kommunikation.

Abonnieren Sie den Newsletter von TechSmith

Der TechSmith Newsletter hat bereits über 200.000 Abonnenten. Melden auch Sie sich an und erhalten Sie Monat für Monat praktische Tipps und professionelle Ratschläge.

Abonnieren