In der IT-Branche gibt es viele Bereiche, die mit Design zu tun haben. Am häufigsten sind es Designer, die sich hinter den Akronymen UX und UI verbergen. Nun, manche Leute schaffen es sogar, Frontend-Entwickler als Designer einzubeziehen. Versuchen wir herauszufinden, wer Designer in der IT-Welt sind, was der Unterschied zwischen UI und UX ist und welche Beziehung Front-End-Ingenieure zum Design haben.
Designer
Die Entwicklung der Schnittstelle von Anwendungen, Websites oder Spielen ist ein ziemlich komplexer Prozess und erfordert die Anwendung von Wissen aus verschiedenen Bereichen: Ingenieurwesen, Psychologie und Design. Benutzeroberflächendesigner (auf Englisch: User Interface oder UI) konzentrieren sich auf die Art und Weise, wie die Funktionalität der Website angezeigt wird (Suche, Registerkarten, Menüs) und auf die Details der Interaktion zwischen dem Client und der Benutzeroberfläche. Das Ziel eines UI-Designers ist ein ästhetisch akzeptables modernes Produktdesign . UX steht für User Experience, was „Benutzererfahrung“ bedeutet. Ein UX-Designer konzentriert sich mehr auf die Benutzerfreundlichkeit und das Verständnis der Benutzeroberfläche durch den potenziellen Benutzer. Ein solcher Spezialist führt häufig Recherchen und Umfragen durch, die die Grundlage für die Erstellung eines Designkonzepts bilden, und testet Konzepte auch während und nach der Entwicklung. Der Schwerpunkt liegt typischerweise auf Struktur, Inhalt, Navigation und der Art und Weise, wie der Benutzer mit diesen Elementen interagiert.
Es erstellt Sitemaps, Prototypen, die die Grundstruktur bei der Erstellung von Software bilden. Das Ziel der Arbeit eines UX-Designers besteht darin, dass der Benutzer schnell und problemlos von der Website das erhält, wofür er hierher gekommen ist . Heutzutage ist es jedoch üblich, dass diese beiden Spezialisierungen mit einem Schrägstrich geschrieben werden. Das heißt, die Aufgaben beider Richtungen werden von einem Spezialisten wahrgenommen. Ein UX/UI-Designer gestaltet die Interaktion des Benutzers mit der Schnittstelle, entscheidet, was genau er tun muss und ist dafür verantwortlich, wie diese Schnittstelle im Ergebnis aussieht.
Was ein UX/UI-Designer wissen muss
Grafikeditor . Die beliebtesten Tools auf dem Markt sind Adobe Photoshop, Adobe Illustrator sowie Sketch und Figma. Wählen Sie einen für Sie geeigneten Editor und versuchen Sie zunächst, Screenshots einer Website oder Anwendung zu zeichnen und diese ein wenig zu modernisieren.
Prototyping-Tools (Mockplus, Axure) . Ein Prototyping-Tool ist die Verbindung zwischen einer Idee und ihrer Umsetzung. Es spielt keine Rolle, welches Werkzeug Sie verwenden. Sie können mehrere ausprobieren und sich für das entscheiden, das Ihrem Stil und Ihren Vorlieben entspricht.
Benutzerpsychologie. Bereits in der Entwurfsphase sollten Sie darüber nachdenken, ob die Nutzung dieser Schnittstelle für Sie oder eine andere Person komfortabel ist. Versetzen Sie sich in die Lage des Kunden, bauen Sie eine starke Verbindung zu ihm auf und gehen Sie aufmerksam auf seine Bedürfnisse ein. Denn ein Produkt wird nur dann erfolgreich sein, wenn es eine Nachfrage dafür gibt.
Sie benötigen außerdem Kenntnisse in der Farbtheorie . Manches wissen wir aus der Kindheit, vor allem diejenigen, die eine Kunstschule besucht haben. Allerdings gibt es bestimmte Besonderheiten hinsichtlich der Arbeit von Designern. Grundkenntnisse können aus Büchern oder Artikeln im Internet gewonnen werden.
Abhängig von den Besonderheiten der Arbeit benötigen Sie möglicherweise Kenntnisse in HTML und CSS oder (einigen) Programmiersprachen (Links zu Ressourcen finden Sie unten im Abschnitt „Was ein Front-End-Entwickler wissen sollte“).
Entwickler für Benutzeroberflächen
Die Hauptaufgabe eines Frontend-Entwicklers besteht darin, den Client-Teil der Schnittstelle zu entwickeln. Das heißt, ein solcher Spezialist „revitalisiert“ das, was die Designer entworfen haben. Er ist für die Bedienung und Bedienung der Schnittstelle verantwortlich und weniger für den visuellen Inhalt. Ein Frontend-Entwickler muss während der Entwicklungsphase oft eine gute Lösung für die Benutzeroberfläche finden, deshalb arbeitet er oft mit einem UX/UI-Designer zusammen. Der vom Front-End-Entwickler geschriebene Code läuft im Browser des Benutzers (wie man sagt, „auf der Client-Seite“). Eine der wichtigsten Aufgaben besteht außerdem darin, sicherzustellen, dass die Website oder Webanwendung auf allen Plattformen und Browsern gleich aussieht.
Was ein Front-End-Entwickler wissen sollte
Das Frontend basiert in der Regel auf drei Säulen: der HTML-Seitenauszeichnungssprache, CSS-Stylesheets und der Programmiersprache JavaScript. Darüber hinaus muss der Front-End-Entwickler die Funktionsprinzipien des HTTP-Protokolls, der Server und Browser sowie die Funktionen zur Anzeige der Schnittstelle auf verschiedenen derzeit auf dem Markt befindlichen Geräten verstehen. Tools und Methoden zur Erstellung von Webschnittstellen entwickeln sich ständig weiter und ändern sich, daher muss der Entwickler dies ständig überwachen.
HTML und CSS (Layout)
Dies ist der Grundriss, die eigentlichen Bausteine, aus denen die Website aufgebaut ist. Die HTML-Auszeichnungssprache bestimmt die Organisation, den Inhalt und alle Interaktionen zwischen ihnen. Es ermöglicht Ihnen, den oberen Rand der Seite, den unteren Rand und Seitenblöcke mit Inhalten, Überschriften, der Anzeige von Text und Multimedia-Elementen zu kennzeichnen. CSS-Stylesheets werden zum Dekorieren von HTML-Elementen verwendet. Sie bestimmen genau, wie jedes grafische Element, das sich auf der Seite befindet, angezeigt wird. Mit den neuesten Versionen von HTML5 und CSS3 können Sie Video- und Audiokomponenten auf einer Seite platzieren, 2D-Bilder und Animationen erstellen und sogar einfache Spiele schreiben. Sie müssen sich nicht alle Tags und Stile auf einmal merken. Es wird hilfreich sein, die Grundlagen zu erlernen und sie sofort in die Tat umzusetzen. Eine sehr gute Seite, auf der Sie die Grundlagen von HTML und CSS erlernen können, ist W3School. Allerdings nur, wenn Sie zumindest über Grundkenntnisse der englischen Sprache verfügen.
Außerdem muss der Front-End-Entwickler die browser- und plattformübergreifende Entwicklung sowie adaptives und reaktionsfähiges Layout verstehen.
Bootstrap
Es ist ein Framework für HTML, CSS und JavaScript. Das heißt, bestimmte Vorlagen, aus denen Sie Websites wie mit einem Konstruktor viel schneller zusammenstellen können als ohne sie. Aber natürlich müssen Sie es selbst an Ihre Bedürfnisse anpassen. Wenn Sie Englisch sprechen, empfehlen wir die getbootstrap- Website und die gleichen w3schools .
JavaScript
Javascript ist der Kern der Frontend-Entwicklung. Dies ist die erste und am weitesten verbreitete Schnittstellen-Programmiersprache. Es kann der Site viele Funktionen hinzufügen. Grundsätzlich ermöglicht Ihnen diese Sprache das Hinzufügen interaktiver Elemente zu einer Seite. Es wird zum Erstellen von Karten, die in Echtzeit aktualisiert werden, sowie für interaktive Online-Spiele und Filme verwendet. In unseren JavaRush-Kursen für Senioren lernen wir ein wenig JavaScript. Sie können es auch an derselben W3School studieren oder auf Russisch auf der Website javascript.ru darüber lesen .
jQuery
jQuery ist eine Javascript-Bibliothek, die Plugins und Erweiterungen enthält, die die Entwicklung noch einfacher und schneller machen können. Anstatt Code von Grund auf neu zu schreiben, können Sie mit Bibliotheken vorgefertigte Komponenten hinzufügen, die dann für ein bestimmtes Projekt angepasst werden können. Sie können die Funktionen zum automatischen Ausfüllen von Suchformularen, zum Neuanordnen und Ändern der Größe des Rasters sowie zum Einstellen von Countdown-Timern verwenden. Praktischer jQuery-Kurs bei w3school
Javascript-Frameworks
Es gibt verschiedene Arten von Frameworks, aber Sie können eines auswählen, das für Sie am besten geeignet ist. Die bekanntesten sind Angular, Backbone, Ember und React. Sie stellen eine vorgefertigte Struktur für Code dar. Sie tragen dazu bei, die Entwicklung zu beschleunigen. Und in Kombination mit Bibliotheken können sie die Entwicklung einer Website oder Anwendung von Grund auf minimieren. Rückblick auf die 5 beliebtesten JavaScript-Frameworks und -Bibliotheken des Jahres 2017
Git-Versionskontrollsystem
Versionskontrollsysteme können Änderungen am Code im Laufe der Zeit verfolgen. Sie ermöglichen Ihnen auch, zu einer früheren Version des Projekts zurückzukehren. Git ist das am weitesten verbreitete Versionskontrollsystem. Zu wissen, wie man mit Git arbeitet, ist eine wichtige Fähigkeit für jeden Entwickler. Git-Tutorial auf Russisch
Kurze Schlussfolgerungen
UI steht für User Interface, was „Benutzeroberfläche“ bedeutet. Das heißt, der UI-Designer ist in erster Linie dafür verantwortlich, wie das Produkt dem Benutzer präsentiert wird. Er entwickelt Schaltflächen und Symbole, wählt Schriftarten aus und bereitet ein Layout vor. UX steht für User Experience. Ein UX-Designer entwirft also das Design einer Website, einer Anwendung – oder irgendetwas – so, dass der Benutzer komfortabel und verständlich ist, was was ist, und er mit minimalem Aufwand das bekommen kann, was er von der Website benötigt. Sehr oft werden beide Arten von Arbeiten von einem einzigen Mann ausgeführt: einem UI/UX-Designer. Der Frontend-Entwickler belebt die Arbeit der Designer, indem er Dynamik in sie einbringt: Es werden Tasten gedrückt und das Bild beginnt sich zu verändern. Er muss Programmiersprachen beherrschen und sich mit Frameworks, Präprozessoren und Bibliotheken auskennen.
GO TO FULL VERSION