Einen Job als UX Engineer zu bekommen ist hart, aber nicht unmöglich. Diese Liste wurde erstellt, um Ihnen zu helfen, Ihren Fokus einzugrenzen und die Fähigkeiten zu beherrschen, die Sie benötigen, um 2020 UX Engineer zu werden. Verständlicherweise kann diese Liste für jeden, der gerade erst anfängt, etwas überwältigend sein. Aus diesem Grund ist die Liste in zwei Teile unterteilt:

  • UX-Design-Fähigkeiten li>
  • Front-End-Engineering-Fähigkeiten

Wenn Sie in beiden Bereichen ganz neu sind, würde ich empfehlen, sich jeweils auf eine Liste zu konzentrieren. Auf diese Weise können Sie immer noch einen tollen Job landen und ein Einkommen verdienen, wenn Sie Ihre Fähigkeiten aus der anderen Liste aufbauen.

UX Design Skills

In der Welt der Webentwicklung ist UX Design entscheidend. Während Front-End-Engineering-Fähigkeiten für den Aufbau schneller und skalierbarer Produkte erforderlich sind, sind es die UX-Design-Fähigkeiten, die sicherstellen, dass diese Produkte keine Verschwendung von Aufwand sind. Ohne ein gewisses Wissen über UX-Design könnten Sie Wochen oder Monate damit verbringen, ein Produkt zu entwickeln, das niemand will. UX-Design hilft, Zweifel auszuräumen, sodass Sie Produkte erstellen können, die die Leute tatsächlich nützlich finden.

# 1 – Empathie

Empathie ist das Herzstück des UX-Designs. Sie brauchen die Fähigkeit, sich in die Lage Ihrer Benutzer zu versetzen, um Produkte zu entwerfen, die sie lieben werden. Glücklicherweise ist Empathie keine schwer zu entwickelnde Fähigkeit. Wenn Sie verstehen, warum einige Produkte Sie glücklich machen und warum einige Produkte Sie frustrieren, dann sind Sie auf halbem Weg!Related: Empathie im Design: Wie funktioniert es?Entwickler haben manchmal mit Empathie zu kämpfen, da UX-Verbesserungen im Vergleich zu den „Kosten“ für ihre Implementierung geringfügig erscheinen. Wenn Sie das sind, widerstehen Sie der Versuchung, Ihre eigene Bequemlichkeit über die Zufriedenheit Ihres Benutzers zu stellen. Schneiden Sie keine Ecken. Empathie haben. Beginnen Sie mit der Benutzererfahrung und arbeiten Sie rückwärts.

# 2 – Problemlösung

Fähigkeiten zur Problemlösung sind sowohl für das UX-Design als auch für das Front-End-Engineering wichtig. Ich würde jedoch argumentieren, dass es für ux noch wichtiger ist. Warum? Weil die meisten UX-Probleme einzigartig und spezifisch für die Bedürfnisse Ihres eigenen Benutzers sind. Es ist oft viel einfacher, Antworten auf Programmierfragen zu finden als auf UX-Probleme.In diesem Sinne benötigen Sie die Fähigkeit, kreative Lösungen für eine Vielzahl von Problemen zu finden. Mit Empathie und Problemlösungsfähigkeiten kombiniert, können Sie beginnen, die Schmerzpunkte Ihrer Benutzer zu verstehen und echte Lösungen für sie zu entwerfen.

# 3 – Beobachtung

Wie bereits erwähnt, sind die meisten ux-Probleme einzigartig, aber nicht alle. Mit scharfen Beobachtungsfähigkeiten sparen Sie viele Kopfschmerzen auf der Straße. Diese Fähigkeit ist besonders nützlich für das „Design“ Stück „ux Design.“ Ihre Benutzer sind überall im Internet. Sie nutzen soziale Medien, lesen Blogs und schauen sich YouTube-Videos an. Wenn sie es tun, dann solltest du es auch tun.Beobachtungsfähigkeiten helfen Ihnen dabei, Muster zu erkennen und die Erwartungen Ihrer Benutzer zu übertreffen, wenn Trends zur neuen Norm werden.Related: Gute UX = Langweilige UI. Sei nicht kreativohne großartige Beobachtungsfähigkeiten ist es schwierig, in der schnelllebigen Webentwicklungsbranche Schritt zu halten.

# 4 – Marketing

Ich persönlich denke nicht, dass dies genug erwähnt wird. In vielen Unternehmen arbeiten UX-Designer eng mit der Marketingabteilung zusammen. Als UX-Designer sollten Sie zumindest ein grundlegendes Verständnis dafür haben, was Marketing ist und wie es funktioniert. Das Konzept des Marketings hat im Allgemeinen eine lange Geschichte der Verfolgung der Kundenbedürfnisse und Schwachstellen. Es gibt mehr Crossover zwischen Marketing und UX-Design, als Sie vielleicht denken, vor allem in der heutigen tech-driven world.At am Ende des Tages müssen Sie die Benutzer zufriedenstellen UND wer auch immer Ihren Gehaltsscheck unterschreibt. Indem Sie etwas Zeit investieren, um Marketingfähigkeiten zu erlernen, positionieren Sie sich besser, um Ihren Benutzern und Ihrem Unternehmen einen Mehrwert zu bieten.

# 5 – UX-Forschung & Interviewen

In vielen Unternehmen ist UX-Forschung eine völlig andere Rolle als UX-Design. Das bedeutet jedoch nicht, dass Sie vom Haken sind. Es gibt kein UX-Design ohne UX-Forschung, also wirst du nicht weit kommen, ohne es zu lernen. Um UX-Forschung gründlich zu verstehen, benötigen Sie einen Abschluss in Mensch-Computer-Interaktion oder einem verwandten Bereich. Als ux Engineer glaube ich jedoch, dass Sie ohne den Abschluss auskommen können.Wenn Sie lernen, wie Sie qualitative Daten von Benutzern sammeln, ohne das Ergebnis zu gefährden, verfügen Sie im Grunde über die meisten Fähigkeiten, die Sie für die Durchführung von UX-Recherchen benötigen. Die zugrunde liegende Fähigkeit hier ist Ihre Fähigkeit, sich von Ihren Entwürfen zu trennen. Sie müssen sich Ihrer eigenen Vorurteile bewusst sein und lernen, objektiv zu gestalten. Lernen Sie dies und Sie werden gut zu gehen.

# 6 – Statistik & Datenanalyse

Während Statistiken und Datenanalyse unter das Dach der „UX-Forschung“ passen, denke ich, dass es genug Unterschiede gibt, um sie hier separat aufzurufen. Die Nutzung quantitativer Daten ist eine sehr leistungsfähige Methode, um zu verstehen, wie Ihre Benutzer mit Ihrem Produkt interagieren. Haben Sie hohe Bounce-Raten? Möglicherweise müssen Sie Ihre Navigation überdenken. Verlassen Nutzer Ihre Seite nach wenigen Sekunden? Möglicherweise dauert das Laden der Seite zu lange. Dies sind nur einige Metriken, die Google verwendet, um die allgemeine Benutzererfahrung Ihrer Website zu bestimmen. Wenn Google auf sie achtet, sollten Sie es sein too.As Eric Schmidt, CEO von Google, erklärte:

Die Welt wird von Statistikern geerbt

Leider kann Datenanalysesoftware Sie nur so weit bringen. Sie benötigen ein besseres Verständnis von Statistiken, über die Berechnung von Durchschnittswerten hinaus, um datengesteuerte Entscheidungen als ux Engineer zu treffen.

# 7 – UI-Design-Tools

Jetzt kommen wir endlich zur „Design“ -Seite der Dinge. Einer der größten Aspekte des UX-Designs ist die Erstellung von Wireframes, Mockups und Prototypen. Die heute beliebtesten UI-Design-Tools sind Sketch und Figma. Ich habe noch nie eines davon verwendet (habe ich erwähnt, dass sich Technologie schnell bewegt?), aber wenn ich jetzt zwischen den beiden wählen würde, würde ich Figma wählen.AJ&Smart Machen Sie einen guten (und lustigen) Vergleich in diesem Video. Es ist die Uhr wert.

# 8 – UI-Designprinzipien

Vielleicht haben Sie bemerkt, dass „ux“ und „ui“ normalerweise gepaart sind? Das liegt daran, dass beide für die allgemeine Benutzererfahrung unerlässlich sind. UX-Forschung wird Ihnen helfen, spezifische Designprobleme zu identifizieren und zu lösen, aber es wird Ihnen nicht helfen, ein schönes Design zu erstellen. Dazu müssen Sie die Prinzipien des UI-Designs verstehen und wissen, wie Sie sie effektiv einsetzen können.Es gibt bestimmte, universelle „Wahrheiten“ über Design, die jeder UX-Designer kennen sollte. Wenn Sie über hervorragende Beobachtungsfähigkeiten verfügen (# 3 auf dieser Liste), haben Sie wahrscheinlich einige UI-Designprinzipien aufgegriffen, ohne es zu merken. Einige dieser Prinzipien umfassen Gleichgewicht, Ausrichtung, Kontrast usw.Ihre Benutzeroberfläche ist eine Leinwand und Sie sind der Künstler. Die Anwendung von UI-Designprinzipien ist der Unterschied zwischen einem Meisterwerk und etwas, das Sie an Ihrem Kühlschrank kleben können. Es macht wirklich einen großen Unterschied. Wenn Ihr UI-Design das Ziel verfehlt, werden die Leute es bemerken und kein Vertrauen in Ihre Marke haben.Verwandt: UX Design & UI Design. Warum brauchen wir beide?

# 9 – Interaktionsdesign

Mit der vorherigen Fähigkeit, UI-Designprinzipien, Sie befassen sich mit dem Erscheinungsbild einzelner Webseiten oder Funktionen gleichzeitig. Mit Interaktionsdesignfähigkeiten, auf der anderen Seite, Sie müssen einen Schritt zurücktreten und verstehen, wie diese Seite oder Funktion in das „Gesamtbild“ eingebunden ist.“ Wie der Name schon sagt, befasst sich Interaction Design mit der Steuerung der Interaktion Ihres Produkts.Ohne Interaktionsdesign fühlt sich Ihr Produkt so an, als würde ihm etwas fehlen. In der Material Design-Spezifikation von Google ist es beispielsweise das Ziel, Elemente auf Ihrer Seite so zu behandeln, als ob sie in der realen Welt existieren. Dies bedeutet, dass sich Objekte, die sich auf der Seite bewegen, beschleunigen oder verlangsamen sollten, als ob sie den Gesetzen der Physik folgen würden.

# 10 – Schreiben & Kommunikation

Schreib- und Kommunikationsfähigkeiten sind für die meisten Karrieren wichtig, aber besonders wichtig für UX-Designer. Sie werden selten Schnittstellen entwerfen, die zum Zwecke der Kommunikation keinen Text, keine Symbole oder Bilder benötigen. Dies bedeutet, dass Sie lernen müssen, wie Sie eine Nachricht so prägnant wie möglich kommunizieren können.Das Schreiben einer effektiven Kopie ist nicht so einfach, wie es sich anhört. Lesen und Verstehen ist eine Wissenschaft. Es ist wichtig, dass Sie lernen, die Sprache Ihres Publikums zu sprechen, aber noch wichtiger ist, dass Sie es mit Ihrer Kopie ansprechen. Ein Fehler, der leicht zu machen ist, ist die gelegentliche Verwendung großer Wörter, die für das Publikum möglicherweise schwer zu verstehen sind. Machen Sie diesen Fehler nicht. Ihre Aufgabe ist es, effektiv zu kommunizieren, nicht die Leser mit Ihrem Wissen zu beeindrucken.

Front-End-Engineering-Fähigkeiten

Es gab noch nie eine aufregendere Zeit, ein Front-End-Ingenieur zu sein. Die heutige Webentwicklungsbranche boomt mit Innovationen. Jeden Tag werden neue Tools und Ressourcen geschaffen, um unsere Arbeit zu erleichtern. Diese Tools und Ressourcen sind jedoch auch mit einer Lernkurve verbunden. Wenn Sie bereit sind, mit dem Front-End-Engineering zu beginnen, sind die nächsten 10 Fähigkeiten für Sie von entscheidender Bedeutung, um dorthin zu gelangen.

#11 – HTML, CSS, & JavaScript

Die Weblandschaft hat sich von Anfang an dramatisch verändert. Von den heutigen Front-End-Ingenieuren wird erwartet, dass sie Tools, Methoden und Best Practices kennen, die es vor einigen Jahren noch nicht gab. Die Dinge bewegen sich so schnell. Als Front-End-Ingenieur müssen Sie ständig neue Fähigkeiten erlernen, um relevant zu bleiben.Oder Sie?Im allgemeinen Sinne, ja, Sie werden immer lernen. Die Grundlage der Webentwicklung ist jedoch immer gleich geblieben. Im Kern hatten wir immer HTML, CSS und JavaScript. Lerne diese Dinge und lerne sie gut. Alles, was Sie zusätzlich lernen, wird (zum größten Teil) auf diesen Technologien aufbauen.Es wird immer ein neues und aufregendes Framework oder eine Bibliothek geben. Wenn Sie kein Verständnis für einfaches HTML, CSS und JS haben, sollten Sie sich erst dann in das neueste Framework einarbeiten, wenn Sie dies tun (meiner Meinung nach). Wenn Sie beispielsweise die Vor- und Nachteile von JavaScript verstehen, werden Sie auf lange Sicht viel weiter kommen, als wenn Sie heute direkt React lernen würden. In ein paar Jahren wird es ein neues Framework geben, und es wird Ihnen schwer fallen, auch dieses zu lernen. Sparen Sie sich die Kopfschmerzen und lernen Sie, zuerst einfaches HTML, CSS und JS zu schreiben.Related: Designer sollten lernen, wie man Code (unter anderem)

#12 – Semantic HTML & Zugänglichkeit

HTML wird verwendet, um Ihre Seite an den Browser zu beschreiben, sowie Menschen mit Behinderungen. Es ist kein Design-Tool. Nachdem Sie die Grundlagen von HTML gelernt haben, sollten Sie sich mit Semantik und Barrierefreiheit befassen. Sie werden lernen, dass HTML mehr ist, als einfach alles in ein <div> -Tag zu packen.Semantisches HTML befasst sich in erster Linie mit dem Ausdruck der „Bedeutung“ einer Webseite. Wenn Sie beispielsweise ein <nav> -Element verwenden, teilen Sie den Browsern im Wesentlichen mit, wo sich Ihre Navigation befindet. Da Browser intelligenter werden, wird semantisches HTML für die Weiterentwicklung des Webs immer wichtiger.Es ist auch sehr wichtig, Ihre Produkte für Menschen mit Behinderungen zugänglich zu machen. Wenn Sie Skill # 1 auf dieser Liste (Empathie) ausgewählt haben, kennen Sie vielleicht die Richtlinien für die Barrierefreiheit von Webinhalten (WCAG)? Wenn nicht, sollten Sie sie lernen. Ihr Produkt ist erst dann wirklich benutzerfreundlich, wenn es für jedermann zugänglich ist.

# 13 – CSS-Frameworks, Architektur, & Präprozessoren

Nachdem Sie einige Zeit damit verbracht haben, CSS zu lernen, werden Sie die Notwendigkeit von Frameworks, Methoden und Präprozessoren erkennen.Abhängig von Ihrer Situation ist Bootstrap ein großartiges CSS-Framework, um Stile schnell auf Ihre Website zu bringen. Wenn das Projekt jedoch etwas weniger „Bootstrappy“ erfordert, ist es wahrscheinlich vorzuziehen, Ihr eigenes CSS von Grund auf neu zu schreiben (zurück zu den Grundlagen). Auch als UX Engineer wird die Leistung ein wichtiger Faktor für Ihre Produkte sein. Die Verwendung von Bootstrap out of the box kann Nachteile in Bezug auf die Leistung haben.Die Nutzung eines CSS-Präprozessors wie Sass ist aus verschiedenen Gründen großartig. Vor allem erleichtern sie das Schreiben von CSS, indem Sie Stile ineinander verschachteln können, um Spezifität zu schaffen. Es gibt auch einige andere coole Funktionen, wie die Verwendung von Variablen und Mixins. In der heutigen Zeit werden Sie nicht viele Front-End-Ingenieure finden, die keinen Präprozessor verwenden, um ihren Prozess zu vereinfachen.Wenn Sie Ihre eigenen Stile von Grund auf neu schreiben, ist die Übernahme einer CSS-Architektur äußerst nützlich, um Ihren Code organisiert zu halten. Ich habe nur skalierbare und modulare Architektur für CSS (SMACCS) verwendet, was großartig ist, aber kürzlich einige andere CSS-Methoden kennengelernt. Es ist leicht für Ihr CSS, außer Kontrolle zu geraten, wenn Sie keine gute Organisationsstrategie haben. Es lohnt sich auf jeden Fall, eine CSS-Architektur für Ihren Entwicklungsprozess zu übernehmen.Related: CSS-Spezifität: So vermeiden Sie die Verwendung!wichtig in CSS

#14 – Responsive Design

Responsive Design ist nichts Neues mehr. Es ist an dieser Stelle fast gleichbedeutend mit Webdesign. Dennoch ist es immer noch wichtig zu lernen, wie Sie viele verschiedene Geräte und Bildschirmauflösungen mit Ihren Designs berücksichtigen können. Wenn Sie Responsive Design nicht lernen, können Sie schnell die Hälfte Ihrer Benutzer aus der Gleichung herauslassen, was offensichtlich zu einer schlechten Benutzererfahrung führen würde.Wir sind jetzt in einer mobilen Welt. Mobile geht nirgendwohin. Erfahren Sie, wie Sie für Mobilgeräte, Tablets und Desktops entwerfen, und Sie können loslegen.

#15 – JavaScript-Frameworks

JavaScript-Frameworks sind wichtig, da die Programmierung teuer ist. Frameworks wie jQuery, Angular, Vue und React wurden entwickelt, um die Entwicklung zu beschleunigen und einen Großteil des schweren Hebens für Sie zu erledigen. Aus diesem Grund haben Unternehmen keine Bedenken, JS-Frameworks zu übernehmen, da sie dadurch auf lange Sicht Geld sparen.Natürlich gibt es mehr JavaScript-Frameworks, als Sie an zwei Händen zählen können. Sie alle versuchen, ein anderes Problem zu lösen. Es lohnt sich zu verstehen, welche Frameworks es gibt. Es lohnt sich auch, mindestens ein JavaScript-Framework zu erlernen, um Sie bei Ihrer Webentwicklung zu unterstützen. React scheint derzeit die beliebteste Wahl zu sein, aber das könnte sich in wenigen Jahren leicht ändern.

#16 – Backend-Entwicklung

Frontend-Entwickler arbeiten eng mit Backend-Entwicklern zusammen. Ich schlage nicht vor, dass Sie ein Full-Stack-Ingenieur werden sollten (obwohl das ziemlich beeindruckend wäre). Ich schlage jedoch vor, dass es sich lohnt, genug über die Back-End-Entwicklung zu lernen, um sich besser mit Ihrem Back-End zu beschäftigen coworkers.At am Ende des Tages werden Sie wahrscheinlich entscheiden, welche Daten zur Unterstützung Ihrer Projekte benötigt werden. Ein gutes Verständnis der Back-End-Entwicklung wird dazu beitragen, diese Kommunikation zu fördern und den Projekterfolg sicherzustellen.

# 17 – Testen & Debuggen

Das Testen und Debuggen ist für jeden, der an Front-End-Code arbeitet, von entscheidender Bedeutung. Es gibt viele verschiedene Möglichkeiten, Ihr Produkt zu „testen“, aber die Art der Tests, die Sie am häufigsten durchführen, sind Browser- und JavaScript-Tests.Chrome Developer Tools (Dev Tools) ist ein sehr leistungsfähiges und praktisches Werkzeug. Mit Dev Tools können Sie schnell Änderungen an Ihrem HTML / CSS vornehmen und sehen, wie es auf der Seite gerendert wird. Die Konsole ermöglicht es Ihnen, zu sehen, wenn Sie Fehler in Ihrem JavaScript haben. Auf der Registerkarte Netzwerk können Sie sehen, wie schnell Dateien in welcher Reihenfolge gerendert werden. Es gibt viel mehr, was es auch tun kann. Wenn Sie gerade erst mit der Front-End-Entwicklung beginnen, werden Sie bald feststellen, wie erstaunlich Dev-Tools wirklich sind is.To stellen Sie sicher, dass Ihre Website in allen Browsern und Geräten gut aussieht, Sie müssen Ihre Änderungen überall testen. Browserstack ist ein super praktisches Tool für diese Art von testing.In Test Driven Development (TDD), Ihr JavaScript muss getestet werden, um sicherzustellen, dass Sie alle Ihre Grundlagen abdecken. Tools wie Karma helfen Ihnen beim Erstellen von Tests rund um Ihren Code.

#18 – Paketmanager (NPM)

Paketmanager wie npm sind zu einer Notwendigkeit für die moderne Frontend-Entwicklung geworden. Sie machen das Leben leichter. Mit der Explosion von Ressourcen, Frameworks, Bibliotheken usw. an Ihren Fingerspitzen wird es ziemlich schmerzhaft, sie alle zu verwalten …..es sei denn, Sie verwenden einen Paketmanager.Um npm zu lernen, müssen Sie die Befehlszeilenschnittstelle (CLI) verwenden. Es ist nicht so beängstigend, wie es klingt. Es gibt viele Tutorials online, die Ihnen helfen können, wenn Sie bereit sind, Paketmanager als Teil Ihres Webentwicklungsprozesses zu integrieren.

# 19 – Build-Tools

Zusätzlich zu npm müssen Sie auch über Build-Tools wie Modulbündler, Task-Runner und Linter Bescheid wissen. Diese Tools haben unterschiedliche Zwecke, sind aber für die moderne Webentwicklung unerlässlich.Modulbündler wie WebPack wurden erstellt, um Ihnen zu helfen, Ihre Modulabhängigkeiten zwischen Dateien zu verfolgen und sie in einer Ressource zu bündeln. Einer der Hauptvorteile der Verwendung eines Tools wie WebPack ist das Konzept des „Tree Shaking“, das verhindert, dass nicht verwendete Ressourcen unnötig geladen werden.Mit Task-Runnern wie Gulp können Sie Tools wie WebPack und Sass ausführen. Sie sind nützlich, da sie nach Änderungen in Ihren Sass- oder WebPack-Dateien suchen und die Ausgabe automatisch neu erstellen können. Zu lernen, wie man einen Task-Runner verwendet, wird definitiv dazu beitragen, Ihre productivity.As wenn Sie mit einem Team anderer Front-End-Ingenieure zusammenarbeiten, ist es wichtig sicherzustellen, dass Sie sich an einen Styleguide für Ihren JavaScript-Code halten. Hier sind Linter wie ESLint nützlich. Mit Lintern können Sie Regeln in Bezug auf Abstand, Syntax, Benennung usw. angeben. in Ihrem Code. Wenn Sie gegen diese Regeln verstoßen, wird Ihr Linter Sie darüber informieren. Im Wesentlichen sind Linter eine nützliche Methode, um Qualität und Konsistenz für eine gemeinsame Codebasis sicherzustellen.

#20 – Versionskontrolle

Jeder macht Fehler. Glücklicherweise gibt es dafür eine Versionskontrolle. Als Front-End-Entwickler ist es wichtig zu lernen, wie man Versionskontrolle wie Git oder Team Foundation Server (TFS) verwendet. Mit der Versionskontrolle können Sie von Ihrem Produktionscode abzweigen (im Wesentlichen eine Kopie davon erstellen) und Änderungen vornehmen, ohne sich Sorgen machen zu müssen, dass die Dinge irreparabel durcheinander gebracht werden. Wenn jedoch etwas schief geht, z. B. eine fehlerhafte Bereitstellung, ist die Versionskontrolle dazu da, den Tag zu retten, indem Sie Ihre Änderungen auf die vorherige Version zurücksetzen können.

Sind Sie bereit, UX Engineer zu werden?

Hier haben Sie es also: Die 20 Fähigkeiten, die Sie benötigen, um 2020 UX Engineer zu werden. Ich hoffe, Sie haben diese Liste nützlich gefunden, wenn Sie daran arbeiten, Ihre Fähigkeiten zu verbessern. Wenn Sie bereit sind, ein UX Engineer zu werden, dann schauen Sie sich die Jobbörse an!

Wenn Sie mehr über UX Design oder Frontend Engineering erfahren möchten, abonnieren Sie UXE Weekly und erhalten Sie jede Woche einen neuen Artikel über UX Engineering!

Werden Sie ein Einhorn

Holen Sie sich Artikel über UX / UI Design + Front-End-Entwicklung

Es ist KOSTENLOS – Kein Spam – Jederzeit abmelden