Als Designer:in erfolgreich sein: So arbeitet man mit Entwicklern zusammen

1. Einführung: Hi, ich bin Vincent. Ich bin Designer und Entwickler. Als Designer verstehe ich die Frustration, die bei einigen Web-Design-Projekten auftritt, wo Sie vielleicht Ihr Design von Ihrem Entwickler zurückbekommen und es sieht schlecht aus. Aber als Entwickler kann ich verstehen, die Frustration der nicht kommunizierten Erwartungen oder unmöglich, Fristen einzuhalten. Die gute Nachricht ist, das sind beide lösbare Probleme. Durch eine effektivere Kommunikation können wir effektiver zusammenarbeiten. Wir werden zu Kollaborateuren und nicht zu Gegnern, und wie es sich manchmal anfühlt. Diese Klasse ist für Sie, wenn Sie ein Designer sind, der Ihre ersten paar Web-Design-Projekte übernimmt und Sie neugierig sind, wie der moderne Prozess funktioniert. Oder wenn Sie ein Designer sind, der nie mit einem Entwickler gearbeitet hat und Sie nicht wissen, wo Sie anfangen sollen, Sie vielleicht ein wenig Angst zu fragen. Aber es ist auch für Sie, wenn Sie ein Web-Designer sind, Sie sind unzufrieden mit dem, wie Ihre Projekte in der Vergangenheit gegangen sind. Für unser Klassenprojekt übernehmen wir ein bestehendes Design und verwandeln es in ein Konstruktionssystem, indem wir es in Komponenten aufteilen. Dabei lernen Sie einige neue Denkweisen über Design und lernen neue Wege zur Kommunikation mit Ihrem Entwickler kennen. Sie werden letztendlich einige Werkzeuge haben, um besser zusammenzuarbeiten, und es wird sich etwas weniger anfühlen, als würden Sie zwei verschiedene Sprachen sprechen. Ich freue mich darauf, loszulegen. Lasst uns gehen. 2. Was ist mit der Möglichkeit von uns wir jetzt Dinge machen können?: Was ist mit der Art und Weise, wie wir jetzt Dinge tun, nicht wahr? Wenn Sie schon eine Weile in dieser Branche sind, können sich die Beziehungen zwischen Designern und Entwicklern im Laufe der Zeit verschlechtern. Zum Beispiel, sagen Sie mir, ob Sie jemals so gefühlt haben. Vielleicht schicken Sie Ihren Designer, Ihr Design an Ihren Entwickler, und Sie bekommen es zurück und es ist wie völlig falsch und Sie sind, als wäre mein Design großartig, bis der Entwickler es geschafft hat. Oder vielleicht sagen sie, dass sie es in drei Wochen bauen könnten und es ist sechs, wie ist das Geschäft? Warum können sie die Positionierung nicht richtig machen? Ist das ein Problem mit allen Entwicklern, wie all diese Probleme immer wieder auftreten. Was hält, warum können sie nicht einfach leer? Das sind alles Fragen der Kommunikation. Denken Sie als Beispiel an Ihr Lieblings-Restaurant. Die meisten Restaurants sind in die Vorderseite des Hauses und die Rückseite des Hauses unterteilt, die Vorderseite des Hauses ist das Kellnerpersonal, Gastgeber, etc. Rückseite des Hauses ist Küchenpersonal. Jetzt in einem schlechten Restaurant. Diese zwei Teile des Hauses kommunizieren nicht, und infolgedessen bekommen Sie mürrisch Kellnerpersonal. Sie wollen Ihren Burger nicht zurückschicken weil er vielleicht mit etwas Extra zurückkommen könnte, aber in einem guten Restaurant in Ihrem Lieblings-Restaurant kommunizieren diese beiden Hälften im Haus frei. Sie wissen vielleicht sogar etwas über die Arbeit des anderen, wie vielleicht bringt das Küchenpersonal manchmal eine Mahlzeit zu einem Kunden, oder das Kellnerpersonal versammelt einen Salat. Obwohl sie scheinen, dass sie zwei verschiedene Sprachen sprechen sollten, kommunizieren sie und arbeiten effektiv zusammen. Wie können wir mehr davon in der Design- und Entwicklungsbranche tun? Nun, schauen wir uns zuerst an, wie es zusammenbricht. Das sehen wir uns in der nächsten Lektion an. 3. Wie sieht der typische Web aus: Wie sieht der typische Webdesign-Prozess aus? Ok. Story-Zeit. Nehmen wir an, Sie sind ein freiberuflicher Designer, wenn Sie nicht schon sind, und Sie gerade einen neuen Kunden gelandet haben, nehmen wir es von dort. Wie sieht das aus? Ich möchte darauf hinweisen, dass dies genau auf interne Teams oder Agenturen zutrifft. Es gilt auch für die App-Entwicklung. Ich spreche nur über Web-Entwicklung, weil das ist, was ich weiß, aber das ist wahrscheinlich ein ähnlicher Prozess. Es waren Wochen voller Meetings. Sie haben sich auf die Richtung geeinigt. Du bist aufgeregt, der Klient ist aufgeregt, anzufangen, und du bist wie, lasst uns los. Du arbeitest eine Weile allein. Sie gestalten Ihre Homepage, Ihre internen Seiten, etc. Sie senden diese an den Kunden. Der Kunde stimmt endlich zu. Es sind vier Monate Revisionen und Sie sind endlich da. Es ist fast Zeit für den Start und Sie haben eine Frist von sechs Monaten für dieses Projekt, also haben Sie noch zwei Monate. Du bist beinahe da. Du schickst es an den Entwickler und der Entwickler sagt: „Ich kann das nicht in zwei Monaten.“ Noch schlimmer, sie sagen dir : „Ich kann das in vier Monaten nicht machen. Ich brauche mindestens sechs Monate, um das so zu bauen, wie es entworfen ist.“ Das sind schreckliche Neuigkeiten. kannst du nicht wieder zum Klienten zurückkommen. Was machst du denn? Sie sagen: „Alles klar, Entwickler, versuchen Sie einfach Ihr Bestes und wir werden es in ein paar Wochen wiederholen.“ Sie beginnen, und sie schicken Ihnen ihre Prototypen, und raten Sie, was? Es ist ein Müllcontainer, der brennt. Es gibt Schlagzeilen an der falschen Stelle, Dinge in der falschen Farbe, nichts funktioniert richtig. Es ist alles buggy. Es ist wie, was haben sie die ganze Zeit gemacht? sie sich nicht mal? Was gibt? Es ist noch ein Monat im Prozess und der Kunde merkt plötzlich, dass er die super wichtige Seite vergessen hat. Es muss für einen Start da sein. Sie haben wütend eine neue Seite entworfen, und Sie senden diese an Ihren Entwickler, obwohl sie wahrscheinlich ein wenig rau an den Rändern ist . Der Entwickler entwickelt es wütend und es kommt zurück, und wieder ist alles buggy, es ist alles falsch. Was ist ihr Deal? Schließlich ist es die Woche der Einführung, die Websites buggy, niemand ist glücklich, es wurde gestresst ganze Nacht, der Kunde ist nicht glücklich, und die Website ist zu spät. Dies ist ein übertriebenes Szenario, aber vielleicht klingt es Ihnen ein wenig vertraut. Vielleicht haben Sie etwas Ähnliches durchlebt. Wo läuft dieser Prozess schief? Nun, ich würde sagen, genau hier, ganz am Anfang. Was hätten wir zu Beginn anders machen können, um diese Probleme zu lösen? 4. früh Entwickler beteiligen: Ich hoffe, Sie haben noch kein Projekt wie das erlebt , das wir gerade in der letzten Lektion unterhalten haben. Aber es ist wahrscheinlich, dass es ein wenig vertraut geklungen haben könnte. Wirklich, warum sollte es nicht? Ich meine, das ist ein ziemlich üblicher Prozess. Sie entwerfen, Sie senden an den Entwickler, sie entwickeln es und Sie treten es immer wieder zurück zu ihnen, bis sie es richtig bekommen und schließlich sie es starten. Was ist daran los? Nun, das Problem ist gutes Design dauert eine lange Zeit, es dauert eine Weile. Durch die Verkeilung der Entwicklung in der letzten Minute wie diese, die Entwickler am Ende rauschen und schlechte Qualität billige Arbeit zu tun. Ein weiteres Problem dabei ist, dass den Entwicklern keine Kontexte fehlen, wie warum baue ich, was ich baue? Wann wurde diese Entscheidung getroffen und warum? Im Beispielprojekt ging der Designer monatelang weg. Das Problem ist, je länger Sie damit verbringen ohne irgendwelche Inputs des Entwicklers zu entwerfen, desto weiter Ihr Design neigt dazu, von der Realität abzuweichen. Da sich Monate später herausstellen kann, haben Sie etwas entwickelt, das nicht einmal in der Zeit implementiert werden kann, die Sie für das Projekt vorgesehen haben. Vielleicht denkst du, was ist mit Design by Committee? Bin ich Gefahr, meine Entwürfe zu ruinieren, indem ich einen Entwickler in den Prozess lasse. Das Design wird sich ändern. Aber das ist keine schlechte Sache. Beispielsweise kann ein Entwickler Ihnen helfen, zu verstehen, was überhaupt möglich ist , in der vorgesehenen Zeit und im Budget zu implementieren. Sie können auch andere Probleme finden, wie z. B. Barrierefreiheitsprobleme in einem Design. Vielleicht ist Ihr Design schön, aber es nicht für Benutzer mit Sehschwäche und ein Entwickler kann helfen, das zu erkennen. Sie könnten sogar einige neue Technologien oder Techniken kennen, die das Design verbessern können. Das sind alles Veränderungen, aber sie sind alles gute Veränderungen. Es ist wichtig, dass sie entdeckt werden, bevor Sie vier bis sechs Monate verbringen, nur so dass es Design Pixel perfekt. Wie binden wir Entwickler frühzeitig ein? Lassen Sie uns darüber in der nächsten Lektion sprechen. 5. Wie ich früh entwickelte?: Wie kann ich Entwickler früh einbinden ? Was bedeutet das? Wann sollte ich sie einbeziehen? Nun, wenn du ein neues Projekt hast, was machst du zuerst? Haben Sie ein Kickoff Meeting? Haben Sie ein Treffen mit dem Kunden, um genau herauszufinden, was sie brauchen. Irgendwelche Art von Treffen? Wirklich, zu jeder Zeit sehr früh im Prozess, ist ein guter Zeitpunkt, um Entwickler einzubeziehen. Je früher, desto besser. Viele Teams beteiligten Entwickler, hier, wenn sie wirklich involviert sein sollten, hier, sehr früh. Das bedeutet, dass kein großes Design enthüllt, vor allem nicht für den Entwickler. Zum Beispiel beginnt der Entwurfsprozess für viele Personen mit einer Besprechung wie diesem, bei der der Lieferbestandteil vielleicht ein Flussdiagramm ist. Sie versuchen, abzubilden, wie der Kunde der Website, von Punkt A nach Punkt B kommt Das ist, wo der Entwickler beteiligt sein sollte. Viele Designagenturen denken, dass dies so aussieht, aber es sollte eigentlich so aussehen, wo jeder, der das Projekt berührt, früh dort einbezogen wird. Du bringst ihn dazu, auf einem Whiteboard zu skizzieren, wenn es das ist, was es braucht. Dann halten Sie sie während des gesamten Prozesses involviert. Stellen Sie viele Fragen. Widerstehen Sie der Versuchung zu gehen, und entwerfen Sie selbst für Monate und Monate. Wenn Sie sich nicht sicher sind, was sie benötigen, oder wenn Sie nicht sicher sind, was technisch möglich ist, fragen Sie auch, ob Sie ihnen unfertige Designs oder grobe Assets wie Drahtrahmen senden . Das ist in Ordnung. Jegliche Informationen können uns helfen. Nun, letztendlich, Ihre Prozesse liegen bei Ihnen. Ich werde Ihnen nicht sagen, wie Sie arbeiten sollen, aber wenn Sie Ihre Entwickler früh einbeziehen können, tun Sie es. Das Ergebnis ist, dass der Entwickler am Erfolg des Projekts beteiligt ist. Die Beziehung, ist kollaborativer, interaktiver, weniger Gegner, und letztlich führt es zu glücklicheren Benutzern und zufriedeneren Kunden, was wichtig ist. 6. den Design verbessern: Das zweite, was wir tun können, um unsere Beziehungen zu unseren Entwicklern und unserer Zusammenarbeit zu verbessern, ist die Verbesserung unseres Entwurfsübergabe-Prozesses. Nun ist die Entwurfsübergabe der Prozess, den Sie verwenden, um Ihre Entwürfe an Ihre Entwickler zu bringen, damit sie beginnen können, ihre Arbeit zu erledigen, und das ist ein schwieriges Problem. In der Tat werden Sie sich daran erinnern, dass der Prozess aus der Perspektive des Designers in unserem imaginären Projekt ist , wo es schien schief zu gehen. Der Entwickler hat sich über den Umfang nicht einig. Sie konnten es nicht rechtzeitig erledigen, und als sie es geschafft haben, war es buggy und schlecht. Es fühlte sich an, als ob es ihnen egal war. Aber wie kann unser Designprozess das besser machen? Nun, ich denke, um das zu verstehen, ist es hilfreich, darüber nachzudenken , was ein Entwickler tatsächlich von einem Design braucht. Was geht ihnen durch den Kopf, wenn sie ein Design von einem Designer bekommen und sie beginnen sich zu entwickeln? Um Ihnen eine klare Vorstellung davon zu geben, lassen Sie uns eine Designdatei durchlaufen, die ich gerade erhalten habe. Nehmen wir an, ich bin der Entwickler in diesem imaginären schrecklichen Projekt und sehe meinen Denkprozess dort. Wenn ich ein Design erhalte, ist eines der ersten Dinge, die ich zu bauen beginne, was ich als den Rahmen der Website halte. Wir sprechen über alles, was auf jeder Seite angezeigt wird, wie Ihre Kopfzeile, Ihre Fußzeile hier unten und alles, was überall auf der Website erscheinen könnte. Dann ziehe ich mich in andere große Abschnitte wie dieses Heldenbild hier ein. Alle gängigen Marketing-Callouts, Dinge wie diese, und ich werde im Laufe der Zeit mehr und mehr granular, bis zu dem Punkt, dass ich einzelne kleine Module wie diese baue. Mein Ziel ist es letztlich, so treu wie ich kann, dieses Design neu zu erstellen, aber es im Code zu tun. Manchmal macht die Entwurfsdatei, wie Sie sehen werden, diese Aufgabe schwierig oder sogar in einigen Fällen unmöglich. In einem kollaborativeren Prozess wäre ich für alle Design-Meetings da gewesen , die zu diesem endgültigen Design geführt haben, das ich gerade bekommen habe. Aber sagen wir, um des Arguments willen, dass ich keinen Kontext habe, habe ich gerade dieses Design vom Designer mit der Erwartung erhalten , dass sie in ein paar Wochen eine funktionierende Website haben. Lassen Sie uns über einige der Dinge über dieses Design sprechen, die es schwierig machen, und im Gegenzug lernen Sie einige der Dinge, die Ihre Entwickler von Ihnen benötigen, wenn sie eine [unhörbare] Designdatei erhalten. Gleich neben dem, eines der ersten Dinge, die ich betrachte, ist die Schichtstruktur. Sie können in unserem Ebenenbedienfeld sehen, gibt es einige Ebenennamen, die hilfreich sind, wie ich ein Logo hier habe. Auch dort ist jede einzelne Layer-Gruppe offen, was sich wirklich verschlimmert. Aber wir haben hier einige Ebenennamen, aber die Hauptschichten, die Gruppen, sind alle Nummer eins, Nummer zwei. Sie haben zufällig suchen, lassen Sie mich ein Beispiel finden, Formen hier. Ich weiß nicht, welche Form zwei, Form vier, Form drei ist. Was, zum Teufel, ist das alles? Die Ebenen sind sehr unorganisiert, was dies zu einer wirklich langsamen, schwierigen Datei für mich macht , mit der ich direkt neben dem [unhörbaren] arbeiten kann. Ich muss manuell reingehen und Dinge auswählen und herumbasteln, bis ich den richtigen Teil bekomme. Das zweite, was ich hier bemerkte, ist, dass in der Navigation dort. 7. Designsysteme: Sie können daran gewöhnt sein, Ihr Webdesign als Seiten und Layouts zu betrachten. Vielleicht ist das, was Sie daran gewöhnt sind, an Ihren Entwickler zu verteilen, Sie sind es gewohnt, ihnen eine große PSD voller ganze Seitendesigns zu senden. Aber wenn Sie darüber nachdenken, entwerfen Sie wirklich nicht eine ganze Seite, oder? Sie entwerfen ein System, ein System, mit dem andere Personen Seiten erstellen. Vielleicht erstellt Ihr Entwickler diese Seiten. Es ist ein System, das aus modularen und wiederverwendbaren Komponenten besteht. Wir sprechen über Schlagzeilen, Videos und Schieberegler und alles andere, was in der Website und im Design wiederverwendet werden soll. Denken Sie in Bezug auf LEGO, nicht Layout. Sie müssen also immer noch Ihre vollständigen Seitenlayouts machen, aber wenn Sie einmal dort sind, wenn Sie mit ihnen zufrieden sind, beginnen Sie vielleicht, Dinge in kleine, wiederverwendbare Komponenten zu zerlegen. Sie können auch in Bezug auf Richtlinien für ihre Verwendung denken. Zum Beispiel, wie viele Pixel zwischen diesem Modul und diesem Modul, dieser Komponente und dieser Komponente liegen. Kann diese Komponente jemals neben dieser anderen Komponente erscheinen, Dinge wie diese. Nun, das ist keine Designsystemklasse. Dafür gibt es viel bessere Klassen, von denen wir einige hier auf Skillshare haben. Also verweise ich auf ein paar von ihnen. Es ist wirklich nur, um Sie darüber nachzudenken, Ihre Entwürfe zu brechen und wir können über das „Warum“ im nächsten Video sprechen. 8. Aber, But. ...: über Designsysteme nachdenken, können Sie einige Einwände im Auge haben. Vielleicht denkst du, was ist mit Layout und Komposition? Wenn ich mein Design in einzelne Teile und Teile zerteile, die ein Entwickler in irgendeiner Weise zusammenstellen kann, wird das nicht mein Design ruinieren? Nun, zuerst denken wir sowieso so, wenn wir uns entwickeln. Wenn ich ein neues Projekt bekomme, ist eines der ersten Dinge, die ich mache, die Dinge in kleine wiederverwendbare Stücke zu zerlegen , so dass ich später Dinge auf der Straße bauen kann. Es funktioniert sowieso so, ob das Design dafür verantwortlich ist oder nicht. Aber zweitens können Sie immer noch im Browser entwerfen. Stellen Sie sich den Browser als ein weiteres Design-Tool vor. Nur weil Design nicht in Photoshop, Sketch oder was auch immer Ihr Werkzeug ist, bedeutet nicht, dass es nicht passiert. Sie können immer noch direkt entwerfen. Sie können uns immer noch sagen Entwickler, wie man die Dinge zusammenstellt, so dass es gut aussieht. Vielleicht denken Sie auch, werden Komponenten mich nicht einschränken, wie kreativ und schön meine Designs sein können? Nun, nein. Diese Komponenten, denken Sie daran, können zusammengesetzt werden. Zusammengeschnappt wie Lego-Steine. Sieh dir diesen Elefanten an. Es ist ein riesiger Elefant aus winzigen Lego-Teilen. Ihre Komponenten beschränken Sie nicht. Außerdem ist es wichtig zu beachten, dass Ihre Komponenten selbst aufwendiger sein können. Sie sind nicht in Bezug auf Design beschränkt. Sie denken vielleicht auch, aber das ergibt keinen Sinn für meine Klienten. Als ob es kleine Unternehmen gibt und sie einfach nicht das Budget für so etwas haben. Ich würde argumentieren, dass das Designsystem nicht supergroß, detailliert und aufwendig sein muss . In der Tat kann sogar ein einfacher viel Wert liefern. Wenn Sie beispielsweise Ihr Design in einzelne Teile zerlegt haben, können Sie schnell eine neue Seite liefern. Das hätte in unserem Beispielprojekt viel geholfen, wo der Kunde diese Last-Minute-Anfrage für eine Seite hatte und der Entwickler sie nicht rechtzeitig liefern konnte. Hätte er nur in seinen Mülleimer mit kleinen Teilen gelangen können, um es zusammenzubauen, hätte der Designer nicht einmal in das Design-Tool springen müssen. Designsysteme sorgen für eine reibungslose Übergabe an Entwickler. Sie müssen nicht so viel erraten. Sobald das System entwickelt wurde, können Sie neue Funktionen und neue Seiten ohne zu viel Aufwand zusammenstellen. Letztendlich ist es weniger Frustration für alle, die an diesem Prozess beteiligt sind. 9. Design: Lassen Sie uns die PSD von früher noch einmal besuchen. Die, die der Designer den Entwickler zentrierte, und wir gingen durch sie und alle Fragen, die sie hatten. Erinnere dich an all diese Fragen. Sehen wir uns an, wie dieser Prozess aussehen könnte, wenn der Konstrukteur mit Komponenten im Auge hatte. Wie sieht es aus, eine Konstruktionsdatei zu haben, die Komponenten und Konstruktionssysteme als Teil des Entwurfsprozesses berücksichtigt Sehen wir uns diese Datei an. Dies ist ein UI-Kit von einem Designer namens Meagan fishers, sie ist eine Webdesignerin. Dies ist in Adobe XD. Wenn Sie nicht vertraut sind, ist es das UI-Design-Programm von Adobe. Es ist ausgezeichnet, wenn Sie nicht mit ihm vertraut sind, gehen Sie weiter und laden Sie es herunter. Es ist kostenlos, es ist wirklich gut. Sie haben viele Sample-Kits. Sie nennen sie UI-Kits, aber es ist irgendwie dasselbe wie ein Designsystem. Genau hier unter Datei, Holen Sie UI Kits. Sie können das, mit dem ich arbeite, hier unter mehr UI-Kits erhalten. Schauen wir uns das an und sehen, was das von der PSD unterscheidet. Auf den ersten Blick scheint das sehr ähnlich zu sein. Hier ist dieser Marketingbereich. Weitere Marketing-Sektionen. Grundlegende Elemente wie Ihr Nerv, Ihr Logo und schließlich Ihre Fußzeile. Ich habe hier einen guten Ausgangspunkt. Aber was unterscheidet das von der PSD? Wenn wir ein wenig rauszoomen, können Sie sehen, wie sie diese Kartonaufstellung hat. Sie haben die wichtigsten das Homepage-Marketing mit den allen Marketing-Informationen. Dann nimmt sie dich mit Kunstbrettern durch einen Anmeldefluss. Sie können alle Schritte des Anmeldeprozesses für diese imaginäre Anwendung sehen , die sie entwickelt hat. Dann haben Sie Ihre Dashboard-Bildschirme; Dashboard 1, Dashboard 2, Dashboard 3 usw. bis zum Buchungsservice. All diese Dinge geben mir bereits einen breiteren Kontext, wie all diese Dinge zusammenpassen. Sie werden feststellen, dass es keine Hover-Staaten oder so etwas gibt. Wo ist das Designsystem, wo die Komponenten? Wenn wir etwas weiter hinauszoomen, können Sie sehen, dass wir hier mehrere weitere Kunstboards zu berücksichtigen haben. Nun, lasst uns das hier heranzoomen. Sie nennt es hier ein UI Kit, aber es ist ein Designsystem. Sie können diese Wörter austauschbar verwenden. Jetzt haben wir bereits Beispiele für typografische Baseline-Stile. Wir haben unsere Kopfzeile ist 1-4. Es sieht so aus, als hätten wir einige Text- und Formularbeschriftungen und andere Nebenelemente. Wenn Sie etwas weiter zoomen, können Sie sehen, dass sie Schriftarten und Schriftnamen hat und genau dort, wo sie verwendet werden. Überschrift und Textkörper. Dies sind beschreibende Dinge, die uns sagen, wann wir was verwenden sollen. Wir haben auch Farbfelder, jedes mit der Hex-Nummer der Farbe. Das nächste Kunstboard heißt Calls to Action & Icons. Schon bekommen Sie eine Vorstellung davon, wofür jedes dieser Elemente verwendet werden soll. Sie verwendet die Namen der Kunsttafeln, wie Sie vielleicht sehen, Ebenennamen in Photoshop. Sie sind ein wenig nützlicher, denn innerhalb dieses Kunsttafels können Sie anhand dieser Schlagzeilen sehen, was die Absicht jeder von ihnen ist. Dies ist ein Aufruf zum Handeln bei Dark oder Marketing Call to Action. Wir können hier zurück zu unserem Marketing-Kunstboard gehen. Sie können sehen, wir haben, Marketing-Call to Action auf dunkel und dann bei Marketing-Call to Action auf Licht. Sie entsprechen perfekt dem, den sie entworfen hat. Sie hat auch Hover-Staaten. Sie können den Hover-Zustand mit dem kleinen Maus-Symbol illustriert sehen. Dann sehen Sie ein Produkt Primäre CTA. Was ist das primäre Produkt? Zoomen wir wieder raus. Das entspricht dem tatsächlichen Produkt, das der Benutzer verwenden wird. Sie können den passenden Button direkt hier sehen, Buchen Sie einen Service. Das gibt mir bereits viele Informationen, die nur darauf basieren, wie sie Dinge darüber benannt hat, welche Situationen die Verwendung welcher dieser Tasten erfordern. Sie hat auch Hover Staaten aufgenommen, was großartig ist. Wir haben die alternativen Stile auf Licht und dann hat er oder sie einen behinderten Stil. Das ist ein Zustand, über den wir nicht gesprochen haben, als wir uns vorhin die PSD angesehen haben. Deaktivierte Stile treten auf, wenn Sie nicht möchten , dass der Benutzer in einem bestimmten Fall auf eine Schaltfläche klicken kann. Vielleicht haben sie ungültige Informationen eingegeben und Sie möchten nicht, dass sie vorwärts gehen, bis sie sie sie korrigiert haben. Der Zustand der Behinderten benötigt einen Entwurf. Wir haben auch einen sekundären CTA-Stil hier mit dem kleinen Symbol auf der linken Seite. Das sehen Sie hier wiederholt. Hier haben wir Symbole, die sie alle hier an einem Ort gesammelt werden, was genial ist. Ich kann Ihnen nicht sagen, wie viele Design-Dateien ich habe, wo die Assets waren alle über die Designer-Festplatte verstreut. Ich musste sie jagen und herausfinden, welche Vermögenswerte ich brauchte. Auch nicht nur das, was ich brauchte, sondern die Ernte, die ich brauchte. Manchmal war das Asset nicht in der PSD in einer Weise vorbereitet, die ich auf der Website verwenden könnte. Diese sind alle bereit zu gehen, bereit, direkt hier zu exportieren. Dass wir über Vermögenswerte sprechen, zoomen wir heraus und schauen uns das an. Sie hat alle ihre Bilder hier. Alles fertig beschnitten und bereit zu gehen. Dies sind alle die Seite, es sieht aus wie alle Sidebar Bilder. Ich kann genau sehen, wo jeder benutzt wird und wann. Es ist schon einfach für mich, es zu exportieren und in meinen Code zu legen. Es macht meinen Job viel, viel einfacher. Wenn wir uns das nächste Kunstbrett ansehen, haben wir Formularfelder. Es sieht so aus, als ob jedes große Formularelement dafür berücksichtigt wird. Wir haben unsere Texteingaben hier. Wenn wir vergrößern, können Sie sehen, dass wir einen Beispiel-Platzhaltertext platziert haben. Wir haben den aktiven Status, in dem der Platzhaltertext verschwindet. Wir haben eine aktive mit dem Benutzer , der Text eingefügt hat, und dann haben wir einen Fehlerzustand, der genial ist. Es ist großartig, all das hier bereit zu haben, damit ich anfangen kann, dies in Code zu verwandeln. Sie hat auch einige benutzerdefinierte Umschalt- und Mehrfachselektionselemente entworfen. Dies sind spezialisiertere Formularelemente, die Sie sehen werden. Wenn Sie aufeinander klicken, wird die Option deaktiviert, und wenn Sie auf das andere klicken, die vorherige deaktiviert. Wir haben alle unsere Hover-Staaten, alle unsere aktiven Staaten anwesend und bilanziert. Dann gehen wir weiter, wir haben Drop-Downs. Wie sieht es aus, wenn das Dropdown-Menü geschlossen ist? Wie sieht es aus, wenn es offen ist? Wie sieht es aus, wenn eines der Elemente der Dropdown-Liste mit dem Mauszeiger angezeigt wird? Wie sieht dann das ausgewählte Dropdown-Menü aus? Das ist ein weiterer Zustand, über den wir nicht gesprochen haben, sobald sich das Element in seinem endgültigen Zustand befindet. Wie sieht das aus? Ich habe einige weitere benutzerdefinierte Auswahl hier mit einigen Bildern und einigen optionalen Text hier Dann haben wir Checkboxen, die wir wieder einen Fehlerstatus Textbereiche haben. Das ist eine, die oft unstylt wird. Diese kleinen Service-Komponenten , die einen Service beschreiben, und vielleicht sind dies verschiedene Zustände. Sieht aus, sie hat vergessen, das Label hier zu aktualisieren, aber das ist okay. Ich kann generell eine Vorstellung davon bekommen, was ihre Absicht hier ist vom Design und davon, es beide aus dem Kontext zu sehen. Wie sieht es von selbst aus? Aber auch im Kontext des fertigen Designs. Das nächste, was wir betrachten können, sind unsere Sidebar-Elemente. Sie können sich an die verwendete Sidebar erinnern. Hier haben wir nicht nur eine Sidebar, sondern auch eine zweite Sidebar, die später passiert, wenn der Benutzer tiefer in die App geht. Wir haben Beispiele dafür, wie diese aussehen, wie jedes Element auf Hover aussieht, und wenn Sie darauf geklickt haben, gleiche hier, und dann gibt es einen weiteren kleinen Fortschrittsbalken, den sie entworfen hat. Jeder Staat erhält sein eigenes Design, so dass es keine Frage darüber gibt, wie es aussieht. Wenn diese gestartet werden, wie sieht es aus, wenn sie fertig sind? Da ist alles in Ordnung. Wir bekommen alle Staaten mit der Sidebar für uns ausgefüllt. Jetzt haben wir wieder Marketingkomponenten, basierend auf dem Namen des Kunstboards. Ich kann vermuten, dass dies nur im Marketing-Bereich der Website verwendet wird, also haben wir diesen Aufruf zum Handeln mit der Navigation an der Spitze, einem weiteren Aufruf zum Handeln und nur mehr Komponenten. Eine Sache, auf die wir hier achten müssen, ist, wie wir, wenn wir den ganzen Weg zurück nach links gehen, mit etwas Einfaches wie Typografie, Farben, Knöpfe und deren Zustände beginnen . Wir werden immer komplexer nach und nach, wenn wir nach rechts gehen, und Sie können sehen, dass, wenn wir zu Service-Komponenten kommen, wir über Elemente der Website sprechen, die ziemlich kompliziert sind, bestehend aus kleineren Elementen aus vorherigen Schritten. Hier sehen Sie ein Beispiel unserer Service-Schaltflächen, eine kleine Kartenkomponente mit allen unseren Icons. Dies sind alle Beispiele für Komponenten, die extrahiert wurden und wiederholbar sind. Dann können Sie sie später in der eigentlichen Anwendung im Kontext der Anwendung sehen, in der der Benutzer einen Dienst für sein Muster buchen wird. Vielleicht scheint das kompliziert und es ist nur eine Menge Arbeit, und es ist. Aber was sind die Vorteile? Warum würdest du es so machen? Nun, zunächst einmal, es gibt sehr wenige Fragen, während ich darüber arbeite, wo die Dinge gehen und was sie tun. Selbst wenn vielleicht etwas nicht berücksichtigt wird, wie ein Hover-Zustand eines bestimmten Elements, basierend auf all diesen zusätzlichen Informationen, kann ich eine genauere Vermutung machen, wenn ich muss. Es reduziert hin und her erheblich, und alle Lücken, die diese Designdatei in meinem Wissen hinterlässt, können durch Kommunikation gefüllt werden. Ich kann Fragen stellen, aber weniger von ihnen, also ist es weniger erschwerend für Sie und es dauert weniger Zeit für uns beide. Die Datei scheint mobile Stile zu fehlen, aber das ist in Ordnung. Nehmen wir an, dass ich bis zu diesem Punkt hier in den Designprozess einbezogen wurde, und wir haben uns gegenseitig entschieden, dass der Kunde keine mobilen Stile benötigt. Vielleicht will der Client explizit keine mobilen Styles und weil seine Kunden es nicht verwenden. Das ist okay. Aber wenn sich herausstellte, dass der Designer mobil völlig vergessen hatte und es eine Rührei gibt, um es zu erledigen, gibt es hier nicht so viele Dinge, die ich selbst nicht herausfinden kann. Es gibt bestimmte Teile davon, dass ich definitiv Fragen darüber haben würde , wie sie auf dem Handy aussehen könnten. So ist das ein ziemlich breites Element. Wie sieht das aus? Wie bricht das zusammen? Wie sieht das auf Mobilgeräten aus? Das könnte schwer für mich zu erraten sein. Aber in den meisten Fällen, da wir mit Komponenten arbeiten, kann ich im Grunde herausfinden, wie das auf Mobilgeräten aussehen wird , und ich kann dem Designer helfen und den Prozess für sie glätten. Alles, was sie tun müssen, ist mir Grundlagen und bestimmte Elemente zur Verfügung zu stellen , die es einfach nicht berücksichtigen. Was sind also einige Vorteile von Adobe XD oder so etwas wie es, wie Sketch gegenüber etwas wie Photoshop? Nun, wenn Sie schon eine Weile mit Photoshop arbeiten und das ist, wo Sie sich wohl fühlen, ist das in Ordnung. Aber diese Tools bieten einige ziemlich signifikante Vorteile. Wenn wir zum Beispiel über Komponenten sprechen, schauen wir uns ein Beispiel an. Nehmen wir an, der Kunde entscheidet hier diese Farbe, die wir auf der Marketing-Website im Einsatz sehen können. Das ist genau hier, glaube ich. Nehmen wir an, sie entscheiden, dass das einfach zu breit ist, und wir müssen es ändern. Nun, lassen Sie uns die Seitenleiste öffnen, da XD bereits das Konzept der Komponenten eingebaut hat, können wir dies einfach einmal ändern. Nehmen wir an, wir wollen diesen Aufruf eingrenzen und wir wollen ihn auch enger machen. Jetzt ist dies offensichtlich eine hässliche Änderung, aber da wir sie einmal dort ändern, breitet sich die Änderung auf jede andere Komponente aus, die darauf basiert , wie die Dinge funktionieren, wenn wir Code schreiben. Man ändert die Dinge einmal und es wiederholt sich überall sonst. Ein weiteres Beispiel. Nehmen wir an, der Kunde sagt, ich brauche nur all diese Bilder, um rund zu sein. Normalerweise müssten Sie in Photoshop losgehen, okay, ich muss all diese einzeln ändern und es dauert ewig, und wenn der Client will, dass es sich wieder ändert, dann müssen Sie sie alle wieder ändern. Es dauert eine Weile. Aber hier ändern Sie einfach einen von ihnen, weil sie alle verwandt sind, weil sie alle voneinander basieren, sie alle ändern sich gleichzeitig, was die Dinge viel einfacher für Sie macht. Eine weitere interessante Sache, die XD für uns tut, ist, sagen wir, der Kunde hat entschieden, dass er mobil wollte. Normalerweise müssten Sie in Photoshop reingehen und einfach das ganze Zeug manuell positionieren, als müssten Sie herausfinden dieser Vogel hier runtergeht und in welcher Reihenfolge brechen diese Dinger ein? Weil sie sich in einer bestimmten Reihenfolge im Web bewegen werden. Sie müssen all das in Ihrer Datei herausfinden und es eins nach dem anderen tun, aber XD erlaubt uns, wenn Sie diesen Griff greifen, weiß es, dass dies einzelne Elemente dort sind, und Sie können sehen, dass es sie in ihre eigenen Spalten. Dann haben wir eine mobile Version dieses Moduls , die sehr wenig zusätzliche Arbeit von unserer Seite erfordern. Sie erinnern sich vielleicht, wenn ich die PSD betrachtete, dass ich das kleine Messwerkzeug herausziehen musste, ich aus Gewohnheit verwendet das Screenshot-Werkzeug auf dem Mac, und ich benutze das, um Pixel zwischen den Elementen zu messen. Aber in XD und anderen Werkzeugen wie Sketch und einem anderen namens Figma, können Sie die Alt-Taste drücken, und es zeigt Ihnen die Entfernung zum Rand der Kunsttafel von allem, was Ihre Maus beendet ist. Wenn Sie die Alt-Taste gedrückt halten, wenn Sie ein Element ausgewählt haben, halten Sie die Alt-Taste gedrückt und bewegen Sie die Maus über das nächste Element, von dem Sie den Abstand messen, Sie können sehen, dass es mir genau den Pixelabstand sagt vom nächsten Element über. Dies ist 32 Pixel. Diese Spalte ist 32 Pixel breit, und diese Rinne hier ist 34 Pixel breit, was für mich wirklich praktisch ist. Wenn ich arbeite, muss ich nicht zurückgehen und immer wieder fragen. Ich muss mein Messwerkzeug nicht immer wieder öffnen. Ich drücke einfach Alt und ich kann genau dort sehen, was die genaue Entfernung ist. Ich werde kurz auf die Prototyping-Funktionen von XD eingehen, und es gibt andere Tools, die dies tun. Aber wenn ich hier den Play-Button drücke, bekomme ich eine Vorschau der Anwendung. Sie können die Kunstbretter tatsächlich so miteinander verknüpfen, dass Sie, wenn Sie spielen, einen Prototyp der Website erhalten und es tatsächlich interagierbar ist. Sie können dies verwenden, um ziemlich detaillierte Markups zu erstellen , einschließlich Animationen und solche Dinge. Es ist also scrollbar. Ich kann damit auf eine Weise interagieren, die ich mit einer tatsächlichen Website interagieren könnte. Sehen Sie, was passiert, wenn ich hier klicke. Ja, es bringt mich auf die nächste Seite in diesem Fluss. So können Sie dies tun, indem Sie auf die Registerkarte Prototyp gehen, und Sie können tatsächlich Verknüpfungen zwischen Kunstboards und auch zwischen Elementen von Kunstboards erstellen , einzelne Komponenten auf den Kunsttafeln, so dass, wenn Sie den Play-Button drücken, Sie können auf das Ding klicken und es bringt Sie zum nächsten Bildschirm, dann können wir verlinken. Wenn wir für eine vollständigere gehen wollten, können wir das mit dort verknüpfen und mal sehen, was passiert wenn ich auf Play klicke und darauf klicke, und es bringt mich zum nächsten Bildschirm. So bekommen Sie hier eine Vorstellung, dass dies wirklich mehr Zweck für das Web und für Schnittstellen ist, so dass Photoshop einfach nicht mithalten kann. meiste Zeug macht einfach nicht. Das macht deine Arbeit als Designer einfacher, aber auch als Entwickler, es macht meinen Job so viel einfacher. Es gibt so viel weniger Graben und so viel weniger Frustration bei der Verwendung dieser Programme im Vergleich zu so etwas wie Photoshop. Für Ihr Klassenprojekt möchte ich, dass Sie ein System entwerfen. Nehmen Sie also ein altes Design von Ihnen oder beginnen Sie frisch und zerlegen Sie es in Komponenten. Ihr Designsystem sollte einen Styleguide für Typografie enthalten. So Überschriften Ebenen eins bis drei, Absatzformate, Listenformatvorlagen, beide sind geordnet und unsortiert. Formen Sie Elemente wie Schaltflächen und Texteingaben und Links. Fügen Sie auch Zustände wie Hover ein und klicken Sie auf die Zustände für die Schaltflächen und Links. Fügen Sie einige Farbfelder, einige Farblinien hinzu, damit der Entwickler weiß, was zu verwenden ist. Fügen Sie mindestens drei Beispiele für verschiedene Komponenten hinzu. Das mag eine Menge erscheinen, aber wir haben eine Checkliste für Sie in den Klassenressourcen, also fliegen Sie nicht blind. Wenn Sie fertig sind, teilen Sie es bitte mit. Ich würde gerne sehen, was Sie sich einfallen lassen und wenn Sie Fragen haben, zögern Sie nicht zu fragen. Ich bin sicher, dass entweder ich oder andere in der Skill-Share-Community Ihnen helfen können. 10. Design: Hier finden Sie einige Tipps zum Erstellen Ihrer ersten Designsysteme. Eines der ersten Dinge, die Sie tun können, ist, willkürliche Einmal-Änderungen zu vermeiden. Wenn Sie zum Beispiel diese eine Schlagzeile sehen und Sie sich wirklich wünschen, dass es kleine Kappen wäre, würde es so viel besser aussehen. Es ist wichtig, sich zu fragen, ist dieser Stil wiederverwendbar? Wenn ich das ändere, sollten sich alle anderen Schlagzeilen ändern? Wie wirkt es sich auch auf die Elemente um ihn herum aus? Werden sie sich ändern müssen, denn wenn sich dieses eine Design ändert? Ich sage nicht, mach das Ding nicht klein, überlege einfach das ganze System, bevor du es tust. Eine andere Sache, die Sie tun können, die das Leben Ihres Entwicklers erleichtern wird , ist so detailliert wie möglich zu sein. Fügen Sie Dinge wie Hex-Farbwerte für Ihr Farbschema, Pixelabstände zwischen Elementen, Dinge wie diese ein. Als Beispiel, hier ist ein Screenshot von Polaris. Es ist Shopifys Designsystem. Sie können sehen, dass sie nicht nur die Hauptmarkenfarben enthalten, sondern auch verschiedene Farbtöne der Farben enthalten, alle in hex. Sie enthalten einige detaillierte Abstandsinformationen, aber nicht nur den Raum selbst, wie Abstände zu wählen, ihre Styleguide lehrt. Wenn Sie nicht über Details wie diese nachgedacht haben, wird Ihr Entwickler eine Menge Fragen haben. Es wird die Dinge ein bisschen ärgerlich für Sie machen, oder schlimmer als das, sie werden anfangen, sich selbst zu entwerfen und wir alle wissen, wie das enden kann. Sie könnten auch falsch erraten und den Eindruck erwecken, dass sie sich nicht um Ihr Design kümmern und es ist ihnen egal, ob es schlecht aussieht. Also seien Sie detailliert. Wenn Sie nicht wissen, was sie brauchen, dann fragen Sie. Eine andere Sache, die Sie tun können, ist einfach über Photoshop hinaus zu erkunden. Photoshop ist ein altes Werkzeug und es macht eine Menge von dem, worüber wir reden, sehr schwierig und langsam. Es wurde wirklich nicht gebaut, um Schnittstellen zu entwerfen, aber es gibt zweckgebundene Werkzeuge, die zum Beispiel eines der beliebtesten sind Skizze genannt. Es wird überall in dieser Branche verwendet, aber Adobe hat ein kostenloses Tool namens XD. Es geht Feature für Feature mit skizzierten wirklich gut. Figma ist eine andere, die ausgezeichnet ist. Alle drei Werkzeuge sind einen Versuch wert, es lohnt sich, Ihre Zeit zu geben, wenn Sie es haben. Hier ist ein Beispiel dafür, wie es wie ein XD aussehen könnte. Dies ist wieder Meghan Fischer Design. Sie können hier sehen, was sie in ihrer XD-Datei enthält. Handoff-Tools sind auch super nützlich. Es gibt ein weiteres zweckgebautes Tool, das nur für die Designer-Entwickler-Übergabe da ist. XD hat diese Funktion integriert, Sie können auf „Teilen“ klicken und Sie können Ihr Design mit Ihrem Entwickler teilen, aber es gibt auch ein paar andere Tools, die dafür entwickelt wurden. Das beliebteste heißt Zeplin. Es ist großartig. Wenn Sie wirklich gut strukturierte Design-Datei hochladen, kann es tatsächlich Code für Ihren Entwickler schreiben und einige der lästigen beschäftigten Arbeitsaufgaben aus dem Weg für sie bekommen , was genial ist. Avocode ist ein anderer, der etwas Ähnliches macht. Letztendlich machen diese Design-Tools die Zusammenarbeit besser. Sie erleichtern das Design, sie machen es einfacher für uns zu bauen. Die Handoff-Tools werden Ihnen das Leben und das Leben Ihres Entwicklers erleichtern. Auch hier führt es nur zu mehr kollaborativen, weniger feindlichen Beziehungen, was großartig ist. Also bitte probieren Sie die neuen Tools aus, und wenn Sie es noch nicht getan haben, bin ich mir sicher, dass Ihr Entwickler Ihnen dafür danken wird. 11. Vertrauen mit deinen Devs aufbauen: Das letzte und wahrscheinlich größte Problem, das dieser imaginäre Designprozess hatte, war die gegenseitige Beziehung zwischen dem Designer und dem Entwickler. Sie erinnern sich vielleicht daran, dass der Designer so war, warum können sie das nicht einfach richtig machen? Dies ist ein schwieriges Problem zu lösen, aber es ist auch ziemlich wichtig. Wie fangen wir an? Eines der ersten Dinge, die wir Designer tun können, ist eine positive Absicht anzunehmen. Ich weiß, wie frustrierend es sein kann, so hart an einem Design zu arbeiten, es an den Entwickler zu schicken, und es kommt zurück und es ist alles Junkie und vermasselt. Vieles davon kann durch die Dinge, über die wir früher gesprochen haben, die kollaborativen Übungen und das Design und System unterstützt werden. Aber immer noch wird es Inkonsistenzen geben, es wird Fehler geben, es gibt einfach keinen Weg um es herum. Halten Sie einen kühlen Kopf, vermeiden Sie die Schuld. Es gibt alles, was dazu führen könnte, dass das Design auf unerwartete Weise zurückkommt. Nicht zuletzt ist es manchmal als Entwickler, es ist alles, was ich tun kann, um das Ding zum Laufen zu bringen. Natürlich wird ein Teil des Designs vermasseln. Natürlich werden die Dinge durch die Risse schlüpfen. Der Punkt ist, niemand will hässliche Sachen machen. Es ist ein harter und oft stressiger Job. Nehmen Sie positive Absicht an und seien Sie geduldig. Wenn der Entwickler Fragen hat, antworten Sie leicht und wenn Sie Fragen haben, fragen Sie bitte. Eine andere Sache, die Sie tun können, ist, die Kontrolle aufzugeben. Ich habe ein Geheimnis für dich. Es ist etwas, das nicht alle Designer hören wollen, aber Ihr Design ist im Browser fertig. Es ist noch nicht fertig in Photoshop, es ist noch nicht fertig in der Skizze. Wir Entwickler treffen ständig Designentscheidungen. Es kann nicht geholfen werden. Es gibt einfach immer etwas, das das Design nicht berücksichtigt, und wir müssen eine Entscheidung treffen. Du kannst es dir so vorstellen. Wenn Sie einen Architekten und einen Baumeister mieten würden, um Ihr Haus zu bauen, egal wie detailliert dieser Architekt in seinen Entwürfen war, müssen die Bauherren das Design ändern, auch wenn es nur ein wenig ist, sie tun dies, um zu berücksichtigen ob oder unerwartetes Gelände oder was auch immer, es ist unmöglich für den Architekten, alles zu berücksichtigen, und das ist okay. Eine andere Sache, die Sie beachten sollten, ist, dass Geräte Einschränkungen haben. Sie können jetzt Websites auf Uhren und Kühlschränken ansehen, schmale Bildschirme, Breitbild, langsame Computer, schnelle und langsame Verbindungen, schnelle Verbindungen. Es gibt eine endlose Anzahl von Variablen, die sich auf das Endprodukt auswirken können, und der Entwickler muss oft Designentscheidungen treffen, um diesen gerecht zu werden, und das ist wirklich eine gute Sache, denn das sind Designentscheidungen, die Sie zu machen. Wenn sie die falsche Entscheidung treffen, ist das okay. Es ist nur Zeit, darauf zu iterieren. Machen Sie es besser. Stellen Sie viele Fragen. Wenn Sie etwas sehen, das seltsam ist oder wenn Sie nicht sicher sind, wo das Ding verwendet wird. Wenn Sie sich nicht sicher sind, ob Sie etwas wie möglich entwerfen, stellen Sie frühzeitig Fragen. Aber indem wir gemeinsam und iterativ so arbeiten, können wir Dinge schaffen, die für die meisten Menschen die meiste Zeit funktionieren. Es tut mir leid, es zu sagen. Aber es wird nicht gut aussehen für 100 Prozent der Menschen, hundert Prozent der Zeit, also müssen Sie ein wenig von dieser Kontrolle verzichten. Das dritte, was Sie tun können, ist ein wenig darüber zu lernen, was wir Entwickler tun. Ich werde dir nicht sagen, du sollst programmieren lernen, es ist dein Leben. Du tust, was du willst. Aber ich werde sagen, es ist ziemlich hilfreich. Es kann die Dinge einfacher machen. Es wird Ihnen helfen, fundiertere Designentscheidungen zu treffen. Zum Beispiel, und Sie werden nicht mehr das Gefühl haben, dass Sie und Ihr Entwickler zwei verschiedene Sprachen sprechen. Ich sage nicht, dass du ein Pro-Entwickler sein müsstest. Es könnte nur hilfreich sein, mit etwas HTML und CSS als einige Grundlagen zu beginnen. Skillshare ist eine großartige Ressource dafür. Denken Sie an Code ist nur ein weiteres Design-Tool und Ihr Versorgungsgurt. Dies sind einige gute Möglichkeiten, mit denen Sie beginnen können, Ihrem Entwickler ein bisschen mehr zu vertrauen. 12. Wie alles zusammenkommt: In Ordnung, lassen Sie uns noch einen Blick auf den Designprozess werfen, den wir früher durchgemacht haben, dieses wirklich schlechte Projekt. Wie könnte das mit diesen neuen Techniken und Ideen aussehen? Nun, wieder, du bist freischaffender Designer, du hast gerade einen neuen Klienten gelandet. Sie haben Ihr Kickoff-Meeting, aber weil die Entwickler im Raum, während Sie es durchsprechen, erkennen sie, dass sie in der Vergangenheit an einem sehr ähnlichen Projekt gearbeitet haben, und sie bieten einen Vorschlag, wie dieses Ding funktionieren könnte. Der Klient liebt es also, da fängt man an. Sie beide beginnen Prototyping Ideen und schließlich nach Prototyping und werfen Ideen und halten die guten, landen Sie auf eine wirklich solide Richtung und beginnen mit dem Design. Endlich ist es Zeit für die High Fidelity Comps. Sie sprechen mit den Entwicklern darüber, was sie brauchen könnten, wofür entwerfen Sie? Welche Geräte sind Ihre Zielgeräte, und Sie haben es zusammen gearbeitet, sobald die Comps fertig sind um sie in weitere Komponenten zu zerlegen. Mit den Komponenten und den Styleguides kann sich Ihr Entwickler schneller entwickeln als sonst. Der Kunde kann plötzlich noch einmal eine super wichtige Seite haben, aber der Entwickler kann es einfach bauen, weil sie diese Box mit Lego Stücken zu zeichnen haben. Sie müssen nicht einmal Ihr Design-Tool öffnen. Niemand musste spät wach bleiben, bevor der Start und der Start pünktlich passiert. Vielleicht entdecken Sie ein paar Fehler, aber es ist in Ordnung, weil Ihr Prozess iterativ ist und Sie sie schnell aus dem Weg bringen können. Sie können auch nach dem Start auf der Website weiter hinzufügen und verbessern. Vielleicht hat der Client eine weitere Anfrage für eine Funktion. Sie können es ziemlich einfach hinzufügen, weil Sie nur eine Komponente hinzufügen, Sie nicht ein Ganzheit-Layout entwerfen. Offensichtlich ist dies ein idealisierter Prozess, genau wie das vorherige Beispiel in die entgegengesetzte Richtung idealisiert wurde. Es wird immer Beulen auf der Straße geben, aber mit der Kommunikation und einigen guten Tools werden Sie bessere Projekte starten. Jetzt, da Sie wissen, wie das funktionieren kann, wird sich Ihr Prozess verbessern. 13. Schlussbemerkung: Dies ist wirklich dazu gedacht, nur eine Grundierung zu sein, nur um Sie damit zu beginnen, über diese Dinge nachzudenken. Wirklich, es ist eine langwierige Praxis , an Ihren Beziehungen zu Ihren Mitarbeitern zu arbeiten und Ihren Prozess zu verbessern. Das Beste, was Sie tun können, ist, weiter zu lesen und neue Dinge auszuprobieren. Aber zusammenfassend haben wir über drei Dinge gesprochen, die Ihre Beziehung zu Ihren Entwicklern wirklich verbessern und drastisch verbessern können . Das erste, was: involvieren Sie sie früh, und halten Sie sie dann während des gesamten Prozesses beteiligt. Das bedeutet nicht mehr, im Vakuum zu entwerfen. Stellen Sie viele Fragen darüber, was sie brauchen, um das Design richtig auszuführen. Kein großes Design mehr enthüllt, weil sie manchmal ein Projekt entgleisen können. Gestaltungssysteme, keine Seiten. Brechen Sie die Dinge zusammen. Fügen Sie Topografieregeln und Farben und solche Dinge ein, aber auch Dinge in Komponenten aufteilen. Denken Sie darüber nach als Lego-Teile, die zusammenschnappen. Diese sind schneller und einfacher zu bauen, die wirklich imitieren, wie wir auf dem Web sowieso bauen. Das dritte, worüber wir gesprochen haben, ist, Ihrem Entwickler zu vertrauen. Sie können das Ergebnis Ihres Entwurfs auf diesem Medium nicht zu 100 Prozent steuern. Es gibt einfach zu viele Variablen. Sobald es außerhalb von Sketch oder Photoshop ist, ist es aus Ihren Händen. Außerdem neigen Entwickler dazu, Designentscheidungen zu treffen, also werden sie Fehler machen. Der Schlüssel ist, geduldig zu sein und ihnen zu helfen. Nun, dieser Prozess funktioniert nicht für jedermann. Sie müssen es wahrscheinlich an Ihren eigenen Prozess anpassen, Ihrem eigenen Team, Ihre eigene Arbeitsweise. Aber wieder, dies ist nur, um Sie beginnen, über diese Konzepte nachzudenken und es zu verbessern, Ihren Prozess im Laufe der Zeit zu verbessern. Das Ergebnis sind bessere, kollaborative Beziehungen zu Ihren Entwicklern und letztlich bessere Projekte und glücklichere Kunden. Ich hoffe, das hilft dir. Geh raus und baue etwas Großartiges.