Welche Werkzeuge und Frameworks stehen uns beim Erstellen von Webauftritten zur Verfügung und wie optimiert man den Workflow in der Agentur bzw. im Team? Wie geht man an eine Webproduktion ran und kommt zu einem guten Ergebnis? Lasst uns Vor- und Nachteile verschiedener Ansätze und Lösungswege miteinander vergleichen. Als erstes werfen wir einen Blick auf den effektiven Workflow in einer Agentur und danach stelle ich einige Tools und Frameworks für die Webproduktion vor.

In diesem Artikel geht es vor allem um die Kreation und die Produktion. Auf die vielen anderen Schritte im Verlauf eines Projekts wie Strategie, Workshops mit dem Kunden, Contenterstellung, Abnahmen oder Qualitätssicherung oder Kommunikationsprobleme im Team und ähnliches gehe ich an dieser Stelle nicht ein.

Beispiel eines Agentur-Workflows

Was soll im Endeffekt erreicht werden? Ziele in unserer Agentur sind üblicherweise eine schnelle und kostengünstige Umsetzung. Ein dem Job und Auftrag angemessenes Design, Funktionalität und Usability sowie ein dem Produkt angemessenes Nutzererlebnis (UX / User Expierience).
Da stellt sich die Frage, welche Fähigkeiten in der Agentur gebraucht werden und welche Rolle die Teammitglieder im Workflow einnehmen. Eine Gestalterin übernimmt andere Aufgaben, als ein Konzeptioner und eine Backend-Entwicklerin arbeitet mit anderen Tools, als ein Frontendentwickler. Je nach Rolle sind nur einige der folgenden Werkzeuge für die jeweiligen Beteiligten interessant. Lasst uns einen Blick auf das Team in einer beispielhaften Agentur werfen.

Die Rollen im Team

Jede Agentur ist nur so gut, wie ihre Mitarbeiter. Hier sind vier, die sich gut ergänzen:

Da wäre zunächst Niklas, der Kontakter in der Agentur. Niklas hat ein abgebrochenes Publizistik-Studium hinter sich, er kann sich in die Produkte des Kunden hinein versetzen, kann texten und ist ein kreativer Kopf, wenn es um Marketing-Strategien geht. Niklas kommuniziert gut mit dem Kunden und kann zuhören. Von Gestaltung oder HTML und CSS hat Niklas aber wenig bis gar keine Ahnung. Ungewöhnliche Design-Ideen und spezielle Funktionalitäten bespricht er im Team bzw. mit dem Kunden am liebsten an beispielhaften Webseiten; gerne auch anhand von Fundstellen im Web.

Dann haben wir in der Kreation Nathalie und Christian. Nathalie ist eine ausgezeichnete Gestalterin und Illustratorin, sie hat ein Händchen für Typografie, ist kreativ und kann um die Ecke denken. Aber der Computer ist nicht ihr bester Freund und sie glaubt von sich, dass sie eher im Print, als im Webdesign zu hause ist. Sie arbeitet bei ihrer Gestaltung mit viel Liebe zum Detail, behält dabei aber immer den Etat und das Zeitbudget im Auge.
Christian ist Mediengestalter, nicht ganz so kreativ wie Nathalie, dafür er hat sehr gute Kenntnisse in HTML und CSS und kennt sich mit den Programmen der Adobe Cloud und mit Wordpress ganz passabel aus. Am liebsten würde er seine Webseiten zwar ohne Frameworks und ContentManagementSystem direkt in HTML coden. Aber da noch andere Teammitglieder involviert sind und alle Beteiligten schnell klickbare Resultate sehen sollen, ist ein CMS für ihn akzeptabel. Außerdem ist so das Einpflegen von Inhalten auf dem Webserver für jeden einfach möglich. Pagebuilder setzt er im CMS wenn möglich nicht ein. Für die Bestandteile seiner Webseiten hat er eigene Komponenten entwickelt. Von Bootstrap & Co. lässt er sich inspirieren, verwendet aber statt dieser Frameworks eigene Codeschnippsel aus seiner gut gefüllten Schublade mit unterschiedlichsten Bausteinen. jQuery und andere JavaScript-Frameworks setzt er selten ein und setzt lieber auf Vanilla- (pures) JavaScript.

Und dann ist da noch die Backend-Entwicklerin Lara. Gestaltung ist nicht ihr Ding. Dafür kennt sie sich als studierte Informatikerin natürlich aus mit JavaScript, serverseitigen Skriptsprachen und den entsprechenden dazugehörigen Frameworks wie Angular, React & Co. Zu ihren Aufgaben gehören Datenbankanbindungen und andere Backend-Programmierungen.

Neben diesem Kernteam beauftragt die Agentur in einigen Fällen externe Dienstleister wie TexterInnen, FotografInnen, Videoproduktionsfirmen, IllustratorInnen, UX-TesterInnen, oder Spezialisten für SEO, Social-media, Webshop, Programmierung, Datenbanken und ähnlichem. Außerdem haben wir in der Agentur noch den Praktikanten Jonas und die Geschäftsführerin Josephine. Aber die zwei spielen in unserem Workflow zunächst keine entscheidende Rolle.

Ein einfaches Grundprinzip

Das Team verschwendet nicht unnötig Zeit und Ressourcen. Die Aufgaben sind klar verteilt und jeder macht das, was er/sie wirklich kann. Dem Workflow in der Agentur liegt ein einfaches Grundprinzip zugrunde:

Lets KISS – Keep it simple, stupid!

Von Projektstart bis zur Übergabe

Der Kontakter Niklas gibt seine ersten Ideen zur neuen Website in das Agentur-Meeting. In der Besprechung mit dem Kunden hat er ein paar Gedanken auf Papier festgehalten. Nathalies Aufgabe ist es, aus den Informationen von Niklas grundlegende Gestaltungsideen (Stimmungen, Botschaften, Bildsprache, Typografie etc.) zu entwickeln. Hier hält Nathalie ihre Ideen gerne mit einfachen Skizzen und Moodboards fest und kommuniziert damit innerhalb der Agentur/des Teams. Nathalie macht hier in der Regel noch kein konkretes Screendesign, sondern macht sich eher Gedanken um einzelne Bausteine des Designs. In der ersten Designphase werden in der Agentur keine Klickdummys gebaut, sondern das Team konzentriert sich wirklich auf die grundlegenden Gestaltungsideen. GestalterInnen, die aus dem Printbereich kommen sind es evtl. gewohnt mit InDesign, Illustrator oder Photoshop zu arbeiten. Das ist in diesem Fall tatsächlich kein Problem, denn es geht wirklich nur um das Visualisieren von Ideen. Und eine Trennung von Gestaltung und Umsetzung führt in unserem Workflow zu besseren Ergebnissen, als wenn Gestalter programmieren oder Programmierer gestalten. Gute Ideen kann man übrigens auch hervorragend mit Papier und Bleistift festhalten ;-)

Christian setzt zu Beginn des Projekts einen Testserver mit Wordpress auf. Er fügt wenn möglich erste Inhalte des Kunden ein. Dem Kunden wird dadurch bereits in einer frühen Phase das Projekts deutlich, das er Inhalte liefern muss oder sich zumindest Gedanken über die Inhalte machen sollte. Christian installiert außerdem PlugIns auf dem Testserver nach der KISS-Devise: also nur wirklich notwendige PlugIns.
Danach wird Christian rudimentär das Standard-Theme anpassen an Nathalies Ideen aus der ersten Designphase. Das macht Christian über den CSS-Customizer in Wordpress oder direkt im Wordpress-Theme. Die pixelgenaue Umsetzung einer Vorgabe durch den Frontend-Entwickler ist an dieser Stelle noch nicht zielführend. Er arbeitet bei der Umsetzung des Designs nach dem mobile-first-Prinzip. Natürlich ist Nathalie nicht zufrieden, mit dem, was Christian gemacht hat :-) Er hat an seinem Standard-Theme (welches Basis für alle seine Websites ist) in dem Moment auch noch nicht viel geändert und es sieht für Nathalie deswegen alles noch zu sehr nach Standard-Design aus. Das Entwickeln des Screendesigns und Optimieren der Gestaltung folgt im nächsten Schritt …

… Screendesign zusammen entwickeln

Die Screendesigner Christian, Nathalie und der Praktikant Jonas passen das Wordpress-Theme jetzt gestalterisch an. Christian macht das am liebsten direkt mit dem Customizer in Wordpress. Hier kann er schnell und unkompliziert eigenes CSS schreiben.
Nathalie ist in CSS nicht so fit und nutzt andere Möglichkeiten: Sie kann ihre kreativen Ideen am besten in einer Layout-Software oder in Photoshop umsetzen. Sie visualisiert ihre Ideen für Christian auch gerne einfach auf einer Papierskizze oder einer Zeichen-App auf ihrem iPad.
Der Praktikant Jonas hingegen arbeitet lieber mit Figma (Sketch, Adobe XD und viele andere ähnliche Tools würden den gleichen Zweck erfüllen). Er generiert sich aus einer bestehenden Wordpress-Website eine statische HTML-Seite, importiert diese in Figma und kann dort die einzelnen Bestandteile der Webseite direkt bearbeiten. Eine Extension wie „HTML <-> Figma“ lässt uns die Wordpress-Seite in Figma importieren und darin Änderungen vornehmen ohne dass man allzu fit in CSS sein muss. Jonas nutzt diese Tools nur zum Gestalten, nicht aber um einen Klickdummy zu bauen. Jonas' Ideen setzt Christian statt dessen im Wordpress-Theme um, wenn die anderen Teammitglieder die Gestaltung für gut befunden haben.

Screendesign im CMS umsetzen

Die Ideen von Jonas, Nathalie und Niklas setzt Christian anschließend im Wordpress-Theme relativ zügig um. Ihm ist es egal, wie der Kunde, die Team-Mitglieder oder externe Freelancer ihre Ideen anliefern. Ihm kann man PDF-Dateien mit Kommentaren, Photoshop-Dateien, in Sketch erstellte Prototypen oder was auch immer in die Hand drücken. Christian setzt die Ideen im Wordpress-Theme um, wobei der Arbeitsaufwand für ihn bei allen angelieferten Daten ähnlich ist. Ein direktes Exportieren von fertigem HTML und CSS aus Tools wie Sketch, Figma oder Adobe XD etc. wäre zwar mit PlugIns wie Anima und ähnlichen prinzipiell möglich. Aber dieser exportierte Code ist nicht brauchbar für eine Website die man später veröffentlichen möchte. Bevor Christian diesen Code bereinigt und angepasst hat, schreibt er ihn lieber selbst. Damit ist er am schnellsten, produziert sauberen Code und hat die finale Website quasi schon fertig. Sein Lieblingseditor ist Atom in Verbindung mit Emmet.
Interessant ist an dieser Vorgehensweise, dass heutzutage viele Kunden bereits mit wenigen Anpassungen eines Themes glücklich sind. Schaut man sich aktuelle Websites an, fällt auf, dass das Gerüst oft sehr schlicht und einfach gehalten ist und durch gut gestaltete Inhalte (passende Bildwelt, eigene Illustrationen, Liebe zum Detail etc.) das Screendesign individuell wirkt und ein Eigenleben entwickelt.

Jetzt haben der Kunde und der Kontakter Niklas aber noch ein paar Ideen zu speziellen Funktionen und visuellen Effekten, die sie auf anderen Websites gesehen haben. Das will der Kunde auch haben. Wenn spezielle Funktionalitäten oder komplexere CSS- und JavaScript-Lösungen gewünscht sind und diese nicht mit den üblichen PlugIns des ContentManagementSystems realisiert werden können, kommt Lara ins Spiel. Sie erstellt aus den Web-Fundstellen und Beispielen in der Regel zunächst Standalone-Versionen und Prototypen. Für solche Dummys nutzt Lara bei Bedarf Frameworks wie react oder node.js etc. Sie programmiert Dummys und baut diese anschließend zusammen mit Christian in das CMS ein.

Der Kontakter Niklas kommuniziert seine Ideen und Anmerkungen übrigens am liebsten mit einer Projektmanagementsoftware wie Trello, OpenProject oder vergleichbaren Lösungen im Team.

Christian kann jetzt für die Präsentation beim Kunden Screenshots aus den bestehenden Webseiten auf dem Testserver anfertigen. Es gäbe zwar eine klickfähige Website auf dem Wordpressserver, aber für die erste Designabstimmung bzw. Präsentation beim Kunden bevorzugt die Agentur MockUps und statische Bilder. Der Kunde ist übrigens mächtig beeindruckt, wenn die Agentur am nächsten Tag nach der der Präsentation schon die „Umsetzung des Designs“ auf dem Testserver präsentieren kann ;-)
Natürlich hat jeder Kunde Änderungswünsche. Es folgen also Absprachen und Korrekturrunden innerhalb des Teams bzw. mit dem Kunden. Die Kunden der Agentur schicken ihre Anmerkungen zum Webprojekt häufig als PDF-Dateien mit Kommentaren oder einfach per eMail an die Agentur. Die Änderungswünsche setzt Christian in der Regel direkt im CMS um, solange es nicht um grundlegende Designänderungen geht.

Die nächsten Schritte sind das Überprüfen der Funktionalität, des „look and feel“ und Usabilitytests mit Hilfe des Testservers. Das ist kein Problem, denn mit dem Testserver haben wir keinen Klickdummy, sondern quasi schon die fertige Website. Wenn die Zusammenarbeit mit dem Kunden funktioniert, hat der Kunde auf dem Testserver sogar schon brauchbare Inhalte eingepflegt. So ein Zugriff von Seiten des Kunden ist kein Problem, man kann jedem Beteiligten entsprechende Rechte im CMS einräumen. Alle sind also von Anfang an sehr nah dran am späteren fertigen Produkt.

Danach richten Christian oder Lara den Produktionsserver (also den Server, auf dem der eigentliche Webauftritt des Kunden gehostet wird) ein und und konfigurieren das Wordpress-Theme sowie nötige PlugIns. Prinzipiell kann man den Testserver komplett mit Theme und Inhalten auf den Produktionsserver migrieren, aber solange nicht bereits viele Inhalte auf dem Testserver erstellt wurden, ist es auch nicht besonders aufwändig den Produktionsserver neu aufzubauen.

Im nächsten Schritt werden nun die vollständigen Inhalte erstellt. Hier arbeitet die Agentur gerne mit externen Dienstleistern, wie TexterInnen, Illustratorinnen oder Photographen zusammen. Auch für den Praktikanten gibt es an dieser Stelle einiges zu tun.
Zum Schluss kommt dann doch noch die Chefin der Agentur ins Spiel, ihre Aufgabe ist die Übergabe des Projekts an den Kunden.

Fazit

Jede Agentur arbeitet natürlich anders, jeder hat seine Lieblingstools und seine liebgewonnenen Abläufe. Ein Informatiker wird wahrscheinlich erst mal eine amtliche Entwicklungsumgebung einrichten und überlegen, wie er sein node.js-Framework am besten einsetzen kann und andere Agenturen brauchen eher ein kreatives Chaos. In manchen Agenturen hat man nur eine dünne Personaldecke und alle müssen alles machen, in anderen Agenturen hat man genügend Mitarbeitende um Aufgaben sinnvoll aufzuteilen. Der hier beschriebene Workflow kann also nur ein Ansatz von vielen sein. Aber er ist einfach und effektiv. Die Kompetenzen sind eindeutig zugeordnet. Christian setzt die Website um und Nathalie, Jonas und andere liefern ihre Gestaltungsideen auf unterschiedliche Weise an. Aber beide Prozesse sind klar voneinander getrennt.

Man sieht, dass der zentrale Punkt in dem oben beschriebenen Workflow der Testserver mit dem ContentManagementSystem ist. Die Ideenfindung und Gestaltung werden möglichst zügig auf den Testserver übertragen und wenn möglich hat man sehr schnell die finale Website. Ein Klickdummy wird an keiner Stelle des Workflows gebraucht, statt dessen haben durch die frühe Implementierung des CMS alle Beteiligten gleich zu Anfang des Projekts eine voll funktionsfähige Website vor Augen. Alle am Job Beteiligten können auf dem Testserver den Fortschritt begutachten. Und jeder Mitarbeiter in der Agentur hat die Freiheit, mit seinen Lieblings-Tools am weiteren Designprozess mit zu wirken. Neue Mitarbeiter oder externe Freelancer lassen sich so schnell in das Team integrieren.
Natürlich lässt sich dieser Ansatz beliebig erweitern und aufbohren. Zum Beispiel durch den Einsatz von Projektmanagementtools, durch Wordpress-PlugIns für die Versionierung, durch Javascript-Bibliotheken oder andere Frameworks. Aber wenn es dem KISS-Prinzip widerspricht, kann der Einsatz von überflüssigen Tools die Arbeit behindern. Auch bei der Wahl des ContentManagementSystem muss es nicht notwendigerweise Wordpress sein. Es gibt viele Alternativen, nur sollte es genügend potentielle Mitarbeiter auf dem Arbeitsmarkt geben, die sich mit dem entsprechendem CMS auskennen.

Dieser Workflow lässt sich also auf eine Vielzahl von Projekten anwenden. Er berücksichtigt unterschiedliche Fähigkeiten und Vorlieben der Mitarbeiter im Team und ist skalierbar in kleinen wie auch großen Agenturen einsetzbar. Dabei setzt er auf einige einfache Grundprinzipien:

Let's KISS. Keep it simple, stupid! Am Ende brauchen wir HTML, was sonst? Lasst uns also ein cooles und funktionelles Design mit möglichst wenig Ballast bauen. Vereinfacht wird soweit es Sinn macht; denn wie schon Albert Einstein wusste: „Mach es so einfach wie möglich, aber nicht einfacher“.

Content is king! Der Webauftritt wird um die Inhalte (und deren Botschaft) herum aufgebaut.

Mobile first! Halte es zunächst einfach! Wir sind gezwungen, uns gestalterisch zurückzuhalten, wenn wir zuerst für Smartphones gestalten und später das Design an größere Viewports anpassen. Und das ist auch gut so. Erweitere das Projekt später nach dem Progressive enhancement-Prinzip (https://developer.mozilla.org/de/docs/Glossary/Progressive_Enhancement).

Jeder nach seinen Fähigkeiten: Jeder macht am besten das, was er wirklich kann.

Tools und Frameworks

Nach dem Workflow werfen wir nun ein Blick auf die Werkzeuge und Frameworks, die uns in der Webproduktion zur Verfügung stehen.
Ein Framework ist ein Baukasten, eine Sammlung von Werkzeugen, Codeschnipseln oder eine Bibliothek, um wiederkehrende Aufgaben standardisiert lösen zu können. Sie enthalten immer wieder gebrauchte Funktionen und Bausteine. Sie verkürzen die Entwicklungszeit in unseren Projekten. Ziel ist es bei der Produktion einer Website oder eines IT-Projekts, nämlich nicht jedes Mal wieder das Rad neu zu erfinden und von vorne zu beginnen!
Generell gilt der Grundsatz, dass man alles, was das Framework anbietet prinzipiell auch von Hand erstellen können und die Technik verstanden haben sollte, sonst wird man beim Einsatz von Frameworks keine guten Lösungen produzieren. Frameworks ersetzen keine fehlenden Kenntnisse, sondern ermöglichen es nur, dass wir schneller zum Ziel kommen. Wer also nicht in der Lage ist, ein responsives CSS-Layout von Hand zu erstellen, der sollte nicht darauf hoffen, dass Bootstrap oder Foundation ihm die Arbeit abnimmt. Als Prüfer bei der Handelskammer erlebe ich es immer wieder, dass Auszubildende Frameworks in Prüfungsarbeiten ungeschickt einsetzen und fehlerhafte Lösungen produzieren. Wenn Du Screendesigns umsetzt, müssen Dir CSS-Grid, Flexbox, Responsive Design, das mobile-first-Prinzip und andere grundlegende Techniken also vertraut sein. Sonst hilft Dir auch das umfangreichste Framework nicht weiter.

Vor- und Nachteile von Frameworks

Vorteile durch den Einsatz eines Frameworks sind

• Wiederverwertbar für zukünftige Webprojekte
• Erfahrungsaustausch und Hilfe in Foren und Communities
• Best practices werden umgesetzt
• Standard-Konzepte erleichtern die Zusammenarbeit mit anderen Entwicklern
• Schnellere Mock-Up Prozesse
• Kombination von zum Beispiel Komponentenbibliotheken mit ContenManagementSystemen

Nachteile eines Frameworks sind

• Überbordender Quellcode durch mitgelieferte Lösungen, für die es gar keine Problemstellung gibt
• Durch Abstraktionsschichten entfernt man sich möglicherweise weit vom eigentlichen Quellcode
• Frameworks sind nichts für Anfänger. Ohne solide HTML- und CSS- oder JS-Kentnisse nutzt ein Webframework nichts
• Nicht jedes Framework ist ausführlich getestet und solide aufgebaut und wird ständig gepflegt
• Nicht für jedes Framework stehen genügend Mitarbeiter zur Verfügung

Im Vergleich dazu: reine Sprachen ohne Frameworks

HTML, CSS, Javascript, PHP
HTML und CSS zu erlernen versteht sich von selbst bei Webentwicklern. JS hilft in vielen Situationen weiter und ist eine hilfreiche Ergänzung in der Webentwicklung. PHP ist eine leicht zu erlernende Programmiersprache, die ich allen empfehlen kann. Aber Achtung: bei fehlerhaftem Einsatz reißt man sich eventuell schwere Sicherheitslücken in seinen Webauftritt.

Wer sollte was nutzen?

Die folgende Tabelle ist meine persönliche Sicht. Das Thema Frameworks wird von vielen Entwicklern kontrovers diskutiert.

Im folgenden eine Auswahl an Tools für Webprojekte

Welche Frameworks für Webdesigner gibt es und wer sollte mit welchen Frameworks arbeiten? Im folgenden findest Du einige angesagte Werkzeuge: natürlich kann das nur eine Auswahl sein. Welche Tools bevorzugst Du?

Design-Software, Prototyping

Zu Beginn eines Webprojekts steht (neben Überlegungen zur Strategie oder dem Marketing) üblicherweise der Designprozess. Ihr habt Eure Gestaltung bislang vielleicht in Photoshop gemacht und dort ein konkretes Design entwickelt. Das ist auch okay; mir ist es wichtiger, dass Ihr zu Begin der Ausbildung eine Software erst mal halbwegs beherrscht, bevor Ihr eine Vielzahl an weiteren Programmen ausprobiert. Aber häufig ist auch eine Skizze mit Papier und Bleistift oder ein Moodboard eine gute Basis, um einen grundlegenden Prototypen in HTML und CSS zu bauen und dann in diesem Dummy direkt die Gestaltung zu entwickeln.

Alternative Tools für die Screendesignphase und das Erstellen von Prototypen sowie das kollaborative Arbeiten mit den KollegInnen in der Agentur wären zur Zeit (Frühjahr 2022) zum Beispiel Figma, browserbasiert mit Funktionen zum Zusammenarbeiten im Team siehe: https://www.figma.com/, Sketch (nur für Mac) https://www.sketch.com/, oder Adobe XD (https://www.adobe.com/de/products/xd.html). Einen Blick wert wären auch https://www.invisionapp.com, https://www.abstract.com, Webflow (https://webflow.com), oder https://www.framer.com.
Videos zu Sketch findest Du auf https://www.youtube.com/watch?v=oADi0j0qeFE&feature=youtu.be oder https://www.youtube.com/watch?v=E3xZui2myUU.
Video zu Adobe-XD auf englisch findest Du auf https://www.youtube.com/watch?v=goI6JHO99Qg&feature=youtu.be, am Schluss des Videos gibt es Infos zum Web-Export.
Sketch, Figma und Adobe XD im Vergleich: https://www.codeinwp.com/blog/figma-vs-sketch-vs-adobe-xd
Andere Design-Frameworks: diverse Komponenten stellt UI-Kit zur Verfügung: https://getuikit.com, Material-Design-Framework: https://material.io/ und https://www.youtube.com/watch?v=ckCe0xZv3Co
Free Material Design UI Kits for Sketch & PSD in 2018: https://www.mockplus.com/blog/post/free-material-design-ui-kits, Free Material Design Ui Kit: http://www.designtory.net/free-psd/free-material-design-ui-kit oder Vektor-kits: https://www.appcues.com/blog/30-awesome-free-ui-vector-kits-for-your-mockups-and-wireframes.
Aber achte darauf, dass beim Einsatz von vorgefertigten Gestaltungs-Bausteinen das kreative Screendesign nicht auf der Strecke bleibt.
Und was ist im Gestaltungsprozess ein Wireframe? https://www.smartdraw.com/website-wireframe/ und https://cdn.dribbble.com/users/180838/screenshots/2103001/wireframe_cover.png

Zu Photoshop, Illustrator und Co gibt es übrigens interessante Alternativen, wie Affinity, Gimp, Inkscape u.v.m.

Helferlein für Bilder, Farbe und Typo gibt es ebenfalls zahlreich; da wären unter anderem Pixabay, Colorlovers oder Google-Fonts

„Oh du meine Güte! Es gibt so krass viele Tools und ständig kommen neue auf den Markt. Was soll ich nur benutzen?“ würden Larissa und Rebecca sagen. Da hat wohl jeder seine eigenen Favoriten, aber wenn man sich in ein Tool eingearbeitet hat, lernt man eine andere Software die ähnliche Zwecke erfüllt, relativ schnell. Letztendlich muss man etwas Zeit investieren, um sich in seine Lieblings-Software richtig einzuarbeiten.
Und was hältst Du von den Tools Papier und Stift, einem Moodboard oder Gedanken zu einer passenden Bildwelt? Ich persönlich finde das Skizzieren mit Papier und Stift nach wie vor für eines der besten Mittel, um zu einem kreativen Screendesign zu gelangen ;-)

Tools für die Webentwicklung

Und nun zu einigen hilfreichen Tools für die Webentwicklung, wobei anzumerken ist, dass eine Trennung zwischen Tools für Gestaltung und für die Umsetzung von Websites nicht immer einfach ist. Viele der hier vorgestellten Werkzeuge lassen sich für beide Bereiche nutzen.

Webeditoren, Code schreiben

Es gibt einen ganzen Zoo an guten Editoren für die Webentwicklung. Brackets (https://www.mediaevent.de/brackets-open-source-code-editor/), Atom (https://atom.io/), Visual Studio Code (https://www.youtube.com/watch?v=r5jNl-IOSZg) oder Dreamweaver funktionieren in der Regel ausgezeichnet. Jemand, der aus dem Informatik-Bereich kommt, wird evtl. erst mal eine amtliche Entwicklungsumgebung einrichten und Eclipse (https://www.eclipse.org/ide/) oder Aptana (http://www.aptana.com/) bevorzugen. Aber auch Sublime, Phase 5 und viele andere haben ihre Daseinsberechtigung. Dreamweaver hat dabei eine andere Herangehensweise, als Texteditoren wie Atom oder VS Code. Die WYSIWYG-Oberfläche (WYSIWYG = What You See Is What You Get) von Dreamweaver macht redaktionelle Tätigkeiten in Webseiten wirklich einfach, aber für Leute mit Informatik-Hintergrund ist so ein Programm ziemlich gewöhnungsbedürftig. Auf https://www.youtube.com/watch?v=SwJErmD493M (deutsch von Gerald Fischer) oder https://www.youtube.com/watch?v=eh5-7EAUdZ8 (Gary Simon / DesignCourse) findest Du brauchbare Tutorials zu Dreamweaver. Und im Video „My Top 5 Free Text Editors For Web Development“ auf https://www.youtube.com/watch?v=AJnhqf5IRC4 gibt Traversy Media ein guten Überblick zum Thema Webeditoren.

Helferlein beim Coden: Emmet (https://www.youtube.com/watch?v=EzGWXTASWWo) erleichtert uns mit seinen Kurzbefehlen das Schreiben von HTML-Code, als Anfänger sollte man aber wegen des Lerneffekt erstmal darauf verzichten. CSS-Präprozessoren wie
CSS-Präprozessoren, SASS, Less. SASS kann beim Einsatz von großen CSS-Dateien hilfreich sein, erfordern aber eine gewisse Disziplin im Team. Siehe: https://sass-lang.com/guide; oder Sass Tutorial auf w3Schools: https://www.w3schools.com/sass/default.asp

Eine Basis für Webprojekte kann HTML5-Boilerplate sein. Aus diesen Vorlagen kann man sich einige Anregungen raus ziehen oder die Vorlagen direkt verwenden: https://html5boilerplate.com

CSS-Resets: https://necolas.github.io/normalize.css normalize oder ein vergleichbares CSS-Reset gehört in jedes Webprojekt. Denk bitte daran, dass es zu Beginn Deiner Arbeit eingebunden werden muss und nicht erst am Ende, wenn Du fast fertig mit dem Projekt bist.

CSS-Frameworks: auch hier gibt es zahlreiche Lösungen. Wie zum Beispiel Bootstrap (eher was für Informatiker), Foundation, w3.css, Yaml und viele weitere.
Bootstrap ist in vielen Agenturen beliebt, aber macht die Verwendung wirklich Sinn? Ein responsives CSS-Layout ist mit display:grid und media-Queries meiner Meinung nach schneller und flexibler angelegt, als mit dem Bootstrap-Grid. Und ob man die vorgefertigten Design-Lösungen von Bootstrap einsetzen sollte ist ebenfalls fraglich. Ein Programmierer, der von Typografie und Gestaltung keine Ahnung hat, ist mit Bootstrap sicherlich gut bedient, aber als WebdesignerIn sollte man besser auf eigene Lösungen zurück greifen. Ansonsten sieht der Webauftritt schnell sehr durchschnittlich aus.
Unter w3schools (https://www.w3schools.com/w3css/w3css_web.asp) findest Du eine Vielzahl an ballastfreien Beispielen und Codeschnispsel, die gut dokumentiert sind und nur essentielle Teile beinhalten. Sie sind eine ausgezeichnete Grundlage für eigene Entwicklungen.

Das Utility-Framework Tailwindcss: https://tailwindcss.com lässt uns mit vielen bereits vorgefertigten Klassen eine Website erstellen, ohne dass wir uns selber CSS-Klassen erstellen müssen.

Aber vor allem eigene Bibliotheken mit selbst getesteten Code-Schnipseln sind eine gute Basis für Deine Webprojekte.

JavaScript

Hier stehen zahlreiche JS-Frameworks wie jQuery, React, Angular, Ember, node.js, Vue.js. Typescript und viele mehr zur Auswahl. Während jQuery auch bei WebdesignerInnen mit mittlerer Erfahrung beliebt ist und auch in kleineren Webprojekten eingesetzt werden kann, machen die anderen JavaScript-Frameworks vor allem bei Entwicklern/Informatikerinnen Sinn.

jQuery, Lösungen für das Frontend: https://jquery.com/

Typescript; Objektorientierung für JavaScript: https://www.youtube.com/watch?v=uo4PWU-R96k&t=8s

Node.js, JavaScript-Code außerhalb eines Webbrowsers ausführen: https://nodejs.org

Gulp: gulp.js ist eine Software, basierend auf Node.js, um verschiedene Aufgaben im Webentwicklungsprozess zu automatisieren. So kann gulp zum Beispiel genutzt werden, um HTML, JavaScript und CSS zu verkleinern, SCSS in CSS umzuwandeln, Bilder zu optimieren und Dateien in einen „dist“-Ordner zu kopieren. Außerdem kann gulp dazu genutzt werden, um den Webbrowser automatisch zu aktualisieren oder den Webserver automatisch zu starten.

Weitere beliebte JS-Frameworks sind beispielsweise React: https://www.w3schools.com/react/react_intro.asp, https://reactjs.org/
Angular: https://www.w3schools.com/angular/angular_intro.asp, https://angularjs.org/
Ember: https://emberjs.com/
Vue.js: https://vuejs.org/
WebAssembly: https://de.wikipedia.org/wiki/WebAssembly

Server

Hier können sich Mediengestalter mit Themen beschäftigen wie Apachefriends, bplaced, Server Side Frameworks, PHP, Python, Pearl
Datenbankanbindung
Servertechniken wie Domain Names, SSL
FTP-Programme, Filezilla.

Versionierung, Paketmanager

npm: ein Paketmanager für Node.js. https://www.npmjs.com/

Git: für die verteilte Versionierung von Dateien. Entwickelt unter anderem von Linus Torvalds. https://git-scm.com/ und https://github.com/

CMS

Informiere Dich über ContentManagementSysteme wie: Wordpress, Joomla, TYPO3 und andere.
Redakteursarbeiten in CMS lassen sich von Anfängern schnell erlernen. Das Aufsetzen eines CMS oder die Theme-Erstellung erfordert aber tiefere Kenntnisse. Pagebuilder wie Divi ermöglichen das Layouten einer Website ohne HTML-Kenntnisse. Zahlreiche PlugIns liefern fertige Lösungen (die mehr oder weniger gut anpassbar und dokumentiert sind), mit einem PlugIn wie WooCommerce lassen sich ganze Webshops aufsetzen. Vergleiche ContentManagementSysteme mit Homepagebaukästen wie Wixx.com oder der Erstellung von Websites per Hand.

https://de.wix.com/, https://www.jimdo.com/de/ oder der 1&1 Homepagebuilder sind geeignet für den Kunden ohne Etat

Herangehensweisen

Mach Dich vertraut mit dem Mobile first-Prinzip; den Prinzipien Content is king und Form follows function - siehe oben.

Vor- und Nachteile bei statischen Websites bzw. CMS: http://mediengestalter-mm-hamburg.de/Unterrichtsmaterialien/Wordpress.php

PWA (progressive web apps): Du kannst eine App mit HTML, CSS und JS entwickeln. Es sieht aus wie eine App, ist aber eine normale Webseite. Firefox und andere sind allerdings zurückhaltend, was die Unterstützung angeht (https://www.golem.de/news/mozilla-firefox-soll-pwa-nicht-unterstuetzten-2012-153107.html, https://t3n.de/news/webdesign-steht-um-jahr-2020-1242754/.

Qualitätssicherung

Teste Deine Webprojekte sorgfältig. Zum Beispiel mit einer ausführlichen Checkliste zum Testen oder Silenium u.a.: https://de.wikipedia.org/wiki/Selenium, https://medium.com/@OPTASY.com/the-5-best-automation-testing-tools-for-web-applications-that-you-could-use-in-2020-powerful-and-23135826a569

Betriebssysteme und Nützliches

Was ist das richtige OS: Mac / Windows / Unix / Linux?
Immer wieder gern diskutiert :-)

Suchprogramme wie Docfetcher helfen Dir Inhalte in Dateien schnell zu finden: http://docfetcher.sourceforge.net/de/
Datensicherungs- oder Antivirenprogramme etc. gehören ebenfalls auf Deine Rechner.

Und der Einsatz der Konsole/des Terminals hilft in vielen Situationen wie ImageMagic und Stapelverarbeitung, SASS, Datensicherung etc.

Analyse- und Marketingtools

Wenn Du im Marketing arbeitest, solltest Du Dich vertraut machen mit Programmen wie Google Analytics, Piwik/Matomo oder mailchimp.

Projektmanagement-Tools, Teamarbeit

Bei der Auftragsbearbeitung und der Zusammenarbeit in der Agentur unterstützen Dich Lösungen wie Trello, Microsoft Project. eMails

https://www.openproject.org/de/projektmanagement-funktionen,
https://sourceforge.net/projects/projectlibre,
https://www.heise.de/download/products/netzwerk/zusammenarbeit#?cat=netzwerk%2Fzusammenarbeit
https://www.capterra.com.de/blog/384/top-10-kostenlose-projektmanagement-tools
https://t3n.de/news/projektmanagement-kostenlos-scrum-kanban-gantt-555168/
https://praxistipps.chip.de/die-besten-alternativen-zu-trello_38874

Fazit

Keep it simple. Setze keine Frameworks ein, wenn Du nicht die Technik dahinter verstanden hast und das gewünschte Ziel nicht auch von Hand bauen könntest. Lerne und verstehe erst die grundlegenden Techniken, bevor Du Frameworks, PlugIns, Themes, Bibliotheken und andere Tools einsetzt.

Tipp: um herauszufinden, was am Arbeitsmarkt aktuell gebraucht wird, hilft ein Blick auf DasAuge.de wie zum Beispiel https://dasauge.de/jobs/stellenangebote/?begriff=bootstrap

Literaturhinweise

Traversy Media - Web Development In 2022 - A Practical Guide: https://www.youtube.com/watch?v=EqzUcMzfV1w
Aktuell genutzte Design-Tools: https://uxtools.co/survey-2020
Most Popular Web Development Frameworks for 2021: https://www.appypie.com/top-web-development-frameworks
Aktuelle Technologien siehe „Web Development In 2021 - A Practical Guide“ von Traversy Media: https://www.youtube.com/watch?v=VfGW0Qiy2I0
Frameworks nutzen? Ein Video von Unleashed Design: https://www.youtube.com/watch?v=t11eOjF9m4U
Was fordert im Moment der Arbeitsmarkt: https://dasauge.de/jobs/stellenangebote/?begriff=node.js