Steht das Erlernen der Grundlagen des Webdesigns immer noch auf Ihrer „irgendwann“ -Liste? Warum hast du noch nicht angefangen? Wir haben 30 Tipps und Ressourcen zusammengestellt, die Ihnen helfen, diesen Monat mit dem Erlernen von Webdesign zu beginnen (und vielleicht sogar einen neuen Karriereweg zu finden!)

Grafikdesigner, Druckdesigner und Kreative, die etwas Neues lernen oder in die Website einsteigen möchten, müssen aufhören zu zögern. Jeder Tag, an dem Sie diesen ersten Schritt nicht machen, lässt Sie einen Tag weiter hinter allen anderen zurück!Befolgen Sie diese Schritte, um zu lernen, wie Sie Ihre erste Website erstellen, Best Practices der Branche und vieles mehr – alles in 30 Tagen!

Starten Sie eine Website

Der beste Weg, um Webdesign zu lernen, ist, damit zu beginnen. Das ist der Rat von David Kadavy, Autor von Design <für> Hacker.

Ich empfehle Ihnen, einen Blog zu starten. Ich habe einen Blog gestartet, nur um einen Webdesign-Spielplatz zu haben, und 7 Jahre später habe ich ein Bestseller-Buch zu diesem Thema veröffentlicht. Ein persönliches Projekt, wie ein Blog, gibt Ihnen einen Ort, an dem Sie neue Dinge ausprobieren können, und Ihr Chef wird Sie nicht feuern, wenn Sie es vermasseln.

Sie müssen nicht mit einer riesigen Website oder einem verrückten Design beginnen. Spielen Sie mit der Website, herauszufinden, was macht die Dinge funktionieren. (Und stellen Sie sicher, dass Sie den Code überprüfen, damit Sie sich mit den Funktionen Ihrer Website vertraut machen können.)

Möchten Sie schnell loslegen? Ein Website-Builder wie Wix kann Ihnen dabei helfen, einen Vorsprung mit einem stilvollen Website-Design zu erzielen, wenn Sie beginnen, die Konzepte und Bausteine einer Website zu erlernen.

Lies alles, was du kannst

Fang an zu lesen. Da Sie auf diesem Blog sind, sind Sie wahrscheinlich daran gewöhnt, den Überblick zu behalten, was in der Welt des Designs passiert. Lesen Sie weiter.Lesen Sie alles, was Sie über Website-Design, Trends, Techniken und Best Practices wissen können. Folgen Sie Designern, die Sie in den sozialen Medien bewundern.

Werfen Sie auch ein weites Netz für Ihre Website-Design-Lektüre. Lesen Sie über die Grundlagen, um Code zu lernen, lesen Sie über Designtheorie und lesen Sie Tutorials und aktuelle Artikel.

Seien Sie ein effektiver Kommunikator

Wenn Sie nicht die artikulierteste Person sind, sollten Sie diese Fähigkeiten auffrischen. Ein großer Teil des Website-Designs ist die Kommunikation.

Website-Designer müssen regelmäßig mit Kunden kommunizieren, um herauszufinden, welches Problem das Design lösen muss; Sie müssen diese Lösungen kommunizieren und auch implementieren.

Abonnieren Sie Tuts+ & Envato Elements

Erwägen Sie ein Abonnement für Envato Elements, mit dem Sie auch auf die hervorragende Tuts + -Lernressource zugreifen können.

Tuts+ veröffentlicht regelmäßig Kurse zu Grafik- und Webdesign, von grundlegenden Techniken bis hin zu den neuesten fortgeschrittenen Ansätzen und Entwicklungen. Es ist völlig selbstgesteuert und wird von erfahrenen Lehrern unterrichtet. Sie erhalten auch Zugriff auf Envato Elements, eine großartige Ressource zum Auffinden von Grafiken, Vorlagen und mehr, die Sie in Ihre Webdesign-Arbeit integrieren können.

Denken Sie in HTML

HTML oder Hypertext Markup Language ist ein Eckpfeiler des Website-Designs. HTML ist das Skelett, das hilft, die Struktur einer Website zu erstellen, und sobald Sie die Sprache lesen können, wird die Welt des Website-Designs viel mehr Sinn machen.

W3Schools hat ein großartiges HTML-Starter-Tutorial mit Hunderten von HTML-Beispielen, mit denen Sie auf dem Bildschirm spielen können, um zu sehen, was passiert und wie es genau funktioniert. (Sie könnten es intuitiver finden, als Sie es sich vorgestellt haben.)

Spielen Sie mit Code bei Codeacademy

Während HTML ein guter Anfang ist, können Sie fast jede Programmiersprache von Codeacademy lernen. Mit den kostenlosen Tools lernen Sie, mithilfe interaktiver Aktivitäten und Spiele zu codieren.

Sie können einen Codeacademy-Kurs abholen, wo und wann Sie ihn benötigen, und nach Bedarf starten und stoppen. Wählen Sie ein Thema aus, das Sie lernen möchten – Webentwicklung, Programmierung, Datenwissenschaft – oder eine Sprache, auf die Sie sich konzentrieren möchten – HTML & CSS (ein großartiger Ausgangspunkt), Python, Java, SQL, Ruby und mehr.

Lernen Sie CSS zu verstehen

CSS oder Cascading Style Sheets definieren die Präsentation eines in HTML oder XML und SVG geschriebenen Dokuments.

Wie von Mozilla definiert

CSS beschreibt, wie Elemente auf dem Bildschirm, auf Papier, in Sprache oder auf anderen Medien gerendert werden sollen.

Mozilla hat auch eine große Sammlung von CSS-Ressourcen, um loszulegen, mit einer soliden Einführung in die Funktionsweise von CSS, einschließlich Selektoren und Eigenschaften, Schreiben von CSS-Regeln, Anwenden von CSS auf HTML, wie man Länge, Farbe und andere Einheiten in CSS, Kaskade und Vererbung, Box-Modell Grundlagen und Debugging CSS. Fahren Sie dann fort, um das Styling von Text und Feldern zu erklären.

Wenden Sie Ihre Designfähigkeiten auf das Web an

Wenn Sie bereits in einem kreativen oder grafischen Designbereich arbeiten, denken Sie über die Dinge nach, die Sie bereits wissen, dass Sie sie auch auf das Website-Design anwenden können. Die Prinzipien, die etwas visuell ansprechend machen, ändern sich nicht je nach Medium und all diese Designtheorie wird sich auch im digitalen Raum als nützlich erweisen.

Während sich Elemente wie das Erlernen von Code möglicherweise nicht natürlich anfühlen, ist ein Designhintergrund ein großer Bonus. Was nützt eine schön codierte Website, wenn man nicht mit ihr interagieren möchte?

Achten Sie auf Websites, die Sie lieben

Beachten Sie Websites, die Sie lieben. Was an ihnen reizt Sie? (Und wie können Sie lernen, diese Elemente zu replizieren?) Achten Sie auf:

• Typografie
• Navigation
• Verwendung von Bildern und Raum
• Gestaltung von Formularen
• Animation und Scroll-Effekte
• Farbe

Zeichnen Sie ein Drahtmodell

brainstorming des Designers.

In seiner reinsten Form ist ein Wireframe eine Skizze dessen, was die Website sein wird. Es ist kein Umriss ästhetischer Elemente, sondern eine Blaupause der Website. Beim Zeichnen eines Drahtgitters geht es nicht wirklich um das Aussehen dieses Designs, sondern um die darin enthaltene Informationsstruktur.

Sie sind sich nicht sicher, wie Sie ein Wireframe erstellen sollen? Digital Telepathy hat einen Leitfaden mit Best Practices, der Ihnen beim Lernen hilft.

Nehmen Sie sich etwas Zeit, um Sketch zu lernen

Sketch ist ein Vektor-Zeichenwerkzeug für Mac, mit dem Sie ganz einfach Designelemente erstellen können. Viele Designer wenden sich Sketch zu, um UI-Elemente und sich wiederholende Designblöcke zu erstellen.

Es ist vollgepackt mit Plugins und ermöglicht es Ihnen, Code für die einfache Verwendung und den Zugriff zu exportieren. Es ist eines der leistungsstärksten und beliebtesten Tools seit Adobes Creative Suite und Ihre Zeit wert.

Bleiben Sie auf dem Laufenden mit der Technologie

AI, VR, AR, 360-Grad-Video, Bots.

Es kann schwierig sein, mit so vielen neuen Technologien und Trends Schritt zu halten. Aber Sie müssen einen Punkt machen, um über diese Änderungen auf dem Laufenden zu bleiben.

Gehen Sie sie einzeln an und beginnen Sie mit Technologien, die am unmittelbarsten mit Ihrer Arbeit zusammenhängen. Wenn Sie eine Website mit Online-Chat haben, lernen Sie zunächst Bots kennen. Oder wenn Sie viele Videoinhalte verwenden, spielen Sie mit 360-Grad-Videos herum.

Elemente wie künstliche Intelligenz und virtuelle oder erweiterte Realität sind noch komplexer, werden aber wahrscheinlich später zu integrierten Bestandteilen der Website-Designlandschaft. Zumindest sollten Sie wissen, was sie sind und was die möglichen Anwendungen sein könnten.

Get Comfortable with SEO

Während viele Webdesigner denken, dass ein SEO-Spezialist damit umgehen kann, eine Website für Suchmaschinen lesbar zu machen, gibt es eine Menge Designarbeit, die mit SEO verbunden ist.

Von der Art und Weise, wie Bilder hochgeladen werden, über die Erstellung von sauberem Code, der schnell ist, bis hin zur Einbeziehung von Meta-Beschreibungen auf Seiten und Elementen sollte der Designer Suchgedanken in seinen Workflow integrieren.

Freiberufler, das ist auch für Sie von entscheidender Bedeutung. Die meisten Kunden sind versiert genug, um nach einer SEO-optimierten Website zu fragen. Wenn Sie alleine arbeiten, müssen Sie genug wissen, um ein solides Framework zu erstellen, das Google lesen kann (und in der Lage sein, den Kunden an einen SEO-Spezialisten zu verweisen, wenn mehr Arbeit erledigt werden muss).

Spielen Sie mit einem Website-Builder

Ein Website-Builder kann eine großartige Möglichkeit sein, sich mit Best Practices vertraut zu machen und mit dem Erstellen und Entwerfen von Websites zu beginnen.

Die meisten dieser Tools verfügen über zahlreiche Vorlagen und ermöglichen es Ihnen, Elemente anzupassen und sogar Codeausschnitte hinzuzufügen. Für einfache Websites haben viele Website-Builder auch einen kostenlosen Plan, in dem Sie eine persönliche Portfolio-Seite oder eine grundlegende Website erstellen können, die als Spielplatz für Sie dient.

Nehmen Sie dann die Teile im Website-Builder auseinander. Schauen Sie sich an, wie sie entworfen und codiert sind, um ein Gefühl dafür zu bekommen, wie alles zusammenkommt. Sie werden erstaunt sein, was Sie herausfinden können, indem Sie einfach ein anderes Design auswählen.

Finden Sie einen Mentor

Gibt es jemanden, mit dem Sie als Webdesigner zusammenarbeiten? Nehmen Sie sie zum Mittagessen und holen ihr Gehirn über die Branche.Es kann von unschätzbarem Wert sein, einen Mentor zu finden, der bereit ist, mit Ihnen zusammenzuarbeiten und Ihnen zu helfen, über das Feld nachzudenken und selbst Webdesign zu lernen. Und während Sie wahrscheinlich einen Mentor in einer Online-Community finden können, Nichts ist besser als eine lebende Person, die Sie regelmäßig von Angesicht zu Angesicht treffen können. (Vielleicht lohnt es sich, Online- und persönliche Mentoren zu haben.)

Treten Sie der CodePen-Community bei

Sobald Sie sich mit Code und Programmierung vertraut gemacht haben, möchten Sie der CodePen-Community beitreten. Die Open-Source-Community ermöglicht es Ihnen, Code-Snippets in einem sozialen Netzwerk zu teilen und zu bearbeiten.

Hier ist ein wenig mehr von den Gründern der Website: „CodePen ist eine soziale Entwicklungsumgebung. Im Kern können Sie Code im Browser schreiben und die Ergebnisse beim Erstellen anzeigen. Ein nützliches und befreiendes Werkzeug für Entwickler aller Fähigkeiten und insbesondere für Menschen, die Programmieren lernen. Wir konzentrieren uns hauptsächlich auf Front-End-Sprachen wie HTML, CSS, JavaScript und Vorverarbeitungssyntaxen, die sich in diese Dinge verwandeln.“

Nehmen Sie an einer Klasse teil

Für einige Lernende ist ein formelleres Klassenzimmer am besten.

Es gibt eine Menge Kurse – persönlich und online -, in denen Sie die Grundlagen des Webdesigns erlernen können. Beginnen Sie mit einem lokalen College oder Online-Lernzentren wie Udemy oder Coursera. Wählen Sie eine Klasse auf Ihrem aktuellen Fähigkeitsniveau und machen Sie einfach weiter.

Möchten Sie etwas unternehmen? Google It

Für die nicht-so-traditionellen-Lerner, finden Sie die Antwort auf das Web-Design-Problem auf Google. Es gibt so viele Tutorials und Videos, die Sie durch fast jedes Problem führen können – und Lösung.

Der Schlüssel ist, genau das zu suchen, was Sie wissen müssen, und nach einer seriösen Quelle für die Antwort zu suchen. Hier ist ein weiterer Tipp, wenn es um Tutorials und Videos geht – neuere Inhalte werden Ihnen wahrscheinlich eine bessere, vollständigere und relevantere Antwort geben. (Denken Sie daran, einige dieser Dinge ändern sich schnell.)

Achten Sie auf die User Experience

Nichts kann eine Website wie User Experience Design machen oder brechen. Sie müssen es planen und verstehen.

So beschreibt die Interaction Design Foundation UX Design:

User Experience (UX) Design ist der Prozess der Erstellung von Produkten, die sinnvolle und persönlich relevante Erfahrungen bieten. Dies beinhaltet die sorgfältige Gestaltung sowohl der Benutzerfreundlichkeit eines Produkts als auch der Freude, die die Verbraucher an der Verwendung haben. Es befasst sich auch mit dem gesamten Prozess des Erwerbs und der Integration des Produkts, einschließlich Aspekten von Branding, Design, Benutzerfreundlichkeit und Funktion.

UX-Designer oder Designer, die sich des Prozesses der Erfahrungsbildung bewusst sind, versuchen, die Faktoren, die den Prozess beeinflussen, bewusst zu gestalten und zu gestalten. Um dies zu tun, wird ein UX-Designer das Warum, Was und Wie der Produktnutzung berücksichtigen.

Achten Sie auf Designtrends

Wie sieht ein modernes Website-Design aus? Es ist keine Trickfrage. Um moderne Websites und Benutzererlebnisse zu gestalten, müssen Sie wissen, was Benutzer wollen und wie sie damit interagieren. Wenn Sie das letzte Mal 2016 eine App heruntergeladen oder eine Website auf Ihrem Telefon angesehen haben, müssen Sie viel nachholen.

Das Erstellen von Website-Designs mit modernen Elementen und Trends, die in das Design integriert sind, hilft Ihren Projekten, sich abzuheben. Woher wissen Sie, was im Trend liegt? Lesen Sie solche Websites weiter und achten Sie darauf, was andere Designer tun. Beachten Sie Farben, Stile und Funktionen, die in den Websites enthalten sind, die Sie häufig besuchen.

Ohne Farbe erstellen

Starten Sie jedes Design ohne Farbe. Ein großer Designer hat mir einmal gesagt, dass, wenn Ihr Design in schwarz und weiß arbeitet, wird es in der Farbe einwandfrei sein.

Das ist vielleicht nicht immer der Fall, aber es ist ein guter Ausgangspunkt.

Wenn Sie Designs in Schwarz-Weiß erstellen, können Sie sehen, wo sich Elemente kontrastieren und wie sie zusammenspielen. Sie haben alle emotionalen Assoziationen mit Farbe oder Augenbewegungen beseitigt, die dadurch entstehen. Diese einfachste Form des Designs gibt Ihnen eine Vorstellung davon, ob etwas als Konzept funktioniert, bevor Sie mit der Fertigstellung fortfahren.

Lerne Google Fonts zu lieben

Google Fonts ist dein Freund.Unabhängig davon, wie Sie über Google denken, ist die Fähigkeit, Schriften zu durchsuchen, zu sortieren und auszuwählen, von denen Sie wissen, dass sie in Website-Designs funktionieren, wichtig. Sie müssen nicht über die Lizenzierung nachdenken oder darüber, ob Schriften mit bestimmten Browsern kompatibel sind oder nicht.

Die Einschränkung besteht darin, dass Sie nur mit den Google Fonts-Bibliotheken arbeiten können. Aber wenn Sie es versuchen, können Sie etwas finden, das zu fast jedem Projekt passt. Es wird Ihnen auf lange Sicht viel Zeit sparen.

Wählen Sie ein UI-Kit aus

Laden Sie ein Benutzeroberflächen- oder Icon-Kit herunter und wählen Sie es aus.

So wie Sie den Code einer Website überprüfen können, schauen Sie sich an, wie Designelemente für das Web erstellt werden. Beachten Sie den Maßstab und das Raster, sehen Sie sich die Farbmischungen an und wie Dateien in Photoshop oder Illustrator organisiert sind.

Suchen Sie nach einem Kit zum Herunterladen, das Elemente in mehreren Formaten für hochauflösende Displays enthält. (Das Herunterladen einer Reihe von JPEGs wird Ihnen nicht so gut dienen.)

Versuchen Sie dann, ein oder zwei eigene Elemente zu erstellen oder anzupassen.

Typograf werden

Modernes Website-Design hat einen starken Fokus auf Typografie … gute Typografie. Von Hero-Headern mit riesigen Wörtern bis hin zu Textebenen, die einen Benutzer in das Design einbeziehen, ist es wichtig, die Prinzipien zu verstehen, wie Typelemente gepaart und ansprechende Textblöcke erstellt werden.

Beginnen Sie mit Ellen Luptons Thinking with Type. (Es gibt auch ein Buch mit dem gleichen Namen.) Lupton ist die Autorität für Typografie und ihre Informationen werden Sie in kürzester Zeit wie ein Typograf denken lassen.

Springen Sie in JavaScript

Wenn Sie anfangen, sich ziemlich gut mit Webdesign zu beschäftigen, fordern Sie sich erneut heraus, JavaScript zu lernen. Nach HTML und CSS ist es die wichtigste Sprache des Webs.

JavaScript ist ein Tool, mit dem Designer komplexe Dinge und Interaktionen auf Webseiten implementieren können. Es ist das, was einen Schieberegler zum Gleiten bringt oder diese Parallaxenanimation animiert.

Learn JS hat ein interaktives Tutorial, das Ihnen den Einstieg erleichtert.

Aktualisieren Sie Ihr Portfolio

Sobald Sie mit dem Entwerfen für das Web beginnen, stellen Sie sicher, dass Sie Ihr Portfolio mit Webdesign-Projekten aktualisieren. Diese einfache Aktion hilft Ihnen, sich selbst … und anderen … zu zeigen, dass Webdesign Teil Ihres Repertoires ist.

Ein aktualisiertes Portfolio kann potenziellen Kunden helfen zu sehen, wie Ihr „Stil“ aussieht. Stellen Sie sicher, dass Sie Layouts, Farben, Typografie und verschiedene Techniken präsentieren, die zeigen, was Sie tun können.

Fordern Sie sich selbst heraus

Mit so vielen Verknüpfungen und Codeausschnitten, die Ihnen helfen, fast jedes Website-Problem zu beheben, das Sie haben, werden Sie nicht faul. Denken Sie daran, sich ständig herauszufordern, neue Fähigkeiten und Technologien zu erlernen und Ihr Webdesign-Spiel weiter zu verbessern.

Das Eine an diesem Feld ist, dass es sich ständig verändert; es gibt immer etwas Neues zu lernen oder auszuprobieren.

Maximieren Sie Ihre Erfahrung

Gehen Sie raus und gestalten Sie. Sie müssen mit dem Entwerfen von Websites beginnen, um Webdesigner zu werden.

Fange klein an, aber übernimm Projekte mit anderen. Bitten Sie darum, an einem Projekt mit einem Team bei der Arbeit teilzunehmen. Erstellen Sie eine kleine Website für einen Freund. Je mehr Erfahrung Sie beim Erstellen von Websites haben, desto besser und schneller werden Sie.

Worauf warten Sie noch? Hör auf zu zögern.

Um Feedback bitten

Nutzen Sie Ihr Netzwerk, um Feedback zu Ihren Website-Design-Projekten zu sammeln, egal wie klein Sie denken, dass sie sind. Hören Sie sich dieses Feedback an – auch wenn es Ihnen nicht gefällt – und sehen Sie, was Sie lernen können.

Hat die Person, die Feedback gegeben hat, abgesehen von der visuellen Präferenz Vorschläge gemacht, wie die Website besser funktionieren kann? Konnten sie das Ziel des Designs leicht verstehen? Haben sie sich mit dem Messaging verbunden?

Lerne immer wieder neue Dinge

Um ein großartiger Website-Designer zu sein, müssen Sie nur weiterspielen, neue Dinge ausprobieren und lernen. Legen Sie Wert darauf, sich zu vernetzen und mit anderen vor Ort zu kommunizieren, damit Sie über die nachgefragten Techniken und visuellen Änderungen auf dem Laufenden bleiben können.

Wenn Sie schauen, um Website-Design zu lernen, dann ist dies wahrscheinlich schon etwas, was Sie regelmäßig tun. Dies ist jedoch ein sich entwickelndes Feld, das sich fast jeden Tag ändert. Fragen Sie einfach jeden, der es tut.