Die 5 besten Tools für Responsives Design
Lassen Sie mich damit beginnen, dass ich in dieser Liste keine Werkzeuge zum Zeigen und Klicken mit einbeziehen werde (denken Sie an Adobe Edge Reflow). Der Grund ist einfach genug, ich glaube, dass sie schlecht für alle sind; Designer, Kunden, Programmierer ... jeder leidet.
Es ist keine Frage der Qualität des von diesen Programmen ausgegebenen Codes. Es ist nicht, weil es das Design "zu einfach" macht. Es ist, weil, egal wie gut diese Programme sind, sie immer die Leute begrenzen werden, die sie benutzen.
Sie werden begrenzt sein, nicht einmal durch das, was das Programm erreichen kann, sondern durch das, was sie zu erreichen glauben. Wenn sie darüber nachdenken, wird der durchschnittliche Benutzer es wahrscheinlich mit Tools wie PowerPoint und / oder einer beliebigen Anzahl von Druck-Design-Programmen vergleichen, die wieder in alte Denkweisen fallen. Darin liegt das Problem. Visual Web Publishing-Tools werden immer versuchen, alte Prozesse auf neue Technologien anzuwenden.
Ein wirklich web-orientierter Workflow ist einer, der die zugrunde liegenden Konzepte und Technologien umfasst, auf denen das Web aufgebaut ist. Sicher, Sie können eine beliebige Anzahl von visuellen Tools verwenden, um Websites zu erstellen, die technisch ansprechend sind, aber Sie würden den Punkt vermissen.
Es geht nicht um ein anpassungsfähiges Layout. Es geht darum, Informationen so vielen Menschen wie möglich zugänglich zu machen. Es gibt einige Dinge, die ein Programm wie Edge Reflow nicht kann. Kurz gesagt, Sie müssen Code schreiben.
Daher sind die Tools, die Ihnen helfen, Webtechnologien zu verstehen und zu nutzen, Ihre Website gründlich zu planen, Code effizienter zu schreiben und Ihre Responsive Designs für Kunden im Kontext zu testen und zu präsentieren.
Beginnen wir mit dem Offensichtlichen:
1) Dein Browser
Nein, ich mache keine Witze. Dies ist buchstäblich das wichtigste Werkzeug, das Sie haben, denn es zeigt Ihnen genau, wie Ihre Website unter Ihren spezifischen Bedingungen aussieht.
Es gab viele Diskussionen darüber, ob das Design im Browser besser ist als das Design in einem Bildbearbeitungsprogramm wie Photoshop oder GIMP. Erlaube mir, dies für dich zu lösen ...
Werden die Nutzer Ihrer Website in Photoshop surfen? Bildeditoren können hübsche Bilder machen, nicht die tatsächlichen Erfahrungen nachbilden. Verwenden Sie Bildeditoren zum Bearbeiten von Bildern. Verwenden Sie Ihren Browser, um Websites zu gestalten.
Es ist Zeit, unsere Kunden von den hyper-detaillierten Modellen, an die sie sich gewöhnt haben, zu entwöhnen. Wenn sich das Web ändert und unsere Prozesse flüssiger und iterativer werden, müssen wir weitermachen.
Installieren Sie mindestens einen Browser mit jeder wichtigen Rendering-Engine und erhalten Sie einige Entwicklererweiterungen. Gewöhnen Sie sich daran, Ihren Quellcode so zu betrachten, wie Ihr Browser ihn sieht, denn Sie werden eine Weile hier sein.
2) Google Drive's Zeichen-App
Technisch gesehen könnte nahezu jeder vektorbasierte Bildbearbeitungsprogramm die Aufgabe übernehmen, wenn Sie Ihre Websites und Apps drahtlos gestalten. Ich neige dazu, zuerst die Desktop-Version meiner Site zu verkabeln, eine Kopie der Datei zu erstellen, die Größe der Leinwand zu ändern und von dort aus zu gehen. Durch die Verwendung von Vektoren können Sie Ihre Elemente schnell anpassen und neu anordnen, während Sie sich noch in der Planungsphase befinden.
Ich bevorzuge die Zeichnungs-App auf Google Drive aus ein paar Gründen:
Funktionen zum Teilen und Zusammenarbeiten: Google teilt Informationen besser als alle anderen. Mit In-Context-Kommentaren, gleichzeitiger Bearbeitung und Hangout-Integration bin ich verliebt.
Automatische Hilfslinien: In jedem Zeichnungsdokument werden Hilfslinien basierend auf den Abmessungen jedes Objekts, das Sie in das Dokument einfügen, automatisch erstellt. Dies macht es einfach, konsistent große Elemente im Dokument darzustellen, was für gitterbesessene Designer wie mich großartig ist.
Da ich diese Wireframes mit Kunden teile, ist diese professionell aussehende Konsistenz ein großes Plus. Und dennoch bin ich nicht auf diese Führer beschränkt. Ich sehe es als eine gute Alternative zu Mockup-Apps, die versuchen, dich zu einem Raster zu zwingen.
Oh, und es ist kostenlos. Muss ich mehr sagen?
3) Stil-Prototypen
Basierend auf Stilfliesen, Stil-Prototypen sind ein In-Browser-Angebot, mit dem Sie Ihren Kunden eine Vorstellung davon geben können, wie die Typografie-, Farb- und UI-Elemente ihrer Website aussehen werden. Da es im Browser angezeigt werden soll, werden nach der Erstellung der Website weniger Inkonsistenzen auftreten.
Außerdem würde ich sagen, dass Style Prototypes unseren Kunden helfen könnte, die Konzepte von UX und Ästhetik mental zu trennen. Und wirklich, alles, was unseren Kunden hilft, den Webdesign-Prozess besser zu verstehen, kann nur eine gute Sache sein.
4) Verantwortlicher
Verantwortlicher ist ein einfaches Tool, das Ihre Website in verschiedenen Größen anzeigt. Es imitiert auf sehr einfache Weise mehrere verschiedene Gerätegrößen und -zusammenhänge. Dieses Tool ist nicht zu Ihrem Vorteil. Sie möchten sehen, wie Ihre Website in kleineren Größen aussieht? Größe des Browserfensters Besser noch, holen Sie sich einige echte mobile Geräte und machen Sie ein paar echte Tests.
Diese Web-App wird am besten verwendet, um Ihren Kunden eine schnelle Annäherung dessen zu zeigen, wie ihre Website in anderen Kontexten als einem Desktop- oder Laptop-Monitor aussehen wird.
Auch hier gibt es viele Tools, die dieselbe Aufgabe erfüllen könnten wie der Responsi- nator, und genauso gut, nehme ich an. Ich wählte dieses, weil es mehrere Gerätesilhouetten nacheinander für die einfache Durchsicht präsentiert.
5) Adobe Edge Inspect
Jetzt ist dieses für dich. Wenn Sie ein mobiles Testlabor haben (und je schneller Sie eines machen können, desto besser) Kantenprüfung synchronisiert alle Ihre Geräte, um dieselbe Seite gleichzeitig anzuzeigen. Aktualisieren Sie die Seite auf einem Gerät, und Sie aktualisieren sie alle.
Im Gegensatz zu den anderen auf dieser Liste ist diese nicht frei. Wenn Sie sich jedoch genug mobile Geräte leisten können, um eine solche Lösung zu benötigen, ist es wahrscheinlich das Geld wert.
Fazit
Wie immer ist Ihr wichtigstes Gut Ihr Gehirn. Diese Werkzeuge und andere wie diese können dir nur auf deinem Weg helfen. Ich habe diese ausgewählt, weil sie sehr spezifische Funktionen ausführen, die mir beim Entwerfen von Responsive Sites helfen. Sie beschränken nicht, was ich tun kann.
Die besten Werkzeuge sind wirklich diejenigen, die aus dem Weg bleiben.
Benutzt du diese Werkzeuge? Was sind Ihre Top-5-Tools für Responsive Design? Lassen Sie es uns in den Kommentaren wissen.
Ausgewähltes Bild / Vorschaubild, Werkzeugbild über Shutterstock.