Wie ein einzelner Front-End-Ingenieur ein Zweierteam ersetzen kann

Denken mit zwei Köpfen

Die Nachfrage innerhalb der Webdesign-Szene hat sich in den letzten Jahren verändert: Designer mit Frontend-Kenntnissen und Frontend-Entwickler mit Design-Kenntnissen werden immer stärker nachgefragt. Ja, Sie könnten argumentieren, dass die Jobs völlig unterschiedlich sind – und vielleicht gefällt Ihnen einer von ihnen geradewegs nicht – aber um ehrlich zu sein, in meinen sechs Jahren als freiberuflicher Webentwickler und zwölf Jahren als Designer habe ich es getan gelernt, dass es viel schwieriger ist, nur als Webdesigner oder nur als Frontend-Entwickler zurechtzukommen, als als Frontend-Ingenieur, der beide Rollen kennt.

Das Tragen beider Hüte hat viele Vorteile: Allein aus beruflicher Sicht finden Sie leichter Arbeit und können einen höheren Satz verlangen, weil Sie mehr auf den Tisch bringen.

Aber die Arbeit als Hybrid-Front-End-Ingenieur hat auch einige Nachteile, die Sie kennen müssen – und wie Sie sie umgehen können. Als kreativer Designer verwenden Sie Ihre „rechte Gehirnhälfte“, die für visuelle, räumliche und wahrnehmungsbezogene Informationen verantwortlich ist – mit anderen Worten, für alle schönen Dinge im Webdesign. Als technischer Frontend-Entwickler nutzen Sie Ihr „linkes Gehirn“, den logischen und analytischen Partner Ihres verrückten Künstlers auf der rechten Seite.

Und da Sie nur eine Person sind, bedeutet dies, dass Sie gleichzeitig zwei völlig unterschiedliche Jobs mit demselben Gehirn haben – und das kann für Ihr Gehirn geradezu verwirrend werden. Wenn Sie damit nicht umgehen können, werden Sie keine Qualitätsarbeit leisten oder Ihr volles Potenzial ausschöpfen. Und wenn Sie ein Freiberufler sind, der versucht, einer hybriden Front-End-Engineering-Jobbeschreibung gerecht zu werden, konkurrieren Sie wahrscheinlich mit einem Zweierteam (Entwickler und Designer), sodass Sie währenddessen im gleichen Zeitrahmen arbeiten müssen Qualität halten. (Natürlich können Sie auch so bezahlt werden, als wären Sie ein Zweierteam!)

Zu wissen, welcher Teil Ihres Gehirns Sie wann verwenden müssen, ist der Schlüssel zur Rationalisierung Ihrer Prozesse und zur Erzielung der besten Ergebnisse ohne Frustration und mit ausreichend Zeit, um Ihre Frist einzuhalten. Unabhängig davon, wo Ihnen etwas fehlt, links oder rechts, hilft Ihnen dieser Beitrag, die Fähigkeiten zu verstehen, die Sie benötigen, und die Möglichkeiten, wie Sie sie erwerben können.

One-Night-Stand mit deinem Projekt

Okay bereit? Toll! Angenommen, Sie wurden gebeten, die Website für miniCloud zu entwerfen, ein aufstrebendes Startup, das kundenspezifische VPS-Lösungen anbietet. Wo fängst du an?

Bevor ich mit der „richtigen“ Arbeit an einem Projekt beginne, gehe ich damit gerne ins Bett. Das bedeutet, dass Sie gründliche Recherchen über das Produkt, die Dienstleistungen, die Konkurrenz usw. Ihres Kunden anstellen. Kurz gesagt: Googlen Sie verdammt noch mal. Danach denken Sie den ganzen Tag über das Projekt nach: Wie wird es aussehen, wenn Sie damit fertig sind? Nehmen Sie es mit zum Abendessen und schlafen Sie mit Ihrem neuen, sexy Design ein. Halten Sie in dieser Phase immer einen Bleistift (oder ein Handy) bereit, um Ideen aufzuschreiben, sobald sie Ihnen einfallen. Diese Art der Gedankenarbeit hilft normalerweise dabei, Schlüsselaspekte Ihres Prozesses zu definieren.

Lassen Sie Ihrer Kreativität freien Lauf: Der Designprozess

Nachdem Sie nun einige Ideen haben, auf denen Sie aufbauen können, ist es an der Zeit, mit dem eigentlichen Designprozess zu beginnen. Dies besteht aus drei Schritten: 1) Skizze, 2) Drahtmodell und 3) Grafik. Dies ist der Teil, in dem Sie die künstlerische Hälfte des Gehirns ihr Ding machen lassen und mit Bleistift, Papier und Photoshop verrückt werden.

Während dieser Designphase ist es wichtig, dass Sie sich von Ihrer „Entwicklerseite“ in Schach halten lassen, damit Sie nicht mit einigen Aspekten der Website verrückt werden, die mit HTML, CSS und jQuery so schnell nicht wiederhergestellt werden können. Wenn Sie versuchen, den Browser neu zu erfinden, wird Ihr Frontend-Entwickler Sie dafür hassen. Und Ihr Front-End-Entwickler sind Sie – erinnern Sie sich?

Lassen Sie sich also von den besten Praktiken des Webdesigns (und etwas gesundem Menschenverstand) leiten, denn es ist höchst unwahrscheinlich, dass Sie mit der Neugestaltung der Hochzeitskleid-Website Ihres Freundes neue Wege beschreiten. Das soll nicht heißen, dass Sie kein fantastisches und beeindruckendes Design anstreben sollten. Aber lass dir lieber etwas einfallen, von dem du weißt, dass es machbar ist. Projekte, die das Web neu erfinden, werden normalerweise in Ihrer Freizeit durchgeführt, ohne dass Ihnen eine Deadline über den Kopf schwebt.

1. Skizze : Ich beginne mit einem Notizbuch aus kariertem Papier und ein paar Stiften. Kariertes Papier ist besonders toll, weil du es für gitterbasierte Designs verwenden kannst. Sie werden später kein Problem haben, wenn Sie Ihre Skizze in Wireframes und ganz am Ende auf eine gitterbasierte Website übersetzen. Für miniCloud könnte unsere Skizze etwa so aussehen:

Bitte beachten Sie, dass zusätzliche Details auf der Skizze, wie Schnee, Vögel und Wolken, das Produkt meiner Verzögerung sind und in keinem Teil Ihres Designprozesses obligatorisch sind, aber sie sehen gut aus.

 <div class="pop_out_box is-full_width"> <b>Personal tip</b>: There are some great resources online where you can download and print sketch sheets. One of my favorites is <b><a href="http://sneakpeekit.com/wireframe-sketchsheets/">sneakPeekit</a></b>. They also have sheets for mobile and tablet design. </div>

1. Wireframe : Nachdem wir nun eine grundlegende Vorstellung davon haben, wie unsere Website aussehen wird, ist es an der Zeit, Wireframes zu erstellen, die wir dem Kunden zeigen können. Es gibt viele Möglichkeiten, dies zu erreichen. In einigen Fällen können Sie den Schritt ganz überspringen, wenn Sie der Meinung sind, dass dies nicht erforderlich ist. Ich persönlich verwende Photoshop, um meine Idee mit einem Drahtmodell zu versehen, da es das Werkzeug ist, mit dem ich am besten vertraut bin. Es gibt viele kostenlose Wireframe-Kits in .EPS oder .PSD, mit denen Sie in Sekundenschnelle loslegen können, sodass Sie nicht alle Ihre Elemente von Grund auf neu erstellen und zeichnen müssen. Es gibt auch ein paar Online-Lösungen, wenn Sie Photoshop vermeiden möchten, aber ich bin eher der Offline-Typ. Wie auch immer, wenn wir unsere Skizze erweitern, könnten wir unsere Website wie folgt verdrahten:

1. Grafik : Das ist mein Lieblingsteil: unser Wireframe in eine schöne Website zu verwandeln. Aber nicht jeder ist ich. Wenn Sie in erster Linie Entwickler sind und ein geringes bis kein Talent für Design, Farben, Typografie usw. haben, würde ich vorschlagen, mit anderen Websites zu beginnen, um sich von Design inspirieren zu lassen. Es gibt viele von ihnen, und sie sind voller großartiger Ideen – wer weiß, vielleicht steckt in Ihnen ein Designer, der nur darauf wartet, herauszukommen? Ich finde es hilfreich, einen Lesezeichenordner mit Websites zu führen, die ich besonders gut aussehend oder gut gestaltet finde. Picasso (?) hat gesagt: „Gute Künstler kopieren, aber große Künstler stehlen“ – das bedeutet nicht, dass Sie das Design eines anderen nehmen und Ihren Aufkleber darauf kleben. Lassen Sie sich stattdessen von der Arbeit eines anderen inspirieren und fügen Sie Ihren eigenen Dreh und Ansatz hinzu.

Ich mache alle meine Entwürfe in Photoshop. Im Idealfall stellt Ihnen Ihr Kunde Rohmaterialien zur Verfügung, mit denen Sie arbeiten können, wie Fotos und Text, den Sie anstelle von Platzhaltern verwenden können. Es sieht viel besser aus, wenn Sie es zur Revision schicken.

 So, for step three, we take our wireframe and bring it to life: 

Übrigens: Wenn Sie Photoshop verwenden, gibt es viele coole Ressourcen, die Ihren Prozess viel schneller machen, wie Plug-Ins und Stile. Ich könnte allein einen ganzen Beitrag über sie schreiben, also werde ich nur auf einige hinweisen, die ich oft benutze.

1. CSS3Ps : Kostenloses Cloud-basiertes Photoshop-Plug-in, das Ihre Ebenen in CSS3 konvertiert.
2. Divine Elemente : Erstellt WordPress-Themes direkt aus Ihren PSDs. Es ist großartig, um schnell mit Ihrem WordPress-Projekt zu beginnen. Obwohl sie sagen „Keine HTML-Kenntnisse erforderlich“, werden Sie tatsächlich einige brauchen, wenn Sie großartige Ergebnisse erzielen möchten.
3. Subtile Muster : Sammlung kostenloser Muster, die Sie in Ihren Designs verwenden können, normalerweise als Hintergründe. Details wie diese machen den Unterschied, wenn Sie versuchen, Ihre Designs von gut zu großartig zu machen.

„Slice It Up“: Der Front-End-Prozess

Nachdem ich mit der Designphase fertig bin und ein OK vom zufriedenen Kunden erhalten habe, bin ich bereit, meine statischen Bilder in Live-Websites umzuwandeln. Denken Sie daran, dass unser Design zu diesem Zeitpunkt immer noch genau das ist: ein Design. Wir haben noch einen weiten Weg vor uns, bevor es für das Web bereit ist.

In diesem Stadium ist es an der Zeit, die linke, analytischere Hälfte Ihres Gehirns zu verwenden.

In der Welt des Webdesigns bezeichnen wir diesen Vorgang als „Slicing“. Obwohl der Begriff vor einiger Zeit zutreffender war, bevor CSS zum wichtigsten visuellen Baustein des Webs wurde und Sie jedes kleine Stück Ihrer PSD oder PNG zerschneiden und in schreckliche kleine Tabellen stecken mussten, blieb es hängen.

Wenn Sie ein Webdesigner sind und noch nicht wissen, wie man ein „Front-End“ erstellt, haben Sie Glück – denn Programmieren kann man lernen (anders als ein natürliches Talent für Design). Ich würde empfehlen, dass Sie in einige Online-Video-Tutorials wie Lynda.com investieren und die Grundlagen der Front-End-Entwicklung durchgehen. (Eine genauere Liste der Ressourcen finden Sie hier.) In wenigen Stunden werden Sie von Null zum Lesen des Codes gelangen. Und in wenigen Tagen schreibst du es selbst. Und in ein paar Monaten wirst du ein Meister von HTML und CSS sein – dann gibt es kein Halten mehr, wenn es um Front-End-Engineering-Jobs geht.

Wenn Sie nun einige großartige Wireframes (in der vorherigen Phase) nach einem Raster erstellt haben, mit dem Sie vertraut sind, wissen Sie genau, wie Ihre Website codiert werden soll. Der schnellste Weg wäre, eine Art Front-End-Framework wie Bootstrap zu verwenden.

Sobald Sie sich mit dem rasterbasierten Design vertraut gemacht haben, werden Sie beginnen, jeden Teil Ihrer Website als eine Ansammlung von Zeilen und Spalten zu sehen. Das erste, was ich tue, wenn ich meine HTML-Struktur festlege, bevor ich echten Inhalt oder CSS hinzufüge, ist, in die Zeilen zu schreiben, dann die Spalten, dann grundlegende Dinge wie die Navigation, gefolgt von Text- und Bildplatzhaltern. Auf diese Weise können Sie zuerst die Grundstruktur festlegen und von dort aus aufbauen. Wenn wir uns dieses Drahtmodell ansehen, sehen wir sechs Zeilen:

1. Logo/Navigation
2. Bildschieber
3. Einführungstext
4. Kategoriebilder
5. Aktuelle Neuigkeiten / Angebote
6. Fusszeile

Nachdem wir sie in die HTML-Struktur von Bootstrap eingefügt haben, hätten wir so etwas:

Viele einfache Websites verwenden denselben (oder ähnlichen) Code, und wenn Sie an immer mehr Projekten arbeiten, werden Sie feststellen, dass die Website-Entwicklung größtenteils ein iterativer Prozess ist und es keinen Sinn macht, bei jeder Iteration denselben Code zu schreiben . Deshalb sind Frameworks nützlich! Ob Sie Ihre eigene erstellt oder sich für Bootstrap oder Foundation entschieden haben – es spielt keine Rolle. Wichtig ist, dass Sie es später pflegen und bei Bedarf erweitern können.

Fast alles, was Sie für ein Projekt benötigen, wurde zuvor erstellt und dann ein paar Mal neu erstellt. Suchen Sie also bei jeder größeren Aufgabe herum und fragen Sie andere, ob sie Vorschläge haben, bevor Sie kopfüber durch eine Wand gehen. Die meisten großen Frameworks haben sehr aktive Communities, die zusätzlichen Code und Plug-Ins erstellen, um Ihnen die Arbeit zu erleichtern. Arbeiten Sie also intelligent, nicht hart – und lernen Sie jeden Tag. Und wenn Sie etwas brauchen, das noch niemand zuvor gebaut hat, dann betreten Sie Neuland! Schreiben Sie darüber und teilen Sie es mit der Community – es wird Ihnen helfen, als Designer und Entwickler zu wachsen.

Auswahl eines CMS

Bei einigen Front-End-Engineering-Projekten sind Sie fertig, sobald Ihr Design auf einer Live-Webseite vorhanden ist. Dies sind in der Regel kleinere Websites (z. B. für kleine Unternehmen, Anwälte, Zahnärzte usw.). Aber oft möchten Sie oder Ihr Kunde die Kontrolle über den Inhalt der Website haben. In diesem Fall benötigen Sie ein Content Management System (CMS). Das Ziel eines CMS besteht darin, dass Sie Inhalte auf einer Webseite bearbeiten und veröffentlichen können, ohne jedes neue Detail von Hand oder überhaupt codieren zu müssen.

Von allen großen CMS würde ich mich als WordPress-Evangelist bezeichnen: Ich schwärme vor anderen Entwicklern, vor allem Anfängern, davon wegen seiner Vielseitigkeit, einfachen Bedienbarkeit, umfassenden Dokumentation für die Entwicklung, großen Community, vielen kostenlosen Plug-Ins, und so weiter und so fort…

Wenn Ihnen jemand sagt, dass Joomla! ist besser, besonders für kleinere Projekte – dann wissen sie nicht, wovon sie reden. Wie auch immer, verlassen Sie sich nicht einfach auf mein Wort: Laden Sie WordPress und Joomla! Starter-Themes, werfen Sie einen Blick auf jeden Ordner und fragen Sie sich dann – welche möchten Sie in Ihrer neuen Front-End-Rolle erkunden?

Ich bräuchte einen ganzen Artikel, um über dieses Thema zu schreiben, aber vertrauen Sie mir bei diesem genauso wie Sie Baz Luhrmann bei Sonnencreme vertrauen würden.

Wenn Ihr Projekt besonders klein ist und Sie nur ein einfaches CMS benötigen, das ohne Programmierkenntnisse implementiert werden kann, würde ich Ihnen die Verwendung von CouchCMS empfehlen. Mit nur ein paar XHTML-Tags können Sie es innerhalb von Minuten zum Laufen bringen, und sogar Ihre Oma wird wissen, wie man es benutzt.

Pflege Ihrer Website

Nachdem Sie Ihre Website geliefert haben und einen weiteren zufriedenen Kunden haben, müssen Sie die Website nur noch pflegen. Wenn Sie eine einfache HTML-Site ohne neuen Inhalt erstellt haben, sind Sie wahrscheinlich fertig.

Wenn Sie ein CMS verwendet haben, müssen Sie sicherstellen, dass die Technologie immer auf dem neuesten Stand ist, um Sicherheitslücken zu vermeiden. Dazu gehören das CMS selbst und alle von Ihnen verwendeten Plug-Ins. Wenn Sie meinen Rat befolgt und WordPress verwendet haben, werden Sie über jedes verfügbare Update per E-Mail benachrichtigt.

Dies ist der Ausgangspunkt meines Prozesses. Zugegeben, das wird nicht für jeden funktionieren und sicherlich nicht für jedes Projekt gelten. Aber ich hoffe, das hilft euch Designern da draußen dabei, die Fähigkeiten zu erlangen, die ihr braucht, um großartige Front-End-Ingenieure zu werden und umgekehrt, damit wir unsere Talente als Front-End-Entwickler weiter ausbauen können.

Ich kann dir nur die Tür zeigen. Du bist derjenige, der da durchgehen muss. - Morpheus, die Matrix

PS: Eine PSD der obigen Vorlage und andere coole Designs findest du in meinem Dribbble-Portfolio.