Mache die ersten Schritte in deiner Webdesign-Karriere mit diesem umfassenden Leitfaden für Anfänger*innen. Lerne die verschiedenen Theorien, Regeln, Best Practices und mehr kennen und tauche ein in den Wissenspool, den wir für dich vorbereitet haben.
Webdesigner*inn ist ein schöner Beruf – voll von Kreativität und Einzigartigkeit. Es lässt eine Website nicht nur schöner aussehen, sondern hat auch die Macht, Meinungen und Gefühle zu beeinflussen. Es ist daher sehr gefragt, und wenn du schon immer Webdesign lernen wolltest, dann ist jetzt der richtige Zeitpunkt!
Aber Webdesign umfasst viele Theorien, Regeln, bewährte Verfahren und andere Feinheiten, die du kennen solltest, und in diesem Meer von Wissen kann man sich leicht verirren.
Deshalb haben wir einen umfassenden Leitfaden zum Thema Webdesign für Anfänger*innen erstellt. Hier findest du alles, was du wissen musst, um deine Karriere im Webdesign zu starten. Fangen wir an.
Was ist Webdesign?
Webdesign ist der Prozess der Gestaltung der visuellen Schnittstelle einer Website. Mit anderen Worten: Web-Designer*innen gestalten alles, was wir online sehen. Webdesign umfasst nicht nur die Ästhetik, sondern bezieht sich auch auf die Benutzerfreundlichkeit einer Website oder einer mobilen Anwendung sowie auf die Gesamtstruktur und das Layout.
Webdesign unterscheidet sich von der Webentwicklung, die sich auf die eigentliche Codierung bezieht, die eine Website zum Funktionieren bringt. Webdesigner*innen konzentrieren sich auf das Front-End und die visuellen Aspekte einer Website, welche die Benutzerfreundlichkeit und die UX insgesamt beeinflussen.
Es gibt zwei Hauptziele beim Web-Design:
• Die Website soll gut aussehen.
• Es soll den Besuchern helfen, ihre Ziele auf der Website leicht zu erreichen.
Allgemeine Begriffe des Webdesigns
An dieser Stelle ist es nützlich, einige häufig verwendete Begriffe aus dem Bereich Webdesign zu kennen:
Benutzeroberfläche (UI) – Was Besucher sehen, wenn sie eine Website betreten: das Layout, die Navigation, Bilder, Farben, Typografie usw.
Benutzererfahrung (UX) – Wie sich die Besucher fühlen, wenn sie sich durch die Oberfläche einer Website bewegen und mit ihr interagieren.
Benutzerfreundlichkeit – Wie einfach es für Besucher ist, grundlegende Aufgaben zu erledigen. Wenn es beim Design Unstimmigkeiten gibt (von schlecht gewählten Grafiken bis hin zu komplizierten Menüs), stört dies die UX insgesamt.
Web-Designer*in – Die Person, die die visuelle und interaktive Schnittstelle einer Website gestaltet.
Webentwickler*in – Die Person, die den Code schreibt, der das visuelle Design in eine funktionierende Website verwandelt.
Als Anfänger solltest du die Grundlagen von UI und UX gut beherrschen. Wenn du dich später auf einen dieser Bereiche konzentrieren möchten, kannst du eine Karriere als Designspezialist*innen anstreben und gleichzeitig dein Gehalt aufbessern.
Aber fürs Erste sollten wir uns auf die Grundlagen konzentrieren.
Was sind die Webdesign-Prinzipien?
Die Grundsätze des Webdesigns legen so ziemlich die Regeln für das Spiel fest, das sollte also deine Ausgangsbasis sein. Eines der Probleme beim Einstieg in eine neue Karriere ist die überwältigende Menge an Dingen, die man lernen muss. Wo soll man also anfangen?
Jede Website, an der du arbeitest, sollte die folgenden Punkte erfüllen:
Ästhetische Benutzerfreundlichkeit – Menschen gehen davon aus, dass eine schön gestaltete Website leichter zu benutzen ist als eine unattraktive oder veraltete.
Jakobs Gesetz – Vertrautheit schafft Vertrauen. Wenn ein Element von Website zu Website einheitlich gehandhabt wird, solltest du nicht von der Norm abweichen.
Fittes Gesetz – Erhöhe die Interaktion und gestalte Berührungspunkte so, dass:
• Sie groß genug sind, um gefunden zu werden.
• Sie groß genug sind, um sie ohne Fehler anklicken zu können.
• Sie in einem Bereich platziert sind, der leicht zu erreichen ist.
• Es ausreichend Platz zwischen mehreren Berührungszielen in einem Bereich gibt.
Hick’s Gesetz – Verringere die Überforderung und minimiere die Anzahl der Schritte, die Besucher unternehmen müssen:
• Weniger Auswahlmöglichkeiten.
• Vereinfachung komplexer Aufgaben in kleinere, überschaubare Schritte.
• Empfehlungen für die beste/beliebteste/wertvollste Auswahl.
Gesetz der Prägnanz – Verwende erkennbare Formen und Elemente, um zu verhindern, dass Besucher verwirrt oder frustriert sind, wenn sie auf etwas stoßen, das zu komplex ist, um es zu verstehen.
Millersches Gesetz – Minimiere die visuelle Überfrachtung, indem du den Inhalt in Gruppen (mit fünf bis neun Elementen) organisieren.
Gestalt-Design-Gesetze – Das menschliche Gehirn nimmt auf, was es sieht, und versucht, daraus auf der Grundlage von Logik und Ordnung einen Sinn zu machen. Daher sollte dein Design den folgenden Struktur- und Musterregeln entsprechen:
• Ähnlichkeit
• Fortführung
• Geschlossenheit
• Annäherung
• Figur/Grund
• Symmetrie und Ordnung
Serieller Positionseffekt – Platziere die wichtigsten Teile ganz oben oder unten auf einer Webseite. Dies sind die Stellen, die am meisten im Gedächtnis bleiben und mit denen am meisten interagiert wird.
Spitzenwert-Ende-Regel – Der erste und der letzte Eindruck einer Website sind das, woran sich die Besucher am meisten erinnern. Während das gesamte Erlebnis erstklassig sein sollte, sollten der Einstieg in die Homepage und der Endpunkt makellos sein.
Was sind Webstandards?
Webstandards legen die Regeln für das Web als Ganzes fest. Im Allgemeinen drehen sie sich um die technischen Aspekte des Aufbaus einer Website, mit dem primären Ziel, das Web zu einem Ort zu machen, auf den jeder gleichermaßen zugreifen und ihn genießen kann.
Im Gegensatz zu den Grundsätzen des Webdesigns, die oft auf psychologischen Studien und Gesetzen beruhen, werden die Webstandards von einer Reihe von Gremien festgelegt und geregelt.
An der Spitze der Webstandards steht eine Organisation namens World Wide Web Consortium (W3C), die von Tim Berners-Lee (dem Erfinder des Webs) geleitet wird.
Dies sind die Hauptziele des W3C:
• Web for all – Erreicht durch die Erstellung zugänglicher und global freundlicher Websites.
• Web on Everything – Dies bezieht sich auf reaktionsfähiges Webdesign: vollständige Kompatibilität zwischen Browsern und Geräten für jede Website.
• Web for Rich Interaction – Richtlinien dafür, welche Programmiersprachen und -techniken verwendet werden sollten.
• Web of Data and Services – Bezieht sich auf das Datenmanagement innerhalb und zwischen Websites.
• Web of Trust – Die Priorisierung von Sicherheit und Datenschutz im Web.
Das W3C stellt eine Menge Hinweise bereit, was man alles bei der Erstellung von Websites tun und lassen sollte.
Dennoch ist es eine gute Idee, die Erforschung dieses Themas aufzuschieben, bis du alles andere, was du über Webdesign für Anfänger*innen wissen musst, gemeistert hast. Es ist nicht so, dass dieses Thema weniger wichtig wäre als der Rest. Es hat nur viel mit der technischen Verwaltung einer Website zu tun, eine Fähigkeit, die du mit der Zeit entwickeln wirst.
Was sind die wichtigsten Fähigkeiten, die man beherrschen muss?
Wenn wir schon von den Fähigkeiten sprechen, die du brauchen wirst, um Webdesigner*in zu werden, dann sollten wir ein paar Prioritäten setzen. Wir werden sie in zwei Kategorien einteilen: Hard Skills und Soft Skills.
Hard Skills, die Webdesigner*innen brauchen
Hard Skills beziehen sich auf technisches Wissen und Arbeitstechnik. Folgende Skills sind die wichtigsten, die du zu beherrschen solltest:
• UI-Design – Erstelle eine attraktive und moderne Benutzeroberfläche.
• UX-Entwurf – Entwerfe eine Website, die reibungslos funktioniert.
• Aufbau – Gestalte eine Website so, dass sie attraktiv und leicht zu verstehen ist.
• Typografie – Wählen und kombiniere Schriftarten, um eine Stimmung zu erzeugen und eine lesbare Oberfläche zu schaffen.
• Farbtheorie – Entwickle eine Farbpalette, die einer Website die richtige Emotion und Stimmung verleiht, ohne sie aus dem Gleichgewicht zu bringen.
• Reaktionsfähiges Webdesign – Entwerfe eine Website, die nicht nur auf allen Geräten und Browsern gut aussieht, sondern auch von einer Plattform zur anderen ein einheitliches Erlebnis bietet.
• Bildbearbeitung und -optimierung – Verwalte die Ästhetik, die Größe und das Gewicht von Bildern, um die Benutzerfreundlichkeit zu verbessern.
• SEO – Verbessere das Ranking einer Website durch technische Verbesserungen wie Bildkomprimierung, optimierte Suchmetadaten und reaktionsfähigem Design.
• HTML UND CSS – Programmiere mit den grundlegenden Programmiersprachen: HTML, um Text zu manipulieren, und CSS, um den Stil der Webseite zu ändern.
• JavaScript – Füge einer Webseite mit JavaScript Interaktivität hinzu.
• Web-Design-Tools – Erstellen von Wireframes, Mockups und Prototypen für eine Website mit professioneller Design-Software.
• Inhaltsverwaltungssysteme – Verwende einen Website-Builder, mit dem du konsistent leistungsstarke Websites für Kunden erstellen kannst.
Soft Skills, die Web-Designer*innen brauchen
Soft Skills sind Persönlichkeitsmerkmale, die es dir ermöglichen, als Web-Designer*in erfolgreich zu sein. Dies sind die wichtigsten, auf die du dich konzentrieren solltest:
• Projektmanagement – Plane Website-Aufträge und halte sie mit einem gut dokumentierten Prozess und einer Projektmanagement-Plattform auf Kurs.
• Disziplin – Engagiere dich zu 100 % für deine Arbeit, für jedes Projekt, für jeden Kunden und für alle Webdesign-Prinzipien und -Standards, die dir den Weg geebnet haben.
• Einfallsreichtum – Du weißt, wie du dir aus der Patsche helfen könntest und wie du die Dinge zum Laufen bringen kannst.
• Liebe zum Detail – Mache bei jedem „i“ einen Punkt und bei jedem „t“ einen Strich, damit die Kunden nie einen Grund haben, mit dir unzufrieden zu sein.
• Einfühlungsvermögen – Stelle keine Vermutungen über deine Kunden oder deren Zielgruppe an; nimm dir die Zeit, deren Bedürfnisse kennen zu lernen, damit du die bestmögliche Website erstellen kannst.
• Kommunikation – Lerne, mit Kunden in einer Sprache zu kommunizieren, die sie verstehen und die Vertrauen schafft.
• Kundenbetreuung – Sorge für ein hervorragendes Kundenerlebnis, indem du vom ersten Tag an die Verantwortung übernimmst und darauf vorbereitet bist, die Fragen der Kunden zu beantworten und sie während des gesamten Prozesses zu begleiten.
Wenn du diese Hard- und Soft-Skills des Webdesigns beherrschst, wirst du bessere Arbeit leisten und infolgedessen Kunden anziehen, die die Qualität deiner Arbeit wirklich zu schätzen wissen.
Wie läuft der Prozess des Webdesigns ab?
Webdesigner*innen folgen im Allgemeinen von Projekt zu Projekt einem ähnlichen Prozess. Die Dauer der einzelnen Phasen kann sich ebenso unterscheiden wie die Intensität der Aufgaben, aber die Schritte bleiben gleich.
Im Folgenden erfährst du, wie ein Webdesign-Prozess abläuft:
Schritt 1: Ausarbeitung der Projektspezifikationen
In dieser Phase erforschst du das Geschäft und die Bedürfnisse des Unternehmens und bestimmst, welche Art von Website benötigt wird (z. B. Blog, Website, E-Commerce usw.) und was genau du an Seiten und Funktionen erstellen musst. Ein Beispiel:
• Eine fünfseitige Bildungswebsite für eine gemeinnützige Organisation.
• Eine Portfolio-Website für einen professionellen Fotografen, über die Kunden Termine buchen können.
• Eine große Unternehmenswebsite für ein Softwareunternehmen, auf der Kunden Informationen über Produktfunktionen, Preise, häufig gestellte Fragen und vieles mehr finden.
Schritt 2: Plane das Projekt
Sobald du weißt, was du entwerfen willst, solltest du einen Zeitplan für das Projekt erstellen. So kannst du mehrere Website-Projekte unter einen Hut bringen und gleichzeitig sind diese Informationen auch sehr hilfreich für Kunden, die sich auf konkrete Meilensteine freuen können.
Wie du den Zeitplan erstellen, hängt vom Umfang des Auftrags und deiner Verfügbarkeit ab. Im Allgemeinen dauert jedoch jeder Schritt des Projekts länger als der vorherige.
Um die richtige Zeitspanne für jeden Schritt zu ermitteln, solltest du bei der Gestaltung einer neuen Website (auch wenn es deine eigene oder eine kostenlose Website für einen Freund*in oder Verwandten ist) ein Zeiterfassungstool verwenden. So kannst du besser abschätzen, wie viel Zeit du für jede Phase einplanen musst. Vergiss aber nicht, dass du bei Projekten für Kunden auch Zeit für Feedback einplanen solltest.
Schritt 3: Recherchiere
Der Einführungsprozess ist für Webdesigner*innen ein kritischer Prozess. Wenn du im Vorfeld nicht die richtigen Fragen stellst, kann es passieren, dass du später viele Überarbeitungen vornehmen musst (was nicht nur zu einem verpassten Abgabetermin führen kann, sondern auch zu einer Ausweitung des Projektumfangs und zu Gewinneinbußen).
Bevor du jedoch mit der Recherche beginnst, musst du zunächst einen Fragebogen zum Website-Design erstellen, um alle wichtigen Informationen, Dateien und Logins von deinem Kunden zu sammeln. Dieser Fragebogen bildet die Grundlage für deine Recherchen.
In dieser Phase solltest du dich mit folgenden Punkten befassen:
• dem Kunden und seiner Marke (falls sie eine Geschichte hat)
• der Zielgruppe, die sie anspricht
• die Konkurrenz
• Die Branche als Ganzes
Sobald du eine Vorstellung davon hast, kannst du einen Plan für das Design und den Ansatz der Website erstellen.
Schritt 4: Erstelle einen Style Guide
In einem Styleguide dokumentierst du die visuelle Strategie für eine Marke und ihre Website.
Es gibt eine Reihe von Gründen, warum ein Styleguide nützlich ist:
• Er ermöglicht es dir, frühzeitig eine klare Vision für die Website zu entwickeln.
• Du kannst mit anderen Designern zusammenarbeiten
• Du kannst ihn deinen Kunden mitgeben, um sicherzustellen, dass er (oder sein zukünftiger Designer) die visuelle Identität, die du für ihn geschaffen hast, beibehält.
Um einen Styleguide zu erstellen, musst du Regeln für die wichtigsten visuellen Elemente der Website aufstellen (wie Typografie, Logoverwendung, Farben usw.).
Schritt 5: Erstellen der Sitemap
Wie auch immer du es nennen willst – Informationsarchitektur, Sitemap, Navigation oder Menü – dies ist die erste wichtige Komponente, die du für die Website festlegen wirst.
Die Sitemap ist nicht nur eine Liste von Seiten, die in die Website aufgenommen werden sollen. Sie legt die Hierarchie und die Beziehungen zwischen den Seiten fest. Dies ist wichtig, denn die Art und Weise, wie du die Seiten miteinander verbindest, kann die Benutzerfreundlichkeit deiner Website verbessern oder verschlechtern.
Schritt 6: Erstellen von Wireframes, Mockups und Prototypen für deine Website
Dies ist eigentlich eine dreistufige Phase, die es dir ermöglicht, eine Website schrittweise von Grund auf aufzubauen.
Wireframes – Wireframes sind Grundrisse deiner Seiten. Du skizzierst den Aufbau, verwendest Platzhalter, um zu zeigen, wo der Inhalt hingehört, und legst fest, wie die einzelnen Blöcke und Elemente positioniert und dimensioniert werden sollen.
Du kannst Wireframes ganz klassisch mit Stift und Papier erstellen, ein Wireframing-Tool verwenden oder sie direkt in WordPress mit Elementor erstellen.
Hinweis: Wenn du dich in dieser und der nächsten Phase für WordPress entscheiden, ist es am besten, dies auf einer Staging-Site und nicht auf der Live-Domain des Kunden zu tun.
Mockups – Mockups sind statische Designdateien. Sie sehen genauso aus wie eine Webseite, sind aber nicht interaktiv.
Durch das Entwerfen von Mockups hast du die Möglichkeit, alle Fehler im Design, im Layout, in den Elementen usw. auszubügeln, bevor du das Ganze in einen funktionierenden Prototyp überträgst.
Du solltest deine Mockups mit einem ähnlichen (wenn nicht demselben) Tool entwerfen, das du auch für die Erstellung der Wireframe verwendest, hast. Wenn dein Wireframe z. B. in WordPress erstellt wurde, ist es sehr sinnvoll, auch dein Mockup dort zu erstellen.
Prototypen – Prototypen sind die interaktive Version von Mockups. Beim Prototyping erstellst du Verbindungen zwischen den Seiten und animierst andere interaktive Elemente auf der Seite.
So hast sowohl du als auch dein Kunde die Möglichkeit, deine Entwürfe in Aktion zu sehen.
Auch hier sollte das Tool, das du für deine Wireframes und Mockups verwendest, zum Einsatz kommen (wenn möglich).
Schritt 7: Erstellen der Website
Wenn du deine Wireframes, Mockups und Prototypen in WordPress entwirfst, benötigst du keinen eigentlichen Webentwicklungsschritt, da du dies bereits getan hast.
Wenn du jedoch alles mit Webdesign-Software und anderen Tools entworfen hast, musst du deinen Prototyp in eine WordPress-Website umwandeln.
Schritt 8: QA deine Website
Während des gesamten Webdesign-Prozesses solltest du dich bei wichtigen Meilensteinen mit dem Kunden absprechen. Indem du dir während des gesamten Prozesses ihr Feedback einholst, kannst du dir überflüssige Überarbeitungen in dieser Phase vermeiden.
Sobald die Website in WordPress fertiggestellt ist, musst du sie an zwei Parteien zum Testen weiterleiten:
• An dein internes Qualitätssicherungs-Team (oder ein Teammitglied). Es wird eine vollständige Überprüfung vornehmen und sicherstellen, dass es keine Probleme gibt, von defekten Links bis zu langsam ladenden Seiten und allem, was dazwischen liegt. Wenn du allein arbeitest, kannst du dies auch selbst tun.
• An deinen Kunden. Er muss die Website vor dem Start absegnen. In dieser Phase kann er dies mit einer funktionierenden Website tun und nicht nur mit einem Entwurf, der sich noch in der Entwicklung befindet.
Schritt 9: Start
Wenn alle erforderlichen Genehmigungen vorliegen, ist es an der Zeit, die Website zu starten.
Was ist die beste Webdesign-Software für Einsteiger*innen?
Jeder Webdesigner sollte sich die Zeit nehmen, einen eigenen Werkzeugkasten anzulegen. Hier sind die wichtigsten Webdesign-Tools, mit denen du beginnen solltest:
WordPress
Eine der Möglichkeiten, sich als Webdesigner*in zu spezialisieren, besteht darin, sich für ein Content-Management-System (CMS) zu entscheiden, mit dem man Websites erstellt.
WordPress ist seit langem der amtierende CMS-Champion, und das liegt vor allem daran, dass es Webdesignern mehr Möglichkeiten bietet, eine Website zu gestalten, als dies mit anderen Website-Baukästen möglich ist.
Allerdings muss man sich an WordPress erst einmal gewöhnen. Aber es lohnt sich, denn du kannst viel leistungsfähigere, größere und funktionsreichere Websites für deine Kunden erstellen.
WordPress-Themen
Ein WordPress-Theme ist eine vorgefertigte Website-Vorlage. Jede Website muss über ein Theme verfügen, auch wenn du einen Builder wie Elementor für die Gestaltung verwenden möchtest.
Wenn ein Theme in WordPress installiert wird, verleiht es der Website nicht nur ein vorgefertigtes Design, sondern fügt auch Platzhalterseiten und Inhalte hinzu. Dies ist eine großartige Möglichkeit für Designanfänger*innen, Zeit bei der Erstellung der Basiselemente einer Website zu sparen.
Als Webdesigner*in solltest du eine Handvoll Themes finden, mit denen du dich wirklich wohlfühlst und die für deine Nische gut geeignet sind. Auf diese Weise musst du dich nicht bei jedem neuen Projekt in ein neues Theme einarbeiten und kannst noch mehr Zeit mit der Anpassung des Designs verbringen.
Elementor
Es gibt eine Reihe von Gründen, ein Seitenerstellungs-Plugin wie Elementor zusätzlich zu deinem WordPress-Theme zu verwenden:
• Es ist ein visueller Drag-and-Drop-Editor, mit dem du in Echtzeit gestalten kannst.
• Er verwandelt den unfreundlichen WordPress-Editor in einen kundenfreundlichen Block-Editor.
• Du hast die Flexibilität, Designvorgaben zu verwenden oder deinen eigenen benutzerdefinierten Stil zu kodieren.
• Du kannst eine Webseite von Grund auf neu entwerfen oder WordPress-Vorlagen für Abschnitte oder ganze Seiten verwenden, um sie zu erstellen.
• Der Builder wird auch mit Template-Kits geliefert, die ähnlich wie ein Theme funktionieren und vollständig mit Elementor kompatibel sind.
• Das Elementor Page Builder Plugin passt sich an dich und deine bevorzugte Arbeitsweise als Webdesigner*in an, was es zu einem Webdesign-Tool macht, mit dem du wachsen kannst.
WordPress-Plugins
WordPress-Plugins sind Erweiterungen, die die Eigenschaften und die Funktionalität einer Website ausbauen. Plugins können dir helfen, Dinge zu tun wie:
• Sicherheitsfunktionen hinzufügen.
• Gestaltung und Planung von Pop-ups für verschiedene Seiten.
• Google Analytics-Tracking mit der Website verbinden.
• Caching und andere Geschwindigkeitsoptimierungen implementieren.
• Komprimieren deiner Bilder.
• Und vieles, vieles mehr.
Als angehender Webdesigner*in (oder sogar als Profi) ersparen dir WordPress-Plugins die Mühe, jeden Zentimeter einer Website zu programmieren.
Bedenke jedoch, dass Plugins Platz auf deinem Server beanspruchen und Schwachstellen in deine Website einbringen können, wähle also mit Bedacht.
Hinweis: Wenn du dich dafür entscheidest, die anfängliche Planungs- und Designarbeit außerhalb von WordPress zu erledigen, benötigst du zusätzliche Webdesign-Software für deinen Werkzeugkasten. Beginnen hier:
GlooMaps/Slickplan – Bevor du mit dem Design beginnst, solltest du dich um die Navigation deiner Website kümmern. Du kannst ein Tool wie GlooMaps oder Slickplan verwenden, um visuelle Sitemaps zu erstellen.
Dieses Tool ist nützlich, um die Informationsarchitektur deiner Website zu planen: welche Websites in die Navigation aufgenommen werden sollen und wie sie zueinander in Beziehung stehen.
Skizze/Photoshop – Obwohl es sicherlich einfacher ist, Wireframes, Mockups und Prototypen direkt in WordPress zu entwerfen, kannst du auch professionelle Design-Software wie Sketch und Photoshop verwenden.
Diese Design-Tools können während des gesamten Lebenszyklus eines Auftrags für verschiedene Zwecke verwendet werden:
• Grafisches Design
• Fotobearbeitung
• Website-Design und -Planung
Auch wenn du WordPress in erster Linie für die Erstellung deiner Websites verwendest, kannst du diese Tools dennoch nutzen.
Atom/Visual Studio Code – Auch wenn du vielleicht keine integrierte Entwicklungsumgebung (IDE) benötigst, wenn du zum ersten Mal mit der Gestaltung von Websites beginnst, kannst du Atom oder Visual Studio Code im Laufe der Zeit nützlich finden.
IDEs sind Plattformen zum Schreiben und Bearbeiten von Code. Sie erleichtern nicht nur das Schreiben von Code in einer isolierten Umgebung, sondern du kannst deinen Code hier auch ausführen und debuggen.
Lokal mit Flywheel/MAMP – Es gibt mehrere Möglichkeiten, eine lokale oder Staging-Umgebung für deine WordPress-Projekte einzurichten.
Du kannst dein Webhosting-Konto verwenden, um einen Staging-Server zu erstellen. Du kannst auch ein lokales WordPress-Entwicklungstool wie Local by Flywheel oder MAMP verwenden.
In jedem Fall besteht das Ziel darin, eine WordPress-Website vor den neugierigen Blicken deiner Kunden zu schützen und sie gleichzeitig von potenziellen Besuchern und den Google-Indexierungsrobotern fernzuhalten, während sie noch in Arbeit ist.
Wenn Du wirklich versuchst, deinen Prozess auf WordPress zu beschränken, kannst du den WordPress-Wartungsmodus verwenden, um Besuchern und Google mitzuteilen, dass die Website noch nicht bereit ist, besucht zu werden.
Wo kannst du Web-Design lernen?
Eine der häufigsten Fragen, die wir in der Webdesign-Community hören, ist: „Brauche ich einen Abschluss, um Web-Designer zu werden?“
Die Antwort darauf ist nein, aber es wird dir auch nicht schaden.
Die Wahrheit ist, wenn es darum geht, wie man Webdesign lernt, hast du die Wahl. Wenn du meinst, dass du ein reglementiertes Universitätsprogramm brauchen, um ein meisterhafter Designer zu werden, dann nur zu. Wenn du jedoch den Weg des Autodidakts bevorzugst, gibt es eine Vielzahl von Ressourcen, die du nutzen kannst.
Denke nur daran, dass es in jedem Fall Zeit und Übung braucht.
Für diejenigen unter euch, die den DIY-Ansatz bevorzugen oder einfach nur die bereits erworbenen Designfähigkeiten verbessern möchten, sind die folgenden Ressourcen genau das Richtige.
Bücher für Web-Designer
Wenn du eine umfassende Ausbildung zu Themen des Webdesigns für Einsteiger*innen erhalten möchtest, beginne mit diesen Büchern über Webdesign und -entwicklung. Sie decken die gesamte Bandbreite an Themen ab, darunter:
• Grundlagen der Webgestaltung
• Einführung in die Codierung mit HTML und CSS
• Programmiertutorials für JavaScript und PHP
• Entwerfen mit WordPress
• Tipps zur Benutzerfreundlichkeit und Strategie
• Design-Systeme
• Und vieles mehr
Online-Kurse für Web-Designer
Es gibt eine Vielzahl von Online-Kursen, die Anfängern die Grundlagen des Webdesigns vermitteln.
Wenn du Zugang zu einer Fülle von Bildungsressourcen haben möchtest – und zwar zu einer Vielzahl von Themen – ist eine Mitgliedschaftskurs-Website eine gute Option. Dort gibt es eine gute Mischung aus kostenlosen und kostenpflichtigen Inhalten.
Achten darauf, dass die Videoinhalte nicht nur von Fachleuten stammen. Einige dieser Websites bieten Kurse von einigen der besten Universitäten der Welt an. Du kannst also tatsächlich ein formales Schulungsprogramm absolvieren – nur eben bequem von zu Hause aus, im Büro oder in einem Café und nicht in einem Hörsaal.
YouTube-Kanäle für Web-Designer
Während sich Bücher und Online-Kurse hervorragend eignen, um ein bestimmtes Thema umfassend zu erlernen (z. B. HTML-Code oder die Grundlagen der Farbtheorie), eignen sich YouTube-Videos am besten, um neue Fertigkeiten im Handumdrehen zu erlernen und sich über die neuesten Webdesign-Trends auf dem Laufenden zu halten.
Achte bei der Auswahl eines YouTube-Kanals darauf, dass der Lehrer ein Webdesign-Experte ist, dass er regelmäßig Inhalte veröffentlicht und diese auch aktuell sind. Du willst Lektionen, die dir bei der Gestaltung von Websites von heute helfen, nicht von vor zwei Jahren.
Hier sind einige Kanäle, die regelmäßig aktuelle Tutorials zu Webdesign, WordPress und mehr veröffentlichen:
• NNgroup: Schnelle Tipps und Tutorials zum Thema User Experience Design.
• Chris Coyier: CSS-Design-Tutorials sowie Tipps zur Verwaltung der technischen Hintergründe einer Website.
• Jesse Showalter: Live-Walkthroughs, die zeigen, wie man Mockups, Prototypen und responsive Websites entwirft.
• Elementor Website Builder für WordPress: Anleitung, wie man das Beste aus Elementor herausholt.
• Flux: Tipps für die geschäftliche Seite und das Kundenmanagement eines Web-Designers.
Blogs für Webdesigner
Für diejenigen unter euch, die sich gerne anhand von schriftlichen Tutorials und Leitfäden weiterbilden, sind Blogs eine gute Option. Sie sind eine unerschöpfliche Quelle für Informationen über Webdesign für Anfänger, erfahrene Experten und alle dazwischen.
Hier sind einige der besten Webdesign-Blogs, mit denen du beginnen kannst:
• Webdesigner Depot: Hier erhältst du schnelle Einblicke in die Welt des Designs sowie kurze, aber nützliche Design- und Codierungsanleitungen.
• Smashing Magazine: Dieser Blog veröffentlicht umsetzbare Anleitungen für Webdesigner*innen und -entwickle*innen und stellt den Lesern oft neue und innovative Ansätze und Trends vor.
• WPBeginner: Alles, was du jemals mit einer WordPress-Website machen wolltest, wird in diesem Blog in klaren und ausführlichen Details behandelt.
• Elementor-Blog: Erfahre, wie du als Webdesigner einsteigen, WordPress optimal nutzen und mit dem Elementor Website-Builder maximale Ergebnisse erzielen kannst.
• Awwwards Blog: Hier kannst du zwar etwas über UX-Design lernen, aber der Hauptgrund, diesem Blog zu folgen, sind die auffälligen Website-Beispiele und Inspirationen, die in jedem Beitrag enthalten sind.
Podcasts für Web-Designer
Wenn du unter Zeitdruck stehst, kannst du mit Podcasts dein Web-Design-Lektionen überallhin mitnehmen. Darüber hinaus vermitteln Podcasts Wissen über Webdesign auf eine andere Art und Weise als Blogs, Videos oder Kurse. Oft lernst du von den persönlichen Erfahrungen echter Designer.
Hier sind einige Podcasts, die sich eher an Webdesign-Anfänger*innen richten:
Presentable: Erfahre, warum Webdesign-Prinzipien und Webstandards für ein positives Nutzererlebnis wirklich entscheidend sind.
Die Boagworld UX-Show: Jede Staffel ist einem anderen Thema gewidmet: dem Webdesign-Prozess, grundlegenden Designfähigkeiten, UX-Best Practices und mehr.
Kitchen Sink WP: Diese Show ist ein Sammelsurium von Inhalten, die von Tipps zur Entwicklung von Geschäftsprozessen bis zur Verwaltung des Backends einer Website reichen.
Honest Designers: Hole dir hilfreiche Tipps und Tricks, wie du in deinen ersten Tagen als Webdesigner*in gut durchstarten kannst.
Hallway Chats: Mitglieder der WordPress-Community berichten von ihren Schwierigkeiten und Erfolgen, die sie bei der Arbeit in diesem Bereich erlebt haben.
übersetzt von Sarah van der Linden
von Website Freiburg
Quelle, unser Websoftware Partner Elementor Pro:
www.elementor.com/blog/how-to-become-web-designer
