Design VS Code – Warum sollten sie Hand in Hand gehen?

Sollten sich Designer nur auf die Kunst des visuellen Brandings einer Website konzentrieren? Sollen Entwickler nur programmieren können? Welche Bedeutung hat die Frontend-Entwicklung in Drupal? Lassen Sie uns in diesem Artikel Antworten auf alle Ihre Fragen finden.

Wenn wir uns eingehender mit diesem Design vs. Code-Rätsel befassen, fällt uns auf, dass beide tatsächlich komplementär sind. Aber die Frage ist warum? Warum müssen UI/UX-Designer Code und seine Grundlagen lernen und das gilt auch für Entwickler in Bezug auf das Design.

In beiden Bereichen geht es darum, kreativ zu sein, die Benutzer und ihr Verhalten zu verstehen. Ein Designer zu sein, ohne die grundlegenden Programmierfähigkeiten und die Codestruktur zu kennen, ist wie einen halbgebackenen Kuchen zuzubereiten, der Sie beim Essen auf die Toilette nehmen könnte.

Kommen wir aber zunächst an einem Beispiel zu den Grundlagen.

Design vs Coding: Die Ähnlichkeit mit einem Unterschied

Für einen Schriftsteller muss man sich seine Gedanken vorstellen und abschließen, bevor man sie tatsächlich niederschreibt. Niemand führt einfach ein Tagebuch oder geht auf einen Blog oder eine Social-Media-Plattform und fängt sofort an zu schreiben. Deshalb wird der ganze Vorgang als Composing bezeichnet. Und ja, das Schreiben einer E-Mail in Gmail wird auch als „Verfassen“ bezeichnet. Warum sprechen wir jetzt über Schriftsteller, Kompositionen und alles andere. Kommen wir zur Sache. In diesem Fall ist die Vorstellungskraft Ihr Entwurf und Ihre Gedanken niederzuschreiben ist Entwicklung. Ich hoffe, Sie haben jetzt ein besseres Bild; Kommen wir zu einer anderen Seite dieses Themas.

Sollten Designer Programmieren lernen und Entwickler etwas über UI/UX lernen?

Während Design-Code-Sprints können Sie auf Situationen stoßen, in denen nicht alle erstellten Designs machbar sind. Schließlich ist das Endprodukt eine optimierte Version des ursprünglichen Designs. Diskussionen finden statt, Kunden ändern Anforderungen, aber das Problem bleibt bestehen. Diese Situationen lassen sich vermeiden, wenn Design- und Entwicklungsteam von Anfang an gleichzeitig zusammenarbeiten würden. Auf diese Weise wird die Arbeit effizienter erledigt, da sie ständig Feedback darüber erhalten, was machbar ist und was nicht.

Beide Domänen zu verstehen ist nicht so schwierig, wie Sie vielleicht denken. In jedem von ihnen braucht es Vorstellungskraft, Denkprozesse und Übung. Und ja, ganz zu schweigen davon, dass die grundlegenden Fähigkeiten Design und Code sind, die Sie lernen müssen, aber nicht zwingend, wenn Sie eine kennen.

Ein Designer muss die Machbarkeit, Möglichkeiten und Herausforderungen eines Designs kennen und das kann man nur erfahren, wenn man weiß, wie man dies durch Code erreicht. Das gleiche gilt auch für Entwickler. Wenn Entwickler die verschiedenen Szenarien verstehen, die die Benutzer durchlaufen können, ihre Benutzererfahrung, Fehlerbehebung, Lösung usw., können die Dinge viel einfacher und effizienter werden.

Hier sind die Gründe, warum eine Person neben ihren Kernkompetenzen die Grundlagen einer der Fähigkeiten (Code oder Design) erlernen sollte

1. Mehr Kontrolle über das Aussehen und die Haptik des Produkts: Dies bedeutet im Wesentlichen, dass ein Entwickler, wenn er weiß, wie die Designanalyse funktioniert und welcher Designprozess beteiligt ist, diese Designideen anpassen kann und mehr Kontrolle über das Endprodukt hat und somit zu einer schnelleren Lieferung des Produkts.
2. Benutzer verstehen und auf das Design anwenden: Wenn ein Entwickler das Produkt aus der Perspektive eines Benutzers versteht, gibt es ihm/ihm enorme Macht, etwas zu entwickeln, das die Benutzer wirklich brauchen und sich wünschen. Zum Beispiel wird er/sie verstehen, wie Benutzer auf unterschiedliche Typografien, unterschiedliche Schaltflächenstile, Farbschemata usw. reagieren.
3. Designanpassung: Ebenso wichtig ist es für Designer, die mit dem Programmieren vertraut sind. Wenn er/sie weiß, wie das entworfene Produkt während der Entwicklung aufgebaut sein wird, kann er/sie das Design idealerweise verbessern und effizienter gestalten, wodurch der Zeit- und Arbeitsaufwand der Entwickler reduziert wird.

Die Konsequenzen einer reinen Kernkompetenz anhand von Beispielen herausarbeiten

Um besser zu verstehen, warum Design und Codierung Hand in Hand gehen sollten, lassen Sie uns auf einige Beispiele eintauchen.

Das Obige ist ein klassisches Beispiel für die Verwendung einer nicht sequentiellen Struktur. Hier wird die Struktur neu geordnet, während sie für das Handy entwickelt wird. Dies ist nicht nur eine schlechte Praxis; es ist auch zeitaufwendig und umständlich. Wenn ein Designer jedoch die Struktur des zu entwickelnden Codes gekannt hätte, hätte dies leicht und möglicherweise vermieden werden können.

Betrachten Sie das obige Beispiel für ein Popup-Overlay mit einer Bildlaufleiste. Ein Popup-Overlay ist so konzipiert, dass es die Aufmerksamkeit des Benutzers auf ein einzelnes Thema lenken soll und wird nur dann als Fokus verwendet, wenn eine bestimmte Information angezeigt werden soll. Hier hat das Pop-up-Overlay einen Scroll im Hintergrund, der den Benutzer ablenken könnte und sich möglicherweise nicht als unwirksam erweisen könnte

Ein Entwickler konzentriert sich immer darauf, die Aufgabe effizienter und schneller zu erledigen, und übersieht dabei einige Aspekte des Designs, die er für unnötig hält oder die durch eine kleine Optimierung des Designs erledigt werden könnten. Das oben genannte Beispiel zeigt das genaue Szenario, wenn ein Entwickler seine Arbeit erledigt, aber am Ende das Design kompromittiert. Wenn der Entwickler also mit grundlegender UI/UX in Berührung gekommen wäre, hätte dieses Problem möglicherweise und leicht vermieden werden können.

Als weiteres Beispiel nehmen wir die obigen Screenshots, die aus einer Geldsparanwendung stammen. Die Aufgabe selbst besitzt kein Eingabefeld für eine digitale Signatur. Außerdem gibt die Fehlermeldung dem Benutzer beim Absenden des Formulars keine Anleitung oder keinen Vorschlag, wie er eine gültige digitale Signatur erhalten kann. Wenn ein Entwickler die Grundlagen von UI/UX kannte, hätte er den Benutzer leicht zum nächsten Prozess führen oder die Nachricht einfacher mit einem richtigen Verweis auf das Feld oder die Vorschläge anzeigen können.

Wo soll man anfangen?

Der Einstieg ist immer eine gute Idee. Für Designer sind die Grundlagen HTML, CSS und ein bisschen JS/jQuery. Es gibt viele Online-Lernplattformen und Websites mit Live-IDE-Tools zum Üben und Lernen.

HTML : Die Grundstruktur jedes Designs steht an erster Stelle und ist der Code jedes Produkts.
JS/jQuery: Slider, Pop-Ups, Drop-Downs und vieles mehr lassen sich damit erreichen
Sandbox: Live-Tool zum Herumspielen mit Ihrem Code
CSS/SCSS : Das Styling der Struktur ist ein kreativer Prozess und Sie können ihn durch CSS/SCSS erreichen
W3Schools: Eine einfache Online-Lernplattform und ein guter Einstieg
Codrops (Tympanus): Eine riesige Bibliothek mit Design und Entwicklergeist auf derselben Plattform

Für Entwickler können Sie beginnen, indem Sie die Best Practices zu UI/UX befolgen mit:
Behance: Kompletter Design-Stack für professionelles Portfolio und Inspiration
Dribbble: Designideen zum posten und inspirieren lassen
Muzli: Blogs, Inspirationen, Ideen
Medium : Blogs zu allen Bereichen (fast), Best Practices und Tutorials
Awwwards: Nominierte Websites für das beste Design und Gewinner zum Inspirieren
XD/Figma/Sketch: Tools zum Entwerfen von Mockups, Wireframes für UI/UX

Für Designer

Für Entwickler

Frontend-Entwicklung in Drupal

Drupal 8 als CMS ist ein sehr UI/UX-Designer-freundliches Content-Management-Framework, da es sofort eine Menge zu bieten hat, vor allem die Vielfalt der verfügbaren Themes und responsiven Designs. Natürlich gibt es noch viele weitere Funktionen, über die ich gerade nachdenken kann, aber lass uns das für einen anderen Tag aufheben.

Während UX-Designer ihre kreativen Fähigkeiten einsetzen und sich auf die visuelle Präsentation einer Drupal-Website konzentrieren, schließen Frontend-Drupal-Entwickler die Lücke zwischen UX-Designern und Backend-Drupal-Entwicklern. Sie sind diejenigen, die die vom Designer gelieferten visuellen Komponenten in eine Drupal-Website implementieren. Obwohl sowohl der UX-Designer als auch der Front-End-Drupal-Entwickler in Bezug auf die Benutzererfahrung und die Lösung von Problemen im Zusammenhang mit UX denken, verfolgen sie unterschiedliche Ansätze, um diese zu lösen. Letztere findet jedoch immer eine Lösung durch Code.
Frontend-Drupal-Entwickler sind für die Bereitstellung schöner Drupal-Websites verantwortlich, indem sie an Drupal-Themes arbeiten und diese anpassen. Sie sollten in der Lage sein, Front-End-Probleme zu beheben, für die sie mit Kenntnissen in PHP, CSS, jQuery, CSS, HTML und vor allem – Mobile-First-Website-Design ausgestattet sein müssten.

Mit der wachsenden Popularität von Headless-Drupal-Websites und entkoppelter Architektur haben Frontend-Drupal-Entwickler, die ein Verständnis von Frontend-Entwicklungsframeworks wie Angular, ReactJS, Vue.js haben, immer einen Wettbewerbsvorteil.
Alles in allem muss man also, um in der Frontend-Drupal-Entwicklung herausragende Leistungen zu erbringen, seine Komfortzone verlassen und lernen, wie man moderne digitale Erlebnisse mit den neuesten Technologien am besten erstellen und implementieren kann.