Site-Framework. Erstellungswerkzeuge

Ein Site-Wireframe (oder Site-Struktur) ist ein Organigramm, das die Struktur und Hierarchie der Seiten einer Website definiert. Das Wireframe dient als Grundlage für die Website-Entwicklung und hilft dabei, Inhalte zu organisieren und Benutzern eine logische Navigation zu bieten. Das Erstellen einer Website ist viel einfacher als je zuvor. Dies ist jedoch immer noch ein bedeutendes Projekt. Und wie bei jedem anderen Projekt benötigen Sie einen soliden Plan.

Das Layout Ihrer Website ist der wichtigste Teil dieses Plans. Farben, Grafiken und andere Inhalte lassen sich viel einfacher ändern als das Layout. Betrachten Sie das Layout als das Grundgerüst Ihrer Website. Es definiert die Struktur jeder Seite, die später verfeinert wird.

Ein Wireframe ist ein grober Überblick über das Layout einer Website. Es zeigt, wo sich die verschiedenen Elemente befinden werden. Das macht es perfekt Ausgangspunkt für die Erstellung einer Website. Kompetente Webdesign-Agenturen beginnen immer mit einem Wireframe. Wenn Sie Ihre eigene Website entwickeln, egal ob alleine oder im Team, finden Sie auch einen wertvollen Rahmen.

Das Wireframe einer Website kann immer mit Bleistift und Papier gezeichnet werden. Dies ist jedoch nicht erforderlich, wenn viele Wireframing-Tools verfügbar sind.

Werfen wir einen Blick auf einige der beliebtesten Website-Framing-Tools.

 

Warum ein Wireframe-Tool verwenden?

Selbst in einem modernen Bereich wie dem Webdesign bevorzugen einige Designer immer noch die Verwendung alter Methoden. Natürlich ist nichts falsch daran, eine Website auf Papier zu zeichnen. Dies ist eine bewährte Methode, die in der Vergangenheit bei Tausenden von Webdesignern hervorragend funktioniert hat. Die Verwendung eines Einrahmungswerkzeugs kann jedoch viel Zeit und Mühe sparen. Website-Framework

• Die Verwendung eines Wireframing-Tools bietet Ihnen einen besseren Ausgangspunkt. 

Mit Bleistift und Papier beginnen Sie buchstäblich mit einer leeren Tafel. Rahmenwerkzeuge erleichtern den Einstieg. Die meisten verfügen über Layoutrichtlinien, auch wenn es sich um ein einfaches Raster handelt. Einige stellen sogar Standardelemente bereit, die Sie auf der Seite platzieren können, sodass Sie nichts zeichnen müssen.

• Das Bearbeiten und Korrigieren ist viel einfacher geworden. 

Wenn Sie auf Papier arbeiten, müssen Sie bei jeder großen Änderung das gesamte Drahtmodell neu zeichnen. Bei vielen Wireframing-Tools können Sie Elemente einfach per Drag & Drop verschieben. Dies kann Stunden an Arbeit sparen, unabhängig davon, ob Sie das Original verfeinern Entwerfen oder nehmen Sie Änderungen nach Kundenwunsch vor.

• Die Ergebnisse sehen professioneller aus. 

Selbst dem besten Designer kann es ein wenig an zeichnerischen Fähigkeiten mangeln. Mit einem Wireframing-Tool müssen Sie sich nie darum kümmern, eine gerade Linie zu zeichnen oder sicherzustellen, dass ein Element perfekt zentriert ist. Da es sich bei einem Wireframe natürlich nur um ein Wireframe handelt, ist sein Erscheinungsbild nicht so wichtig wie das Erscheinungsbild der fertigen Website. Aber wenn du mit Kunden arbeiten, ein supersauberer Rahmen könnte sie beeindrucken. Dies kann auch Missverständnissen vorbeugen, wenn beispielsweise ein Kunde davon ausgeht, dass ein Element nicht zentriert wird, nur weil es im Drahtmodell leicht außermittig gezeichnet wurde.

• Es ist bequemer für Ihr Team. 

Framework-Tools erleichtern die Zusammenarbeit mit anderen erheblich. Bei vielen Tools können Sie mehreren Benutzern Zugriff gewähren, sodass jeder an denselben Dateien arbeiten kann. Mit Funktionen für die Zusammenarbeit kann Ihr Team die Notwendigkeit beseitigen, die aktuelle Version einer Datei zu teilen. Ihr gesamtes Team kann nahtlos zusammenarbeiten, unabhängig davon, ob Sie sich im selben Büro befinden oder nicht. Website-Framework

• Dies ist für Webdesign-Kunden bequemer. 

Da die Verwendung eines Wireframing-Tools für Ihr Team schneller und einfacher ist, verbessert es auch die Servicequalität, die Sie bieten, wenn Sie Websites für andere entwickeln. Ihre Kunden können Wireframe-Muster schneller erhalten und es wird für Sie viel einfacher sein, Änderungen vorzunehmen. Es verbessert Qualität des Kundenservice. Und natürlich ist die Wahrscheinlichkeit größer, dass zufriedene Kunden Ihnen eine gute Bewertung hinterlassen oder Sie weiterempfehlen Kunden für Ihr Unternehmen.

Auch wenn Sie ein Experte darin sind, schnell saubere Drahtgitter auf Papier zu zeichnen, lohnt es sich, sich die Zeit zu nehmen, den Umgang mit dem Drahtgitter-Werkzeug zu erlernen. Glücklicherweise sind viele davon kostenlos und für viele kostenpflichtige Tools gibt es kostenlose Testversionen, die Ihnen bei der Auswahl des richtigen Tools für Sie und Ihr Team helfen. Mal sehen, was da ist!

 

Wireframe.cc Site-Frame

Typ: Internetanwendung

Kosten: Kostenlose Version verfügbar; Prämie von 16 bis 99 Dollar pro Monat

wireframe.cc ist ein minimalistisches Wireframing-Tool für alle, die Bleistift und Papier bevorzugen. Es läuft direkt in Ihrem Webbrowser, sodass kein Download erforderlich ist. Die Anwendung beginnt mit einem einfachen Raster, auf dem Sie mit verschiedenen Werkzeugen verschiedene Drahtgitterelemente zeichnen können. Es ist äußerst einfach zu bedienen und es gibt eine kostenlose Version. Wenn Sie der Meinung sind, dass die Funktionen der kostenlosen Version zu eingeschränkt sind, können Sie auf einen Premium-Plan upgraden, um weitere Funktionen freizuschalten.

 

Jumpchart-Site-Drahtmodell

Typ: Internetanwendung

Kosten: Kostenlose Version verfügbar; Prämie 5 – 50 $/Monat.

Sprungdiagramm nicht für die visuelle Website-Gestaltung gedacht. Stattdessen soll es Ihnen bei der Planung helfen, wie Ihre einzelnen Seiten zueinander in Beziehung stehen. Dies ist für UX (Benutzererfahrung) genauso wichtig wie Seitenlayouts, weshalb Jumpchart ein weiterer Wert ist kostenloses Werkzeug, das zu Ihrem Arsenal an Website-Planung hinzugefügt werden kann. Wie zu erwarten ist, hat der kostenlose Plan seine Grenzen (ein Projekt mit bis zu 10 Seiten und 2 Benutzern), aber er ist ein guter Ausgangspunkt für die Planung einer einfachen Website. Bezahlte Pläne bieten Ihnen mehr Optionen und ermöglichen die Zusammenarbeit mit mehr Seiten und Teammitgliedern sowie mehreren Projekten gleichzeitig.

Wenn Sie ein aufstrebender Webdesigner mit kleinem Budget sind, bietet Ihnen die gemeinsame Verwendung von Wireframe.cc und Jumpchart alles, was Sie zum Planen einer Website benötigen. Dies ist das visuelle Layout, das von Ersterem abgedeckt wird, und die Sitemap-Planung, die von Letzterem abgedeckt wird. Beide Anwendungen ergänzen sich sehr gut und sind kostenlos ohne Download erhältlich.

 

Gliffy/Site-Drahtmodell

Typ: Internetanwendung

Kosten: Kostenlose Version verfügbar; Vollversion 7,99 $/Monat

Gliffy nicht nur für Wireframes. Dies ist eine webbasierte Diagrammanwendung, die jedoch Wireframes und andere Arten von Layouts enthält. Es ist etwas weniger intuitiv als Wireframe.cc oder Jumpchart, aber dennoch einfach zu verwenden (Drag & Drop) und kann die Zwecke der beiden oben genannten Apps kombiniert erfüllen. Mit Gliffy können Sie Wireframes für Webseiten sowie Flussdiagramme zur Darstellung Ihrer Sitemap erstellen. Es verfügt über eine Reihe integrierter Elemente zur Darstellung verschiedener Teile einer Webseite oder eines anderen Layouts, und Sie können auch Ihre eigenen Bilder hochladen. Sie können es auch für andere Entwurfs- oder Planungsaufgaben nützlich finden, bei denen Diagramme erstellt werden. Website-Framework

 

MockFlow

Typ: Internetanwendung

Kosten: Kostenlose Version verfügbar; Prämie 19–45 $/Monat.

MockFlow vereint außerdem Funktionen zum Erstellen von Wireframes und zum Planen von Sitemaps. Es ist spezialisierter als Gliffy und konzentriert sich daher mehr auf Websites und Teamzusammenarbeit als auf Diagramme. Die Wireframing-Tools sind hervorragend und verfügen über eine vorgefertigte Bibliothek mit Layouts und Komponenten, die Ihnen den Einstieg erleichtern. Sie können ganz einfach in wenigen Minuten ein Wireframe erstellen und es dann nach Ihren Wünschen bearbeiten. Premium-Pläne schalten zusätzliche Funktionen wie wertvolle Funktionen für die Teamzusammenarbeit und mehr frei. Bei jährlicher Zahlung erhalten Sie 20 % Rabatt sowie einige Bonusfunktionen wie den Offline-Modus und zusätzliche Tools. Website-Framework

 

canva

Typ: Internetanwendung

Kosten: Kostenlose Version verfügbar; Vollversion 9,99 $/Monat (jährliche Abrechnung)

canva ist ein beliebtes Online-Tool zum Erstellen professioneller Grafiken, auch wenn Sie kein Designer sind. Es ist vollgepackt mit Vorlagen, Illustrationen, Fotos und mehr. Da es sich nicht um ein spezielles Wireframing-Tool handelt, fehlen ihm einige Funktionen anderer Lösungen, die wir bisher untersucht haben. Sie können damit jedoch weiterhin ganz einfach Wireframes per Drag & Drop erstellen.

 

Adobe XD/Site Framework

Typ: Software; verfügbar für Mac und Windows

Kosten: Kostenlose Version verfügbar; Die Vollversion beginnt bei 9,99 $ pro Monat.

Adobe XD ist ein fortschrittliches UX-Designtool, das von den Entwicklern von Photoshop, Illustrator, InDesign und anderen bekannten professionellen Softwareprogrammen entwickelt wurde. Wenn Sie mit Adobe-Software vertraut sind, wissen Sie um den hohen Spezialisierungsgrad und die Leistungsfähigkeit jeder ihrer Anwendungen. Solange Sie bereit sind, die Lernkurve zu erklimmen, bieten Ihnen die Tools eine Menge Kontrolle, mit der Sie fast alles produzieren können, was Ihnen einfällt. Adobe XD ist da nicht anders und bietet einen umfangreichen und robusten Satz an Webdesign-Tools. Es geht über Website-Wireframes hinaus und ermöglicht Ihnen auch die Erstellung vollständiger Modelle und sogar Prototypen in einer einzigen Projektdatei. Glücklicherweise ist die Verwendung auch einfacher zu erlernen als andere Adobe-Software, sodass es auf jeden Fall einen Versuch wert ist, wenn Sie nach einer fortschrittlicheren Lösung suchen. Website-Framework

 

Figma

Typ: Verfügbar als Webanwendung und als Software für Mac, Windows und Linux.

Kosten: Kostenlose Version verfügbar; Prämie 12–45 $/Monat.

Figma Der Schwerpunkt liegt stark auf der Zusammenarbeit zwischen Teammitgliedern in Echtzeit. Allerdings sein Werkzeuge sind gleichermaßen nützlich auch für Solo-Designer. Figma bietet alles, was Sie zum Erstellen eines Wireframes benötigen, unabhängig davon, ob Sie ein einfaches Design suchen oder ein fortgeschritteneres Design anstreben. Die Bearbeitungswerkzeuge bieten ein hohes Maß an Präzision, sodass Sie das Design nach Bedarf anpassen können. Figma ist außerdem äußerst kompatibel mit mehreren Betriebssystemen und kann daher eine ideale Lösung für ein Linux-Entwicklungsteam sein.

 

So wählen Sie ein Rahmenwerkzeug aus

Die Wahl der Werkzeuge sollte immer von Ihren Bedürfnissen abhängen. Ein Website-Framework unterscheidet sich in dieser Hinsicht nicht von anderen Projekten. Wichtig ist auch die Auswahl der richtigen Werkzeuge im Vorfeld. Natürlich können Sie mit einem kleineren Budget beginnen und dann, wenn möglich, aufrüsten. Sie möchten jedoch vermeiden, Tools zu verwenden, die für Ihre Anforderungen überhaupt nicht geeignet sind. Website-Framework

Wie wählt man also das beste Wireframing-Tool für Webdesign aus? Stellen Sie sich folgende Fragen:

• Wie hoch ist mein Budget? Berechnen Sie, wie viel Sie für Software oder den Zugang zu Premium-Apps ausgeben können. Denken Sie daran, dass es sich hierbei in der Regel um eine monatliche oder jährliche Gebühr handelt.
• Wie viele Teammitglieder benötigen Zugriff auf die Tools? Dies könnte den Unterschied zwischen einem Upgrade auf Premium oder der Verwendung eines kostenlosen Kontos ausmachen.
• Auf welchem ​​Betriebssystem soll das Tool laufen? Wenn Sie sich nicht sicher sind, bleiben Sie am sichersten bei Web-Apps.
• Welche Funktionen benötige ich? Vergleichen Sie die verfügbaren Funktionen mit der Größe Ihres Projekts. Wenn Sie nur ein einfaches Drahtmodell erstellen müssen, reicht ein eingeschränkteres Tool aus. Wenn Sie jedoch Wireframes und Prototypen vollständig erkunden oder auch Ihre Sitemap-Struktur planen müssen, sind Sie mit einem fortgeschritteneren Tool (oder einer Kombination aus beidem) besser bedient.
• Wie komfortabel bin ich mit einem bestimmten Werkzeug? Wenn Sie Ihre Optionen entsprechend Ihren Anforderungen eingegrenzt haben, probieren Sie alle Tools aus, die diese Anforderungen erfüllen. Profitieren Sie von den kostenlosen Testversionen! Selbst Tools mit ähnlichen Funktionen können zu sehr unterschiedlichen Benutzererfahrungen führen. Wählen Sie eine, mit der Sie einfach (oder sogar unterhaltsam) arbeiten können.

 

Wichtige Punkte/Site-Framework

Webdesign ist ein lohnendes Feld mit vielen verfügbaren Tools, die es einfacher machen. Ein Wireframing-Tool kann Ihren Arbeitsablauf vereinfachen und zu einem zentralen Bestandteil Ihres Designprozesses werden. Fassen wir zusammen, was wir behandelt haben:

• Ein Wireframe-Tool macht Webdesign für einen Designer viel einfacher und schneller, unabhängig davon, ob er alleine oder mit einer Agentur arbeitet.
• Es stehen viele tolle Optionen zur Verfügung, egal ob Sie eine Web-App verwenden oder Software auf Ihrem Computer installieren möchten.
• Für größere Teams und/oder größere Projekte können verschiedene Framework-Tools besser sein. Andere sind eingeschränkter.
• Viele Wireframing-Tools bieten eine kostenlose Version an, und durch die Bezahlung können viele dieser Einschränkungen beseitigt werden.
• Um das richtige Wireframing-Tool zu finden, müssen Sie sich einige grundlegende Fragen stellen.
• Suchen Sie immer nach einer kostenlosen Testversion, mit der Sie sich mit der Software vertraut machen können.

Egal, ob Sie ein erfahrener Designer sind oder gerade erst anfangen, es ist etwas für Sie dabei идеальный Layout-Tool. Sobald Sie es gefunden haben, werden Sie nie wieder auf Bleistift und Papier zurückgreifen!

 АЗБУКА