Halten Sie „Code“ von Designern fern?

Ich baue eine ganze Reihe von Projekten mit einem Freund von mir, aber wir kommen immer wieder auf die gleiche Falle. Ich weiß, wie man PHP, Javascript und all das Zeug schreibt (ich kenne auch CSS und HTML), so dass ich die meiste Arbeit beim Erstellen der eigentlichen Funktionalität erledigen kann. Er kann es jedoch nicht, aber er kann etwas tun, was ich kaum kann: die Websites entwerfen.

Aber jedes Mal stoßen wir auf ein Problem, da er nicht weiß, wie man Code schreibt, verlangsamt es unsere Entwicklung im Allgemeinen ein bisschen. Im Moment ist dies unser Workflow:

1. Wir haben ein Feature entwickelt
2. Er erstellt das Front-End-Design (wo es platziert werden soll, wie es aussehen wird usw.)
3. Er schickt mir die komplette Vorlage (der HTML-Export von Pinegrow)
4. Ich suche nach den Änderungen, die er vorgenommen hat, und implementiere sie dann auf der aktuellen Site (seit ein paar Wochen verwende ich CakePHP dafür).
5. Wenn etwas nicht wie vorgesehen funktioniert (zum Beispiel aus irgendeinem Grund nicht wie geplant), behebe ich das Problem auf meiner Seite und sende ihm die Vorlage zurück
6. Spülen und wiederholen

Dieser Prozess ist, wie man sich vorstellen kann, akribisch langsam und ineffizient. Meine Frage ist also, wie wir diesen Prozess reibungsloser gestalten können. Ich habe eine Menge Dinge darüber gesehen, dass wir React und RESTful verwenden sollten und was nicht, aber wir wollen CakePHP dafür verwenden. Könnten mich einige Leute zu hilfreichen Ressourcen führen? Ich habe schon eine Weile danach gesucht, bin aber nie zu einer vernünftigen Lösung dafür gekommen.

Grundsätzlich kann mein Partner die Website nur entwerfen. Er kann Docker (ich benutze Docker die ganze Zeit), PHP, Javascript und so ziemlich alles andere nicht benutzen (er kennt etwas CSS, arbeitet aber meistens mit einem WYSIWYGEditor). Ich bin bereit, es ihm beizubringen, aber er ist es nicht interessiert (also habe ich respekt das). Ich hoffe, jemand hier könnte mir helfen (und wahrscheinlich auch andere, die später auf diese Frage kommen), da ich denke, dass es eine ziemlich wichtige Sache ist.

Möchten Sie Ihren Front-End-Designer vom Code befreien? Möchten Sie die Integration beschleunigen? Möchten Sie die professionellen Techniken verwenden, die von den schlauesten Websites verwendet werden? Das mit Abstand beste Werkzeug dafür ist:

Farbe.

Ja, malen. Na sowieso ein Zeichenprogramm. Lassen Sie ihn Screenshots Ihrer Site machen, Dinge bewegen und Dinge hinzufügen, die er woanders findet. Auf diese Weise kann er mit der Geschwindigkeit seiner Ideen arbeiten und Sie können den Code in die für Sie am besten geeignete Form bringen, während Sie ihm das geben, was er benötigt.

Wenn das immer noch zu langsam ist, z. B. weil der Kunde mit Ihnen beiden im Raum ist, empfehle ich ein viel fortschrittlicheres Werkzeugset:

Papier, Schere und Klebeband.

Vielleicht einen Stift, wenn Sie ehrgeizig sind.

Ich habe diese Technik verwendet, um erfolgreich Entscheidungen über das Thema, den Stil, den Inhalt und die Hauptmerkmale einer Site an einem Tisch in einem Panera-Brot mit einem Kunden zu treffen, bevor jemand merkte, dass wir mit dem Essen fertig waren.

Das macht ihn schnell, es befreit Sie von seinem "Code" und es ist tatsächlich die mächtigste Art, eine Benutzeroberfläche zu entwickeln. Er kann mit Usability-Tests beginnen, bevor Sie eine Codezeile geschrieben haben.

Sie denken vielleicht: "Oh, das ist in Ordnung, wenn Sie anfangen, aber Sie verwenden das nicht, wenn die Site erst einmal entwickelt ist." Nicht wahr. Es funktioniert genauso gut auf stabilen Standorten. Aber jetzt stammen die meisten Screenshots von Ihrer eigenen Website.

Was ist, wenn Ihr Front-End-Designer einige Tools zur Codegenerierung verwenden möchte, um seine Modelle zu erstellen? Gut, aber denken Sie nicht für eine Sekunde, dass Sie seinen "Code" verwenden müssen. Was Sie respektieren müssen, sind seine Entscheidungen über Aussehen, Fluss und Präsentation. Was sich dahinter verbirgt, ist nicht sein Spezialgebiet. Es ist deins. Übernehmen Sie die Verantwortung dafür.

Respektiere einfach seine Arbeit genug, dass du ihm zeigst, wie es ausgegangen ist, wenn du fertig bist. Lassen Sie ihn alles auswählen, was der Benutzer erleben würde. Seien Sie bereit, mit neuen Ideen getroffen zu werden.

Dies ist eine iterative Entwicklung. Mach nicht viel, bevor du fragst. Tu so wenig wie du kannst. Fragen Sie so oft Sie können. Stellen Sie Spielzeug auf Ihren Schreibtisch, um ihn zu unterhalten, während Sie seine neueste Idee umsetzen, damit er sie überprüfen kann, sobald sie geladen ist. Machen Sie so weiter, bis es Zeit ist, sich mit dem Kunden zu treffen.

Wenn der Code, den Ihr Front-End-Designer erstellt, tatsächlich die Mühe wert ist, müssen Sie lernen, Ihren Code in seinen zu integrieren. Aus diesem Grund empfehle ich Ihnen dringend, die Quellcodeverwaltung zu erlernen . Lernen Sie es so gut, dass Sie Ihrem Front-End-Designer die Verwendung beibringen können.

Ich empfehle, dass Sie Ihren Integrationsplan auf dem Zusammenführen von Code basieren, wenn Sie beide ein Versionsverwaltungstool zuverlässig verwenden können. Zu diesem Zeitpunkt hätte Ihr Freund eine Änderung des Titels von Front-End-Designer zu Front-End-Entwickler verdient.

Selbst wenn Sie dies tun, würde es mich nicht überraschen, wenn die Technik des Kritzelns auf dem Bildschirm nicht immer noch der schnellste Weg für Sie beide ist, zusammenzuarbeiten.

Vielleicht können Sie das Chaos all dieser Veränderungen einfach nicht ertragen. Es schafft zu viel Arbeit. Nun, es heißt Software, weil es Veränderungen akzeptiert. Andernfalls würde es ein Elektrotechniker auf einem speziellen Chip machen lassen. Möglicherweise müssen Sie Architect erreichen , um Ihre Verhaltenslogik aus der Benutzeroberfläche zu entfernen , damit Änderungen an der Benutzeroberfläche keine Auswirkungen auf Ihre Kerngeschäftsregeln haben. Wenn Sie Ihren Front-End-Designer beschleunigen, müssen Sie bereit sein, mit ihnen Schritt zu halten.

Der einzige gute Grund, einen Front-End-Designer zum Erstellen von Code zu zwingen, ist, dass Sie müde sind und sie verlangsamen möchten. Nun, ich denke, das ist kein "guter" Grund.

In Bezug auf Tools ist der optimale Workflow, den ich gesehen habe, die Verwendung von Sketch und Zeplin. Sketch ist ein direktes Entwurfswerkzeug. Entspricht Photoshop oder InDesign, ist jedoch für das Entwerfen von Apps und Websites optimiert. Zeplin ist ein Tool zum Freigeben und Genehmigen von Designs in Sketch (oder Photoshop). Es kann präzise Pixelmessungen und sogar Code-Schnipsel für CSS oder anderen Layout-Code liefern und grafische Elemente exportieren. Sobald ein Design festgelegt ist, wird es an den Entwickler übergeben. Zu diesem Zeitpunkt greift der Entwickler zu und erstellt die Benutzeroberfläche. Dann kann es zur visuellen Qualitätssicherung an den Designer zurückgehen. Alles, was er falsch findet, sollte nur als Fehler protokolliert werden, um von Ihnen priorisiert und behoben zu werden.

Wenn etwas nicht wie vorgesehen funktioniert (zum Beispiel aus irgendeinem Grund nicht wie geplant), behebe ich das Problem auf meiner Seite und sende ihm die Vorlage zurück

Das ist die Wurzel deiner Probleme. Der Fluss des Designs sollte immer von Designer to Developerund niemals umgekehrt sein. Überarbeitungen und Änderungen sollten vom Designer vorgenommen und dann zur Implementierung auf der Website an Sie weitergeleitet werden. Sie können jederzeit selbst schnelle Fehlerbehebungen vornehmen, versuchen Sie jedoch zu akzeptieren, dass diese schnellen Fehlerbehebungen nur vorübergehend sind. Der Designer muss zu seinen Entwürfen zurückkehren und die richtige Lösung finden. Er drückt Ihnen dann die Änderung vor, und wenn sie mit Ihrer Schnellkorrektur übereinstimmt, ist sie großartig, ansonsten aktualisieren Sie von seinen Entwürfen.

Er schickt mir die komplette Vorlage (der HTML-Export von Pinegrow)

Werden Sie nicht süchtig nach HTML, mit dem Sie arbeiten können. Es ist besser, wenn Sie die Website-Technologie (Bootstrap, CSS, jQuery, React, PHP usw. usw. usw. usw.) so implementieren, wie Sie sie benötigen. Sie reproduzieren dann seine Entwürfe mit diesen Werkzeugen. Wenn das HTML, das er Ihnen gibt, ein schneller Einstieg ist, ist es großartig, aber später, wenn das Projekt wächst, wird es nicht viel nützen. Sie müssen die Änderungen selbst vornehmen, da nur Sie Ihre Template-Engine verstehen (z. B. CakePHP-Ansichten, Vorlagen, Plugins, Komponenten usw. usw.).

Dieser Prozess ist, wie man sich vorstellen kann, akribisch langsam und ineffizient.

Das war schon immer so. Designer sind keine Programmierer. Sie nehmen sich Zeit, um herauszufinden, was für den Benutzer am besten funktioniert, und machen manchmal Fehler. Sie verstehen keine Konzepte wie Komponenten, Frameworks und dergleichen. Als Programmierer müssen Sie mit Ihrem Designer sprechen und mitteilen, wie ich das umsetze, was Sie entwerfen .

Der Designer steckt in der Mitte fest. Auf der einen Seite müssen sie die Bedürfnisse des Programmierers befriedigen und auf der anderen Seite müssen sie die Bedürfnisse des Benutzers befriedigen.

Meine Frage ist also, wie wir diesen Prozess reibungsloser gestalten können.

Ich habe festgestellt, dass das physische Sitzen neben dem Designer und das Programmieren dort bei der Kommunikation wirklich hilfreich ist. Wenn Sie beide remote arbeiten, lassen Sie die Facetime einige Tage laufen. Es hilft wirklich, die Dinge zu beschleunigen.

Ich habe eine Menge Dinge darüber gesehen, dass wir React und RESTful verwenden sollten und was nicht, aber wir wollen CakePHP dafür verwenden.

CakePHP ist eines der besten Frameworks auf dem Planeten (vollständige Offenlegung, ich bin Mitglied des CakePHP-Kernteams).

Cake ist ein Entwicklungsframework für Kaninchen, in dem die Funktionen zum schnellen Erstellen von Websites entwickelt wurden. Ich weiß, das klingt wie ein Verkaufsgespräch, aber so wird es eingestuft. Es gibt viele andere Frameworks, die als Kaninchen klassifiziert sind. Java wäre ein Beispiel für ein Framework, das unternehmerischer ist als Rabbit. Wenn Sie diese Sprache verwenden würden, hätte ich eine Änderungsempfehlung abgegeben. Da Sie CakePHP verwenden. Ich würde sagen, Sie sollten dabei bleiben.

CakePHP ist ein guter Back-End-Server, wenn Sie RESTful-APIs benötigen.

React / Angular / Vue sind alle populären und trendigen Front-End-Frameworks, aber es gibt sie noch nicht lange. CakePHP gibt es schon seit über 13 Jahren. Mein Punkt ist keine Kritik. Es ist die Tatsache, dass diese JavaScript-Bibliotheken eine kurze Haltbarkeit haben. In 5 Jahren werden wir alle über etwas Neues reden, aber ich vermute, CakePHP wird immer noch da sein.

So sage ich. Verwenden Sie React / Angular / Vue jetzt, solange es noch heiß ist, aber lassen Sie sich nicht darauf ein. Etwas Neues und Besseres wird in Kürze folgen. Ich denke, wir leben in einer Welt, in der man ohne sie keine guten Websites erstellen kann.

Könnten mich einige Leute zu hilfreichen Ressourcen führen?

Listenanfragen sind hier nicht thematisch. Es tut uns leid.

EDIT :

Ich habe den Teil über das Verfolgen von Designänderungen verpasst.

Lassen Sie Ihren Designer seine HTML-Ausgabe in BitBucket speichern (er hat kostenlose private Repositorys). Sie können dann Vergleiche auf der BitBucket-Website verfolgen und durchführen. Jedes Mal, wenn der Designer größere Änderungen vornimmt, fügt er einen neuen Zweig mit einer Versionsnummer hinzu.

Dies sollte für ihn relativ einfach sein und es wird Ihnen ermöglichen, die Änderungen zu kommentieren. Beispielsweise; Er kann eine Pull-Anforderung stellen, um das Repository zu aktualisieren, in dem Sie die Änderungen überprüfen, bevor sie zusammengeführt werden.

Sie müssen diese beiden Dinge trennen:

1. UX & UI-Design, eine nicht codierende Aktivität
2. Implementierung, definitiv eine Codierungsaktivität

Der Designer sollte kreative Werkzeuge wie Marvel verwenden, die nur zum Entwerfen dienen. Es sollte nicht das Anliegen des Designers sein, mit Code, HTML, CSS usw. etwas zu tun. Die Farben, Abmessungen, Ästhetik, Interaktionen, Animationen sind alles, worauf er sich konzentrieren sollte.

Der Programmierer sollte die Assets und das Modell (mit Interaktionen und Animationen) erhalten und dies durch Programmieren der Software ermöglichen. Dies beinhaltete auch HTML und CSS. Der Programmierer kann auch Generatorwerkzeuge an seiner Seite verwenden.

Um den Aufgabenfluss zu beschleunigen, empfehle ich, ein minimales Tool wie Trello zu verwenden und alles für jede Arbeitseinheit zu verknüpfen / zu dokumentieren.

Wie können wir diesen Prozess reibungsloser gestalten?

Bestehen Sie auf Versionskontrolle

Software Branching und Parallel Universes

• Arbeite an keinem Code, der sich nicht in der Versionskontrolle befindet. Punkt. Und ich meine streiken, bis das Projekt in einem VCS ist.
• Formell, großzügig, lokal verzweigen
  • Formal: Verzweigen nach Releases und Teilen von Releases, formale Testkorrektur usw. Entwickeln Sie einen formalen Versionskontrollplan, dh schreiben Sie ihn auf.
  • Liberal: Verzweigen Sie sich, über die 4-teilige formale Versionsnummerierung hinaus, wenn Ihnen Ihr Darm sagt, dass es eine gute Idee sein könnte.
  • Vor Ort: Ich habe ein persönliches Repo mit Filialen geführt, die nie für den Teamkonsum gedacht waren, da wir als Team zunächst keine Filialen hatten und ich häufig Experimente, Erkundungen, nur für den Fall usw. habe.

Entwickle die Hölle aus deinen Middleware-APIs heraus

Leistungen:

• Stabilität - auch wenn sich der zugrunde liegende Code weiterentwickelt.
• Testbarer Code
• Wiederverwendung
• Ein Werkzeug für die Teamkommunikation
• Es ist ein Vertrag. Leistungsversprechen (Wortspiel beabsichtigt)
• Codierung im Bereich von SOLID == happy maintenance programmer

Es ist das Ask, Don't Tell-Prinzip , das so zwanghaft angewendet wird, wie es sein sollte. Wenn die Benutzeroberfläche eine einzelne Business-Layer-Eigenschaft bearbeitet, ist dies falsch.

Alles und jedes an den Geschäftsobjekten muss in den BOs enthalten sein. Sogar triviale Dinge, die in der Benutzeroberfläche am besten zu sein scheinen - sogar ein einzelnes LOC. Minuita wie das Hinzufügen von 2 benutzerdefinierten Werten - die gesamte zugehörige Logik einschließlich der Validierung muss in der Business-Layer-API enthalten sein. IMO-Redundanz ist manchmal in Ordnung. Um die Redundanz zu verringern, sind möglicherweise kleine, fokussierte Business-Layer-Objekte vorhanden, auf die die Benutzeroberfläche uneingeschränkt zugreifen kann.

Alles und jedes, was die Benutzeroberfläche von den Geschäftsobjekten benötigt, sollte über eine API bereitgestellt werden. Verwenden Sie beispielsweise explizite Methoden, die ihre Argumente mit Ereignishandlern verbinden.

Passen Sie von den Rahmen als Krücke auf

In den Händen der Unqualifizierten sind Frameworks und IDEs keine Barrieren für die B-Movie-Monster, die sie erstellen.

Mit Frameworks wie React kann man sagen, dass es sich um Client-Frameworks handelt und dass es keine Back-End-Business-Logikebene gibt. Die Schlüsselidee hier ist, zu entkoppeln, was der Benutzer von dem sieht, was das Programm tut. Das ist machbar. Es ist nicht nur eine Sache zwischen physischem Server und Browser.

Ich denke, es ist ein guter Indikator für die Unreife von Beruf und Praxis, dass wir akzeptieren, dass Menschen, die gestalten, es nicht können.

Dies wäre in fast jedem anderen Beruf nicht akzeptabel.

Es ist zu erwarten, dass ein auf Website- / App-Design spezialisierter Designer CSS und HTML gut genug kennt, um Ihnen funktionierende und verwendbare Dateien dieses Typs zur Verfügung zu stellen.

Designer, die grafische WYSIWYG-Editoren bereitstellen, sind visuelle oder grafische Designer. Es gibt viele verschiedene Arten von Designern.

Es gibt jedoch auch viele verschiedene Arten von Fertigkeiten, Fähigkeiten und Erfahrungen. Wer Möbel entwirft, kann dies ausschließlich auf einem Computer mit 3D-Designtools tun. In diesem Fall ist das Wissen, wie eine Drehmaschine gedreht oder ein CNC-Fräser bedient wird, möglicherweise rein theoretisch. Sie machen ihre Entwürfe und schicken sie dann ab, damit sie von anderen gemacht werden.

Umgekehrt haben einige erfahrene Designer möglicherweise die Kontrolle über den gesamten Prozess und verfügen über die Fähigkeit und das Wissen, ihre Möbel mit einem Auge für jedes Detail zu bauen, vielleicht sogar in Handarbeit.

Sie werden Ihren Freund nicht überzeugen können, seine Arbeitsweise zu ändern. Wenn Sie lieber einen Webdesigner mit HTML- und CSS-Kenntnissen zum Erstellen eigener Designs haben möchten, müssen Sie einen finden.