Website Designvorlagen mit Screenshots

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.

 

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

 

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 Zeichnenerkennung (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.

 

 

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.

Screenshots sind ideal, um Website Vorlagen zu entwerfen. Sie können aber auch Programmoberflächen oder andere Designs gestalten. Sagen Sie uns, wenn Sie weitere Fragen haben oder Hilfe brauchen. Wir sind für Sie da!