Du hast eine Webseite und bist Dir nicht sicher, ob Du alles richtig eingestellt und umgesetzt hast? Dann wird es Zeit für einen SEO-Check. In einem guten SEO-Check wird sich herausstellen, ob Du alle wichtigen Maßnahmen zur richtigen Optimierung Deiner Webseite bereits vorgenommen hast und was Du gegebenenfalls noch verbessern könntest.
Unser SEO-Check schenkt Dir im ersten Teil einen allumfassenden Einblick ins Thema Onpage-SEO und Contentmaßnahmen. Im zweiten Teil geht es mit der richtigen Technik und der Security deiner Webseite weiter, während der dritte und letzte Teil sich mit den richtigen Linkbuildingmaßnahmen befasst. Dieser umfassende SEO-Check Guide wird Deiner Webseite neues Leben einhauchen und dafür sorgen, dass Du mehr Erfolg – messbar über Leads, Traffic und weitere wichtige SEO KPIs – im Online Business haben wirst. Viel Spaß beim Lesen!
Inhaltsverzeichnis:
Wann ist ein SEO Check sinnvoll?
Sei es bei Markteintritt in einen Markt, bei einem Webseiten-Relaunch, bei konkreten Seo/Webseiten Problemen oder im Allgemeinen. Ein Seo Check bzw. eine Seo Analyse Deiner Homepage ist grundsätzlich immer sinnvoll.
Der Seo Check lässt Dich Schwachstellen auf Deiner Homepage erkennen und bestenfalls bessere Maßnahmen zur Optimierung und Lösungen finden.
Im Folgenden bekommst Du bereits einige Tipps an die Hand, was Du beachten solltest und wie Du den ein oder anderen Fehler beheben kannst.
1. SEO Check – Onpage & Content
Keywordstrategie
Das Ziel der Keywordstrategie ist es herauszufinden, auf welche Keywords oder Schlüsselbegriffe Du Dich mit Deiner Webseite und Deiner SEO konzentrieren solltest.
Keywords zählen zu mit den wichtigsten Rankingfaktoren in der Suchmaschinenoptimierung. Bei der Keywordstrategie ist es zum einen wichtig, dass Dein Angebot zu den Schlüsselbegriffen passt, aber, auch dass die Suchintention der Nutzer getroffen wird.
Eine gute Keywordstrategie findet die richtigen Keywords und Longtail Keywords (Suchbegriffe und ganze Suchbegriffs-Gruppen in der Suchleiste der Suchmaschine) für Deine Webseite, die dann im nächsten Schritt entsprechenden Landingpages zugeordnet werden.
Wichtig ist hier wie bereits angedeutet, dass die Suchintention zum jeweiligen Keyword passt. Unterschiedliche Keywords bei der Suchmaschinenoptimierung können in verschiedene Suchintentions-Typen unterteilt werden:
- Informationsgetriebene Suchanfrage
Die Informationsgetriebene Suchanfrage beschreibt Suchbegriffe, die dem User eine Lösung für seine Fragen/Probleme finden lassen. - Transaktionsgetriebene- Suchanfrage
Mit der transaktionsgetriebenen Suchanfrage möchte der User sich über Angebote, Produkte oder Leistungen gezielt informieren. Eine direkte Kaufhandlung ist hier nicht das Ziel. Nehmen wir das Keyword „international management studium“: Dies kann beispielsweise eine Vorstufe zur Kaufhandlung implizieren, wie der Download von Infomaterial, ohne dass schon die direkte Kaufabsicht besteht. - Kommerzielle- Suchanfrage
Die kommerzielle Suchanfrage hingegen beschreibt eine Suchanfrage mit klarer Kaufabsicht, zum Beispiel „international management studium einschreiben“. - Navigationsgetriebene- Suchanfrage
Bei dieser Art der Suchanfrage möchte der Nutzer eine bestimmte Unterseite einer bestimmten Seite aufrufen. - Marken-Suchanfrage
Der User sucht explizit nach einer Brand, weil er die Webseite der Marke aufrufen möchte.
Was ist eine Suchintention?
Die Suchintention hinter einer Suchanfrage legt fest, was der User tatsächlich finden möchte und nicht das, was augenscheinlich am besten passt.
Da Google als Dienstleister seine Kunden, also die User, zufriedenstellen möchte, rankt nicht die beste “SEO Text” Seite auf der 1. Position, sondern die Seite, die dem Nutzer das beste Erlebnis und den größten Mehrwert verschafft. (u.a. gute Usability der Webseite)
Dies bedeutet allerdings nicht, das Keywords und Keywordrecherchen unnötig werden – ganz im Gegenteil. Die Keywords werden benötigt, damit die Suchmaschinen die Webseiten entsprechend einordnen können (=Suchmaschinenoptimierung).
Und genau aus diesem Grund ist eine ausgiebige Keywordstrategie so wichtig. Denn diese legt fest, welche Keywords aufgrund der Suchintention der Webseite am besten passen. Deshalb kannst Du Keywords ebenfalls als Teil Deiner Optimierung nutzen.
Keywordmap für strukturiertes SEO
Wenn Du eine Keywordstrategie als Grundlage der Suchmaschinenoptimierung entwickelt hast, geht es nun darum, den Überblick zu behalten – vor allem bei größeren Webseiten ist ein guter Überblick Deiner Suchmaschinenoptimierung und im Allgemeinen das A&O.
Dabei hilft Dir die sogenannte Keyword-Map. Diese listet die analysierten Keywords aus der Keywordstrategie auf und bietet die Grundvoraussetzung der gezielten SEO Steuerung Deiner Webseite.
Voraussetzung für eine gute und hilfreiche Keyword-Map ist dabei, dass sie gut durchdacht, ordentlich geführt und mit zusätzlichen Daten angereichert wird.
Dir fehlt die Idee zur Erstellung einer eigenen Keyword-Map? Dann haben wir genau das Richtige für Dich! Lade Dir jetzt kostenlos die Keyword-Map Vorlage runter und leg direkt mit der Onpage Optimierung los!
Alles, was auf Deiner Homepage optimiert wird, sind Onpage Faktoren, aus diesem Grund zählt die Keywordstrategie auch zu den Onpage Rankingfaktoren. (Onpage = Auf der Seite)
Der Aspekt Interne Verlinkung – Onpage
Mithilfe gezielter Interner Verlinkung verbesserst Du Dein SEO Potenzial.
Warum verbesserst Du damit Dein Seo Potenzial? Wie Du vielleicht weißt, werden in der Regel relativ wenige Webseiten auf relevanten, externen Webseiten verlinkt. Wenn Du Deine Webseite allerdings intern verlinkst, können diese Webseiten entsprechend über Links aufgerufen werden und die verbesserst so Dein Optimierungspotenzial.
Warum ist dieser Aspekt also so wichtig und warum ist er ebenfalls einer der Kriterien für eine gute Seo optimierte Seite? Na ja, Du solltest immer im Blick behalten: Je besser Dein Inhalt im Vergleich zu den Angeboten Deiner Mitbewerber erreichbar ist, desto höher ist die Chance auf ein gutes Ranking, also eine gute Platzierung in den Suchergebnissen (=in den Serps)!
Was bei der internen Verlinkung zu beachten ist:
- Die wichtigsten Seiten sollten möglichst häufig verlinkt werden, um sie leicht erreichbar zu machen.
- Achte darauf, dass Du einen aussagekräftigen Ankertext verwendest.
- Wichtig ist auch, dass die Startseite wichtige Unterseiten direkt anlinkt.
Menüstruktur
Ein weiterer Punkt, der bei der Analyse Deiner Webseite nicht zu kurz kommen darf ist die Menüstruktur und die Navigation durch Deine Webseite.
Da die Aufmerksamkeitsspanne der User rapide sinkt, entscheiden Nutzer, die auf Deiner Webseite landen innerhalb Millisekunden, ob diese Seite verständlich und einfach zu handhaben ist – wenn nicht, springt der User wieder ab und wandert geradewegs zu den Konkurrenten.
Die Navigation und auch die Menüstruktur nehmen demnach einen großen Einfluss darauf, wie sich der Besucher auf Deiner Webseite verhalten wird und ob er sich auch gut zurechtfindet, denn auch die Usability (=Benutzerfreundlichkeit) ist ein Rankingfaktor in der Suchmaschinenoptimierung.
Reihenfolge der Menüpunkte (F-Schema)
In diesem Teilbereich spielt nicht nur einfaches und deutliches Wording eine Rolle, sondern auch gutes Webdesign.
Das Webdesign sollte den Internetauftritt sinnvoll strukturieren und die Navigation über die Webseite erleichtern.
Die Faust-Regel beschreibt hier die Orientierung am F-Schema als geeignete Form. Dabei werden die Blicke eines durchschnittlichen Interessenten zum Start von der oberen linken Ecke der Webseite horizontal nach rechts geführt.
Im nächsten Moment wird davon ausgegangen, dass die Augen wieder zurück nach links springen und dann bei entsprechendem Content wieder nach rechts wandern.
Am Ende hat der Nutzer die Webseite mit seinen Augen von oben nach unten nach dem sogenannten „F-Schema“ gescannt. Das passiert innerhalb weniger Sekunden und bietet Dir eine gute Orientierung beim Navigationsaufbau Deiner Seite.
Die Orientierung am „F-Schema“ steigert die Usability Deiner Website und sollte daher beim SEO Check unbedingt berücksichtigt werden.
Der Aspekt Zielgruppen und Personas
Jeder Unternehmer, der etwas erreichen möchte, hat sich früher oder später mit dem Begriff der Zielgruppe auseinandersetzen müssen.
Wenn ein SEO Check ansteht, sollte die Zielgruppe oder bestenfalls detaillierte Personas schon bestehen, denn an ihnen sollte sich die Marketingstrategie und die entsprechenden Maßnahmen ausgerichtet werden.
Ist eine ausgiebige Zielgruppenanalyse oder eine Erstellung von Personas bisher noch nicht erfolgt, wird es spätestens im SEO Check Zeit, sich mit diesen Methoden zur Bestimmung der idealen Kundengruppe auseinanderzusetzen.
Im darauffolgenden Schritt werden dann alle nutzerzentrierten Inhalte der Seite auf ihre Nutzerfreundlichkeit und den Zielgruppenfit gecheckt.
Die Zielgruppenanalyse
Möchtest Du Deine Zielgruppe herausfinden oder genauer definieren, solltest Du in erster Linie folgende Daten Deiner bisherigen Kunden betrachten:
- Geografische Merkmale (Herkunft, Nationalität, usw.)
- (Sozio-) Demografische Merkmale (Alter, Geschlecht, Familienstand, usw.)
Solche statischen Informationen findest Du beispielsweise über die Analyse interner und externer Daten heraus. Bei der Analyse externer Daten helfen Dir Tools wie Analytics weiter.
Sammle diese Daten und clustere alle Daten in Segmentierungskriterien der unterschiedlichen Zielgruppen, die Du mit Deiner Seite anzusprechen scheinst.
Persona als detaillierter Zielkunde
Personas lassen sich als fiktiven idealen Wunschkunden beschreiben, mit Name, Bild, Alter, Familienstand, monatlichem Einkommen, persönlichen Problemen und Bedürfnissen.
Eine Abbildung eines bestimmten Kunden, hilft Dir Dich richtig mit Produkt, Dienstleistung und Marketingstrategie auf den Kunden einzustellen.
Möchtest Du eine Persona bzw. mehrere Personas für Dein Business erstellen, benötigst Du neben den statischen Eigenschaften Deiner Zielgruppe weitere Informationen:
- verhaltensbezogene Merkmale (Kaufverhalten, Preisflexibilität, Einkaufsstätten, usw.)
- sozioökonomische Merkmale (Bildungsstand, Gehalt, Beruf usw.)
- psychografische Merkmale (Persönlichkeit, Bedürfnisse, Motive, Lifestyle)
Gezielte Contenterstellung
Die vorangegangene Analyse Deiner Webseite hinsichtlich ihres SEO Potenzials (=Optimierungspotenzials), wird die Möglichkeiten bieten, weiteren Content und Kommunikationsmaßnahmen für Deine Seite zu planen.
Ob es dabei um die Erstellung von Kategorietexten geht, das Schreiben von Blogartikeln oder ob es um den gezielten Einsatz von Bildercontent geht, hängt natürlich von Deiner Webseite und Deinem Angebot ab.
Die Qualität des Contents
Die Qualität von Content sollte immer eine herausragende Rolle spielen, wenn es um die Contenterstellung geht. Im SEO Check Deiner Seite wird überprüft, welche Qualität Deine bereits erstellten Contentstücke aufweisen. Bei mangelnder Qualität oder fehlendem SEO Impact, bietet sich die Neuerstellung von wichtigen Contentteilen oft an.
Beim SEO Check auf die verschiedenen Qualitätsfaktoren im Content-Marketing zu achten, macht den Text für die Nutzer und die Suchmaschine besser.
Aber nicht nur für Deine Nutzer spielt die Qualität Deines Contents eine wichtige Rolle, sondern auch für die Suchmaschine. Diese spielt Dir einen höheren Trustfaktor zu, wenn Du die Qualitätsmerkmale bei der Erstellung von Content einhältst, so kannst Du auch Deine Webseite optimieren.
Contentpositionierung
Die richtige Positionierung des Contents ist in Bezug auf Seo mindestens genauso wichtig, wie gute Inhalte, die einen Mehrwert liefern und die Suchintention des Nutzers treffen.
Bei der Contentpositionierung geht es um den logischen Aufbau der Webseite, der gestalterisch ansprechend aufbereitet werden sollte. Um eine gute Struktur und einen logischen Aufbau auf eine Seite zu bringen, bieten sich Wireframe Tools an. Wireframes helfen in der Planungsphase bei der Konzeption der Webseite.
Wireframe für Webseiten Aufbau
In der Contentpositionierung geht es darum, den Inhalt auf einer Website gezielt zu platzieren und zu präsentieren. Es gibt noch viele Webseiten und Online-Shops, die ihren Haupt-Content am Ende der Webseite unschön und lieblos ausgeben lassen.
Dieser Content hat nur einen Zweck, nämlich für gute Rankings in den Suchmaschinen zu sorgen. Einen echten Mehrwert für den Nutzer bieten diese Texte meist nicht.
Damit der Content und damit sind nicht nur reine Textblöcke, sondern natürlich auch Bilder, Videos und Grafiken gemeint, dem Nutzer einen Mehrwert bietet und gestalterisch ansprechend ist, muss die Webseite oft etwas umstrukturiert werden.
Hier empfiehlt es sich mit Wireframes zu arbeiten. Die einer Skizze ähnelnden Dokumente bilden den Aufbau und die neue Konzeption der Webseite hervorragend ab und beschränken sich dabei auf das Wesentliche.
Was ist ein Wireframe?
Ein Wireframe ist ein konzeptioneller Entwurf einer Webseite, der während der Planungsphase erstellt wird. In einem Wireframe werden nur die wichtigsten Elemente dargestellt, was bedeutet, dass Funktionalität und gestalterische Elemente noch keine Rolle spielen.
Daher wird auf Bilder, Grafiken und Farben komplett verzichtet, um das Design bewusst in den Hintergrund zu stellen. Die Konzeption der Webseite, also die Struktur und Logik, soll mit dem Wireframe geplant und dargestellt werden.
Zu klärende Punkte, bevor es mit dem Wireframe losgeht
Bevor die Ausarbeitung des Wireframes beginnt, muss bekannt sein, welche Inhalte die Webseite transportieren und wer später mit ihr interagieren soll. Hierbei sollte die Definition der Zielgruppe und die erstellten Personas herangezogen werden.
Falls in Betracht gezogen wird, die Navigationsstruktur anzupassen, sollte dies vorab final geklärt werden. Die Navigation ist ein grundlegendes Element von Struktur und Logik der Webseite, die im Wireframe korrekt abgebildet werden sollten.
Miro ist ein “unendliches” Online-Whiteboard. Teams können damit in Echtzeit und asynchron arbeiten. Besprechungen und Brainstormings funktionieren, als wenn alle im selben Raum wären – und doch sitzen alle im Home Office.
Mit dem Board können agile Arbeitsabläufe dargestellt und Strategien visualisiert werden. Die Oberfläche ist dabei intuitiv und leicht zu bedienen. Verschiedene Vorlagen und Integrationen runden das Bild ab: Es gibt ein Mindmap-Tool, überdies können verschiedene Projekt Management Tools wie Asana mit dem Board verknüpft werden.
Auf notwendige Unterlagen und Dokumente kann direkt vom Whiteboard aus zugegriffen werden, so können zum Beispiel Google Docs Dokumente in Miro bearbeitet werden. Sogar Wireframes können erstellt werden. Es scheint, als gebe es für jeden kollaborativen Anwendungsfall eine Lösung. Sogar externe Personen können zur Zusammenarbeit eingeladen werden. Damit lassen sich (online) Workshops mit Kunden oder Seminare interaktiv gestalten.
Wer selbst Social Media Kanäle betreibt, kennt das Problem, hochwertige Grafiken für seine Profile erstellen zu müssen. Ob Facebook Cover, Youtube Kanalbild oder Insta-Story. Wie war noch mal das passende Format? Und wie bekommt man die coole Schrift ins Bild? Mit dem australischen Dienst Canva sparst Du Dir diese Sorgen. Denn Canva bietet für alle Gelegenheiten vorformatierte Grafiken an. Du kannst bei diesem Cloud-Service aus einer Vielzahl von kostenlosen oder niedrigpreisigen Bildern, Grafiken, Fonts und Designs auswählen, oder eigene Bilder hochladen und diese verschönern. Mit Canva ersetzt Du den Grafiker, der für das frische Design Deines neuen Blogpostings gleich wieder viel zu viel Honorar abrechnen möchte. Mit Canva kannst Du Dir also kostengünstig eine ganze Corporate Identity zusammenstellen. Nicht nur für Deine Social Media Kanäle, sondern auch für den gesamten Auftritt Deines Geschäftes. Inklusive Logo, Flyer oder Plakat und Broschüre. Deinen Gestaltungsmöglichkeiten sind mit Canva (fast) keine Grenzen gesetzt.
Schnelle Porträtauswahl
Drehbare Muster
Umfassende Neugestaltung
Wer ein Tool sucht, mit dem schnell Prototypen erstellt werden können, der sollte Adobe Photoshop cc näher betrachten. Mit der Software können Wireframes problemlos erstellt werden. Die Funktionalität der Software hat sich im Laufe der Jahre erhöht, wodurch Adobe Photoshop cc zum idealen Wireframing Tool für Webdesigner wurde.
Mit der Software können Wireframes und Prototypen für Kunden erstellt werden. Auch Designs für Webentwickler können mit dem Programm erstellt und geteilt werden. Photoshop CC besitzt vielseitige Funktionen, wie beispielsweise ein Cloud-Setup für Teamarbeit und verschiedene Gestaltungstools. Des Weiteren können verschiedene Ebenen mit dem Programm isoliert werden. Einziges Manko, im Vergleich zu anderen Wireframe Tools, ist der hohe Preis von Adobe-Programmen.
Der Adobe Illustrator ist nicht nur zum Darstellen von Bildern und Grafiken nutzbar. Auch als Wireframing Tool kann das Adobe-Programm eingesetzt werden. Das Programm ermöglicht beispielsweise eine Wireframe-Vorschau. Der Illustrator kann zwischen dem gängigen Vorschau-Modus und dem Modus für die Wireframe-Vorschau wechseln. Der interessierte Nutzer ist mit dem Programm in der Lage, nur eine bestimmte Ebene zu zeigen. Im Internet finden sich mehrere Tutorials, wie der Adobe Illustrator als Wireframe Tool eingesetzt werden kann.
Adobe InDesign CC
von Adobe
Digitale Magazine erstellen
Für Designer und Layouter
Team-Arbeit leicht gemacht
InDesign von Adobe ist eine Veröffentlichungs-App, die eigentlich für Magazin- und Book-Veröffentlichungen gedacht ist. Das Programm kann aber auch als Wireframing Tool genutzt werden. Die Wireframes sind nicht komplex und es handelt sich um Medium- oder Low-Fidelity Wireframes. Aber für einfache Aufgaben kann das Programm eingesetzt werden. Es besteht auch die Möglichkeit, mit dem Programm interaktive Prototypen zu gestalten. InDesign besitzt wesentlich mehr Funktionen als “nur” das Drucken von Magazinen und Büchern. Interessierte Nutzer können beispielsweise interaktive Medien für eReader und iPad produzieren. Die Werkzeuge im Programm erlauben zudem die Einbindung von Animationen. Im Internet sind passende Tutorials zu finden, die erläutern, wie Adobe InDesign CC zur Erstellung von Wireframes genutzt werden kann.
Die Adobe-Produktreihe mit Adobe-Reader und vielen weiteren Programmen, ist weltweit bekannt. Mit Adobe XD CC gehört ein Wireframe Tool zur Adobe-Reihe, dass für einfache und komplexe Prototypen genutzt werden kann. Wer bereits als Benutzer registriert ist, der kann das Tool problemlos aus der Creative Cloud downloaden. Adobe XD CC ist mit intuitiven Tools ausgestattet. Interessierte Nutzer können Routineaufgaben schnell und problemlos erledigen. Dazu zählt beispielsweise ein zeitsparendes Wiederholungsraster und eine Zeichenfläche, die flexibel gestaltet werden kann. Wird das Design geändert, so erfolgt auch eine automatische Änderung im Prototyp. Die Arbeiten in Adobe XD können problemlos für andere Nutzer oder Teams bereitgestellt werden. Wer Android- oder iOS-Geräte nutzt, der kann den Prototyp jederzeit überprüfen und das in Echtzeit. Wer keine Volllizenz für CC möchte, der kann Adobe XD auch in einem Monatsabonnement nutzen. Das Abo in der Creative-Cloud ist für 11,89 Euro monatlich erhältlich.
Affinity Designer
von Serif (Europe) Ltd.
Montage von Panoramabildern
Unbegrenzte Anzahl an Ebenen
Bearbeitung von 360°-Bildern
Der Affinity Designer ist eine elegante sowie leistungsstarke App, die für kreative Köpfe gedacht ist und den Workflow optimieren kann. Das Wireframe Tool kann auf Mac-Systemen und Windows-Computern genutzt werden. Der interessierte Nutzer kann das Tool auch auf dem iPad einsetzen. Auf allen kompatiblen Systemen sind Funktionen und Dateiformat identisch. Das bedeutet, dass verschiedene Nutzer, auch bei unterschiedlichen Betriebssystemen, an einer Datei arbeiten können. Der Affinity Designer ist das ideale Wireframe Tool für Teamprojekte. Gleichzeitig gilt das Tool eine preiswerte Alternative zu anderen Projekt-Darstellungsprogrammen, wie beispielsweise Illustrator. Der Affinity Designer ist für Adobe-Nutzer ideal aufgebaut. So können notwendige Tools über eine Werkzeugleiste ausgewählt werden. Web- und Appdesigner können Pinsel, Stifte und einen Texteditor nutzen. Gleichzeitig stehen verschiedene Bearbeitungsoptionen zur Verfügung, mit denen schnell die gewünschten Grafiken erstellt werden können. Der Preis von Affinity Designer ist moderat und gegenüber Adobe-Lösungen preiswert. Für die Nutzung von Adobe-Software für Designer wird in der Regel ein monatliches Abonnement abgeschlossen. Affinity Designer ist hingegen schon für einen Preis von 54,99 Euro erhältlich. Zudem gibt es eine Testversion, die das Ausprobieren der Software ganz unverbindlich ermöglicht.
Axure zählt zweifelsohne zu den professionelleren Tools in dieser Übersicht. Da Tool hat einen enormen Funktionsumfang und eignet sich sowohl für das Erstellen von Wireframes als auch für Mockups. Es ist bereits seit über zehn Jahren am Markt und wird ständig weiterentwickelt und mit neuen Features ausgestattet. Wenn du das erste Mal mit Axure arbeitest, benötigst du wahrscheinlich etwas Zeit, um dich mit der Bedienung und den umfangreichen Funktionalitäten auseinanderzusetzen.
Der Funktionsumfang mag dich auf den ersten Blick erschlagen. Aber nach kurzer Einarbeitungszeit und mit einigen Blicken in die Tutorials und Demos wird dir vieles schnell klarer werden. Weil das Tool so mächtig ist, sind allerhand Möglichkeiten für deine Arbeit vorhanden. Axure bietet eine Menge an Vorlagen und vorgefertigten Elementen zur Auswahl an. All diese Elemente kannst du frei konfigurieren und beliebig anpassen. Durch die Möglichkeit, Lightboxen oder eine Flyout-Navigation einzubauen, lassen sich mit Axure realistische und hochwertige Klickdummies erstellen.
Auch komplexe Prototypen mit vielen Funktionalitäten lassen sich mit Axure einfach bauen, ohne eine einzige Zeile Code zu schreiben. Mit Axure kannst du in hoher Auflösung arbeiten und sehr realistische Prototypen erstellen, die auf verschiedenen Endgeräten getestet werden können. Axure bietet dir außerdem die Möglichkeit deine Arbeit mit Kommentaren, Erklärungen und Fußnoten zu ergänzen. Da man diese später auch exportieren kann, lässt sich mit Axure nicht nur ein Mockup, sondern auch der erste Entwurf für ein Konzeptpapier erstellen.
Ein großer Vorteil – gerade bei größeren Projekten – ist, dass mehrere Nutzer zeitgleich an einem Mockup arbeiten können. Alle Änderungen werden gespeichert und sind sofort für die anderen Teammitglieder sichtbar.
Balsamiq Mockups
von Balsamiq Studios, LLC
Modelle erstellen
Schnelle Wireframing-Software
30 Tage kostenlose Testversion
Balsamiq Mockups wird von den gleichnamigen Balsamiq Studios herausgegeben und ist eines der bekannteren Tools im Mockup-Bereich. Es ist sowohl als Desktop-Anwendung zur Installation auf deinem Rechner als auch als webbasierte Anwendung aus der Cloud verfügbar. Du kannst mit dem Mockup-Tool also online und offline arbeiten. Balsamiq Mockups ist ein großartiges Tool für Non-Techies. Gerade Einsteiger in der Welt des User-Experience-Designs werden Freude an dem Tool haben, denn es erleichtert die ersten Schritte in der Welt von Mockups, Wireframes & Co enorm. Denn die Bedienung ist denkbar einfach und intuitiv und du kannst schnell vorzeigbare Ergebnisse liefern.
Balsamiq unterstützt dich mit zahlreichen vorgefertigten Elementen, die du zur Erstellung deiner Mockups verwenden kannst. Die Elemente lassen sich einfach via Drag & Drop anordnen, verschieben und entfernen. Das Tool enthält auch praktische Schaltflächen und Listen, die die Arbeit erleichtern. Sie können auf der Zeichenfläche entsprechend angepasst werden. Die Mockups bei Balsamiq sind absichtlich relativ grob mit geringer Wiedergabetreue gehalten. Davon versprechen sich die Entwickler, dass die Nutzer viel Feedback bekommen und leichter Diskussionen entstehen.
Balsamiq läuft auf Windows, MacOS und in einer webbasierten Version. Die Zusammenarbeit mit Apps von Drittanbietern ist mit Balsamiq einfach möglich. Wie erwähnt ist es durch die Desktop-Versionen auch möglich, offline zu arbeiten. Balsamiq ermöglicht auch einen einfachen Zugang zu Online-User-Tests. Die kostenpflichtige Version startet bei 5 Dollar pro User in der Google-Drive-Version. Die Cloud-Version startet mit 9 Dollar pro User.
Cacoo
von Nulab, Inc.
Intuitive Tools, schöne Vorlagen
App-Integrationen mit Google Drive
Daten Import & Export
Cacoo ist ein Wireframe Tool, das eine breit gefächerte Auswahl an Vorlagen und Designs bietet. Wireframe-Vorlagen sind sowohl für iOS als auch für Android und Desktop-Webseiten erhältlich. Cacoo kann beispielsweise zur Erstellung von Nutzeroberflächenmodellen und Drahtgittermodellen verwendet werden. Das Wireframing Tool ist für Brainstorming mit Teams weltweit gedacht. Es besitzt zahlreiche Funktionen und ist mit simplen Freigabeoptionen ausgestattet. Zu den Freigabeoptionen gehören beispielsweise Exportieren, Einbetten und Verknüpfen. Funktionen wie App-Integrationen mit Confluence, Google Drive und mehr gehören ebenfalls zum Funktionsumfang des Tools. Für Webdesigner und Appdesigner interessante Funktionen wie Bildschirmaufnahme, Feedback-Management, Kollaboration, Drag & Drop sowie Desktop-Interface sind ebenfalls im Tool vorhanden. Cacoo ist in einer 14-Tage-Testversion erhältlich und bietet in der Testversion auch die Möglichkeit, Brainstorming mit dem Team zu betreiben. Cacoo wird mit einem Startpreis von 5 US-Dollar pro Monat angeboten. Ein rund um die Uhr erreichbarer Online-Support (Live Vertreter) sowie weitere Supportleistungen machen das Tool für Web- und Appdesigner interessant.
Das in deutscher Sprache erhältliche Tool kann für den privaten Zweck genutzt werden, ist aber auch bis zur Teamnutzung ausbaubar. Projekte und Ideen werden als Diagramm mit Bildern und Text aufgebaut. Jederzeit können neue Knotenpunkte und Verzweigungen hinzugefügt werden. Verwandte Themen können eingebunden und dargestellt werden. In der kostenfreien Version sind drei private (geschützte) Diagramme möglich und unlimitiert öffentliche Diagramme. Wer sein Team am Ideenaufbau mitarbeiten lassen möchte, hat dazu in der bezahlten Version ausführliche Möglichkeiten. Coggle ist ein Online-Tool und Ideen und Projekte werden im Browser bearbeitet und sofort sichtbar mit allen Änderungen. Genutzt werden kann das Tool im Privatbereich, aber auch für weitverstreute Teams, die Wert auf schnelle Sichtbarkeit von Änderungen legen.
Figma ist ein Wireframing Tool, das Prototypen zum Leben erwachen lassen kann. Der Webdesigner kann Interaktionen definieren und der Nutzer erhält ein einzigartiges Webseitenerlebnis. So lassen sich beispielsweise Interaktionen für Bewegung, Drücken und Klicken definieren. Figma ist für die Teamarbeit sehr gut geeignet, kostet aber bereits in der Einzelnutzer-Lizenz 89 US-Dollar. Die Besucher bestimmen den Preis der Volume-Lizenz. Figma ist von Designern konstruiert und für Designer programmiert. Das Wireframing Tool ist dem vielfach genutzten Programm im Aufbau ähnlich. Die Basisfunktionen sind wie bei Sketch angeordnet und die notwendigen Mode-Tabs sitzen, wie bei Keynote, auf der linken Seite. Ein Webdesigner, der mit Sketch arbeitet, muss sich nicht großartig mit dem Kennenlernen neuer Tools beschäftigen. Auch die Figmashortcuts sind Sketch ähnlich und ermöglichen dem Nutzer eine Wireframe-Erstellung in kurzer Zeit.
Fluid UI ist ein Wireframe Tool, das auch zur Erstellung von Prototypen genutzt werden kann. Zur Nutzung des Programms wird Chrome als Internetbrowser empfohlen. Der Internet Explorer gilt als nicht kompatibel mit Fluid UI. Bei Nutzung der Internetbrowser Safari und Firefox kann es zu Problemen mit Fluid UI kommen. Die Hauptfunktionen des Programms sind integrierte Bibliotheken, Export und Live-Video-Präsentationen. Das Tool besitzt Wireframe-Bibliotheken, Material-Design-Bibliotheken und mehr als 2000 Icons und Widgets, die auf Kundenbedürfnisse zugeschnitten werden können. Die Bedienung erfolgt einfach per Drag & Drop. Der Nutzer kann seine Ideen per Live-Video präsentieren und mit Kunden sowie Mitarbeitern kommunizieren. Allerdings ist kein Multiple-Images-Upload möglich. Wireframes können exportiert werden. Weitere Funktionen, die Fluid UI mitbringt, können von der Herstellerseite entnommen werden. Das Programm kann schnell erlernt werden und es sind keine Programmierkenntnisse zur Nutzung des Tools notwendig. Mit Fluid UI können High-Fidelity Wireframes erzeugt werden. Das Programm ist als Desktop-App und Web-App erhältlich. Die Kosten sind von der Version abhängig. Für die Individual-Version müssen 8,25 US-Dollar pro Monat bezahlt werden. Die Pro-Version kostet 19,08 US-Dollar pro Monat und für die Team-Version werden 41,58 US-Dollar pro Monat fällig. Fluid UI ist für Anfänger, Fortgeschrittene und Profis gleichermaßen interessant. Fluid UI hat viele Vorteile, wie vielseitige Team-Funktionen und real-time Wireframing, zu bieten.
Framer ist ein quelloffenes Wireframing Tool. Das Tool wird gerne von Designern genutzt und ist in der Lage, Photoshop-Dateien bzw. -Ordnergruppen als “Views” darzustellen und diese in HTML-Dokumenten als Grafiken zur Verfügung zu stellen. Die Darstellung der Ordnergruppen von Photoshop-Dateien und die anschließende Verfügbarkeit als Grafiken in einem HTML-Dokument erfolgt bei Framer vollautomatisch. Der quelloffene Code gewährleistet Flexibilität und das Tool ist als visueller Editor einfach zu bedienen. Die angelegten Elemente werden automatisch in den korrekten Code übertragen. Für Framer existieren viele Tutorials im Internet, die den Einstieg in das System und in die Bedienung erleichtern sollen. Vor dem Kauf von Framer sollten die Tutorials beachtet werden. Das Tool kostet ca. 15 US-Dollar pro Monat und gilt als nicht preiswert. Wer den Preis nicht zahlen möchte, bevor er weiß, wie das Tool genau funktioniert, der sollte sich nach Funktionen und Support für Framer erkundigen.
Gliffy
von Gliffy by Perforce
Diagrammsoftware
Diagramme für Designprojekte
Änderungen beibehalten und verfolgen
Mit Gliffy können Mindmaps, Flowcharts und Diagramme erstellt werden. Das Tool aus San Francisco kann aber auch zur Erstellung von Wireframes genutzt werden. Einfache Kreationen im Mockup-Bereich sind mit dem Tool möglich. Durch Drag & Drop kann der Nutzer stylishe Designs kreieren und benötigt dafür nur wenige Klicks. Gliffy besitzt verschiedene Plugins, wie JIRA, Confluence und Google Drive. Gliffy ist in einer kostenlosen Variante erhältlich. Es sind auch kostenpflichtige Varianten auf dem Markt zu finden, die vielseitige Funktionen besitzen. Die Preise liegen zwischen 4 US-Dollar und 8 US-Dollar, die monatlich zu entrichten sind und für einen Nutzer gelten. Das Tool Gliffy ist web-basiert und erlaubt den Nutzern einen Zugriff unabhängig von Ort und Zeit. Wer komplexe Prototypen und Wireframes erstellen möchte, der sollte ein anderes Programm nutzen. Ein HTML5-Editer ermöglicht es dem Nutzer, auch große Diagramme problemlos zu erstellen.
HotGloo ist ein Wireframe Tool, das auch Prototypen erstellen kann und zur Entwicklung von Wireframes für mobile Geräte, Web und Wearables geeignet ist. HotGloo wird auch als Wireframe-, UX- und Prototyping-Tool bezeichnet. Das Programm dient zum High-Fidelity Wireframing und besitzt eine umfangreiche UI Bibliothek. Es können Stencils, Widgets und viele interaktive Elemente genutzt werden. Programme, wie HotGloo, die High-Fidelity Wireframing ermöglichen, sind hervorragend für den fortgeschrittenen Designprozess geeignet. Der Nutzer von HotGloo sollte bereits Erfahrung mitbringen. Das Wireframe Tool ermöglicht einen ortsunabhängigen Zugriff und ist webbasiert. Die Teamarbeit wird durch diese Voraussetzungen erleichtert und kann weltweit sowie in Echtzeit erfolgen. Es gilt zu beachten, dass eine Nutzung auf iOS-Geräten schwierig ist, denn das Wireframe Tool basiert auf Flash. HotGloo wird in verschiedenen Versionen angeboten. Die Varianten unterscheiden sich in der Anzahl der aktiven Projekte und Nutzer. Wer HotGloo nutzen möchte, der kann eine 15-tägige Testphase wählen und anschließend monatliche Nutzungskosten bezahlen. Je nach Version ist mit Preisen von 5,10 Euro bis 41,65 Euro monatlich zu rechnen. Eine komplett kostenlose Version wird nicht angeboten.
InVision Freehand
von InVisionApp Inc.
Design-Entwicklungsplattform
Mobile und Web-Produkte überprüfen
Kostenlos testen
InVision Freehand kann zum Designen von Präsentationen, zum Planen von Präsentationen und zum Wireframing eingesetzt werden. Das Programm Freehand ist ein sogenanntes Whiteboard-Tool, das in Besprechungen eingesetzt wird und zur Skizzierung von beispielsweise Wireframes mit Teamteilnehmern genutzt wird. Freehand kann in Besprechungen genutzt werden und ist mit entsprechenden Steuerelementen ausgestattet. Wenn Freehand registriert und angemeldet ist, dann kann es problemlos zur Skizzierung genutzt werden. In Besprechungen werden Registerkarten im Programm angelegt, auf die die Teamteilnehmer zurückgreifen können.
InVision Studio
von InVisionApp Inc.
Produktdesignplattform
Wireframing Tool
Abo-Modelle zur auswählen
InVision Studio ist ein Wireframing Tool, das auf Animationen und Prototyping setzt. Das Programm wurde in der Beta-Phase getestet und wird beispielsweise für Low-Fidelity Wireframing genutzt. Low-Fidelity bedeutet, dass mit wesentlich weniger Details ein Prototyp erstellt wird als beim High-Fidelity Wireframing. Low-Fidelity Wireframing ist für die erste Prototyp-Generierung interessant, denn es benötigt weniger Zeit und die Fehlerquote ist gering. InVision Studio ermöglicht eine Wireframe-Erstellung bis hin zur Prototyp-Gestaltung, die auf Endgeräten getestet werden kann. InVision Studio ist einfach gestaltet und intuitiv bedienbar. Wer ein Wireframe Tool sucht, das Stärken im Bereich Kollaboration besitzt, dann ist eher das Tool Figma ratsam. InVision Studio soll im Starter-Bereich 15 US-Dollar pro Monat kosten. Das Team-Modell wird mit 99 US-Dollar pro Monat beziffert. Die Preise sind gestaffelt und es gibt weitere Abo-Modelle zur Auswahl, aus denen sich der interessierte Nutzer das passende Modell heraussuchen kann.
Justinmind ist ein Wireframe Tool, mit dem High-Fidelity Wireframes erzeugt werden können. Der interessierte Nutzer kann auch interaktive Prototypen erstellen, die für Webseiten (responsive), Wearables und mobile Apps geeignet sind. Die Nutzung von Justinmind erfolgt intuitiv und das Hinzufügen von Elementen kann per Drag & Drop vorgenommen werden. Dennoch sollten Web- und App-Designer Erfahrung mitbringen. Ohne Vorkenntnisse können nicht alle Funktionen zufriedenstellend genutzt werden. Das Tool besitzt eine ausführliche UI Bibliothek und stellt diverse Stencils und Master Pages zur Verfügung. Justinmind kann heruntergeladen werden und steht als Client für Windows- und Mac-Systeme zur Verfügung. Die Funktionen zur Kollaboration sind umfangreich, können allerdings nur mit Internetzugriff genutzt werden. Es steht eine kostenlose Version von Justinmind zur Verfügung, deren Funktionsumfang eingeschränkt ist. Des Weiteren kann ein Abonnement-Modell für 19 US-Dollar pro Nutzer und Monat gebucht werden. Wer eine einmalige Lizenz für das Programm erwerben möchte, der muss mit einem Preis von 495 US-Dollar rechnen. Der Preis gilt ebenfalls nur für einen Nutzer.
Lucidchart
von Lucid Software Inc.
Intelligente Diagramme für jedes Team
Diagramme für Ideen, Informationen und Prozesse
Kostenlos registrieren
Wer interaktive und zur Demonstration bereite Wireframes und Mockups erzeugen möchte, für den ist Lucidchart interessant. Das Wireframe Tool ermöglicht das Designen, Teilen und Testen von interaktiven Wireframes. Die Funktionen des Programms machen es Designern einfach, das passende Wireframe zu finden. Das Tool ist Cloud-basiert und muss nicht heruntergeladen werden. Des Weiteren muss auch kein Update erfolgen, denn die Cloud-basierte Variante ist stets aktuell. Ein weiterer Vorteil der Onlinenutzung des Tools ist, dass es von jeder Plattform und jedem internetfähigen Gerät erreichbar ist. Es kann auch in andere Services, wie beispielsweise Slack und G Suite integriert werden. Per Drag & Drop können vorkonfigurierte Elemente hinzugefügt werden. Der Nutzer hat eine breite Auswahl an Formatierungsoptionen und kann Wireframes problemlos erstellen. Das Programm ist zudem für Team-Kollaboration ausgelegt. Team-Mitglieder können Feedback abgeben oder sogar ein In-Editor-Chat oder Video-Chat wahrnehmen. Neben Wireframe Tools sind auch Mockup Tools im Programm integriert. Der Nutzer kann seine Arbeit direkt von Mockup zu Wireframe transferieren. Es können problemlos spezifische Details addiert werden.
Die Software ist als Testversion online nutzbar. Wer weitere Funktionen benötigt, der kann ein Upgrade wahrnehmen. Die Pro-Version erlaubt beispielsweise Zugang zu mehr Designs, ermöglicht Google-Integrationen und ist zu Visio kompatibel. Der interessierte Nutzer kann eine Vielzahl an verschiedenen Formen und Vorlagen nutzen. Es stehen Widgets, UI Container und mehr zur Verfügung. Lucidchart bietet zudem die Möglichkeit, Werkzeuge und Formen Kundenwünschen anzupassen. Der Nutzer kann Umrisse. Vorlagen, Linien und vieles mehr selbst gestalten und in Wireframes integrieren. Lucidchart ist einfach zu nutzen und kann auch ohne große Vorkenntnisse bedient werden. Die Nutzung ist intuitiv und auch für Anfänger geeignet. Fortgeschrittene und Profis können ebenfalls von dem Wireframe Tool profitieren. Das Programm ermöglicht den Support von Microsoft-Visio-Dokumenten. Es ist keine spezifische Plattform für die Nutzung von Lucidchart notwendig. Das Programm ist ausschließlich zur Onlinenutzung gedacht und kann von Mac-, iOS-, Windows- und Android-Geräten erreicht werden. Es gibt verschiedene Varianten von Lucidchart. Je nach Bedarf, kann die Basic-, Pro- oder Team-Version genutzt werden. Die Basic-Variante kostet 4,95 US-Dollar pro Monat für einen Nutzer. Die Pro-Version liegt bei 8,95 US-Dollar monatlich für einen Nutzer. Wer die Team-Version benötigt der startet mit einem Preis von 20 US-Dollar pro Monat und 7 US-Dollar pro Nutzer.
Marvel ist ein Wireframing Tool, das mit Android- und iOS-Geräten genutzt werden kann. Das Tool ist auch als Web-App erhältlich. Die Anmeldung erfolgt bei dem Wireframe Tool über einen Dropbox-Account. Die Anmeldung über den Account ist vorteilhaft, da der Nutzer Prototypen über die Dropbox synchronisieren kann. Das Single-Modell ist als kostenfreie Version erhältlich. Es gibt auch eine Proversion, die als Abo-Modell gebucht werden kann. Die Proversion kostet als Single-Modell ca. 8 Euro bis 10 Euro pro Monat. Ein Abonnement kann auch als Team-Modell und Firmen-Modell gebucht werden. Die Proversion ist auf die Arbeit im Team ausgelegt und enthält kein Marvel-Branding im Prototyp.
Das Marvel-Tool ist als Web-App erhältlich, die schnell und unkompliziert lineare Prototypen abbildet. Die App eignet sich hervorragend, um die ersten Prototypen mit dem Team abzustimmen. Komplexe Darstellungen und Prototyp-Konzepte sind mit der mobilen App nicht abbildbar. Die Web-App von Marvel besitzt mehr Funktionen als die mobile App und enthält ein globales Management für Teammitglieder und Teams. Die Web-App enthält eine große Auswahl an Formaten zur Erstellung eines Prototyps. Die Prototypen können für Tablet-PCs, Desktop-Computer und Mobiltelefone erstellt werden. Sogar die Erzeugung von Prototypen für Apple-Watches ist möglich.
Microsoft PowerPoint
von Microsoft
Präsentieren wie ein Profi
Schnell zum professionellen Design
Gemeinsam an Projekten arbeiten
Die Software ist Bestandteil des Officepaketes von Microsoft und kann für Präsentationen, aber auch für das Mindmapping genutzt werden. Dazu sind Vorlagen sowie Buttons und Pfeile in der Software eingebaut. Powerpoint ist hat nicht so viele Möglichkeiten wie Mindmapping Tools, die von Teams bearbeitet werden können und hochkomplexe Darstellungen und Verzweigungen anbieten. Somit wird Powerpoint meist für einfaches Mindmapping innerhalb von Unternehmen, die Microsoft Office nutzen, eingesetzt.
Microsoft Visio
von Microsoft
Technische Diagrammen erstellen
Microsoft SQL Server-Datenbanken
Microsoft Access-Datenbanken
Microsoft Visio wird zur Erstellung von technischen Diagrammen genutzt. Es können auch Wireframes erstellt werden, obwohl das nicht die Stärke des Programms ist. Wer allerdings an die Nutzung von Microsoft-Programmen, wie Excel oder Word, gewohnt ist, dem wird die Nutzeroberfläche bekannt vorkommen. Microsoft Visio bietet vergleichsweise wenige Funktionen zum Erstellen von Wireframes. Das Programm offeriert Add-On-Tools, wie beispielsweise Swiper. Das ermöglicht es Nutzern, einen HTML-Prototypen zu kreieren und zu exportieren. Microsoft Visio ist zum Download gedacht und benötigt die Windows-Plattform. Das Programm kostet in der einfachen Version 5 US-Dollar pro Monat und Nutzer. Für die Nutzung der Pro-Version müssen 15 US-Dollar pro Monat und Nutzer bezahlt werden.
Wer Ideen aufschreiben, ausbauen, weiterentwickeln und seine Gedanken in einen Zusammenhang zur Idee bringen möchte, kann dies wunderbar mit dem englischsprachigen Tool MindNode. Um zu starten kann die kostenfreie Version genutzt werden. Wer aber seine Ideen und Konzepte vollumfänglich ausarbeiten möchte, kann auf die kostenpflichtige Pro-Version umsteigen. Das Besondere an diesem Tool, welches nur für Mac und in englischer Sprache erhältlich ist, ist die Illustration durch Bilder und die ausführliche textliche Beschreibung der Notizen und Gedanken. Die einzelnen Einträge im Mindmapping-Tool lassen sich einfach zu Aufgaben umwandeln und die Idee nach und nach verwirklichen und ergänzen. Die verschiedenen Möglichkeiten der Darstellung helfen den Überblick zu halten, oder die noch offenen Aufgaben sichtbar zu machen. Ideal für alle Apple-Nutzer, die komplexe Ideen ausarbeiten möchten.
MockFlow ist ein Wireframe Tool, das intuitiv bedient werden kann und auch für Anfänger geeignet ist. Wer alle Features, die MockFlow zu bieten hat, nutzen will, der sollte sich mit dem Programm näher befassen. Das Tool kann zur Erstellung von Wireframes und Mockups für mobile Apps sowie Webseiten genutzt werden. Das Programm bietet umfangreiche Stencils und Elemente in einer großen UI Bibliothek. Des Weiteren kann ein Template Store genutzt werden. Der Store enthält Vorlagen, Layouts (3rd Party) und verschiedene Komponenten. MockFlow ist in verschiedenen, ausschließlich webbasierten Versionen erhältlich. Webbasierte Versionen bieten Nutzern den Vorteil, dass sie ortsunabhängig zugänglich sind und mit einem internetfähigen Gerät erreicht werden können. Auch die Teamarbeit ist durch webbasierte Wireframing Tools problemlos möglich. MockFlow ist in einer Testversion erhältlich, die nicht den vollen Funktionsumfang bietet. Kostenpflichtige Versionen starten ab 14 US-Dollar pro Monat. Die Versionen unterscheiden sich beispielsweise in der Anzahl der Nutzer, die auf das jeweilige Programm Zugriff haben.
Mockplus
von Mockplus Software Co, Ltd.
Interaktives Prototyping
Skalierbares Design-System
Kostenlos testen
Mockplus ist ein Wireframe Tool mit dem auch Prototypen für verschiedenste Plattformen erstellt werden können. Der interessierte Web- und Appdesigner kann Wireframes und Prototypen für Desktop-Apps, mobile Apps und Webseiten erstellen. Der Vorteil von Mockplus liegt in der simplen Bedienung. Die Nutzung von Mockplus setzt keine großartigen technischen Kenntnisse voraus. Das Tool kann in verschiedenen Versionen erworben werden. Die Basis-Version besitzt nicht alle Funktionen, kann aber frei genutzt werden. Die Pro-Version kostet 29 US-Dollar pro Monat oder 129 US-Dollar pro Jahr. Eine unbefristete Lizenz von Mockplus ist für 399 US-Dollar pro Benutzer erhältlich. Mockplus ist mit Android-, Windows- und Mac-Betriebssystemen kompatibel. Auch auf andere iOS-Geräten, die beispielsweise mobil genutzt werden können, läuft Mockplus. Das Tool erlaubt eine schnelle Interaktion und bietet viele Designvorlagen. Es können Pop-up Panel, Scroll Box, Image Carousel, SlidingDrawer, Stack Panel und vieles mehr genutzt werden. Per einfacher Drag & Drop Methode können Wireframe-Elemente hinzugefügt werden. Auch die Nutzung von Auto-Recovery ist möglich.
Wireframes und Prototypen können schnell designt und erstellt werden. Über 200 Komponenten und 3.000 Icons sind vor designt. Die vor designten Elemente können per Drag & Drop einfach in das Webdesign integriert werden. Innerhalb weniger Minuten kann ein Prototyp erstellt werden und die App- und Webideen eines Designers nehmen Formen an. Mockplus ermöglicht ein schnelles Testen der erstellen Prototypen. Es wird ein QR-Code erzeugt, der gescannt werden kann und einen Test auf realen Geräten ermöglicht. Mockplus ermöglicht auch einen Prototyp-Export in eine Cloud. Das Tool bietet 8 Wege, um Wireframes und Prototypen zu testen und zu teilen. Egal, ob im Browser, auf Desktop-Plattformen oder mobil, das vielseitige Programm ermöglicht auch vielseitige Tests. Das Tool besitzt beispielsweise Funktionen wie MindMap Design-Modus, Auto Data Fill, Format Painter (visualized), Repeater und UI Flow. Zudem Unterstützt das Tool auch den Export von MP-Dateien direkt von Sketch. Das Tool ist auch für Anfänger ohne Programmierkenntnisse geeignet. Es müssen auch keine Kenntnisse in Visual Design vorliegen. Mockplus ermöglicht eine einfache, zielgerichtete Nutzung und hat auch für Fortgeschrittene und Profis einiges zu bieten. Mockplus kann als Web-App oder mobile App genutzt werden.
OmniGraffle kann zum Erstellen von Orga-Charts und Grundrissen genutzt werden. Es ist als Design Tool klassifiziert, dass vielseitige Funktionen besitzt und auch zur Wireframe-Erstellung geeignet ist. Mit dem Wireframe Tool können statische Wireframes erzeugt werden. Das Programm steht zum Download für Mac-Systeme und als iOS-App bereit. Selbst die App für iOS-Geräte wird mit vollem Funktionsumfang angeboten und ist auf mobile Systeme ausgelegt. Die App für mobile iOS-Geräte wird separat von der Mac-Variante angeboten. Interessierte Webdesigner können aus einer großen Auswahl an Widgets und Vorlagen wählen. Wer sich für OmniGraffle interessiert, der sollte beachten, dass Prototypen-Erstellung und interaktives Wireframing mit dem Programm nicht möglich ist. Des Weiteren sind keine Kollaborations-Möglichkeiten oder andere Funktionen für Feedback und Zusammenarbeit vorhanden. OmniGraffle bietet allerdings viele Möglichkeiten zum Export. OmniGraffle ist ein Design-Programm, dass für Profis und Fortgeschrittene gedacht ist. OmniGraffle ist als iOS-App-Version für 49,99 US-Dollar pro Lizenz erhältlich. Die Desktop-Version kostet 99,99 US-Dollar pro Lizenz.
Wer ein absolut kostenfreies Open Source Programm sucht, das zur Wireframe Erstellung geeignet ist, für den ist Pencil Project interessant. Das Tool können auch Anfänger problemlos nutzen. Pencil Project bietet eine breit gefächerte UI Bibliothek mit vielen Elementen und Templates. Das Tool legt den Fokus auf Low-Fidelity Wireframes. Die Wireframes sind durch Verlinkung interaktiv gestaltbar. Für die Erstellung von komplexen Prototypen und Mockups ist das Tool nicht empfehlenswert. Design-Anfänger profitieren von dem übersichtlichen Designprozess und können erste Schritte erlernen. Das Programm ist nur als Desktop-Version für Windowssystem und Mac erhältlich. Durch die fehlende Web-Version ist nur ein eingeschränkter Zugriff auf die erstellten Wireframes möglich. Die Kollaborationsmöglichkeiten sind ebenfalls reduziert. Pencil Project ist für Teamarbeit ungeeignet. Auch Arbeiten, die Feedback bedürfen, sollten mit einem anderen Wireframing Tool durchgeführt werden.
Penultimate
von Evernote Corporation.
Erfasse wichtige Inhalte
Integration mit anderen Apps
Scannen von Dokumenten
Wer ein Tool sucht, das wie ein digitaler Skizzenblock funktioniert, für den ist Penultimate interessant. Dieser Skizzenblock-Stil ermöglicht dem Designer eine schnelle Wireframe-Skizzierung. Das Programm ist für Designer geeignet, die eine mobile Design-Möglichkeit suchen, die zuverlässig funktioniert und ein Brainstorming mit Entwicklern und anderen Designern ermöglicht. Penultimate ist für iPad-Nutzer gedacht und gehört zu Evernote. Das Tool kann im App-Store kostenlos heruntergeladen werden.
Das webbasierte Tool Proto.io kann schnell eingerichtet werden und benötigt weder IT-Support noch eine aufwendige Einführung in die Bedienung. Ein Nachteil des Wireframe Tools liegt allerdings in der Online-Nutzung. Das Tool kann nicht offline genutzt werden. Proto.io ist extrem auf mobile Prototypen ausgelegt, kann aber andere Prototypen unterstützen. Der Vorteil des Tools liegt in der Vielzahl an bereitgestellten Elementen, die in vielen Bibliotheken zu finden sind. Das Tool ist für Windows Phone, Android sowie iOS ausgelegt. Proto.io ist für Nutzer geeignet, die aus Sketch oder Photoshop bereits gefertigte Skizzen importieren möchten. Das Tool ermöglicht einen direkten Import aus diesen Programmen. Beim Import der Skizzen werden alle Ebenen erhalten. Webdesigner und Appdesigner können ein bereits erstelltes Design mit Proto.io in kürzester Zeit funktionell gestalten. Proto.io ist als Testversion erhältlich und kann von interessierten Nutzern zunächst ausprobiert werden. Die Testphase dauert 15 Tage. Der Preis des Tools liegt bei 24 US-Dollar monatlich und ist in Form eines Abonnements nutzbar. Der Preis gilt für einen Freelancer und steigt mit der Nutzeranzahl sowie mit der Zahl aktiver Projekte.
ProtoPie ist für Windows und Mac Nutzer gedacht, die hochwertige Prototypen erstellen möchten. Das Wireframe Tool kann Prototypen für mobile Anwendungen erzeugen und besitzt ein simpel zu bedienendes Interface. Das Interface ist mit beliebten Design-Tools ausgestattet. ProtoPie ist für die drei Grundeigenschaften Objekt, Antwort, Auslöser gedacht. Mittels ProtoPie sollen sogenannte High-Fidelity-Prototypen erstellt werden. Es ist nicht nötig, Programmierkenntnisse für die Nutzung von ProtoPie zu besitzen. ProtoPie ist ein Wireframing Tool, das in Smart-Devices Sensoren unterstützt. Zu den unterstützten Sensoren gehören Sound, 3D-Touch, Tilt, Proximity und Compass. ProtoPie ist als Testversion erhältlich, was jedem interessierten Webdesigner und Appdesigner die Möglichkeit gibt, das Tool 10 Tage auszuprobieren. Nach der Testzeit kann das Tool für 99 US-Dollar erworben werden. Wer die Vollversion erwirbt, der erhält ein Jahr lang kostenlose Updates. Auch Studenten können von ProtoPie profitieren und erhalten bei einem Nachweis, dass sie Studenten sind, sogar 50 % Rabatt. ProtoPie ist ein Wireframing Tool, dass für Studenten, Anfänger und Fortgeschrittene gut geeignet ist.
ProtoShare
von Astound Commerce Corporation
Wireframes & Prototypen erstellen
Drag and Drop
Kostenlos testen
ProtoShare ist ein Web-Tool, mit dem sowohl Wireframes als auch Prototypen erstellt werden können. Interessierte Web- und Appdesigner finden eine umfangreiche User-Interface-Bibliothek vor, die vielseitige Stencils, Elemente und Widgets enthält. Die Bedienung von ProtoShare ist intuitiv möglich und durch Drag & Drop einfach zu realisieren. ProtoShare ist ein Wireframing Tool, das auf Kollaboration setzt und für die Teamarbeit ideal ist. Die Teamarbeit kann zeit- und ortsunabhängig erfolgen und wird, in ProtoShare, ausschließlich online durchgeführt. Das webbasierte Tool ist mit Sharing-, Kommentar- und Versionierungs-Funktionen ausgestattet. Die vielseitigen Features des Programms ermöglichen eine zentrale Verwaltung des Feedbacks. Das Programm ist für Profis und Anfänger gleichermaßen interessant. Jeder Abschnitt des Arbeitsprozesses kann mit dem Tool professionell gestaltet werden. ProtoShare ist in unterschiedlichen Versionen erhältlich, die im Preis von ca. 24 US-Dollar bis zu 49 US-Dollar pro Monat variieren. Das Tool kann aktive Projekte in unbegrenztem Volumen erfassen, was es sowohl für Teams als auch für Einzelnutzer interessant macht.
Bei Sketch handelt es sich um ein Wireframe Tool, das für Mac verfügbar ist. Es ermöglicht Wireframes an Anwendungen von Drittanbietern weiterzugeben.
An Sketch kommt keiner so recht vorbei. Das leistungsstarke Werkzeug überzeugt mit einer benutzerfreundlichen Oberfläche. Bestens eignet sich das Tool für Wireframes, die mit wenigen Klicks erstellt und bearbeitet werden können.
Die Designs, die im Programm erstellt werden, können zu einem späteren Zeitpunkt erneut eingesetzt werden, was ein großer Pluspunkt ist, der viel Arbeit erspart. Das ist nicht der einzige Vorteil des Programms, denn Sketch lässt sich mit anderen Programmen wie Marvel oder Framer kombinieren.
In Puncto Kritik ist die Desktop-Verwendung zu nennen, denn Diese stellt sich durchaus kompliziert dar. Häufig kann die Arbeit nur mit zusätzlichen Erweiterungen vereinfacht werden.
Dieses Tool ist sowohl für Mac, als auch für Windows erhältlich. Des Weiteren lässt sich das Tool im Web verwenden. Auch bei UXPin handelt es sich um eine sogenannte Wirefame Anwendung. Die es möglichst die Dokumentation von Designs wiederzugeben. Die Wireframe Oberfläche gestaltet sich innovativ und übersichtlich.
Die Macher verzichten auf irreführende Registerkarten und setzen auf eine simple Oberfläche, die gut zu verstehen ist. Dateien aus Sketch und Photoshop lassen sich mit dem Tool öffnen und gebrauchen. Dabei ist es dem Programm möglich die notwendigen Daten auszulesen. Ein großer Pluspunkt des Programms liegt in der Live Präsentation.
Diese Eigenschaft, ebenso wie die Dokumentation, vereinfacht die Arbeit stark. So können Fehler schnell erkannt und ausgebessert werden. Die Anwendung verfügt ebenfalls über einen Vorschaumodus.
Wireframe.cc ist in einer freien Version erhältlich, die zu Erstellung von einfachen Mockups genutzt werden kann. Das Wireframing Tool erlaubt das Teilen des Arbeitslinks und besitzt eine Kommentarfunktion. In der Premiumversion können PNG- und PDF-Dateien Exportiert werden. Auch Protokollverläufe können erstellt und Interaktionen gestaltet werden. Die Features sind in der Premiumversion von Wireframe.cc wesentlich umfangreicher. Eine Team-Kollaboration ist in der Premiumversion möglich. Wer die Freeware nicht nutzen möchte, beispielsweise weil mehrere Nutzer vorhanden sind, der kann die Premiumversion für sieben Tage testen. Anschließend kann der Nutzer zwischen einem Abo-Modell für einen Nutzer und Varianten für mehrere Nutzer wählen. Anstelle des Abo-Modells kann auch eine Einzelnutzer-Variante für 144 US-Dollar erworben werden. Im Abo kostet Wireframe.cc für Single-User ca. 16 US-Dollar pro Monat.
Die Umsetzung eines Wireframes
Zu Beginn sollte ganz klassisch mit Stift und Papier gestartet werden.
Mit schnellen und einfachen Skizzen wird das Brainstorming deutlich erleichtert und erste Ideen können schnell festgehalten werden. Diese Skizzen müssen kein Schönheitspreis gewinnen, sondern dienen zum Ausprobieren und ermöglichen die ersten Strukturen, den Kollegen zu präsentieren.
Im nächsten Schritt sollte es etwas konkreter werden. Als Basis für das Wireframe sollte ein Raster dienen, woran die Gestaltung ausgerichtet wird. Das Raster vereinfacht später die Umsetzung, da durch das responsive Webdesign die meisten Webseiten mit Rastern arbeiten, um auf allen Endgeräten perfekt dargestellt werden zu können.
Das Verhalten einzelner Elemente auf unterschiedlichen Geräte muss also berücksichtigt werden. Am besten eignet sich ein 12-Spalten-Raster, das es sich gut in Segmente unterteilen lässt. Außerdem bietet das 12-Spalten-Raster eine hohe Flexibilität für Elemente in einer Reihe.
Wenn Eure Webseite beispielsweise nur mit 8 Spalten arbeitet, solltet ihr natürlich auch mit einem 8-Spalten-Raster in Eurem Wireframe arbeiten.
Für die konkrete Ausarbeitung ist ein entsprechendes Tool für Wireframing zu empfehlen. Eine saubere Darstellung mit Stift und Papier kann etwas hermachen, ist für den Austausch mit dem Kunden und spätere Anpassungswünsche allerdings nicht empfehlenswert.
Welches Tool Du verwendest ist eine Geschmacksfrage und Großteils auch davon abhängig, wie intensiv Du damit arbeitest.
Erster Touchpoint Meta Snippet
Das Meta Snippet wird heutzutage noch viel zu häufig unterschätzt und das obwohl das Snippet der erste Touchpoint zwischen Kunde und Unternehmen in der Suchmaschine darstellt.
Sie sind gleichermaßen das Aushängeschild Deiner Webseite in den Suchergebnissen. Ein gut optimiertes Meta-Snippet hebt sich in den SERPS der Suchmaschine schnell vom Wettbewerb ab und zieht die Aufmerksamkeit der Nutzer auf sich.
Für einen schnellen Check einzelner Meta Snippets, stellt Sistrix mit ihrem “SERP Snippet Generator” ein super Tool zu Verfügung.
Die Methode der Contentveredelung
Hinter dem Begriff „Contentveredelung“ verbirgt sich eine Vorgehensweise, mit der Du bereits bestehenden Inhalt auf Deiner Webseite gezielt überarbeiten und hinsichtlich der Ergebnisse der Keywordstrategie und den Content Qualitätsfaktoren verbessern kannst.
Ziel dieses Prozesses ist es, den bereits vorhandenen Content in verschiedenen Bereichen aufzuwerten, um eine bessere SEO Ausrichtung und/ oder Nutzerorientierung zu schaffen, die sich auf das Ranking in der Suchmaschine beziehen.
Wie bei dem Punkt der Contenterstellung kurz angedeutet, dienen die vorangegangenen Analysen der Entscheidung, welcher Content neu erstellt werden sollte und welche bestehenden Inhalte möglicherweise etwas Optimierung bedürfen. Mithilfe der Contentveredelung kann genau hier angeknüpft werden, um gezielt das Potenzial Deiner Seite zu verbessern.
2. SEO Check – Technik + Security
Der Unterschied zwischen technischem Seo und Content Seo lässt sich ganz einfach festhalten. Technische Seo bedeutet, dass eine Seite schnell von der Suchmaschine gecrawlt werden kann und dass alle notwendigen Meta-Daten vorliegen. Content Seo bedeutet alles, was Dein Nutzer auf Deiner Webseite sehen, lesen oder hören kann.
a) Check des eingesetzten Systems
Zu Beginn des SEO Checks wird überprüft, welches System eingesetzt wird.
Wichtig hierbei ist zu prüfen, welche Programmversion installiert ist und welche die aktuell auf dem Markt verfügbare ist. Der Hintergrund hier, es gibt immer wieder Sicherheitslücken, die es Hackern leicht machen ein System und damit die ganze Webseite zu schädigen.
Daher immer darauf achten, dass die neueste Version im Einsatz ist. Wenn das System eigenständige Updates bereitstellt oder aber es ein Alertsystem gibt, mit dem gearbeitet werden kann, dann sollte dies dringend eingesetzt werden. Es gibt nichts Schlimmeres, als ein veraltetes System im Internet zu haben.
Es kommt nicht darauf an, welches System eingesetzt wird, es kommt aber darauf an, wie gut die SEO Integration ist. Besonders hervorzuheben sind hier folgende Systeme:
- WordPress
- Joomla!
- Contao
- Magento
- Shopware
- Eigenprogrammierung
b) Prüfung des Pagespeeds – die Ladezeit Deiner Seite
Wenn geklärt ist, welche Programmversion verwendet wird und diese zur Aktualisierung vorgemerkt worden ist, geht es an den Pagespeed.
Die Ladezeit ist einer der wichtigsten Rankingfaktoren und misst die Ladezeit einer Webseite. Es heißt, dass eine Seite maximal 3 Sekunden benötigen sollte, bis diese vollständig geladen ist. Dieser Wert bezieht sich auf einen Shop, oder eine Webseite, die die gleichen Produkte anbietet wie noch eine Vielzahl mehr.
Dann kommt es darauf an die schnellste Webseite zu sein. Gerade seit mobile first (bzw. in 2021 sogar mobile only) ist die Ladezeit einer Webseite immer wichtiger. Wer sitzt schon gerne im Bus oder der Bahn und möchte 30 Sekunden warten, bis eine Webseite geladen ist?
Beispiel:
Ein Shop bietet Turnschuhe einer bestimmten Marke an, wie es auch viele andere Shops machen. Hier kommt es darauf an, dem Besucher das Produkt am schnellsten zu bieten. Dauert das Laden der Seite extrem lange, so wird bei diesem Shop kein Verkauf erzeugt. Zeige ich dem Besucher allerdings das Produkt rasch, so steigen die Chancen auf einen erfolgreichen Verkauf.
Zu Beginn ist es wichtig, sämtliche Seitentemplates zu eruieren. In den meisten Fällen handelt es sich hier um:
- Startseite
- Kategorie
- Produkt
- Blogübersicht
- Blogbeitrag
Die URLs werden dann in Google Pagespeed Insights nach und nach geprüft, um sich so ein genaues Bild über die gesamte Webseite zu machen. Die Daten aus Google Pagespeed Insights stammen aus Google Lighthouse.
Neben dem Check der Startseite und Deinen einzelnen Templates ist es auch unabdingbar, eine Prüfung des http-Protokolls durchzuführen. Warum? Weil es hier ebenfalls um Schnelligkeit geht.
Man kann es noch immer als Geheimtipp ansehen:
Prüfe ob Deine Domain auf dem Protokoll http/2 und NICHT auf http1.1 läuft. Die Prüfung kannst Du einfach über die Netzwerkanalyse in Deinem Browser vornehmen.
- Drücke F12 auf Deiner Tastatur
- Wechsle in das Fenster Netzwerk / Netzwerkanalyse
- Reloade Deine Seite
- Wenn im Bereich Protokoll / Protocol „http/2“ oder „h2“ steht, ist alles gut. Wenn nicht, dann solltest Du Deinen Hoster kontaktieren zur Umstellung auf http/2
Die Umstellung auf das neue Protokoll ermöglicht schnellere und auch gleichzeitige Datenübertragung. Ergo:
Mehrere Anfragen können Gleichzeitig beantwortet werden, wohingegen bei http1.1 immer nur ein Frage-Antwort-Spiel möglich ist. Somit steigerst Du Deinen Pagespeed erheblich mit dieser Umstellung.
c) Checke die robots.txt – die Indexierung Deiner Seite
Ein kleiner, aber unabdingbarer Helfer ist die robots.txt.
Diese „normale“ Textdatei hat immer im Root-Verzeichnis zu liegen und ist somit über domain.de/robots.txt erreichbar. Hiermit kannst Du die Indexierung Deiner Webseite steuern. Du kannst bestimmte Seiten, Verzeichnisse und Dateiendungen für alle Bots, aber auch nur bestimmte Suchmaschinen sperren.
Checke diese Datei genau und hol Dir am besten professionelle Hilfe, bevor Du Eintragungen vornimmst, die später fatale Folgen haben werden. Mit „Disallow“ und Wildcards ist nicht zu spaßen, denn Ruck Zuck hast Du Deine Seite aus dem Index verbannt. Im September 2019 wurde nach 25 Jahren die robots.txt überarbeitet und es wurden einige Dinge angepasst.
Prüfe auch immer nach, ob sich der Link zur Sitemap, oder sogar zu den Sitemaps in der robots.txt auffindet, denn so kann ein Bot direkt die Seite nachverfolgen und entsprechend an die Suchmaschinen übergeben.
d) Ist die Sitemap.xml korrekt?
Was ist hier mit sauber gemeint? Es ist die Rede davon, dass sich innerhalb der Sitemap nur URLs tummeln, die den Quellcode „200 OK“ zurückgeben. So kannst Du das prüfen:
- Starte den Screaming Frog
- Stelle auf den Listenmodus um (Mode à List)
- Klicke dann auf Upload und wähle „Download XML Sitemap“ aus
- Eingabe der Gesamt-URL, dort wo die Sitemap zu finden ist
- Start des Crawls
- Nach Abschluss des Crawls im Bereich Statuscode prüfen, ob es auch andere Einträge als „200“ gibt
- Sitemap aktualisieren mit URLs, die nur den Statuscode „200“ haben und auf dem Server aktualisieren
e) Indexierungsstatus – Stimmt die Anzahl der URLs in Google mit der in der GSC überein
Warum die Sitemap so wichtig ist zeigt sich im Bereich Indexierungsstatus. Mithilfe einer Site-Abfrage in Google lässt sich ermitteln, wie viele URLs indexiert sind. In der Google Search Console (GSC) wird ohne den Upload einer Sitemap nur ein ungefährer, meist viel niedriger Wert als der in der Suchmaschine indexierte Wert angezeigt.
Damit das Crawlingbudget nicht unnötig verbraucht wird, ist die Einrichtung der Sitemap.xml innerhalb der Google Search Console unabdingbar, denn so werden nur die Seiten aktiv gecrawlt, die Du auch an die Suchmaschine sendest. Dies ist wichtig, da jeder Crawl bares Geld wert ist und die Suchmaschinen jährlich einen hohen Betrag nur alleine für das Crawling zahlen.
f) Mit einer der wichtigsten Checks ist die Prüfung auf Duplicate Content
Doppelte Inhalte sind nicht gut. Es gibt verschiedene Arten von Duplicate Content. Die häufigsten Fälle sind:
- Trailingslash-Problematik
- Erreichbarkeit von non-www und www
- Erreichbarkeit von http und https
- Erreichbarkeit von Groß- / Kleinschreibung
- Doppelte Metadaten
- Title (auch doppple Seitentitel), Description, Überschriften
- hreflang Vewendung
1.) Check auf Trailingslash-Problematik
Was ist der Trailing-Slash? Hierbei handelt es sich um das abschließende Slash einer URL. Es ist jedem freigestellt, ob er seine URL mit oder ohne Slash am Ende aufrufen lässt. Wichtig ist, dass es nur eine Version gibt, da man sich sonst so selbst Duplicate Content produziert.
2.) Check auf non-www und www
Wie schon beim Trailingslash ist es egal welche Variante zum Aufrufen der Webseite verwendet wird. Wichtig ist nur, dass man sich auf eine festlegt. Ich finde, es liegt immer im Auge des Betrachters, was gefällt einem besser.
3.) Check auf http und https
Wer eine Webseite heute noch auf http laufen lässt, hat den Schlag noch nicht gehört. Spätestens seit der Einführung der DSGVO sollte die Webseite mit einem SSL-Zertifikat ausgestattet sein und somit eine gesicherte Verbindung herrschen.
4.) Check auf Groß- / Kleinschreibung
Was die wenigsten prüfen, ob die URL mit Groß- und Kleinbuchstaben erreichbar ist. Wenn dem so ist, dann kann man hier nur die Hände über dem Kopf zusammenschlagen. Hier muss dringend über die .htaccess, oder aber die httpd.conf das mod_spelling case sensitive eingeschaltet werden, das eine Umschreibung der URLs in Kleinbuchstaben vornimmt.
Eindringlich hier, immer von Hause aus darauf achten, dass alles nur in kleinen Buchstaben aufgesetzt wird.
5.) Check auf doppelte Metadaten
Doppelte Metadaten sind auch ein gefundenes Fressen für DC. Mithilfe des Screaming Frog lässt sich die Webseite analysieren und so doppelte Seitentitel bzw. Titles, Descriptions oder aber auch doppelt genutzte Überschriften eruieren. Hier empfiehlt sich das Exportieren der gesamten Liste und dann die Dopplungen anzugehen um auf der Webseite Einzigartigkeit herrschen zu lassen.
Vielen ist es gar nicht bewusst, dass durch eine Paginierung auch Duplicate auftreten kann. Um diesem Punkt Abhilfe zu schaffen, einfach Seite x von y mit aufnehmen in den Seitentitel und meist auch in die Description, schon ist man hier auf der sicheren Seite.
6.) hreflang Verwendung
Wenn Du dieses Meta-Element verwendest, liefert die Suchmaschine die jeweilige Sprachversion oder regionale URL einer Homepage an den Nutzer aus. Hreflang verhindert doppelten Content.
g) Immer auf eine klare Seitenstruktur innerhalb der Überschriften achten
Überschriften bilden das semantische Rückgrat einer jeden Webseitenstruktur (jeder URL) und sollten gemäß ihrer Hierarchie genutzt werden. Dies hilft nicht nur dem Leser, sondern auch Maschinen (wie z.B. Google) können durch die korrekte Verwendung von Überschriften vor allem komplexere Dokumente besser verstehen und verarbeiten bzw. crawlen.
Ein weiterer Vorteil, welcher für die korrekte Verwendung von Überschriften spricht, ist das Nutzerverhalten. Viele User „scannen“ bzw. lesen ein Dokument lediglich anhand der Überschriften. Hat ein Artikel also mehrere, sinnvoll gegliederte, Überschriften und eine übersichtliche Webseitenstruktur, so ist es für den Leser einfacher dessen Inhalt und Aussage zu erfassen. Was hier für den Leser gilt, trifft auch auf Maschinen, wie z.B. den Google-Bot, zu.
Deine Seite kann besser gecrawlt werden, wenn die Seitenstruktur und die Seitenqualität besser ist.
Wenn folgendes bei der Seitenstruktur beachtet wird, ist man schon hervorragend aufgestellt:
- Nur eine H1 auf einer Unterseite bzw. einzelnen Seite in einer Webseitenstruktur
- Warenkorb, wenn vorhanden NICHT als H2 deklariert
- Nach H1 folgt H2 und wenn vorhanden mindestens 2 thematisch passende H3
- Elemente im Footer oder der Sidebar, bekommen einen bestimmten Style aber keine Überschriftenauszeichnung, Bsp.: H5
h) Wie sieht es aus im Bereich der Bilder?
Bilder sind ein ausgezeichneter Keywordträger und tragen ebenfalls zur Seitenqualität bei. Daher ist darauf zu achten, dass das Bild vor dem Hochladen auf die Webseite richtig benannt ist. Am besten fügt man hier das Hauptkeyword, oder aber ein semantisches Keyword mit ein. Der Dateiname ist einer von mehreren Bestandteilen.
Ebenfalls wird überprüft, wie viele Bilder es überhaupt auf der Webseite gibt. Wenn die Anzahl der Bilder vorhanden ist, wird nachgeschaut, wie hoch die Anzahl der Bilder ist, dessen Dateigröße mehr als 100kb beträgt. Dies ist wieder mit ein Punkt für den Pagespeed. Immer die Bilder richtig dimensioniert hochladen.
Wenn nur ein Bild benötigt wird, dass eine Breite von 888px benötigt, lade ich nicht eins hoch, welches 4.000px hat. Ein weiterer Bereich zur Unterbringung von Keywords ist der ALT-Text. Wenn dieser Tag leer ist, verschenkt man wertvolles Rankingpotential.
Dank des Screaming Frog Crawls lassen sich hier die Schwachstellen aufdecken. Wichtig zu wissen: Wird nicht nur Text, sondern werden auch die Bilder gecrawlt?
i) Sind strukturierte Daten im Einsatz?
Strukturierte Daten sind ein wahrer Schatz. Dank JSON-LD lassen sich so die ehemaligen Mikroformate schnell und einfach in die Webseite einfügen und auch in den Suchergebnissen anzeigen.
Weit vorne hier die FAQs, oder aber baldige Veranstaltungen und die Rating-Sterne. Mithilfe des Testtools von Google für strukturierte Daten lässt sich so problemlos die Webseite testen, ob strukturierte Daten implementiert wurden oder nicht. Ebenfalls ist zu sehen, ob alles in Ordnung ist, oder ob es Warnungen bzw. Fehler gibt.
Warnungen können getrost ignoriert werden, da diese nicht relevant für die Ausspielung sind und somit nicht verhindert wird. Bei Fehlern gestaltet sich das allerdings schwerwiegender, denn sind welche vorhanden, dann werden die strukturierten Daten NICHT ausgespielt.
j) Fehler mag keiner, aber eine 404-Seite bei einem 404-Fehler sollte es geben
Es kommt immer vor, das ein Link oder ein Aufruf auf eine Seite gelangt, die NICHT vorhanden ist.
Dann ist es gut zu wissen, dass man nicht im leeren landet. Wir haben die Möglichkeit einer dynamischen und einer statischen 404 Fehlerseite, wenn ein 404-Quellcode ausgespielt wird und der Fehler erscheint.
Bei der dynamischen bleibt die fehlerhafte URL stehen und die 404-Inhalte werden geladen, bei einer statischen gibt es eine Weiterleitung auf eine domain.de/404/ mit den entsprechenden Inhalten.
Um zu prüfen, mit welcher Version man es zu tun hat, haut man am besten einfach einmal auf die Tastatur, hat somit eine kryptische Seite, drückt Enter und sieht was passiert.
Im besten Fall landet man auf einer statischen 404-Fehlerseite. Warum? So läuft diese URL auch in der Google Search Console ein und diverse fehlerhafte eingehende Backlinks können eruiert und richtig umgeleitet werden.
Landest Du allerdings nicht auf einer statischen 404-Seite, bei einem 404-Fehler, oder läufst einfach ins Leere, besteht Handlungsbedarf.
3. SEO Check – Linkbuilding – Offpage Optimierung
Linkbuilding ist ein essenzieller Bestandteil der Suchmaschinenoptimierung und darf daher auch in keinem SEO Check fehlen, es ist Teil der Offpage Optimierung.
Offpage Analyse sind Faktoren fern der eigenen Homepage. Offpage Rankingfaktoren sind insbesondere qualitative Links von anderen Seiten auf die Homepage Deines Unternehmens.
Außerdem kann man von Offpage Analyse sprechen, wenn wir uns die Social Media Präsenz eines Unternehmens betrachten.
Praktisch alle äußeren Einflüsse auf Deine Homepage sind Offpage Faktoren. Bei der Offpage Maßnahme Linkbuilding, sprich Linkaufbau spricht man von einem gezielten Aufbau von Backlinks auf die eigene Webseite.
Backlinks sind Verknüpfungen im Internet, worüber User auf neue Webseiten gelangen. Für Google sind die Anzahl und insbesondere die Qualität der Backlinks immer noch ein hochrelevanter Rankingfaktor, der auf keinen Fall vernachlässigt werden sollte. So auch nicht in unserem kostenlosen SEO Check.
Der Linkbuildingpart ist ein wichtiger Bestandteil eines SEO Audits und sollte auf keinen Fall zu kurz kommen. Um den Linkaudit ordentlich aufzubereiten, sollte er in 3 Teile aufgeteilt werden:
- Analyse des aktuellen Linkprofils
- Konkurrenzanalyse
- Weitere Maßnahmen
Diese drei Abschnitte sind die grundlegenden Bestandteile eines ausführlichen Linkaudits, der dem Kunden bzw. der eigenen Webseite einen wirklichen Mehrwert bieten sollte.
a) Analyse des aktuellen Linkprofils
In der Analyse des Linkprofils wird besonders auf die Stärken und Schwächen des Linkprofils geachtet. Dabei achten wir vor allem auf folgende Messwerte:
- Anzahl der Backlinks
- Qualität der Backlinks
- Herkunft der Backlinks
- Verteilung der Backlinks (Linkjuice)
Für die Analyse des Linkprofils werden mehrere (teils kostenpflichtige) Tools benötigt.
1.) Anzahl der Backlinks – macht es wirklich die Menge?
Die Anzahl der Backlinks ist immer noch ein hochrelevanter Faktor bei der Bewertung des Linkprofils und Deiner SEO und sollte auf jeden Fall analysiert werden. Auch wenn man in erster Linie von “Qualität vor Quantität” sprechen sollte, ist die Anzahl der Backlinks immer noch entscheidend.
Jedoch kann nicht pauschal gesagt werden, welche Anzahl an Backlinks gut oder genügend ist. In jeder Branche und Nische werden unterschiedlich viele Backlinks “vergeben”. Ob wir genügend Backlinks haben, können wir erst nach der Analyse der Konkurrenten sehen.
Die richtige Anzahl der Backlinks zu analysieren ist gar nicht so einfach. Jedes Tool gibt unterschiedliche Werte aus, weshalb man ruhig auf mehrere Tools zurückgreifen kann. Am Ende sollte man sich, insbesondere in der Konkurrenzanalyse, auf ein Tool festlegen.
Bei uns ist das in der Regel das Linkbuilding-Tool Ahrefs.
2.) Die Analyse mit Ahrefs
Ahrefs gibt uns einen ganz besonderen Wert, den jeder Linkbuilder und SEO schon einmal gehört haben sollte: das Domain Rating (kurz DR).
Das DR wird durch die Qualität und die Anzahl der Backlinks errechnet und gibt so schnell einen guten ersten Blick auf die Qualität des Backlinkprofils.
Zudem gibt es einen guten Überblick über die Verteilung der Backlinks. Folgende Verhältnisse werden analysiert:
- nofollow / dofollow
- Text-Links / Bild-Links / Redirect
- URL Rating Verteilung
- Verhältnis: Backlinks vs. verlinkende Domains
Bei den ersten beiden Punkten gibt es kein “richtig” oder “falsch”. Dennoch sollte man hier auf Auffälligkeiten, wie z.B. sehr viele Bild-Links oder mehr als 50 % nofollow-Links (nur als Beispiel) achten.
Sollten hier Auffälligkeiten auftreten, müssen diese im nächsten Schritt analysiert werden.
Folgende Fragen werden gestellt:
- Welche Links sind für die Auffälligkeiten verantwortlich?
- Wie ist die Qualität der verantwortlichen Backlinks?
- Sind diese Backlinks für uns relevant? Wird Traffic darüber generiert?
- Muss die Auffälligkeit behoben werden?
3.) Wie ist das Verhältnis zwischen Anzahl der Backlinks und den verlinkenden Domains?
In den bisherigen Analysen kam ganz klar zum Vorschein, dass Backlinkprofile mit einer geringeren “Backlinks pro Domain”-Rate besser bewertet werden. Achte daher darauf, möglichst unique Backlinks zu bekommen und Dich nicht in Kooperation zu stürzen, wo Du 1000 Backlinks von einer Domain bekommst.
Sind diese Messwerte analysiert und dokumentiert, widmen wir uns dem nächsten Thema.
4.) Broken Backlinks – die eigene Seite als Sackgasse
Bei Broken Backlinks sprechen wir von fehlerhaften Verlinkungen auf die eigene Webseite. Der Backlink führt auf eine URL unserer Webseite, die nicht mehr vorhanden ist. Dies kann dadurch entstehen, dass URLs geändert oder gelöscht werden und keine ordentliche 301-Weiterleitung eingerichtet wurde.
Warum sind Broken Links schlecht?
Für das Beheben von Broken Links gibt es mehrere wichtige Gründe.
- Das Nutzerverhalten ist ein immer wichtiger werdender Rankingfaktor. Wenn Nutzer auf unsere Webseite kommen und das Erste was sie von uns sehen eine 404- oder Error-Seite ist, wird die Absprungrate extrem in die Höhe schießen und die Verweildauer ebenfalls darunter leiden. Zudem verliert unsere Webseite an Trust und Seriosität.
- Jeder Backlink bringt etwas Linkjuice mit und verstärkt gezielt die verlinkte URL. Durch das Verlinken auf fehlerhafte oder tote URLs, geht auch der gewünschte Linkjuice verloren.
„Also: Behebt die Broken Links!”
5.) Achtet auf die Linkverteilung
Backlinks sind schön. Sie pushen die Webseite, bringen Leute auf die Webseite und jeder organische Backlink ist auch ein Stück Bestätigung für die eigene Webseite. Dennoch sollte darauf geachtet werden, wo die meisten Backlinks sind.
Verlinkungen auf irrelevante Unterseiten sind natürlich nicht so wichtig wie Verlinkungen auf die z.B. umsatzstärkste URL.
Solltest Du feststellen, dass Deine wichtigste URL keine bzw. sehr wenige Backlinks hast, solltest Du hier Deinen Linkaufbau priorisieren!
6.) Ist das Linkprofil eventuell toxisch?
Viele Online-Marketer und Webseitenbetreiber haben bei der Offpage Maßnahme Linkaufbau Angst vor einer Abstrafung. Teilweise auch zurecht. Die meisten Abstrafungen von Google sind durch ein negatives oder toxisches Linkbuilding verschuldet. Wer selber mal eine Abstrafung hatte weiß, wie unangenehm diese Thematik ist.
Um diesem Problem aus dem Weg zu gehen, sollte das Linkprofil regelmäßig gecheckt werden. Wir nutzen hierzu die Link Research Tools. (LRT)
Mit LRT können wir den sogenannten DTOXRISK ermitteln. Dieser Wert zeigt Dir, wie toxisch Dein Linkprofil ist und hilft Dir dabei, eine ordentliche Disavow-File zu erstellen.
Mit den Link Research Tools lässt sich das eigene Linkprofil hervorragend analysieren. Negative Links werden rausgefiltert und können einfach in eine Disavow-File gepackt werden.
7.) Warum wird eine Disavow-File benötigt?
Google erkennt mittlerweile schon einwandfrei, ob Seiten bzw. Backlinks schädlich sind und nimmt diese in vielen Fällen gar nicht mehr in die Bewertung mit auf. Dennoch kann es vorkommen, dass Dein Linkprofil durch schlechte Links toxisch wird. Mit einer Disavow-File kannst Du Google darauf hinweisen, welche Backlinks Du entwerten möchtest.
Daher packst Du alle negativen Backlinks in die Disavow-File und lädst sie in der Google Search Console hoch. Sicher ist sicher!
b) Die Konkurrenzanalyse
Wie bereits erwähnt, gibt es keinen Messwert für “genügend Backlinks”. Erst durch eine ausführliche Konkurrenzanalyse kannst Du einschätzen, ob Dein Linkprofil gut genug ist oder ob es noch Optimierungspotential gibt.
Gibt es eine Konkurrenzanalyse im Linkbuilding, solltest Du in erster Linie auf die “offensichtlichen” Messwerte achten.
- Anzahl der Backlinks
- Verhältnis: Anzahl der Backlinks vs. Anzahl der verlinkenden Domains
- Domain Rating (DR)
Es empfiehlt sich, die Messwerte in eine übersichtliche Tabelle einzutragen. So kannst Du schneller und einfacher mögliche Auffälligkeiten erkennen.
In der Tabelle siehst Du 4 analysierte Webseiten. Die Domain mit der dem kleinsten Backlink/Domain-Verhältnis hat den höchsten DR. Nicht zu sehen, aber wichtig: Die Webseite mit dem höchsten DR hatte keine “hochwertigeren” Backlinks. Das Verhältnis war aber wesentlich besser.
Wenn Du nun die Backlinkprofile von Dir und Deiner Mitbewerber verglichen hast, solltest Du analysieren, warum das Linkprofil Deiner Mitbewerber eventuell besser ist als Dein eigenes.
Woher bekommen die Mitbewerber ihre Backlinks?
Schau Dir die Backlinks Deiner Konkurrenten genau an und beantworte Dir folgende Fragen:
- Gibt es besonders viele Backlinks von derselben Art?
- Forenlinks?
- Bilder-Links?
- Sponsorenlinks?
- Anzeigen-Links?
- Gibt es hochwertige Backlinks, die Du kopieren kannst?
- Offensichtliche Kooperationen?
Aus den gewonnenen Informationen über Deine Mitbewerber solltest Du Dich nun dem letzten Schritt zuwenden.
c) Welche weiteren Maßnahmen sollen getroffen werden um eine Verbesserung Deines Linkprofils beizuführen?
Dein Linkprofil hast Du jetzt also kennengelernt und folgende Aspekte und Kriterien kannst Du abhaken:
- Du schützt Dich mit einer fertigen Disavow-File vor einer möglichen Abstrafung!
- Du weißt, wie Dein Linkprofil im Vergleich zur Deinen Konkurrenten aussieht!
- Du hast alle Broken Links ordentlich weitergeleitet!
Um Dein Linkprofil weiter optimieren zu können, musst Du Linkbuilding betreiben. Im folgenden Abschnitt gibt es ein paar Tipps, wie Du weitere Backlinks aufbauen kannst:
Erschaffe einen hochwertigen Blog oder Ratgeber
Die vermutlich aufwendigste, aber auch effektivste Möglichkeit, neue Backlinks zu generieren ist hochwertiger Content. Setze Dich ausführlich mit den relevanten Themen auseinander und hole Deine Kunden schon früh in der Customer Journey ab. Organische Backlinks werden von ganz alleine kommen!
Auch für Deine SEO Arbeit wird Dich ein Blog enorm weiterbringen. Die Nutzer früher abzuholen und Dein Themengebiet so ausführlich wie möglich aufzustellen bringt Dir jede Menge neuen Traffic. In Zusammenarbeit mit einer guten Onpage Optimierung kann ein Blog für wahre Wunder sorgen.
Gastartikel schreiben
Suche im Internet aktiv nach Möglichkeiten für Gastartikelveröffentlichungen. Hochwertige Backlinks und die Verbesserung der eigenen Reputation sind der Lohn. Achte aber auch immer darauf, dass Dein Gastartikel einer ordentlichen Optimierung unterzogen wurde. Ohne SEO wird es Dein Artikel schwer haben zu ranken. Und ohne gute Platzierungen, sprich ohne Rankings kein Traffic!
Broken Linkbuilding
Deine eigenen Broken Links hast Du ja mittlerweile bereinigt. Schaue nun, ob Deine Konkurrenten ebenfalls Broken Links hat. Baue den fehlenden Content nach und kontaktiere die verlinkenden Domains aktiv. Niemand verlinkt gerne auf eine tote Seite.
Der Prozess des Broken Linkbuildings beruht auf: Analyse – Contentproduktion – Kontakt
Recaps schreiben
Nicht in jeder Branche möglich, aber falls doch, sind Recaps ein optimaler Link-Magnet. Besuche Messen, schreibe darüber und suche anschließend nach “Gleichgesinnten”. Ein paar Recap-Freunde wirst Du immer finden! Unsere Ergebnisse sprechen für sich!
Wikipedia-Links
Ja, klar, der Aspekt ist ein alter Schuh. Aber Wikipedia-Links bringen nicht nur überdurchschnittlich viel Traffic, sondern können auch für weitere Backlinks sorgen. Viele Journalisten suchen ihre Quellen in den Verzeichnissen von Wikipedia. Ist Deine Webseite dort zu finden, lässt sich auch gerne mal ein hochwertiger Zeitungslink generieren.
d) Linkaudit als Bestandteil eines SEO Checks
In vielen SEO Checks wird das Linkbuilding gar nicht oder nur sehr kurz aufgeführt, obwohl die meisten Google Abstrafungen auf falsches Linkbuilding zurückzuführen sind.
Solltest Du also einen SEO Check oder SEO Audit ohne Linkbuilding im Ergebnis bekommen, solltest Du Dich vielleicht nach einem zweiten Anbieter umschauen.
Für viele SEO Kollegen ist Linkbuilding ein aussterbender Faktor. Allerdings gibt es auch sehr viele SEOs und SEO Agenturen, die weiter auf Linkbuilding schwören. Egal, wie Du zu Linkbuilding stehst, Dein Linkprofil sollte gepflegt sein.
Du kannst so viel SEO und andere Optimierung machen wie Du möchtest, wenn Du eine Abstrafung wegen Deinem Linkprofil bekommst, war das alles umsonst und es besteht in jedem Fall Handlungsbedarf.
Also solltest Du diese Offpage (und Onpage) Maßnahmen als eines der Kriterien für eine gute Webseite in Erinnerung behalten. Es wird dauern, aber Du wirst Ergebnisse sehen!