Beste Ressourcen zum Skizzieren von gitterbasierten Wireframes
Der Prozess von Entwerfen einer Schnittstelle fängt immer mit an Ideengenerierung. Dazu gehören die Visualisierung, die Erforschung anderer Standorte und das Rapid Prototyping. Diese frühe Ideenphase ist entscheidend für verstehen das Layout und die Benutzererfahrung du hast vor zu bauen. Wie sollten Sie also die Wireframing-Arbeit für ein neues Projekt durchführen??
Ich bin ein Fan von traditionellem Papier und Bleistift mit zusätzlichen Werkzeugen. Aber digitales Wireframing ist auch groß und für moderne Designer eine praktikable Option. In diesem Artikel möchte ich die besten Ressourcen für beide Techniken zur Verfügung stellen, um Sie bei der Erstellung Ihrer eigenen zu unterstützen gitterbasierte UI-Wireframes.
Frühe UI / UX-Konzeptualisierung
Beginnen wir mit der Klärung der Unterschiede zwischen a Wireframe und ein Prototyp. Diese beiden Wörter werden oft austauschbar verwendet, da sie sich auf denselben Prozess beziehen.
EIN Wireframe ist ein einzelne statische Skizze der Benutzeroberfläche einer Webseite oder einer App. Es können Beschriftungen enthalten sein, um Schaltflächentext, Ränder, Elementgrößen oder sogar Animationen zu erläutern. Aber Wireframes sind gerecht grobe Entwürfe für einzelne Seiten.
In ähnlicher Weise a Prototyp ist wie ein Flussdiagramm, das zeigt, wie verschiedene Seiten miteinander verbunden sind. Ein Prototyp verbindet also Wireframes, um zu zeigen, wie verschiedene Schaltflächen oder Links zu anderen Seiten führen sollen.
Diese Definitionen sind nicht in Stein gemeißelt, manche Designer haben möglicherweise eine eigene Terminologie und stimmen möglicherweise nicht mit meiner genauen Formulierung überein. Aber so habe ich sie häufig beschrieben und viele Designer verstehen diese Begriffe am besten.
Was solltest du also genau mit diesen frühen konzeptionellen Stücken machen? Sind sie wirklich notwendig? Ich würde sagen, Prototyping ist nicht immer notwendig, aber es ist eine sehr gute Idee, insbesondere für das Design von Apps mit komplexen Interaktionen.
Aber Wireframing ist immer eine gute idee für jedes neue Projekt. Es hilft dir konzentrieren sie sich auf das große bild ohne sich um Details zu kümmern. Sie erhalten ein Gefühl dafür, wie die Gesamtseite angeordnet ist. Dies ist von unschätzbarem Wert, wenn Sie ein konkretes Layout entwerfen.
Ziele für das Wireframing
Jedes Mal, wenn Sie ein neues Projekt beginnen, sollten Sie darüber nachdenken was Sie zu lösen versuchen. Jede Site ist auf ein bestimmtes Ziel ausgerichtet. Viele Websites haben sogar mehrere Ziele, bei denen einige Ziele wichtiger sind als andere.
Verwenden Sie Wireframing als Leitfaden, um die beste Strategie für Sie zu finden Erfassen der Ziele einer Website. Dies wird wahrscheinlich beim ersten Drahtgitter nicht passieren. Seien Sie also darauf vorbereitet skizzieren Sie viele verschiedene Ideen.
Suchen Sie nach ähnlichen Websites und notieren Sie sich deren beste Eigenschaften. Analysieren Sie, wie der Inhalt organisiert ist und wie Sie sich durch die einzelnen Seiten bewegen.
Denken Sie an Wireframes aus interaktiver Standpunkt. Das sind nicht nur schöne Bilder. Es sind Darstellungen von digitalen Schnittstellen, und Sie möchten Ihre Ideen vor diesem Hintergrund skizzieren.
Wenn Sie rasterbasierte Ressourcen zur Hand haben, sei es aus Papier oder digital, kann dies beim schnellen Skizzieren viel helfen. Sehen wir uns nun die besten Ressourcen für die Erstellung von Wireframes an.
Raster-Skizzenblöcke
Sie können jederzeit mit einfachen Skizzen auf dem Druckerpapier beginnen grobe Ideen ausarbeiten. Ich persönlich arbeite normalerweise mit Druckerpapier, da ich mich weniger um Raster als um Raster kümmere Ideen generieren.
Punktraster-Skizzenblöcke sind der beste Weg, wenn Sie wollen eine Idee aufräumen, und geben Sie ihm mehr Struktur. Das Raster hilft dir Entfernungen zwischen Artikeln schätzen auf der Seite und erstellen eine Art Symmetrie im Drahtgitter.
Es gibt viele großartige Produkte, wenn Sie möchten Starten Sie das Wireframing auf Papier, Zum Beispiel gibt es das Rhodia Dot Pad in verschiedenen Größen für den täglichen Gebrauch. Es enthält nur 80 Seiten, dies ist jedoch typisch für die meisten Raster-Skizzenbücher.
Ein anderes sehr cooles und anpassbares Produkt ist Dotgrid. Alle Artikel von Dotgrid sind zwar teurer als Rhodia-Bücher, aber mit mehr Materialien und benutzerdefinierten Cover-Designs.
Dotgrid akzeptiert sogar individuelle Bestellungen, die Sie zulassen Gestalten Sie Ihr eigenes Sketchpad. Jedes Buch enthält knapp 100 Blatt, einschließlich Vorder- und Rückseite erhalten Sie etwa 200 Seiten für die Rasterskizze.
Ein paar andere Skizzenbücher mit Punktraster, die ich erwähnen möchte, sind das Behance Dot Grid, das hardcover und spiralgebunden ist, obwohl es nur 50 Blatt Papier enthält.
Das Responsive Design Sketchbook ist eine der besten Ressourcen für Webdesigner. Kein anderer Produktdesigner würde ein responsives Design-Skizzenbuch benötigen, aber Webdesigner profitieren stark von der Freiheit Ideen mit unterschiedlichen Gerätebreiten generieren auf einem Rasterlayout.
Diese responsiven Design-Pads haben auch 50 Blatt mit insgesamt 100 Seiten, jedoch jede Seite vier verschiedene responsive Raster Darstellung unterschiedlicher Haltepunkte im Responsive Design: Desktop, Laptop, Tablet und Smartphone.
Obwohl das Design im Vergleich zu den Dotgrid-Büchern nichtssagend ist, hat für das Design von Designern kein anderer für Webdesigner in Betracht gezogen. Wenn Sie sich für so etwas interessieren, lohnt es sich, eine für eine Probefahrt zu bestellen.
Wenn Sie wirklich handgefertigte Sachen mögen und kein Geld ausgeben möchten, können Sie dies auch tun Drucken Sie Ihre eigenen Rasterseiten mit Schnittstellenskizze. Diese kostenlose Website bietet verschiedene Gittervorlagen das Sie drucken und für handgezeichnete Drahtgitter verwenden können.
Die Raster sind in A4- und US-Buchstabenformaten für verschiedene Druckerpapierarten erhältlich. Sie können aus vielen Optionen auswählen, z. B. Vorlagen für einen Webbrowser in voller Länge oder verschiedene iPhone-Bildschirme.
Alle diese Optionen sind großartig und es lohnt sich, sie zu erkunden, wenn Sie Interesse haben Bleistift skizzieren. Papier ist eines der einfachsten Medien, um schnell neue Ideen zu entwickeln. Daher wird es sogar von UI-Designern bevorzugt.
Digitale Tools und Web-Apps
Es gibt so viele großartige Wireframing-Programme, dass sie kaum abgedeckt werden können, ohne eine Analyse-Paralyse zu riskieren. Wir konzentrieren uns jetzt auf einige der besten Optionen für gitterbasiertes Wireframing.
Zunächst möchte ich erwähnen, dass Sie Adobe-Tools wie Illustrator verwenden können Erstellen Sie Ihre eigenen Wireframes. Dies ist nicht Teil des Workflow von jedermann und Illustrator ist sicherlich nicht kostenlos. Wenn Sie jedoch bereits mit der Adobe Creative Cloud arbeiten, ist dies möglicherweise ein guter Anfang.
1. Moqups
Moqups ist eines der besten Online-Tools für Wireframing. Sie arbeiten mit einem visuellen Editor und einer Asset-Bibliothek, die Sie über die gesamte Seite ziehen und ablegen können.
Jedes neue Moqups-Projekt hat eine vordefiniertes Raster, und verwendet hellviolette Linien, um die Ausrichtung der Elemente zu erleichtern. Es ist ein großartiges Web-Tool, das das Erstellen eines Rasters so viel einfacher macht.
Die Site arbeitet standardmäßig mit einem freien Plan, der den Benutzer auf 300 Seitenobjekte beschränkt. Die Website bietet Premium-Optionen. Die Zahlung einer monatlichen Gebühr kann jedoch ärgerlicher sein, als nur mit Adobe-Tools zu arbeiten oder einen einmaligen Kauf von Sketch zu tätigen.
2. Gitterpapr
Die Grid Papr-Web-App ist kostenlos und bietet sowohl öffentliche als auch private Konten für Ihre Wireframes. Sie erstellen einen Namen für Ihr Projekt und erhalten eine eigene eindeutige URL für das Drahtgitter, die Sie von jedem Computer aus bearbeiten können.
Jedes neue Drahtgitter kommt mit einem Gitter Dadurch können Sie für alle Elemente das Raster ausrichten. Die Funktionen sind einfach, reichen aber aus Erstellen Sie in wenigen Minuten ein Lo-Fi-Drahtmodell. Ziehen Sie einfach das, was Sie möchten, auf die Seite und folgen Sie dem Raster, um ein sternförmiges Drahtgitter zu erstellen.
3. Wireframe.cc
Wireframe.cc ist eines der einfachsten und minimalsten Tools, die Sie für das Wireframing verwenden können. Es verfügt über eine störungsfreie Schnittstelle mit einer vorgefertigtes Gitter und organisierte Symbolleisten. Klicken und ziehen Sie einfach, um neue Elemente auf der Leinwand zu erstellen. Sie können Ihre Arbeit auch speichern und teilen.
Dies ist ein weiteres Tool, das kostenlos mit optionalen Prämienplänen angeboten wird. Jeder Plan wird monatlich in Rechnung gestellt, daher ist er in der Preisstruktur dem Moqups sehr ähnlich. Das kostenlose Tool kann von jedem Computer ohne Konto verwendet werden.
4. Spottdrossel
Mockingbird ist eine weitere großartige Option, die wesentlich mehr Funktionen bietet als die meisten Wireframing-Tools. Sie können kostenlos loslegen, die Testversion ist jedoch auf 7 Tage begrenzt. Dies kann für einige Benutzer ein Ärgernis sein, aber das Tool ist wirklich unglaublich und kann in allen Browsern ausgeführt werden.
Mockingbird verfügt über eine endlose Bibliothek von UI-Elementen wie Tabs, Akkordeons, Dropdown-Menüs, Video-Player und einfache Textlinks. Das Standardgitter verwendet das 960gs-Gittersystem, Sie können jedoch eines auswählen 12, 16 und 24 Spalten.
Letzte Worte
Egal, ob Sie traditionelles oder digitales Wireframing wählen, es geht immer darum Qualität der Ausgabe. Es gibt viel zu lernen, wenn Sie diese Art von Arbeit erledigen. Finden Sie also heraus, welches Werkzeug sich am wohlsten anfühlt.
Vorwärtskommen ist das Beste, was Sie tun können Beginnen Sie einfach mit dem Wireframing. Holen Sie sich ein Gefühl für das, was Ihnen am besten gefällt (Papier oder Digital), und machen Sie es zu Ihrem eigenen. Die Ressourcen in diesem Artikel sollten Ihnen mehr als genug geben, um mit dem Wireframing Ihrer eigenen digitalen Schnittstellen zu beginnen.
(Titelbild von Oykun Yilmaz)
