Dies ist ein so interessanter Gesprächsverlauf, der immer wieder von Jahr zu Jahr auftaucht. Die Idee ist, dass es In-Browser-Tools geben könnte (und vielleicht auch sollte), die Webdesignern bei ihrer Arbeit helfen. Diese Tools existieren bereits in gewissem Umfang. Schauen wir uns die Perspektiven einer breiten Palette von Personen und Unternehmen an, die sich zu diesem Thema geäußert haben.
Ahmad Shadeed schrieb letztes Jahr für uns darüber, wie DevTools für Designer auf vielfältige Weise nützlich sein können, z. B. beim Ändern von Zuständen, Inhalten, Farben, Variablen usw.
Das visuelle Bearbeiten von Dingen wie dieser gibt [Designern] mehr Kontrolle über einige Design-Details, sie können Dinge im Browser anpassen und das Ergebnis dem Entwickler zeigen, damit es implementiert wird.
In einem Beitrag mit dem Titel „A DevTools for Designers“ schrieb A.J. Kandy, dass es nur, weil man Designer ist, nicht bedeutet, dass man nicht programmieren kann – aber man ist vielleicht nicht auf Produktionsniveau und ist woanders schneller.
Ich kann Front-End-Markup bearbeiten; ich bin nur viel *schneller* darin, Rechtecke zu zeichnen und sie zu Benutzeroberflächen anzuordnen. Ich bin technisch, aber kein Coder.
Das hat viele Reaktionen und Gedanken ausgelöst, als wir den Beitrag ursprünglich geteilt haben.
- Jason Santa Maria: Eine echte Webdesign-Anwendung
- Jeffrey Zeldman: Ein Indesign für HTML und CSS?
- Jon Gold: Die Evolution der Werkzeuge
Es ist eine Sache, die bestehenden DevTools für Designer zu verbessern. Firefox hat großartige Arbeit in diesem Bereich geleistet mit Dingen wie ihren Animationstools, Flexbox- und Grid-Inspektoren. Gleichzeitig ist es auch schön zu sehen, wie wir das Thema komplett neu angehen können! Zum Beispiel hat Google VisBug veröffentlicht, eine Erweiterung, die sich speziell an Designer richtet. Das Video ist nur 30 Sekunden lang.
Es gab im Laufe der Jahre viele Meinungen zu Browser-Erweiterungen, die Design-Bearbeitung ermöglichen. Schauen Sie sich Optionen wie Stylebot (Chrome Store Link) an.
Es gibt ein weiteres visuelles Design-Browser-Plugin namens Visual Inspector.
Vergessen Sie diesen klassischen Trick nicht.
Mein Lieblingstrick in DevTools ist wahrscheinlich `document.designMode = "on"`. Schalten Sie ihn ein und beginnen Sie, Text auf jedem Element einer Website zu bearbeiten. Super cool! https://#/bdV9yONayT pic.twitter.com/rkC0ZsTCcD
— Simon Vrachliotis (@simonswiss) 14. November 2018
Oliver Williams schrieb in „Das ultimative Webdesign-Tool: ein Browser“ Folgendes:
Browser-Entwicklungstools waren traditionell nützlich für das Debugging von JavaScript und die Inspektion von Netzwerkanfragen. In jüngerer Zeit haben wir gesehen, dass Browser grafische Benutzeroberflächen zum Bearbeiten von CSS hinzugefügt haben. Die meisten Browser bieten einen Farbwähler und eine Pipette zum Auswählen von Farben. In Chrome hilft dieses Tool, das Farbkontrastverhältnis anzuzeigen. Chrome bietet auch eine grafische Benutzeroberfläche zum Hinzufügen oder Ändern von Textschatten und Boxschatten.
Vielleicht werden Design-Tools uns in dieser Richtung einen großen Schritt voranbringen?
✨isual
✨ evelopment
✨ nvironments☝️ Genau wie die meisten Code-basierten Entwickler heute IDEs zur Softwareentwicklung nutzen, werden wir anfangen, mehrere neue VDEs zu sehen, die eine primär visuelle Art des Designs und der Bereitstellung von Software ermöglichen.
— Vlad Magdalin (@callmevlad) 16. November 2018
Vlad arbeitet mit Webflow, daher kann man sehen, woher er damit kommt.
Jye SR meldete sich mit seinem Beitrag „5 Wege, wie DevTools mein Leben einfacher gemacht haben“ zu Wort.
… es ist möglich, Chrome DevTools zu nutzen, um Wettbewerber zu untersuchen, zu sehen, was mit Add-ons nicht funktioniert, Ihre Ansicht zu ändern, Seitenladezeiten zu verstehen und das Web zu bearbeiten; all das kann digitalen Vermarktern, Produktmanagern oder jedem, der mit einer Website arbeitet, helfen, seine Arbeit effizienter zu erledigen. Es ist ein Werkzeug, das ich jeden Tag benutze und hoffe, dass Sie es auch tun werden!
Es ist schwer, all das zu sehen und nicht zu erkennen, dass sich die Werkzeuge in diese Richtung entwickeln.
Ich bin auf das hier gestoßen. Designer / Entwickler – Eine Ansicht für jeden. https://hadron.app
document.designMode ist cool, aber es speichert die Änderungen nicht in Ihrem HTML.
https://www.modulz.app ist ein weiterer, auf den ich große Hoffnungen setze! Die Bearbeitung im Browser ist großartig und die Werkzeuge für stilistische Anpassungen sind weit fortgeschritten. Ein Tool zu haben, das all das ermöglicht, plus die Erstellung echter Komponenten mit tatsächlichem Code-Output als Referenz, wird schon allein deshalb großartig sein.
Es wird interessant sein zu sehen, ob sie mit rohem HTML/CSS-Code oder React-Komponenten auf den Markt kommen.
Danke für das Sammeln der verschiedenen Ansichten. Es war wirklich bedeutungsvoll.
Ich sehe keine Erwähnung von Werkzeugen für die Zugänglichkeit für Designer. Grundlegende Werkzeuge zur Bewertung von Farb-/Kontrastverhältnissen zwischen Vorder- und Hintergrund usw. Werkzeuge, um zu bestimmen, wie Menschen mit Farbfehlsichtigkeit Ihr Design sehen, usw.
Weiß jemand, wie man diese Art von Arbeit auf dem Chrome-Browser auf einem Android-Telefon durchführt. Bitte helfen Sie. Vielen Dank im Voraus.