Mit DevTools zur Verbesserung der UX-Design-Entwicklungsprozess

0
17

Ich möchte Ihnen sagen, wie ich sehe, code und design überschneiden und sich gegenseitig unterstützen. Konkret habe ich abdecken wollen, wie Designer code verwenden können, in Ihrer täglichen Arbeit. Ich schlage vor, diese nicht, weil es eine entsprechende Fähigkeit, sondern weil auch eine baseline Verständnis der Codierung machen kann designs besser und der hand-off vom design bis zur Entwicklung glatter.

Als UX-Designer bin ich stets auf der Suche nach guten Möglichkeiten, um sowohl erkunden meiner UX-design-Probleme und kommunizieren die endgültigen Entwürfe zu den anderen. In den vergangenen 30 Jahren hat sich meine Arbeit immer beteiligt ist, arbeitet gemeinsam mit Entwickler, aber im Allgemeinen gab es eine große Kluft zwischen dem, was ich Tue und was tun die Entwickler.

Ich kann code auf einer grundlegenden Ebene. Zum Beispiel habe ich geholfen, lehren Sie C, um die Studenten zurück, wenn ich ein post-graduate-student. Ich habe gearbeitet, die usability der JDeveloper von Oracle Integrated Development Environment (IDE) für Java. Ich arbeitete auch für eine sehr kurze Zeit auf der Vereinfachung der UX eines WordPress-content-management-Umgebung zugänglich zu machen, um weniger technische Benutzer. Dies benötigt ein gutes Verständnis von HTML und CSS. Ich mich auch auf das design der PHP website hatte und zu entwickeln ein Verständnis von der server-Seite in der web-Entwicklung.

Aber auch angesichts dieser Erfahrungen, ich bin kein Entwickler, der in jedem wahren Sinne des Wortes. Wenn ich gerade auf der Suche im code, es ist eine “just in time” – lernen, Modell — ich schaue was ich brauche und dann wird es zu hacken, bis es funktioniert. Das erlernen dieser Weg wurde oft verpönt, ein bisschen wie das lernen zu fahren, ohne Unterricht. Holen Sie die schlechte Entwicklung der Gewohnheiten, aber vielleicht ist das OK für die Arbeit, die ich tun.

Also, Nein, ich habe nicht zu entwickeln oder code schreiben. Mein Tag-zu-Tag Arbeit ist vor allem damit verbracht Zeichnung, die Unterhaltung und das sammeln von Anforderungen. So weit wie design geht, werde ich beginnen, durch skizzieren von Konzepten in einem Notizbuch oder mit Balsamiq. Dann ziehe ich, bis UX wireframes und Prototypen mit tools wie Axure, Adobe XD, InVision Studio, Figma und Skizze. Von der Zeit bin ich bereit, die hand von meinen arbeiten, die Entwicklung, das seh-Vermögen und-Dokumentation wurden definiert und kommuniziert. Aber ich glaube nicht, Schritt über die Linie in die code-Entwicklung. Das ist einfach nicht mein Fachgebiet.

Also, warum sollten die Designer know-code?

Wir haben bereits festgestellt, dass ich bin kein Entwickler, aber ich habe vor kurzem ein Verfechter für die Designer bekommen ein gutes Gefühl dafür, wie design und code interagieren.

In der Tat, würde ich es nennen, “das Spiel mit dem code.” Ich bin definitiv nicht dafür, dass UX-Designer, Entwickler, aber zumindest denke ich, dass die Designer profitieren würden, indem Sie immer komfortabel mit einem grundlegenden Verständnis von dem, was ist derzeit möglich mit CSS und best practices in HTML.

Als experimentelle, ist ein großer Teil der dabei design. Code ist nur ein weiteres medium, mit dem wir Experimentieren können und bauen schöne Lösungen. So, wir Blick auf eine paar Möglichkeiten Designern Experimentieren mit code, auch mit einem Licht zu verstehen. Was wir abdecken, hier kann offensichtlich für die Entwickler, aber es gibt viele Designer gibt, die noch nie experimentiert mit dem code und werden sehen, diese für die erste Zeit.

Also, es ist für Sie (und vielleicht eine Auffrischung für Sie) wir betrachten die folgenden browser-tools.

DevTools: Der ultimative code-Spielplatz

Einer der Vorbehalte, einen UX-designer haben könnten, ist zu wissen, wie ein design hält, wenn es einmal im browser. Sind die Farben korrekt? Sind Schriftarten, die lesbar sind und dies während? Wie die Elemente reagieren auf die verschiedenen Geräte? Wird meine grauen hover-Zustand der Arbeit mit dem weiß/Grau zebra striping auf meine Bewerbung grids in der Praxis? Dies sind nur einige der styling und die Interaktion Designer denken, wenn wir unsere Arbeit aus für die Entwicklung.

Dies ist, wo DevTools kann ein designer der beste Freund. Jeder browser hat seine eigene version davon. Sie können bereits gespielt haben, mit solchen tools vor. Es ist die kleine “Inspect” – option beim Rechtsklick auf dem Bildschirm.

Betreten Sie die wunderbare Welt der DevTools getan werden kann, von einer beliebigen Webseite.

Was macht DevTools so eine wunderbare Ressource ist, dass es eine Möglichkeit bietet, zu manipulieren, den code für eine live-website oder Webanwendung, ohne dass die Einrichtung einer Entwicklungsumgebung. Und es ist Einweg. Alle änderungen, die Sie vornehmen, sind nur für Ihre Augen bestimmt und reingewaschen werden, den Augenblick, den browser aktualisiert.

Bearbeiten von code in DevTools macht änderungen, um die Seite on-the-fly.

Weitere, DevTools nachahmen können andere Geräte.

Brauchen, um zu sehen, wie eine Seite oder Veränderungen zu suchen, die auf anderen Geräten? DevTools kann Ihnen eine Idee geben.

Und, wenn Sie es noch nicht gesehen habt, Firefox veröffentlicht eine wunderbare neue Form der Pfad-editor, der ist sehr wertvoll für die Erkundung von interessanten designs.

In den letzten paar Monaten arbeite ich an einer komplexen web-client für ein enterprise-level-Anwendung. Letzter sprint, meine UX design-Geschichte war die Erkundung der Blick von der Einstiegsseite der web-Anwendung und wie die Einführung eines neuen Farbschema. Es war schwer, sich vorzustellen, wie die Veränderungen, die ich machte, waren Auswirkung auf das Werkzeug als ganzes als einige der Komponenten, wechselte ich in das Produkt.

Eines Tages, wenn er über eine design-Entscheidung, einer von den Entwicklern getestet, meine vorgeschlagene änderung an einer Komponente mithilfe der neuesten DevTools in seinem browser. Ich war erstaunt darüber, wie viel DevTools gewachsen und erweitert, seit ich das Letzte mal erinnern. Ich konnte sofort sehen, die Auswirkungen des Wandels in unserer gesamten web-Anwendung und wie die verschiedenen design-Entscheidungen zu-sammen mit der bestehenden Konstruktion. Ich begann zu Experimentieren mit DevTools mich und war in der Lage, um eine Vorschau und Experimentieren Sie mit, wie meine eigene einfache CSS-änderungen an Komponenten wirkt sich auf die gesamte web-Anwendung. Super hilfreich!!!

Allerdings war es auch ein wenig frustrierend, nicht in der Lage, meine Experimente und Veränderungen für die Zukunft auf. Also, ich ging zu erforschen, um zu sehen, was draußen war, um meinen design-Prozess.

Chrome-browser-Erweiterungen

DevTools ist erstaunlich direkt aus der box, aber das Experimentieren mit code bekommt noch mehr awesome als browser-Erweiterungen Hinzugefügt, um den mix. Chrome hat ein paar, die ich wirklich mag.

Chrome-Erweiterung 1: Benutzer-CSS

User-CSS ist eine Chrome browser-Erweiterung, die Ihnen erlaubt, speichern Sie die änderungen, die Sie in DevTools in eine editierbare CSS-code tab. Diese CSS-änderungen werden automatisch ausgeführt, auf dieser Seite, ob Benutzer CSS aktiviert ist. Dies bedeutet, dass Sie festlegen können, bis CSS überschreibungen für jede Seite auf der Website, die Sie später, und Sie mit anderen zu teilen. Dies kann ein unglaubliches Werkzeug, wenn, sagen, tun ein design-review einer staging-site, vor release, oder wirklich alle design-exploration für eine web-Anwendung oder website ist für die Anzeige in einem browser.

Das erste, was ich mit User-CSS die änderungen in der Chrome-Elemente-Palette. Dann ich schneiden Sie einfach und fügen Sie die CSS-änderungen von Chrome DevTools auf die User-CSS-code-Register wie ich entlang gehen. Dieses video zeigt im detail die verschiedenen Möglichkeiten zum Bearbeiten von CSS, HTML und Javascript in Chrome DevTools und wie ich UserCSS.

Benutzer CSS hat eine schöne eingebaute code-editor, also mein code ist immer gut formatiert und enthält syntax-highlighting, so dass ich nicht haben, um sorgen über diese Art der Sache. Ich mag besonders die Tatsache, dass die überschreibungen werden sofort ausgeführt, so dass Sie sehen können, änderungen on-the-fly. Es hat auch eine nützliche Schalter, der Ihnen erlaubt, schalten Sie Ihren überschreibt-und ausschalten. Dies macht es sehr einfach zu zeigen, eine Reihe von änderungen zu einem team. Diese Erweiterung hat mir erlaubt, zu leicht präsentieren ein Vergleich zwischen einer vorhandenen Seite design und vorgeschlagene änderungen. Ich habe es sogar schon benutzt, um ein einfaches video demonstriert die vorgeschlagenen änderungen des Entwurfs.

In diesem video mache ich ein paar einfache änderungen an meiner web-Seite und dann zeigen, wie ich das ein-und ausschalten die änderungen, indem Sie einfach die Taste on/off auf Benutzer-CSS:

Diese Erweiterung ist ideal, wenn Sie alles, was Sie tun müssen ist, Bearbeiten Sie die CSS-besonders, wenn Sie haben einige sehr einfache design änderungen vornehmen möchten, um diese änderungen zu bestehen. Allerdings ist die Komplexität der Konstruktion erhöht, ich fand mich wollen, um zu speichern mehr als ein code-snippet zu einer Zeit. Kopieren und einfügen von code in die und aus der User-CSS-editor war immer ein Schmerz. Ich wollte etwas mit mehr Flexibilität und Freiheit, zu Experimentieren. Ich wollte auch anschauen zu können einfache änderungen an der HTML-von meiner web-Anwendung selbst spielen und mit ein bisschen JavaScript.

Das ist, wo die nächste Erweiterung ins Spiel kommt.

Chrome-Erweiterung 2: Web Überschreibt

Die zweite Erweiterung für Google Chrome, die ich gefunden ist, sogenannte Web-Überschreiben, und es bietet eine Möglichkeit zum überschreiben von HTML, CSS und JavaScript. Alle von Ihnen! Dies ist dargestellt, wie drei Registerkarten, viel die gleiche Weise CodePen hat, das macht es ein sehr mächtiges Werkzeug für die Erstellung von groben arbeiten design-Prototypen.

Web Überschreibt ermöglicht Ihnen auch das speichern von mehreren Dateien, so dass Sie wechseln können verschiedene Teile eines design-oder ausgeschaltet in unterschiedlichen Kombinationen. Es auch schnell schaltet um zwischen den verschiedenen Optionen zu zeigen, verschiedene design-Konzepte.

Dieses video zeigt, wie ich fügte hinzu, ein HTML-element in eine Seite bearbeitet und das neue element mit einigen grundlegenden CSS:

Mit dem HTML-tab macht es möglich, Bearbeiten Sie ein beliebiges element auf der Seite, wie die swap-logo, entfernen Sie unnötige Elemente, oder neue hinzufügen. Die JavaScript-tab ist ähnlich, ich kann machen einfache änderungen, wie das injizieren zusätzlicher text in der website-Titel, so dass ich testen kann, wie dynamische Veränderungen können Einfluss auf die layout — dies kann nützlich sein, für die Erprobung unterschiedlicher Szenarien, wie Unterschiede, die mit der Internationalisierung.

Diese änderungen können einfach aus einem coding-Perspektive, aber Sie erlauben mir, zu erforschen Hunderte von Entwürfen-in einer viel kürzeren Zeit und mit viel weniger Risiko als scooting Pixel in einem design-Anwendung. Ich habe buchstäblich konnte nicht entdecken, wie viele Ideen so schnell mit meinem traditionellen UX prototyping-tools wie kann ich mit dieser Erweiterung.

Und, was mehr ist, sowohl mich als auch mein team haben das Vertrauen in design deliverables, weil wir testeten Sie früh auf in den browser. Auch die pixelgenaue Photoshop-Datei kann in der übersetzung verloren gehen, wenn die Gestaltung in den browser, weil es ist wirklich nur eine Momentaufnahme, ein design in einem statischen Zustand. Testen der Entwürfe zunächst im browser mit diesen Erweiterungen beweisen, dass das, was wir entworfen haben, ist möglich.

Auf der anderen Seite, möchten Sie vielleicht, um zu überprüfen, wie Jon Kantner ähnliche browser-Erweiterungen zu deaktivieren CSS als Mittel zur Prüfung der semantischen markup verschiedene Seiten. Es ist nicht genau das design bezogen, aber interessant zu sehen, wie diese Werkzeuge können unterschiedliche Anwendungsfälle.

Was hab ich bisher gelernt

Ich bin gespannt, was ich gelernt habe, da die Neigung in die DevTools und browser-Erweiterungen. Ich glaube, meine Ausführungen sind so viel besser als ein Ergebnis. Auch finde ich mich in der Lage, mehr produktive Gespräche mit den Entwicklern, weil wir jetzt eine Möglichkeit haben, gut zu kommunizieren. Die Gemeinsamkeiten zwischen design und code in rapid-Prototypen wirklich hilft, die Diskussion erleichtern. Und, weil ich bin Herumspielen mit code, habe ich einen viel besseren Einblick darüber, wie der zugrunde liegende code wird schließlich geschrieben werden und kann sich hineinfühlen viel mehr mit der Arbeit der Entwickler zu tun — und vielleicht, wie kann ich stellen Ihre Aufträge leichter in den Prozess.

Es hat auch eine Kultur des kollaborativen rapid-prototyping auf mein team, das ist eine ganz andere Geschichte.

Spiel mit code eröffnet neue Ideen und ermutigte mich anzupassen, meine Arbeit in den Kontext des web. Es ist gesagt worden, dass immer in den browser oben in der design-Prozess ist die ideale, und diese sind die Arten von tools, mit denen Sie mich (und Sie), um genau das zu tun!

Haben Sie andere Werkzeuge oder Prozesse, die Sie verwenden, um zu erleichtern, die Zusammenarbeit zwischen design und code? Bitte teilen Sie in den Kommentaren!