Designer und seine Rolle bei der Entwicklung mobiler Anwendungen
Wir alle wissen, dass Design eine sehr wichtige Rolle beim Design und der Entwicklung mobiler Anwendungen spielt. Jeder Designer hat seinen eigenen Ansatz, seine eigenen Methoden und Werkzeuge für die Arbeit an Anwendungen. Das Tempo der Weiterentwicklung hängt davon ab, auf welchen Plattformen der Designer arbeiten und wie er das fertige Material dem Projektteam präsentiert.
Es ist kein Geheimnis, dass Projektteams häufig wechseln. Heute arbeitet man an dem Projekt und morgen arbeitet bereits eine ganz andere Person. Daher besteht das Design einer mobilen Anwendung nicht nur aus gut gezeichneten Bildern, sondern auch aus qualitativ hochwertigem übertragenem Material, das anderen Personen zeigt, wie die Anwendung funktionieren sollte.
In diesem Artikel möchte ich über die Interaktion des Entwicklers mit dem Designer sprechen, basierend auf meinen eigenen Erfahrungen bei der Entwicklung einer mobilen Anwendung, über meine Erwartungen an das Projekt und die brutale Realität. Ich hoffe, dass dieser Artikel viele neue Designer zum Nachdenken über ihre Arbeit anregt und Entwicklern hilft, mit einigen schwierigen Situationen umzugehen.
Wie kann ein Designer einem Entwickler das Leben erleichtern?
Unabhängig vom Profil und Fokus des Designers gibt es also viele Werkzeuge, mit denen er zeichnen kann, was von ihm verlangt wird. Nur das Zeichnen von Bildschirmen einer mobilen Anwendung reicht nicht aus. Dies ist weder eine Website noch eine Webanwendung. Diese Kategorie digitaler Produkte hat strengere Regeln, die Sie befolgen müssen. Für IOS- und Android-Plattformen wurden separate Richtlinien erstellt (siehe Abschnitt "Nützliche Links").
All dies wurde aus einem bestimmten Grund erfunden. Wenn ein Illustrator oder nur ein Webdesigner plötzlich beschließt, Teil eines mobilen Teams zu werden, kann man mit Sicherheit sagen, dass er das Projekt relativ schlecht übergeben wird. Auch wenn es ihm so vorkommt, als hätte er alles cool gemacht, kann die Weiterentwicklung zu der gegenteiligen Schlussfolgerung führen.
Derzeit ist die Situation so, dass Entwickler wie Designer über viele spezifische Tools und Anleitungen verfügen. Sie wollen sich nicht nur nicht mit Design-Tools befassen, sondern haben auch keine Zeit. Der Designer hat gerade seine Arbeit bestanden und der Projektmanager und der Kunde fordern bereits die Ergebnisse vom Entwickler. Was kann ein Designer in diesem Fall helfen? Wie kann er Entwicklerzeit sparen? Alles ist ganz einfach - Sie müssen die richtigen Werkzeuge nicht nur zum Zeichnen des Projekts auswählen, sondern auch für die anschließende Arbeit mit dem Entwicklungsteam.
Nach mehrjähriger Arbeit in vielen Teams, die sich voneinander unterscheiden, wurde mir klar, wie sich Design auf die Entwicklungsgeschwindigkeit und die komfortable Arbeit in einem Team auswirkt. Bevor ich das Design in die Entwicklung einbeziehe, überprüfe ich es daher auf Übereinstimmung mit bestimmten Standards und Regeln.
Der Designer ist Teil des Teams
Dies sind nicht nur pathetische Worte. Der Designer sollte Teil des Teams sein, bevor er die Anwendung in den Store stellt, ständig mit Kollegen kommuniziert, Probleme klärt und schnell auf Anfragen von Entwicklern reagiert. Die Mindestdauer seines Aufenthalts im Team beträgt bis zur ersten Lieferung des MVP.
Wie die Praxis zeigt, geben Designer ihre Layouts nicht immer in hoher Qualität an, und bei der weiteren Entwicklung treten einige Fehler auf, z. B. nicht gezeichnete leere Bildschirme oder ein Zustand von Elementen, falsch geschnittene Elementblöcke, Mangel an Ressourcen. Es kommt auch vor, dass der Client etwas hinzufügen möchte.
Der Designer muss seine Arbeit beenden, und es ist gut, wenn er zu diesem Zeitpunkt im Team ist, damit Änderungen schnell vorgenommen werden können. Oder er muss in Kontakt bleiben, damit das Projekt und das Team keine Probleme mit der betrieblichen Änderung von UI / UX haben.
Der Entwickler sollte nicht verstehen, in welchen Programmen das Projekt gezeichnet wurde. Dateien sollten sich leicht öffnen lassen
Wie oben erwähnt, muss der Entwickler jetzt so viel lernen, dass einfach keine Zeit mehr ist, Grafikeditoren zu verstehen. Daher sollte der Designer keine Elemente in Photoshop / Illustrator zeichnen und das Layout in * .psd / * .ai-Dateien spenden. Solche Dateien wiegen ziemlich viel und erfordern die Installation des Adobe-Pakets. Auch wenn dies keine besondere Rolle spielt, bleibt einfach keine Zeit, diese Editoren zu studieren.
Der Entwickler möchte nur die Elemente auswählen und sehen, wie sie gesetzt werden, und nicht die Struktur der Ebenen einer großen Datei verstehen. Jetzt gibt es viele Grafikeditoren zum Rendern mobiler Anwendungen: Sketch, Figma und andere. Im Allgemeinen gibt es eine große Auswahl. Wie der Designer einen anklickbaren Prototyp und "Live-Bildschirme" für das Frontend präsentiert, hängt vom ausgewählten Editor ab.
Wenn sich der Designer für Figma entschieden hat, können die „Live“ -Bildschirme, der anklickbare Prototyp, die User Story, die Bildschirmübergänge, die Schriftfamilien und die Farben unabhängig voneinander heruntergeladen werden - alles befindet sich an einem Ort. Designänderungen sind sofort sichtbar. Wie viele andere Dienste hat Figma seine Nachteile. Dies ist jedoch eine gute Wahl, schon allein deshalb, weil für diesen Editor keine spezielle Software installiert werden muss. Sie müssen nur auf den Link zum Projekt klicken. Die Hauptsache ist, das Internet zu haben.
Skizze ist auch eine gute Wahl. Ein Designer kann Prototyping-Tools wie Zeplin oder InVision für diesen Editor verwenden, wenn das Entwicklungsteam bereits mit ihnen arbeitet. Diese Programme erfordern keine eingehende Untersuchung der Werkzeuge.
Der Designer muss die Richtlinien für verschiedene Plattformen und deren Unterschiede kennen
Sehr oft zeichnen Designer Projekte, ohne die Richtlinien zu verstehen, Stile zu mischen oder nicht standardmäßige Elemente zu erstellen, und denken über die Schönheit des Bildschirms nach. Es gibt einige solcher Beispiele für Dribbble und Behance. Kunden, die diese Nuancen nicht kennen, sind mit den Layouts einverstanden. Wenn es um Entwicklung geht, hören die Dinge auf. Der Designer möchte den falschen Job nicht wiederholen. Der Kunde benötigt einen solchen Bildschirm oder Effekt, den er genehmigt hat, der jedoch nicht möglich ist.
Daher ist es sehr wichtig, dass der Designer versteht, was und wie er zeichnet.
Ressourcen
Dies ist das schmerzhafteste Problem bei der Interaktion mit einem Designer. In der Regel hacken Designer keine Ressourcen. Zum größten Teil glauben sie, dass: sie nicht dazu verpflichtet sind; es ist lang und eintönig, und wenn der Entwickler es braucht, schneidet er alles selbst oder Sie können * .svg zurücksetzen; Sie wissen nicht, was genau geschnitten werden muss und in welchen Größen.
Wenn Sie jedoch von der Seite des Entwicklers schauen, reduziert die Lösung dieses Problems die Arbeitszeit erheblich. Es reicht aus, wenn er sich den Namen der Ressource auf dem Prototyp ansieht und diesen im Ressourcenordner findet - und fertig, setzt er weiter. Und wenn Sie sich vorstellen, dass der Entwickler die Ressourcen selbst reduzieren muss? Es sollte das gewünschte Element auf dem Bildschirm vollständig hervorheben, den Export finden, die Größe und den Pfad angeben.
Es scheint nur ein schneller Job zu sein. Aber es gibt viele Elemente und es wird viel Zeit verschwendet. Auch hier geben Layouts nicht immer in einwandfreiem Zustand auf. Der Designer berücksichtigt nicht immer alles. Außerdem funktioniert das Prototyping-Tool beim Export möglicherweise nicht richtig.
Beim Versuch, Elemente zum Schneiden auszuwählen, wählen Entwickler manchmal nur einen Teil eines Elements aus oder klammern sich an einen Hintergrund (der transparent sein sollte). Daher ist es gut, wenn der Designer nicht nur Ressourcen schneidet, sondern auch die richtigen Größen verwendet.
TK mit einer Beschreibung der Bildschirme
Es ist gut, wenn die Anwendung aus einer kleinen Anzahl von Bildschirmen besteht und auf einen Blick klar ist, wie sie funktioniert. Wenn die Anwendung über eine große Anzahl von Bildschirmen verfügt und der Prototyp kein vollständiges Bild ihres Betriebs liefert oder die Anwendung nach Änderungen auf Kundenwunsch gewachsen ist, kann eine technische Beschreibung aller Bildschirme, jedes Elements auf diesem Bildschirm und seines Status die Situation retten.
Wie oben erwähnt, ändern sich die Mitglieder des Projektteams häufig. Niemand will sich mit Neulingen anlegen. Vielleicht machen Kollegen eine kurze Überprüfung, lassen Links zu allen vom Designer herausgegebenen Ressourcen fallen - und das ist alles. Es wird erwartet, dass der Entwickler mit einem umfassenden Verständnis der Funktionsweise der Anwendung beginnt. In den meisten Fällen gibt es keine TK, die dies erklärt, da der Designer nicht wusste, dass dies erforderlich war oder dies nicht wollte. Und was kommt raus? Die Arbeit hört auf. Ein neues Mitglied des Teams versteht nicht, was und wie es funktioniert, arbeitet mit halber Stärke und verschwendet gleichzeitig Teamzeit.
Was ist, wenn es keine der oben genannten Möglichkeiten gibt, Sie aber arbeiten müssen?
So kam es, dass alle oben genannten Anforderungen in einem meiner Projekte verbindlich wurden.
Das Projekt war mit der Vermietung von Immobilien verbunden und wurde für zwei Plattformen entwickelt: IOS und Android. Der Entwicklungsprozess begann wie jeder andere. Später stellte sich heraus, dass der Designer mit mobilen Anwendungen nicht vollständig vertraut war. Welche Führer er nicht kannte. Das Design wurde von transparenten Elementen begleitet, Schriftarten wurden nur für eine Plattform verwendet. Das Färben könnte als "50 Graustufen" beschrieben werden.
Ich erhielt eine * .psd-Datei. Es scheint nichts falsch zu sein. Solche Dateien werden von vielen Designern übergeben. Aber ich musste das Adobe-Paket installieren, um mir das Layout anzusehen. Die Datei war sehr "schwer" und wurde etwa 10 Minuten lang geöffnet. Nicht alle Bildschirme wurden separat im Arbeitsbereich gezeichnet. Sie lagen als Ebenen übereinander, und um einen Bildschirm zu sehen, mussten Sie alle anderen ausschalten. Da ich keine wesentlichen Erfahrungen mit dem Paket hatte, dachte ich an Avocode als Werkzeug für die Verarbeitung von Designmaterial. Natürlich ist dieses Programm nicht perfekt, aber es hat mich buchstäblich gerettet.
Der klickbare Prototyp wurde mir in InVision übertragen. Beachten Sie, nur ein anklickbarer Prototyp ohne Live-Bildschirme.
Schlussfolgerungen:
Was ich vom Designer erwartet hatte:
- anklickbarer Prototyp und Live-Bildschirme (InVision, Zeplin oder Figma)
- überarbeitete TK mit einer Beschreibung der Funktionsweise der Bildschirme
- Kartenbildschirme mit Übergängen
- User Story
- gehackte Ressourcen in den Größen @ 1, @ 2, @ 3
- Schriftarten
Von alledem erhielt ich nur einen anklickbaren Prototyp und eine * psd-Datei.
Das Projekt wird abgeschlossen und in den Store hochgeladen. Aber um dieses Ergebnis zu erzielen, ging mein Team durch sieben Höllenkreise oder stieß, wie man so sagt, auf bestimmte Schwierigkeiten.
Viele werden nicht zustimmen und sagen, dass die bereitgestellten Materialien ausreichend sind. Aber wir sprechen über Professionalität und wie die Situation von Seiten der Entwickler aussieht. Ein Designer einer mobilen App ist schließlich nicht nur ein Künstler. Dies ist ein Mitglied eines Teams, das an einem komplexen Projekt arbeitet. Er sollte seine Arbeit gut machen, denn für ihn ist dies nicht das Ende der Arbeit am Projekt, sondern für das Team nur der Anfang.
Vielen Dank für Ihre Aufmerksamkeit und Ihre erfolgreichen Projekte!
Nützliche Links:
IOS-RichtlinienAndroid-RichtlinienProbleme bei der Entwicklung des alten mobilen ProjektsFigmaSkizze