30 Tipps zum Erlernen von Webdesign in 30 Tagen
Steht das Erlernen der Grundlagen des Webdesigns noch auf Ihrer "irgendwann" -Liste? Warum hast du noch nicht angefangen? Wir haben 30 Tipps und Ressourcen zusammengestellt, mit denen Sie diesen Monat Webdesign lernen können (und vielleicht sogar einen neuen Karriereweg 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, Best Practices der Branche und vieles mehr erstellen - alles in 30 Tagen!
1. Starten Sie eine Website
Der beste Weg, um Webdesign zu lernen, besteht darin, damit zu beginnen. Das ist der Rat von David Kadavy, Autor von Design Hackers.
Ich empfehle Ihnen, einen Blog zu starten. Ich habe einen Blog gestartet, um einen Webdesign-Spielplatz zu haben, und 7 Jahre später habe ich ein Bestseller-Buch zu diesem Thema herausgebracht. Ein persönliches Projekt wie ein Blog bietet Ihnen einen Ort, an dem Sie neue Dinge ausprobieren können, und Ihr Chef wird Sie nicht entlassen, wenn Sie es vermasseln.
Sie müssen nicht mit einer massiven Website oder einem verrückten Design beginnen. klein anfangen. Spielen Sie mit der Website und finden Sie heraus, wie die Dinge funktionieren. (Überprüfen Sie auch den Code, 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 bei einem stilvollen Website-Design zu erlangen, wenn Sie die Konzepte und Bausteine der Inhalte einer Website kennenlernen.
2. Lesen Sie alles, was Sie können
Anfangen zu lesen. Da Sie in diesem Blog sind, sind Sie wahrscheinlich daran gewöhnt, den Überblick über die Entwicklungen in der Welt des Designs zu behalten. Weiter lesen.
Lesen Sie alles über Website-Design, Trends, Techniken und Best Practices. Folgen Sie Designern, die Sie in den sozialen Medien bewundern.
Werfen Sie auch ein breites Netz für Ihre Website-Design-Lesung. Lesen Sie die Grundlagen, um Code zu lernen, lesen Sie die Designtheorie und lesen Sie Tutorials und aktuelle Artikel.
3. 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.
4. Abonnieren Sie Tuts + & Envato Elements
Erwägen Sie ein Abonnement für Envato Elements, mit dem Sie auch auf die hervorragende Lernressource Tuts + 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 im eigenen Tempo und wird von erfahrenen Lehrern unterrichtet. Sie erhalten auch Zugriff auf Envato Elements, eine großartige Ressource zum Auffinden von Grafiken, Vorlagen und vielem mehr, die Sie in Ihre Webdesign-Arbeit integrieren können.
5. Denken Sie in HTML
HTML oder Hypertext Markup Language ist ein Eckpfeiler des Website-Designs. HTML ist das Grundgerüst, mit dem die Struktur einer Website erstellt werden kann. Sobald Sie die Sprache lesen können, ist die Welt des Website-Designs viel sinnvoller.
W3Schools bietet 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 finden es vielleicht intuitiver als Sie es sich vorgestellt haben.)
6. Spielen Sie mit Code an der Codeacademy
Während HTML ein guter Anfang ist, können Sie fast jede Programmiersprache von Codeacademy lernen. Mit den kostenlosen Tools können Sie mithilfe interaktiver Aktivitäten und Spiele programmieren.
Sie können einen Codeacademy-Kurs dort abholen, wo und wann Sie ihn benötigen, und nach Bedarf starten und stoppen. Wählen Sie ein zu lernendes Thema aus - Webentwicklung, Programmierung, Datenwissenschaft - oder eine Sprache, auf die Sie sich konzentrieren möchten - HTML & CSS (ein guter Ausgangspunkt), Python, Java, SQL, Ruby und mehr.
7. Lernen Sie, CSS zu verstehen
CSS oder Cascading Style Sheets definieren die Darstellung eines Dokuments in HTML oder XML und SVG.
Wie von Mozilla definiert
CSS beschreibt, wie Elemente auf dem Bildschirm, auf Papier, in Sprache oder auf anderen Medien gerendert werden sollen.
Mozilla verfügt außerdem über eine große Sammlung von CSS-Ressourcen, mit einer umfassenden Einführung in die Funktionsweise von CSS, einschließlich Selektoren und Eigenschaften, Schreiben von CSS-Regeln, Anwenden von CSS auf HTML, Festlegen von Länge, Farbe und anderen Einheiten in CSS, Kaskade Vererbung, Grundlagen des Box-Modells und Debuggen von CSS. Anschließend werden die Module erläutert, um Text und Felder für das Styling zu erläutern.
8. Wenden Sie Ihre Designfähigkeiten auf das Web an
Wenn Sie bereits in einem kreativen oder grafischen Designbereich arbeiten, denken Sie an die Dinge, die Sie bereits wissen und die Sie auch für das Website-Design anwenden können. Die Prinzipien, die etwas optisch ansprechend machen, ändern sich nicht basierend auf dem Medium, und all diese Designtheorien werden sich auch im digitalen Raum als nützlich erweisen.
Während sich Elemente wie das Lernen 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?
9. Achten Sie auf Websites, die Sie lieben
Beachten Sie die Websites, die Sie lieben. Was reizt dich daran? (Und wie können Sie lernen, diese Elemente zu replizieren?) Achten Sie auf:
- Typografie
- Navigation
- Nutzung von Bildern und Raum
- Gestaltung von Formularen
- Animations- und Scroll-Effekte
- Farbe
10. Zeichnen Sie ein Drahtmodell
Wireframing ist das Brainstorming eines Webdesigners.
In seiner reinsten Form ist ein Drahtmodell eine Skizze der Website. Es ist kein Überblick über ästhetische Elemente, sondern eine Blaupause der Website. Beim Zeichnen eines Drahtgitters geht es nicht wirklich um das Aussehen dieses Entwurfs, sondern um die darin enthaltene Informationsstruktur.
Sie sind sich nicht sicher, wie Sie ein Drahtmodell erstellen sollen? Digital Telepathy bietet eine Anleitung mit Best Practices, die Ihnen beim Lernen helfen.
11. Nehmen Sie sich etwas Zeit, um Sketch zu lernen
Sketch ist ein Vektorzeichnungswerkzeug für Mac, mit dem sich Designelemente einfach erstellen lassen. Viele Designer wenden sich an Sketch, um UI-Elemente zu erstellen und Designblöcke zu wiederholen.
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 der Creative Suite von Adobe und Ihre Zeit wert.
12. Bleiben Sie mit der Technologie auf dem Laufenden
AI, VR, AR, 360-Grad-Video, Bots.
Es kann schwierig sein, mit so vielen neuen Technologien und Trends Schritt zu halten. Sie müssen jedoch darauf achten, über diese Änderungen auf dem Laufenden zu bleiben.
Nehmen Sie sie einzeln in Angriff 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 viel Videoinhalt verwenden, spielen Sie mit 360-Grad-Video herum.
Elemente wie künstliche Intelligenz und virtuelle oder erweiterte Realität sind noch komplexer, werden jedoch wahrscheinlich später zu integrierten Bestandteilen der Website-Designlandschaft. Zumindest sollten Sie wissen, was sie sind und welche Verwendungsmöglichkeiten sie haben könnten.
13. Machen Sie es sich mit SEO bequem
Während viele Webdesigner der Meinung sind, dass ein SEO-Spezialist es schaffen kann, eine Website für Suchmaschinen zum Lesen vorzubereiten, 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 Meta-Beschreibungen auf Seiten und Elementen enthält, sollte der Designer das Suchdenken in seinen Workflow einbeziehen.
Freiberufler, das ist auch für Sie von entscheidender Bedeutung. Die meisten Kunden sind geschickt 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 den Kunden an einen SEO-Spezialisten verweisen können, wenn weitere Arbeiten erforderlich sind).
14. 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, mit denen Sie Elemente anpassen und sogar Codefragmente hinzufügen können. Für einfache Websites haben viele Website-Ersteller auch einen kostenlosen Plan, mit dem Sie eine persönliche Portfolio-Seite oder eine einfache Website erstellen können, die als Spielplatz für Sie dient.
Wählen Sie dann die Teile im Website-Builder aus. 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, wenn Sie ein anderes Design auswählen.
15. Finden Sie einen Mentor
Gibt es jemanden, mit dem Sie zusammenarbeiten und den Sie als Webdesigner bewundern? Nehmen Sie sie zum Mittagessen mit und informieren Sie sich über die Branche.
Es kann von unschätzbarem Wert sein, einen Mentor zu finden, der bereit ist, mit Ihnen zusammenzuarbeiten und Ihnen dabei zu helfen, über das Gebiet nachzudenken und Webdesign selbst zu lernen. Und während Sie wahrscheinlich einen Mentor in einer Online-Community finden können, ist nichts besser als eine lebende Person, die Sie regelmäßig persönlich treffen können. (Vielleicht lohnt es sich, Online- und persönliche Mentoren zu haben.)
16. Treten Sie der CodePen-Community bei
Sobald Sie sich mit Code und Programmierung vertraut gemacht haben, möchten Sie der CodePen-Community beitreten. In der Open-Source-Community können Sie Codefragmente in einer Art sozialem Netzwerk freigeben und bearbeiten.
Hier ein wenig mehr von den Gründern der Website: „CodePen ist eine soziale Entwicklungsumgebung. Im Kern können Sie Code in den Browser schreiben und die Ergebnisse beim Erstellen anzeigen. Ein nützliches und befreiendes Werkzeug für Entwickler jeglicher Fähigkeiten und insbesondere für Menschen, die das Programmieren lernen. Wir konzentrieren uns hauptsächlich auf Front-End-Sprachen wie HTML, CSS, JavaScript und Vorverarbeitungssyntaxen, die sich in diese Dinge verwandeln. “
17. Nehmen Sie an einem Kurs teil
Für einige Lernende ist eine formellere Unterrichtsumgebung 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 örtlichen College oder Online-Lernzentren wie Udemy oder Coursera. Nimm eine Klasse mit deinem aktuellen Fähigkeitslevel und bewege dich einfach weiter vorwärts.
18. Willst du etwas tun? Google es
Für den nicht so traditionellen Lernenden finden Sie die Antwort auf das Webdesign-Problem bei Google. Es gibt so viele Tutorials und Videos, die Sie durch fast jedes Problem und jede Lösung führen können.
Der Schlüssel ist, genau das zu suchen, was Sie wissen müssen, und die Antwort bei einer seriösen Quelle 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.)
19. Achten Sie auf die Benutzererfahrung
Nichts kann eine Website so verändern oder zerstören wie User Experience Design. Sie müssen es planen und verstehen.
So beschreibt die Interaction Design Foundation das UX-Design:
User Experience (UX) -Design ist der Prozess der Erstellung von Produkten, die aussagekräftige und persönlich relevante Erfahrungen bieten. Dies beinhaltet die sorgfältige Gestaltung sowohl der Benutzerfreundlichkeit eines Produkts als auch der Freude, die die Verbraucher daran haben, es zu verwenden. Es befasst sich auch mit dem gesamten Prozess des Erwerbs und der Integration des Produkts, einschließlich der Aspekte 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 kreieren und zu formen. Zu diesem Zweck berücksichtigt ein UX-Designer das Warum, Was und Wie der Produktverwendung.
20. 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 möchten und wie sie damit interagieren. Wenn Sie 2016 das letzte Mal 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 die Farben, Stile und Funktionen, die auf den häufig besuchten Websites enthalten sind.
21. Ohne Farbe erstellen
Starten Sie jedes Design ohne Farbe. Ein großartiger Designer hat mir einmal gesagt, dass Ihr Design, wenn es in Schwarzweiß funktioniert, eine einwandfreie Farbe aufweist.
Das mag nicht immer gelten, aber es ist ein guter Ausgangspunkt.
Durch das Erstellen von Designs in Schwarzweiß können Sie sehen, wo Elemente kontrastieren und wie sie zusammenspielen. Sie haben alle emotionalen Assoziationen mit Farben oder Augenbewegungen, die dadurch auftreten, beseitigt. Diese einfachste Form des Designs gibt Ihnen eine Vorstellung davon, ob etwas als Konzept funktioniert, bevor Sie mit der Fertigstellung fortfahren.
22. Lernen Sie, Google Fonts zu lieben
Google Fonts ist dein Freund.
Unabhängig davon, wie Sie sich zu Google fühlen, ist es wichtig, dass Sie Schriftarten durchsuchen, sortieren und auswählen können, von denen Sie wissen, dass sie in Website-Designs funktionieren. Sie müssen nicht über die Lizenzierung nachdenken oder darüber, ob Schriftarten mit bestimmten Browsern kompatibel sind oder nicht.
Die Einschränkung besteht darin, dass Sie nur über das verfügen, was in der Google Fonts-Bibliothek enthalten ist. Aber wenn Sie es versuchen, können Sie etwas finden, das zu fast jedem Projekt passt. Das spart Ihnen auf lange Sicht viel Zeit.
23. Wählen Sie ein UI-Kit aus
Laden Sie eine Benutzeroberfläche oder ein Icon-Kit herunter und wählen Sie es aus.
So wie Sie den Code einer Website überprüfen können, sehen 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 verschiedenen Formaten für hochauflösende Anzeigen enthält. (Das Herunterladen einer Reihe von JPEGs wird Ihnen nicht allzu gute Dienste leisten.)
Versuchen Sie dann, ein oder zwei eigene Elemente zu erstellen oder anzupassen.
24. Werden Sie Typograf
Modernes Website-Design hat einen starken Fokus auf Typografie… gute Typografie. Von Helden-Headern mit riesigen Wörtern bis hin zu Textebenen, die einen Benutzer in das Design einbeziehen, ist es wichtig, die Prinzipien zu verstehen, wie Schriftelemente gepaart und ansprechende Textblöcke erstellt werden.
Beginnen Sie mit Ellen Luptons Denken mit Typ. (Es gibt auch ein gleichnamiges Buch.) Lupton ist die Autorität für Typografie und ihre Informationen lassen Sie in kürzester Zeit wie ein Typograf denken.
25. Springen Sie in JavaScript
Wenn Sie anfangen, sich 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. Dies ist es, was eine Slider-Folie oder diese Parallaxen-Animation animiert.
Learn JS bietet ein interaktives Tutorial, das Ihnen den Einstieg erleichtert.
26. Aktualisieren Sie Ihr Portfolio
Stellen Sie sicher, dass Sie Ihr Portfolio mit Webdesign-Projekten aktualisieren, sobald Sie mit dem Entwerfen für das Web beginnen. 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.
27. Fordern Sie sich heraus
Mit so vielen Verknüpfungen und Codefragmenten, mit denen Sie fast jedes Website-Problem beheben können, 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 einzige an diesem Feld ist, dass es sich ständig ändert; Es gibt immer etwas Neues zu lernen oder zu versuchen.
28. Maximieren Sie Ihre Erfahrung
Geh raus und gestalte. Sie müssen anfangen, Websites zu entwerfen, um ein Webdesigner zu sein.
Fangen Sie klein an, aber übernehmen Sie Projekte mit anderen. Bitten Sie darum, mit einem Team bei der Arbeit an einem Projekt teilzunehmen. Packe eine kleine Website für einen Freund an. Je mehr Erfahrung Sie beim Erstellen von Websites haben, desto besser und schneller werden Sie.
Worauf wartest du? Hör auf zu zögern.
29. Bitten Sie um Feedback
Nutzen Sie Ihr Netzwerk, um Feedback zu Ihren Website-Design-Projekten zu sammeln, egal wie klein Sie denken. 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 den visuellen Vorlieben Vorschläge gemacht, wie die Website besser funktionieren kann? Könnten sie das Ziel des Entwurfs leicht verstehen? Haben sie sich mit dem Messaging verbunden?
30. Lerne weiter neue Dinge
Um ein großartiger Website-Designer zu sein, müssen Sie einfach weiter spielen, neue Dinge ausprobieren und lernen. Legen Sie Wert darauf, sich zu vernetzen und mit anderen in diesem Bereich zu kommunizieren, damit Sie stets über die erforderlichen Techniken und visuellen Änderungen informiert sind.
Wenn Sie Website-Design lernen möchten, ist dies wahrscheinlich bereits etwas, was Sie regelmäßig tun. Aber dies ist ein sich entwickelndes Feld, das sich fast täglich ändert. Fragen Sie einfach jeden, der es tut.
