Html-sketchapp - der Schlüssel zur Einheit von Programmierern und Designern

Ursprünglicher Autor: Mark Dalgleish
  • Übersetzung
Mark Dalgleisch, Leiter Design-Systeme bei SEEK, sagt, wenn Sie sich ein Team ansehen, das ein Design-System einsetzt, werden Sie feststellen, dass dieser Ansatz offensichtliche Vorteile hat. Sie bestehen darin, dass Designer und Programmierer produktiver arbeiten als ohne ein solches System, die Ergebnisse ihrer Arbeit einheitlicher werden, die Interaktion zwischen verschiedenen Gruppen von Mitarbeitern klarer und kohärenter wird.


Homepage von SEEK Interactive Style Guide

Die meisten Entwurfssysteme weisen jedoch einen grundlegenden Fehler auf. Designer und Entwickler arbeiten trotz der Einführung von etwas ziemlich Modernem in völlig anderen Umgebungen. Infolgedessen müssen Sie erhebliche Anstrengungen unternehmen, um den Code und die Designmaterialien in einem konsistenten Zustand zu halten, da sonst die Materialien, mit denen Designer und Programmierer im Laufe der Zeit arbeiten, immer weiter auseinander gehen.

Es ist nicht verwunderlich, dass Unternehmen, die Konstruktionssysteme einsetzen, das Gefühl haben, dass bei der Entwicklung von Werkzeugen in unserer Branche eine Stagnation zu beobachten ist. Diese Tools sind nicht an die Umgebung angepasst, in der wir arbeiten. Sie sind nicht besonders nützlich, wenn es darum geht, das, was Entwickler tun, auf die Umgebung zu übertragen, in der Designer arbeiten.

Ist es wirklich so schlimm? Mark glaubt, dass wir in naher Zukunft auf eine Veränderung zum Besseren warten. In diesem Artikel spricht er darüber, wie es SEEK gelungen ist, Systeme einander näher zu bringen, in denen Designer und Entwickler so viel arbeiten, wie es moderne Technologien erlauben.

Unsere Reise in die Welt der Designsysteme


Wir bei SEEK arbeiten seit mehr als einem Jahr an einem interaktiven Styleguide mit Oberflächenelementen, die durch React- Komponenten repräsentiert werden , deren Anzahl stetig wächst. Wie zu erwarten war, hat dies unsere Vision von visuellem Design grundlegend verändert.

Als Ergebnis verfügten wir über ein auf Programmcode basierendes Design-System, das nicht nur bestimmt, wie die vom Unternehmen erstellten spezifischen Projekte aussehen, sondern auch den Inhalt des Styleguides, mit dem Designer arbeiten.

Heute wird dieser Leitfaden als interaktive, regelmäßig aktualisierte Website präsentiert. Zu Beginn der Arbeiten am Entwurfssystem haben wir jedoch versucht, die Regeln in Form eines PDF-Dokuments zu formalisieren. Dann kamen eine Reihe von Ausgangsmaterialien für Sketch , standardisierte Zeichen, Farben und Stile von Texten, die darin enthalten waren, konnten leicht als Ausgangspunkt für neue Projekte verwendet werden.


Der erste Satz von Materialien für Sketch von SEEK

Wenig später haben wir mit Craft experimentiert , mit einem Satz von Plugins für Sketch von InVision , von denen ich das Library- Plugin besonders erwähnen möchte .

Dies ermöglichte es uns, eine gemeinsame Bibliothek von Unternehmenssymbolen zu erstellen, um sie in allen Teams und in allen Dokumenten zu verwenden.


Bibliotheks-Plugin aus der Craft-Suite

Zu Beginn der Vorbereitung der Bibliothek wurde der enorme Arbeitsaufwand deutlich, der erforderlich war, um diese Bibliothek auf dem neuesten Stand zu halten, insbesondere in einer Situation der ständigen Weiterentwicklung bestehender und des Auftretens neuer Vorlagen in unseren Projekten.

Entwickler nahmen häufig zusammen mit Designern Änderungen am Code vor, die sich gravierend auf das visuelle Design auswirkten, aber unsere statische Designbibliothek blieb unverändert wie vor diesen Änderungen. Um es auf den neuesten Stand zu bringen, musste sich jemand daran erinnern, dass es aktualisiert werden muss, was normalerweise nicht der Fall war.

Wir sprachen hier also über die Ausbreitung von Richtungsänderungen von Entwicklern zu Designern. Die gleichen Probleme waren für den umgekehrten Prozess charakteristisch. Den Entwicklern fehlte eine zuverlässige Quelle für zuverlässige und relevante Entwurfsinformationen, die sie in ihrem Code verwenden konnten.

Der Weg von React zu react-sketchapp


Um diese Zeit haben wir mit der Arbeit an unserem ersten React-Projekt begonnen. Rendering wurde auf dem Server durchgeführt, dann verwendet webpack und CSS-Module (wir, nebenbei bemerkt , nahmen in ihrer Entwicklung). All dies führte letztendlich zur Erstellung unseres interaktiven Styleguides.

Die Tatsache, dass React komponentenorientiert ist, hat den Übergang zu interaktiver Führung fast unvermeidlich gemacht. Gleichzeitig haben wir gesehen, dass ähnliche Prozesse in anderen Unternehmen auf der ganzen Welt stattfinden.

Sobald wir eine ausreichend große Sammlung von Komponenten erstellt hatten, nutzten andere Teams, die an neuen Projekten arbeiteten, schnell unsere Best Practices. Da der Styleguide nun jedoch aus React-Komponenten und LESS- Styles bestandFür Designer war es nicht besonders nützlich. Das hat uns nicht besonders überrascht, wir haben uns nicht bemüht, es so schnell wie möglich zu beheben. Tatsache ist, dass die technologische Kluft zwischen Designern und Entwicklern ein altes Problem ist, das in unserer Branche schon so lange besteht, dass wir es gewohnt sind, es nicht zu bemerken.

Alles ist beim Alten geblieben, bis wir von dem von Airbnb erstellten Projekt react-sketchapp erfahren haben .


Reagieren-sketchapp

Das ist , was sagt über den reagieren-sketchapp Mitarbeiter Airbnb John Gold: „Der Sketch wir Symbole und Überschreibungen verwenden, zu reagieren - Komponenten und Funktionen. Diese Konzepte ähneln sich so sehr, dass es töricht erschien, sie nicht zu kombinieren. “

Wir trauten unseren Augen nicht. Hier ist es - echter Reaktionscode, der direkt zu Sketch geht. Es schien, als könnten wir endlich ein Designsystem schaffen, aus dem sowohl Entwickler als auch Designer die neuesten und aktuellsten Daten ziehen können.

Bei diesem Ansatz ist die Basis für Designregeln Code, der nicht nur in der Produktion verwendet wird, sondern auch in die Umgebung fällt, in der Designer arbeiten. Während sich der Code und damit die Entwurfsregeln weiterentwickeln, können diese Regeln automatisch auf dem neuesten Stand gehalten und für Designer zugänglich gemacht werden, ohne dass manuell etwas an Sketch übertragen werden muss.

Als wir uns mit diesem Thema beschäftigten, stellten wir natürlich fest, dass Sie einige Anforderungen erfüllen müssen, um mit react-sketchapp arbeiten zu können:

  1. Komponenten müssen mit React erstellt werden (das ist ziemlich offensichtlich). Zum Glück haben wir React bereits verwendet, sodass dies kein Problem zu sein schien.
  2. Stile müssen in JavaScript definiert sein. In unserem Fall haben wir bereits einige Fortschritte in die richtige Richtung gemacht, da unser Entwurfssystem mit CSS-Modulen erstellt wurde. Wir sind große Fans von CSS-in-JS , aber wir waren nicht bereit, Stile in unserem gesamten Ökosystem zu verbreiten, zumindest wollten wir es nicht so schnell tun.
  3. Komponenten sollten universelle Primitiven (Ansicht, Text, Stylesheet) verwenden , anstatt primitiver Browser, so etwas wie mit den Primitiven Reaktivierungs . Insgesamt war react-sketchapp näher an React Native als an Regular React. Auch dies war etwas, auf das wir sehr gut übergehen könnten, aber ein solcher Übergang würde viel Arbeit erfordern, und vielleicht müssten wir im Verlauf seiner Umsetzung einige Kompromisse eingehen.

Obwohl react-sketchapp nur ein großartiges Projekt ist, das wir von ganzem Herzen weiterempfehlen können, bedeuteten seine technischen Anforderungen leider, dass wir es kurz- oder mittelfristig nicht nutzen konnten.

Selbst wenn wir uns für eine Migration unserer Komponentenbibliothek entscheiden würden, müssten wir die Antwort auf eine andere Frage finden. Diese Frage betraf die Versionskontrolle.

Designmaterialien und universelles Versionskontrollsystem


Wie Sie vielleicht bereits wissen, gibt es Tools, mit denen Sie die Versionskontrolle in Designtools verwenden können. Wir mussten jedoch sicherstellen, dass die Materialien, mit denen Designer arbeiten, mithilfe eines externen Versionskontrollsystems verarbeitet werden können. Wir möchten diese Materialien beispielsweise als regulären Code wahrnehmen, damit sie sich an derselben Stelle wie dieser reguläre Code befinden und nicht in einem zugewiesenen Bereich, der nichts mit allem anderen zu tun hat. Deshalb haben wir uns entschlossen zu experimentieren.

Mit Kactus und einigen nativen Node- Skripten haben wir versucht, Sketch-Dateien in das Style-Guide-Repository zu übertragen.


Kactus zeigt git diff für die Sketch-Datei.

Technisch konnten wir das erreichen, was wir wollten, aber leider konnten wir nicht den Workflow bekommen, den wir brauchten. Vielleicht gelingt es jemand anderem, aber es hat uns nicht gepasst. Der Punkt hier ist, dass selbst mit diesem Ansatz die Unterstützung der Synchronisation von Code und Designmaterialien eine äußerst mühsame Aufgabe war, dieser Prozess fehleranfällig war und die Ergebnisse schwer zu überprüfen waren.

Die Tatsache, dass Codedateien und Skizzendateien in demselben Versionskontrollsystem enthalten sein könnten, führte zu einem klareren Verständnis des Problems, mit dem wir konfrontiert waren, obwohl es uns nicht half, das Problem selbst zu lösen. Wenn der Ansatz mit dem Versionskontrollsystem verwendet wird, muss derjenige, der den Styleguide mit dem Code koordiniert, viele Hilfsaktionen ausführen. Die Kosten für Zeit und Mühe waren nicht mit den möglichen Vorteilen vergleichbar, deren Wert noch in Frage stand. Infolgedessen wurde die Arbeit an Skizzendateien bald eingestellt. Wir haben das Experiment als erfolglos erkannt.

Wir haben fast die Hoffnung auf Erfolg verloren und waren bereit zuzugeben, dass wir Entwickler und Designer nicht in einem Arbeitsbereich zusammenbringen können, als das Projekt html-sketchapp auftauchteder hat absolut alles verändert.

HTML-SketchApp


Es stellte sich heraus, dass wir uns nicht nur Sorgen um die Probleme bei der Integration von react-sketchapp in den vorhandenen Technologie-Stack machten. Conrad Jvinel von Brainly schreibt dazu : "Wir konnten diese Einschränkungen nicht schnell überwinden, weshalb wir die html-sketchapp erstellt haben."

Der html-sketchapp einen völlig anderen Ansatz.


HTML-SketchApp-Ergebnisse

Wie Sie dem Namen dieses Projekts entnehmen können, können Sie mit HTML-SketchApp Skizzendateien aus regulären HTML-Inhalten generieren. Im Gegensatz zu React-SketchApp gibt es jedoch keine Einschränkungen bei der Auswahl der Technologien, mit denen diese Inhalte erstellt werden.

Webprojekte, mit denen html-sketchapp arbeiten kann, können mit Preact , Vue , Angular , Backbone , jQuery oder sogar mit Ruby oder PHP erstellt werden .

Niemand verbietet die Verwendung von React, aber jetzt kann die Anwendung mit geeigneten Grundelementen so gestaltet werden, wie es der Entwickler wünscht.

Die Anforderungen an ein Projekt, das mit html-sketchapp verarbeitet werden konnte, waren unglaublich einfach: Wenn Sie eine HTML-Seite haben, können Sie diese in Sketch importieren.

Generierung von Skizzendateien


Auf den ersten Blick schien es unglaublich, was die html-sketchapp tat, aber als wir ihre internen Mechanismen betrachteten, stellten wir schnell fest, dass dies alles in der Tat nicht so kompliziert ist.

Um zu verstehen, wie html-sketchapp funktioniert, müssen Sie zuerst das Format der Sketch-Datei verstehen. Für manche Leute ist es vielleicht überraschend, dass es sich bei Sketch-Dateien tatsächlich um gewöhnliche Zip-Dateien handelt.


Skizzendatei als Archivdatei geöffnet

Nachdem Sie die Skizzendateien als reguläre Archive entpackt haben, können Sie feststellen, dass sie hauptsächlich aus JSON-Dateien bestehen, die natürlich in jedem ganz normalen Texteditor geöffnet werden können.


Eine JSON-Datei aus einer Skizzendatei, die in einem Texteditor geöffnet wurde

Wenn Sie sich den Inhalt dieser Dateien ansehen, sehen Sie, dass ihr Format relativ einfach ist. Im Grunde bestehen sie aus kleinen Blöcken verschachtelter Klassen.

Auf der untersten Ebene können Sie mit html-sketchapp Instanzen dieser Klassen programmgesteuert generieren und in JSON konvertieren. Aber er geht noch viel weiter, ohne auf diese Aktionen beschränkt zu sein.

Das vielleicht leistungsstärkste Feature von html-sketchapp ist nodeToSketchLayers . Es ermöglicht die Konvertierung von Browserelementen in Arrays von Sketch-Layern. Hier findet der Löwenanteil des Abendmahls statt, da es die gesamte Logik zum Extrahieren von Browserstilen und zum Konvertieren in ihre Sketch-Entsprechungen enthält.

Nach der Vorbereitung des Quellmaterials kommt die SymbolMaster- Klasse ins Spiel , die alles zusammenfasst und dynamisch Skizzensymbole generiert. Symbole sind die Basis jeder Sketch-Bibliothek. Das bedeutet, dass wir, nachdem wir den Pfad zwischen HTML und Sketch gefunden haben, bei der Verarbeitung der im Browser angezeigten React-Komponenten das bilden können, was Designer benötigen.

Leider ist das generierte Dokument aufgrund einiger Einschränkungen im aktuellen Sketch-Format hinsichtlich der Codierung von Textstilen keine gültige Sketch-Datei. In html-sketchapp werden solche Dateien als Almost Sketch (fast Sketch-Dateien) oder z Kürze - Asketch. Solche Dateien müssen manuell mit dem entsprechenden Plugin importiert werden . Glücklicherweise ist dieser Prozess jedoch nicht allzu kompliziert.

Die Aufgabe, all dies miteinander zu verknüpfen, schien zunächst überwältigend, aber es kam vor, dass es auf GitHub bereits ein Demo-Projekt gab, das den Prozess der Konvertierung eines vorhandenen Style Guides in ein Sketch-Dokument zeigte.

Sobald wir es gefunden hatten, begannen wir sofort zu experimentieren. Infolgedessen waren die Ergebnisse, die uns schockierten, überraschend schnell.

Html-sketchapp Experimente


Zunächst haben wir uns entschlossen, die Fähigkeiten von html-sketchapp selbstständig zu ermitteln und ihm die Homepage der Website unseres Styleguides zuzuführen.

Hier ist ein Tweet , der demonstriert.


Ergebnisse der Verarbeitung der Seite mit html-sketchapp

Als Nächstes haben wir begonnen, unsere ersten Zeichen aus der Button-Komponente zu generieren und verschiedene Varianten dieser Komponente zu rendern.

So sah die HTML-Seite mit der Komponente aus.


HTML-Seite mit der darauf angezeigten Komponente

Aber hier ist, was wir haben.


Seitenverarbeitungsergebnisse mit html-sketchapp.

Um dies zu erreichen, haben wir uns eine spezielle JavaScript-Datei ausgedacht, die dem Ordner jeder Komponente hinzugefügt wird (zum Beispiel - Button.sketch.js). Solche Dateien definieren die Zeichen, die wir exportieren möchten.

Jede Datei würde ein Objekt exportieren, das den Namen des Symbols und die entsprechenden React-Elemente angibt.

import React from 'react';
import Button from './Button';
export const symbols = {
  'Button/Pink': ,
  'Button/Blue': ,
  'Button/Transparent': ,
};

Dann haben wir eine spezielle versteckte Route auf der Styleguide-Website erstellt, die alle Dateien importiert, die auf enden, .sketch.jsund die entsprechenden React-Elemente auf dem Bildschirm gerendert. Auf diese Weise haben wir die Möglichkeit, den Konvertierungsprozess erheblich zu vereinfachen, indem wir alles, was Sie für Sketch benötigen, auf einer Seite anzeigen.

Eine Instanz jedes Zeichen ist in einem Element eingewickelt worden div, Attributdaten , die den Namen dieses Zeichen gegeben wurde , die es uns ermöglicht hat , um die Auswahl zu vereinfachen und die Zeichen auf der Seite zu benennen.

 ...

Diese Vorlage hat sich als äußerst wirksam erwiesen, und bald so erweitert wir es die enthalten Textstile und Farben des Dokuments.


Beschreibung der Textstile


Textstile


Beschreibung der Farben


Beispielfarben auf einer Webseite


Importierte Farben

Unser Styleguide hat reagiert , sodass wir die Größenänderung des Browserfensters und das Aufnehmen von Bildern mit Zeichen in verschiedenen Bildschirmgrößen automatisiert haben.


Browserfenster-Einstellungen


Textstile in der Skizze


Gestaltungselemente in der Skizze

Dies gab uns die praktische Möglichkeit, Fenstergrößen hinzuzufügen, zu entfernen und umzubenennen, während wir mit einer einzelnen Datei arbeiten. Für jede erforderliche Fenstergröße wurden Symbole generiert.
Nachdem wir in der Lage waren, alles zu erreichen, worüber wir gerade gesprochen haben, hatten wir das Gefühl, ein scheinbar unlösbares Problem gelöst zu haben, das die Unterstützung von Responsive Design in Sketch betraf.

All dies funktionierte überraschend gut, obwohl wir noch etwas abschließen mussten , insbesondere im Hinblick auf die Sketch-Unterstützung. Es erinnerte mich daran, wie sie normalerweise die Browserunterstützung organisieren, bei der es Fehler gibt.

Vom Experiment zur Produktion


Was als weniger umfangreiches Experiment begann, entwickelte sich schnell zu einer Art Mini-Framework.

Wir haben nicht allzu viel Zeit gebraucht, um html-sketchapp und alle mit diesem Projekt verbundenen Entwicklungen in unseren Styleguide zu integrieren . Die Erstellung einer neuen Version des Styleguides wurde nun als Teil des Standarderstellungsprozesses durchgeführt.

Wenn Sie sich jedoch die entsprechende Pull-Anforderung ansehen , werden Sie feststellen, dass wir aufgrund dieser Integration eine Menge Hilfscode und Abhängigkeiten in das Projekt einbeziehen mussten, obwohl wir auf hoher Ebene versucht haben, eine einzige, konzeptionell einfache Aufgabe zu lösen.

Um eine Bibliothek für Sketch zu generieren, mussten Sie die folgenden Schritte ausführen:

  • Kompilieren eines Browser-Skripts mit dem Webpack. Es sollte HTML-SketchApp und Code für die Auswahl und Konvertierung von Elementen enthalten.
  • Ausführen eines statischen Webservers an einem verfügbaren Port.
  • Starten Sie Puppeteer (dies ist ein Chromium- Browser ohne Benutzeroberfläche ).
  • Gehen Sie zur angegebenen URL.
  • Betten Sie das kompilierte Skript in eine laufende Instanz von Puppeteer ein.
  • Erstellen von Momentaufnahmen von Elementen mithilfe von Funktionen aus einem kompilierten Skript unter Verwendung der angegebenen Bildschirmgrößen.
  • Schreiben empfangener JSON-Dateien auf die Festplatte.
  • Stoppen Sie den statischen Webserver.
  • Stoppen Sie den Browser.

Этот процесс мы тоже хотели автоматизировать. Нам казалась совершенно естественной возможность выполнения всего этого одной командой, которой достаточно было бы просто передать нужный URL. Вот что у нас, в результате, получилось.

Html-sketchapp-cli


Меньше чем через месяц после того, как мы интегрировали html-sketchapp в систему формирования нашего руководства по стилям, мы перевели в разряд опенсорсных проектов html-sketchapp-cli — маленькую утилиту командной строки, которая позволяла автоматизировать вспомогательные операции.

Теперь всё, что нам было нужно для формирования руководства — одна зависимость и простой конфигурационный файл.

module.exports = {
  serve: 'docs/dist',
  url: '/sketch-exports',
  outDir: 'dist/asketch',
  viewports: {
    'Desktop': '1024x768',
    'Mobile Plus': '414x736',
    'Mobile': '320x568'
  }
};

Кроме того, использование html-sketchapp-cli позволило убрать много кода.


Ergebnisse der Implementierung von Html-sketchapp-cli

Design als kontinuierlicher Prozess


Alle diese Werkzeuge sind jetzt Teil unserer üblichen Arbeit. Von Entwicklern an Stilen vorgenommene Änderungen erreichen Designer schnell.

Nach jedem erfolgreichen Build des Styleguides stellen wir unsere Website nicht nur automatisch auf GitHub-Seiten (unter Verwendung von Gh-Pages ) bereit und veröffentlichen die Komponentenbibliothek in npm (unter Verwendung von Semantic-Release ). Nun generieren wir automatisch dieselbe "Fast-Skizze". Dateien “, die in unsere offizielle Sketch-Bibliothek importiert werden können.

Diese Skizzenbibliothek wird dann über eine freigegebene Festplatte an die Mitglieder des Designteams verteilt. Dies bedeutet, dass unsere Designer immer über eine aktuelle Kopie der Bibliothek verfügen, die in Echtzeit mit ihrem aktuellen Projekt synchronisiert wird, auch wenn der Sketch-Editor geöffnet ist.

Dank der neuen integrierten Unterstützung für Sketch- Bibliotheken können Designer die Menüs der SEEK Style Guide-Bibliothek öffnen und die benötigten Komponenten auswählen, wobei sie wissen, dass die Namenskonventionen und visuellen Stile den Erwartungen der Entwickler entsprechen.


Designerarbeitsplatz

Seit wir diesen Mechanismus implementiert haben, sehen wir, wie Änderungen, die am Code vorgenommen wurden, kontinuierlich in Sketch einfließen, und manchmal haben diejenigen, die diese Änderungen vornehmen, Sketch nicht einmal installiert. Da der Styleguide mit der Ausführung von Anwendungen verbunden ist, werden die Stile von Mitarbeitern der gesamten Organisation ständig verbessert. Jetzt können wir sicher sein, dass alle diese Änderungen in die Sketch-Bibliothek übernommen werden und diese ständig auf dem neuesten Stand halten.

Technisch arbeiten Entwickler und Designer immer noch in unterschiedlichen Umgebungen, aber wir arbeiten hart daran, sie noch enger zusammenzubringen.

Zusammenfassung


Egal wie wichtig all das war, für uns ist dies nur eine Zwischenlösung. Das Übertragen von Daten von Webseiten nach Sketch ist eine sehr leistungsstarke Funktion. Dies ist ein großer Schritt in Richtung einer einheitlichen Entwicklungsumgebung, aber wir und die gesamte Webentwicklungsbranche müssen weitermachen.

Die Grenze zwischen Entwicklern und Designern kann zunehmend verschwimmen, aber die Designwerkzeuge der Zukunft sollten diese Linie vollständig auslöschen. Um dieses Potenzial nutzen zu können, benötigen wir solche Designtools, die die Zielumgebung nicht, wenn auch nur sehr genau, imitieren. Wir brauchen Werkzeuge, die auf der Grundlage dieser Umgebung selbst erstellt werden.

Glücklicherweise gibt es derzeit auf der Welt keinen Mangel an Menschen, die sich mit dem Problem der universellen Entwicklungs- und Designumgebungen befassen. Werkzeuge mögenCompositor , Interplay , Alva , Haikus , WebFlow und UXPin sollen die Wände zwischen den Design - Tools brechen und die zugrunde liegenden Code von Web - Projekten. Wir glauben, dass das Erscheinen von noch mehr solcher Werkzeuge nicht lange dauern wird.

Wer weiß, vielleicht werden wir sogar sehen, wie traditionelle Entwurfswerkzeuge einen ähnlichen Ansatz einführen, um nicht an Relevanz zu verlieren, insbesondere angesichts der Tatsache, dass Entwurfssysteme zunehmend zu einem gewöhnlichen Bestandteil eines Satzes von Werkzeugen eines modernen Designers werden.

In der Zwischenzeit bereiten uns Projekte wie react-sketchapp und html-sketchapp bereits auf neue Ansätze in Design und Entwicklung vor und entwickeln in uns neue Denkweisen.

Ehrlich gesagt, ist jetzt ein erstaunlich guter Zeitpunkt, um Webdesign auf eine neue Art und Weise wahrzunehmen.

Sehr geehrte Leser! Verwenden Sie in Ihren Projekten die React-SketchApp oder die HTML-SketchApp?


Jetzt auch beliebt: