Ist das Erlernen der Grundlagen des Webdesigns noch an einem? Liste? Warum hast du noch nicht angefangen? Wir haben 30 Tipps und Ressourcen zusammengestellt, die Ihnen helfen, diesen Monat mit Webdesign zu beginnen (und vielleicht sogar einen neuen Karriereweg zu finden!).
Grafikdesigner, Druckdesigner und Kreative, die etwas Neues lernen oder in eine Website einsteigen möchten, müssen mit dem Zaudern aufhören. Jeder Tag, an dem Sie diesen ersten Schritt nicht machen, lässt Sie einen Tag hinter allen anderen zurück!
Befolgen Sie diese Schritte, um zu lernen, wie Sie Ihre erste Website erstellen, bewährte Methoden der Branche und vieles mehr - 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 einen Blog zu starten. Ich startete einen Blog, nur um einen Spielplatz für Webdesign zu haben, und 7 Jahre später brachte ich ein Bestseller-Buch zu diesem Thema heraus. Mit einem persönlichen Projekt wie einem Blog haben Sie einen Ort, an dem Sie neue Dinge ausprobieren können, und Ihr Chef wird Sie nicht feuern, wenn Sie etwas vermasseln.
Sie müssen nicht mit einer massiven Website oder einem verrückten Design beginnen. klein anfangen Spiele mit der Website und finde heraus, was funktioniert. (Achten Sie darauf, den Code zu überprüfen, damit Sie sich mit der Funktionsweise Ihrer Website vertraut machen können.)
2. Lesen Sie alles, was Sie können
Anfangen zu lesen. Da Sie sich in diesem Blog befinden, sind Sie wahrscheinlich daran gewöhnt, den Überblick über die Entwicklungen in der Designwelt zu behalten. Weiter lesen.
Lesen Sie alles, was Sie über das Website-Design, Trends, Techniken und Best Practices wissen können. Folgen Sie Designern, die Sie in den sozialen Medien bewundern.
Werfen Sie ein breites Netz für das Lesen Ihrer Website. Lesen Sie die Grundlagen, um etwas Code zu lernen, lesen Sie über 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 auf den neuesten Stand bringen. Ein großer Teil des Website-Designs ist 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 neuesten Ansätzen und Entwicklungen. Es ist völlig in sich selbst und wird von erfahrenen Instruktoren unterrichtet. Außerdem erhalten Sie Zugriff auf Envato Elements, eine großartige Ressource zum Auffinden von Grafiken, Vorlagen und 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 wird. Sobald Sie die Sprache lesen können, wird die Welt des Website-Designs wesentlich 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 werden es vielleicht intuitiver finden, als Sie gedacht haben.)
6. Spielen Sie mit Code an der Codeacademy
Während HTML ein guter Anfang ist, können Sie mit Codeacademy fast jede Programmiersprache lernen. Mit den kostenlosen Tools können Sie mithilfe interaktiver Aktivitäten und Spiele Code 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 Thema aus, das Sie lernen möchten - Webentwicklung, Programmierung, Data Science - oder Sprache, auf das Sie sich konzentrieren möchten - HTML & CSS (ein großartiger Ausgangspunkt für den Start), Python, Java, SQL, Ruby und vieles mehr.
7. Lernen Sie, CSS zu verstehen
CSS oder Cascading Stylesheets definieren die Darstellung eines Dokuments, das in HTML oder XML und SVG geschrieben wurde.
Wie von Mozilla definiert
CSS beschreibt, wie Elemente auf dem Bildschirm, auf Papier, in der Sprache oder in anderen Medien dargestellt werden sollen.
Mozilla verfügt auch über eine umfangreiche Sammlung von CSS-Ressourcen, die eine umfassende Einführung in die Funktionsweise von CSS bieten. Dazu gehören Selektoren und Eigenschaften, das Erstellen von CSS-Regeln, das Anwenden von CSS auf HTML, das Angeben von Länge, Farbe und andere Einheiten in CSS Vererbung, Grundlagen des Boxmodells und Debugging von CSS. Dann werden die Module weiter erklärt, um den Styling-Text und die Boxen zu erklären.
8. Wenden Sie Ihre Designfähigkeiten im Web an
Wenn Sie bereits in einem kreativen oder grafischen Designbereich tätig sind, sollten Sie darüber nachdenken, was Sie bereits wissen und das Sie auch für das Website-Design anwenden können. Die Prinzipien, die etwas visuell ansprechend machen, ändern sich nicht auf der Grundlage des Mediums. All diese Designtheorie wird sich auch im digitalen Raum als nützlich erweisen.
Während Elemente wie das Erlernen von Code sich möglicherweise nicht natürlich anfühlen, ist es ein großer Vorteil, einen Designhintergrund zu haben. Was nützt eine schön codierte Website, wenn man nicht mit ihr interagieren möchte?
9. Achten Sie auf Webseiten, die Sie lieben
Beachten Sie die Websites, die Sie lieben. Was ist mit ihnen ansprechend? (Und wie können Sie lernen, diese Elemente zu replizieren?) Achten Sie auf:
- Typografie
- Navigation
- Verwendung von Bildern und Platz
- Gestaltung von Formularen
- Animations- und Scrolleffekte
- Farbe
10. Zeichnen Sie ein Wireframe
Wireframing ist das Brainstorming eines Webdesigners.
In seiner reinsten Form ist ein Wireframe eine Skizze der Website. Es handelt sich nicht um einen Umriss ästhetischer Elemente, sondern um einen Entwurf 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 Drahtgitter erstellen können? Digital Telepathy enthält eine Anleitung mit Best Practices, die Ihnen beim Lernen helfen.
11. Nehmen Sie sich etwas Zeit, um die Skizze zu lernen
Sketch ist ein Vektor-Zeichenwerkzeug für Mac, das das Erstellen von Designelementen vereinfacht. Viele Designer wenden sich Sketch zu, um UI-Elemente zu erstellen und Designblöcke zu wiederholen.
Es enthält viele Plugins und erlaubt Ihnen den Code für die einfache Verwendung und den einfachen Zugriff zu exportieren.Es ist eines der leistungsfähigsten und beliebtesten Tools, die seit der Creative Suite von Adobe auf den Markt kommen, und ist Ihre Zeit absolut wert.
12. Bleiben Sie auf dem Laufenden mit der Technologie
AI, VR, AR, 360-Grad-Video, Bots.
Es gibt so viele neue Technologien und Trends, dass es schwer sein kann, mitzuhalten. Sie müssen jedoch einen Punkt festlegen, um über diese Änderungen auf dem Laufenden zu bleiben.
Packen Sie sie einzeln an und beginnen Sie mit Technologien, die in direktem Zusammenhang mit Ihrer Arbeit stehen. Wenn Sie eine Website mit Online-Chat haben, lernen Sie zunächst Bots kennen. Wenn Sie viel Videoinhalt verwenden, können Sie mit 360-Grad-Videos spielen.
Elemente wie künstliche Intelligenz und virtuelle oder erweiterte Realität sind noch komplexer, werden aber wahrscheinlich zu integrierten Teilen der Website-Design-Landschaft. Zumindest sollten Sie wissen, um was es sich dabei handelt und welche Verwendungsmöglichkeiten möglich sind.
13. Holen Sie sich bequem mit SEO
Während viele Webdesigner denken, 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, um reinen Code zu erstellen, der schnell Meta-Beschreibungen auf Seiten und Elementen enthält, sollte der Designer das Suchdenken in den Arbeitsablauf integrieren.
Freelancer, das ist auch für Sie von entscheidender Bedeutung. Die meisten Kunden sind klug genug, um nach einer SEO-optimierten Website zu fragen. Wenn Sie alleine arbeiten, müssen Sie genug wissen, um ein solides Rahmenwerk zu schaffen, das Google lesen kann (und den Client an einen SEO-Spezialisten verweisen können, wenn weitere Arbeiten erforderlich sind).
14. Spielen Sie mit einem Website-Generator
Ein Website-Builder kann eine gute Möglichkeit sein, um mit Best Practices vertraut zu werden und wie man Websites erstellt und gestaltet.
Die meisten dieser Tools verfügen über zahlreiche Vorlagen, mit denen Sie Elemente anpassen und sogar Codeausschnitte hinzufügen können. Für einfache Websites haben viele Website-Entwickler auch einen kostenlosen Plan, mit dem Sie eine persönliche Portfolio-Seite oder eine grundlegende Website erstellen können, die als Spielplatz für Sie dient.
Wähle dann die Teile im Website-Builder aus. Sehen 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. Finde einen Mentor
Gibt es jemanden, mit dem Sie zusammenarbeiten, den Sie als Webdesigner bewundern? Nehmen Sie sie zum Mittagessen und suchen Sie sich die Industrie aus.
Es kann von unschätzbarem Wert sein, einen Mentor zu finden, der bereit ist, mit Ihnen zusammenzuarbeiten und Ihnen dabei zu helfen, über das Feld nachzudenken und selbstständig Webdesign zu lernen. Und obwohl Sie wahrscheinlich einen Mentor in einer Online-Community finden können, ist nichts besser als eine lebende Person, die Sie regelmäßig 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. Mit der Open-Source-Community können Sie Codeausschnitte in einem sozialen Netzwerk teilen und bearbeiten.
Hier ist ein wenig mehr von den Gründern der Site:? CodePen ist eine soziale Entwicklungsumgebung. Im Grunde erlaubt es Ihnen, Code in den Browser zu schreiben und die Ergebnisse beim Erstellen zu sehen. Ein nützliches und befreiendes Werkzeug für Entwickler mit allen Fähigkeiten und insbesondere für das Lernen von Code. Wir konzentrieren uns in erster Linie auf Front-End-Sprachen wie HTML, CSS, JavaScript und Vorverarbeitungs-Syntax, die sich in diese Dinge verwandeln.
17. Nehmen Sie an einer Klasse teil
Für einige Lernende ist ein formelleres Klassenzimmer am besten.
Es gibt eine Vielzahl von Kursen - persönlich und online -, in denen Sie die Grundlagen des Webdesigns erlernen. Beginnen Sie mit einem örtlichen College oder einem Online-Lernzentrum wie Udemy oder Coursera. Holen Sie sich eine Klasse mit Ihrem aktuellen Fähigkeitsniveau und machen Sie einfach weiter.
18. Wollen Sie etwas tun? Google es
Für nicht so traditionelle Schüler finden Sie bei Google die Antwort auf das Webdesign-Problem. Es gibt so viele Tutorials und Videos, die Sie durch fast jedes Problem führen können - und Lösungen.
Der Schlüssel ist, genau das zu suchen, was Sie wissen müssen, und nach einer seriösen Quelle zu suchen. Hier ist ein weiterer Tipp, wenn es um Tutorials und Videos geht. Mit neueren Inhalten erhalten Sie wahrscheinlich eine bessere, umfassendere und relevantere Antwort. (Denken Sie daran, dass sich einige dieser Sachen schnell ändern.)
19. Achten Sie auf die Benutzererfahrung
Nichts kann eine Website so gestalten oder zerstören wie das 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 sinnvolle und persönlich relevante Erfahrungen bieten. Dies beinhaltet die sorgfältige Gestaltung der Verwendbarkeit eines Produkts und der Freude, die die Verbraucher daraus ziehen. Es befasst sich auch mit dem gesamten Prozess des Erwerbs und der Integration des Produkts, einschließlich Branding, Design, Verwendbarkeit und Funktion.
UX-Designer oder Designer, die sich des Prozesses der Erfahrungsbildung bewusst sind, versuchen, die Faktoren, die den Prozess absichtlich beeinflussen, zu gestalten und zu gestalten. Zu diesem Zweck wird ein UX-Designer das Warum, Was und Wie der Produktnutzung berücksichtigen.
20. Achten Sie auf Design-Trends
Wie sieht modernes Website-Design aus? Es ist keine Trickfrage. Um moderne Websites und Benutzererlebnisse zu gestalten, müssen Sie wissen, was die Benutzer wollen und wie sie damit interagieren. Wenn Sie 2016 das letzte Mal eine App heruntergeladen oder eine Website auf Ihrem Telefon angesehen haben, haben Sie viel Nachholbedarf.
Das Erstellen von Website-Designs mit modernen Elementen und Trends, die in das Design integriert sind, wird Ihre Projekte hervorheben. Woher wissen Sie, was im Trend ist? Lesen Sie weiter Websites und achten Sie darauf, was andere Designer tun.Beachten Sie die Farben und Stile und Funktionen, die auf häufig besuchten Websites enthalten sind.
21. Erstellen Sie ohne Farbe
Beginnen Sie jedes Design ohne Farbe. Ein großartiger Designer hat mir einmal gesagt, dass, wenn Ihr Design in Schwarz und Weiß funktioniert, die Farbe fehlerfrei ist.
Das mag nicht immer zutreffen, ist aber ein guter Ausgangspunkt.
Wenn Sie Designs in Schwarzweiß erstellen, können Sie sehen, wo Elemente kontrastieren und wie sie zusammenspielen. Sie haben alle emotionalen Assoziationen mit der Farbe oder den Augenbewegungen entfernt, die sich dadurch ergeben. Diese einfachste Form des Designs gibt Ihnen eine Idee, wenn etwas als Konzept funktioniert, bevor Sie mit der Fertigstellung fortfahren.
22. Lernen Sie, Google Fonts zu lieben
Google Fonts ist dein Freund.
Unabhängig von Ihrer Meinung zu Google ist es wichtig, dass Sie die Möglichkeit haben, Schriftarten zu durchsuchen, zu sortieren und auszuwählen, von denen Sie wissen, dass sie in Website-Designs funktionieren. Sie müssen nicht über die Lizenzierung nachdenken oder ob Schriftarten mit bestimmten Browsern kompatibel sind oder nicht.
Die Einschränkung ist, dass Sie nur mit dem arbeiten, was sich in der Google Fonts-Bibliothek befindet. Aber wenn Sie es versuchen, können Sie etwas finden, das zu fast jedem Projekt passt. Auf lange Sicht sparen Sie dadurch 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, wie Designelemente für das Web erstellt werden. Notieren Sie sich die Skalierung und das Raster, sehen Sie sich die Farbmixe an und wie Dateien in Photoshop oder Illustrator organisiert werden.
Suchen Sie nach einem Kit zum Herunterladen, das Elemente in verschiedenen Formaten für hochauflösende Displays enthält. (Das Herunterladen einer Reihe von JPEG-Dateien ist für Sie nicht besonders gut geeignet.)
Versuchen Sie dann, ein oder zwei eigene Elemente zu erstellen oder anzupassen.
24. Typograf werden
Modernes Website-Design hat einen starken Fokus auf Typografie? gute typografie. Von Heldenkopfzeilen mit riesigen Wörtern bis hin zu Textebenen, die einen Benutzer in das Design einbeziehen, ist das Verständnis der Prinzipien, wie Typelemente gekoppelt und ansprechende Textblöcke erstellt werden, von entscheidender Bedeutung.
Beginnen Sie mit Ellen Luptons Denken mit Typ. (Es gibt auch ein Buch mit dem gleichen Namen.) Lupton ist die Autorität für Typografie, und ihre Informationen lassen Sie im Nu wie ein Typograf denken.
25. Springe 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 dies die wichtigste Sprache des Webs.
JavaScript ist das Werkzeug, mit dem Designer komplexe Dinge und Interaktionen auf Webseiten implementieren können. Es ist das, was eine Slider-Folie oder diese Parallax-Animation animiert.
Learn JS bietet ein interaktives Lernprogramm, das Sie beim Einstieg unterstützt.
26. Aktualisieren Sie Ihr Portfolio
Wenn Sie mit dem Design für das Web beginnen, sollten Sie Ihr Portfolio mit Webdesign-Projekten aktualisieren. Diese einfache Aktion wird Ihnen helfen, sich zu zeigen? und andere? Dieses Webdesign ist Teil Ihres Repertoires.
Ein aktualisiertes Portfolio kann potenziellen Kunden helfen, Ihren Stil zu erkennen? sieht aus wie. Stellen Sie sicher, dass Sie Layouts, Farben, Typografie und verschiedene Techniken zeigen, die zeigen, was Sie tun können.
27. Fordern Sie sich selbst heraus
Mit so vielen Abkürzungen und Code-Snippets, mit denen Sie fast jedes Website-Problem beheben können, sollten Sie nicht faul werden. Denken Sie daran, sich ständig zu fordern, um neue Fähigkeiten und neue Technologien zu erlernen und Ihr Webdesign-Spiel ständig zu verbessern.
Das eine an diesem Feld ist, dass es sich ständig ändert; Es gibt immer etwas Neues zu lernen oder auszuprobieren.
28. Maximiere deine Erfahrung
Rausgehen und gestalten. Sie müssen Websites erstellen, um Webdesigner zu werden.
Fange klein an, aber nimm Projekte mit anderen an. Bitten Sie um ein Projekt mit einem Team bei der Arbeit. Tackle eine kleine Website für einen Freund. 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-Designprojekten zu sammeln, unabhängig davon, wie klein Sie sind. Hören Sie sich dieses Feedback an - auch wenn Sie es nicht mögen und sehen Sie, was Sie lernen können.
Hat die Person, die Feedback gegeben hat, Vorschläge gemacht, damit die Website besser funktioniert? Könnten sie das Ziel des Entwurfs leicht verstehen? Haben sie sich mit dem Messaging verbunden?
30. Lernen Sie immer wieder Neues
Um ein großartiger Website-Designer zu sein, müssen Sie einfach weiter spielen, versuchen und neue Dinge lernen. Machen Sie sich zu vernetzen und kommunizieren Sie mit anderen im Feld, damit Sie immer auf dem neuesten Stand der Technik und der visuellen Änderungen sind, die gefragt sind.
Wenn Sie das Website-Design erlernen möchten, tun Sie dies wahrscheinlich bereits regelmäßig. Dies ist jedoch ein sich entwickelndes Gebiet, und es ändert sich fast täglich. Fragen Sie einfach jeden, der es tut.