Der erste Schritt zur Arbeit im Web ist das Erlernen der Fähigkeiten, die Sie für Webdesign oder Webentwicklung benötigen – aber das bedeutet auch, dass Sie sich mit den Werkzeugen des Berufs vertraut machen müssen. Deshalb haben wir diese Liste mit 99 kostenlosen Tools zusammengestellt, die Sie entweder für die Webentwicklung, das Webdesign oder beides benötigen.

Jede Ressource auf dieser Liste kann kostenlos genutzt werden und ergänzt die Fähigkeiten, die wir in unseren Web Design, Web Developer und Front End Developer Blueprints (Kurse unter Anleitung, die Sie durch die Grundlagen jeder Rolle führen) vermitteln.

Wenn Sie lernen, halten Sie diese Liste griffbereit und betrachten Sie sie als Ihren eigenen virtuellen Werkzeugkasten.

Ressourcen für Webdesign

Diese Liste der Webdesign-Tools enthält sowohl Webdesign-Tools für Anfänger als auch Design-Ressourcen, die Ihnen während Ihrer gesamten Karriere dienen werden.

(zurück zum Anfang)

Newsletter-Listen

1. Creative Market
Bevor Sie irgendetwas anderes tun, tragen Sie sich in die Newsletter-Liste von Creative Market ein. Einmal pro Woche erhalten Sie eine E-Mail mit 5 kostenlosen Downloads, darunter alles von Mustern und Schriftarten bis hin zu Vorlagen und Themen.

(back to top)

Software + Apps

Diese Softwareprogramme und Webanwendungen bieten eine solide Grundlage für Webdesign.

2. CoffeeCup Software
Sie bieten alle möglichen kostenlosen Apps für Webdesigner an, darunter einen HTML-Editor, einen Web-Formularersteller, einen Warenkorb-Designer und viele andere.

3. InVision App
Leistungsstarke Tools für Prototyping und Zusammenarbeit. In wenigen Minuten erhalten Sie realitätsnahe Mockups und Prototypen.

4. Pixlr
Bearbeiten Sie Bilder direkt in Ihrem Browser.

5. Canva
Eine verblüffend einfache Grafikdesign-Software, die jeder benutzen kann. Die Such- und Ziehfunktion ist so einfach und hilfreich!

6. Easel.ly
Gute kostenlose Infografik-Vorlagen.

(zurück zum Seitenanfang)

Fotos

Fotos sind ein wichtiger Bestandteil des Webdesigns. Diese Stockfoto-Ressourcen sind wichtige Anlaufstellen, wenn Sie das richtige Foto sofort brauchen.

7. Unsplash
Einige der schönsten kostenlosen Stockfotos, die es gibt, und mit einer großen Vielfalt. Jeden Tag kommen neue Bilder hinzu.

8. PicJumbo
Holen Sie sich kostenlose Fotos in Ihren Posteingang, die für den persönlichen und kommerziellen Gebrauch völlig kostenlos sind.

9. Gratisography
Kostenlose hochauflösende Bilder, die Sie für persönliche und kommerzielle Projekte verwenden können. Sie haben leicht zu durchsuchende Kategorien: Tiere, Natur, Objekte, Skurriles und mehr.

10. Compfight
Suchen Sie tonnenweise Bilder, die für den persönlichen und/oder kommerziellen Gebrauch lizenziert sind, meist von Flickr.

11. IM Free
Kuratierte Webdesign-Ressourcen, einschließlich einer Menge kategorisierter Fotos, sowie Icons und Vorlagen.

12. Stock Up
Durchsuchen Sie über 9.000 Fotos von 26 verschiedenen Websites, alles an einem Ort.

13. Death to the Stock Photo
Melde dich auf der E-Mail-Liste an und erhalte einmal im Monat kostenlose Fotopakete in deinen Posteingang.

14. Little Visuals
Wenn Sie sich auf deren Liste eintragen, erhalten Sie einmal pro Woche 7 kostenlose hochauflösende Fotos per E-Mail.

15. New Old Stock
Holen Sie sich kostenlos alte Fotos aus öffentlichen Archiven.

16. Cupcake
Kostenlose, hochauflösende Fotos von Jonas Nilsson Lee.

17. Pexels
Täglich 10 neue kostenlose Stockfotos.

18. Magdeleine
1 kostenloses hochauflösendes Foto pro Tag.

19. SplitShire
Kostenlose, hochauflösende Stockfotos von einem italienischen Fotografen.

20. ISO Republic
Hochwertige Stockfotos, die an Kreative vermarktet werden.

21. Paul Jarvis
Melden Sie sich an, um 20 der besten Fotos von Paul Jarvis kostenlos zu erhalten.

(back to top)

Symbole + Icons

Suchen Sie nach Symbolen oder Icons für Ihre Website? Suchen Sie nicht weiter.

22. Pixeden
Tonnenweise kostenlose Icon-Sets, darunter Wettersymbole, soziale Icons, Liniensymbole und viele andere.

23. Iconmonstr
Mehr als 2800 kühne grafische Icons in einigen verschiedenen Stilen.

24. Captain Icon
Über 350 kostenlose Vektorsymbole für Handy- und Web-Designs.

25. Linear Icons
Eine Icon-Schriftart mit 170 verschiedenen Icons zur Auswahl.

26. Font Awesome
Eine Symbol-Schriftart, mit der Sie Symbole zu Ihren Webseiten hinzufügen können.

27. Fontello
Erzeugt Icon Font Packs.

28. flaticon
Vektor-Icons herunterladen oder Icons als Webfonts einbinden.

29. The Noun Project
Suchen Sie ein Substantiv, erhalten Sie ein kostenloses Symbol oder Icon.

30. Endless Icons
Kostenlose Symbolbibliothek.

31. Perfekte Icons
Anpassen und optimieren Sie Social Media Icons für Ihre Website.

32. iconSweets
60 kostenlose Vektor-Photoshop-Icons.

33. Round Icons
Kostenlose schrullige und professionelle Icon-Pakete.

(back to top)

Schriftarten

Schriftarten sind ein so wichtiger Bestandteil des Designs, dass man sie leicht übersehen kann. Schauen Sie stattdessen hier, und finden Sie die Schriften, die Ihr Design auf die nächste Stufe bringen.

34. Google Webfonts
Fügen Sie Ihrer Website mit nur wenigen Klicks Schriftarten hinzu.

35. typegenius
Schriftartenpaar-Generator.

36. Font Squirrel
Hunderte von völlig kostenlosen Schriftarten.

37. Beautiful Web Type
Sehen Sie sich eine kuratierte Sammlung der schönsten Google Webfonts an.

38. Lost Type
Schöne kostenpflichtige Schriftarten.

(zurück zum Anfang)

Farben

Brauchen Sie Hilfe bei der Auswahl der besten Farben für Ihr Design? Diese Farbwerkzeuge stehen Ihnen zur Verfügung.

39. Material UI
Eine Galerie von Material Design- und Flat Design-Farben zur Verwendung in Ihren Designs.

40. Paletton
Starten Sie mit einer beliebigen Farbe und erhalten Sie eine Palette (mit 5 Schattierungen pro Farbe), die auf einigen verschiedenen Farbschemata basiert: monochromatisch, nebeneinander, Dreiklang, Tetrade oder benutzerdefiniert.

41. Design Seeds
Tonnenweise großartige Farbpaletten auf der Grundlage von Fotos. Sie können nach Schlüsselwörtern oder nach ähnlichen Farben suchen.

42. Adobe Color Wheel
Wählen Sie aus verschiedenen Arten von Farbkombinationen und speichern Sie Ihre Farbpaletten.

43. Materialpalette
Generieren Sie eine Farbpalette basierend auf 2 Farben.

44. Flat UI Color Picker
Der Name sagt alles.

45. Flat UI Colors
Dito.

46. Bootflat
Flacher Farbwähler.

47. Coolors
Farbpalettengenerator.

48. Skala Color
Kostenloser Farbwähler Download.

49. BrandColors
Finden Sie die genauen Farben, die große Marken verwenden.

50. 0 bis 255
Finden Sie die perfekte Farbvariante, nach der Sie suchen.

51. Farbliebhaber
Stöbern Sie in den Farbpaletten der Benutzer und fügen Sie der Community Ihre eigenen hinzu.

52. Palette for Chrome
Generiert Farbpaletten auf der Grundlage von Bildern.

(back to top)

Hintergründe + Texturen

Fotos, Schriftarten und Farben sind nicht das Ende eines Designs – man braucht auch Hintergründe und Texturen, um alles zusammenzuhalten. Mit diesen Tools finden Sie sie.

53. Muster8
Tonnenweise flippige, freche und helle sich wiederholende Muster stehen zur Auswahl.

54. Repeat-X Repeat-Y
Verblüffende sich wiederholende Muster aus aller Welt.

55. Texture King
Alle Texturen, die man sich nur wünschen kann: Grunge, Rost, Gips, Beton, Schmutz und vieles mehr.

56. Patternico
Erstelle deine eigenen Muster mit Font Awesome-Symbolen. Passen Sie die Hintergrundfarbe, Leinwandgröße und Formtransparenz an.

57. Subtle Patterns
Kostenlos herunterladbare Muster.

58. Lost and Taken
Gratis-Texturen in vielen Kategorien, darunter Karton, Stein, Metall, Blasen, nahtlos und mehr.

59. BG Patterns
Erstellen Sie nahtlose Muster mit anpassbaren Farben, Formen und mehr.

(back to top)

UI (User Interface) Kits/Guides

Webdesign ist mehr als nur visuelle Attraktivität. Die Art und Weise, wie sich die Benutzeroberfläche einer Website für den Benutzer „anfühlt“, ist ebenfalls ein entscheidender Faktor. Mit diesen Tools können Sie sicherstellen, dass Ihr eigenes UI-Design perfekt ist.

60. 55+ Elements Free UI Kit
Ein sauberes, modernes UI Kit. Schauen Sie sich auf der Behance-Website um, dort finden Sie viele großartige Ressourcen von anderen Designern!

61. Oh nein, nicht noch ein UI-Kit
Ein einfaches, flaches, quelloffenes UI-Kit für Mobile und Web, das als PSD-Datei geliefert wird.

62. PSD Booster Freebies
Tonnenweise großartige Photoshop Freebies, einschließlich UI Kits, Themen und mehr.

63. Material Design Guidelines
Der offizielle Leitfaden zu Googles Material Design Standards.

(back to top)

Ressourcen für die Webentwicklung

Nachdem eine Website entworfen wurde, muss sie entwickelt werden! Egal, ob Sie an beiden Seiten des Prozesses arbeiten (Entwurf UND Erstellung einer Website) oder eine Website auf der Grundlage der Entwürfe anderer erstellen, diese Entwickler-Tools helfen Ihnen, den Entwurf in die Tat umzusetzen.

(back to top)

Domainnamen-Suchmaschinen

Domainnamen sind das Herzstück einer Website – sie sind die direkte Adresse, unter der Benutzer Ihre Website online finden können. Aber das Internet ist ein überfüllter Ort, und es kann schwierig sein, genau den gewünschten Domänennamen zu finden. Diese Tools helfen Ihnen dabei, herauszufinden, ob der von Ihnen gewünschte Name verfügbar ist, und einen zu erstellen, der verfügbar ist, wenn Ihre erste Wahl nicht verfügbar ist.

64. Namemesh
Eine leistungsstarke Suchmaschine für Domänennamen, die Ihnen hilft, Domänen zu finden, die kurz, lustig, gebräuchlich, ähnlich sind, und verschiedene andere Qualifikationen.

65. Nameboy
Geben Sie ein oder zwei Schlüsselwörter ein und erhalten Sie eine Liste verfügbarer Domains, die diese enthalten.

66. Panabee
Beschreiben Sie in zwei Worten, was Sie wollen, und Panabee erstellt eine Liste möglicher Domainnamen.

67. Impossibility
Generiert zufällige Domainnamen basierend auf einem Wort.

68. LeanDomainSearch
Suchen Sie nach einem Domainnamen anhand eines Schlüsselworts.

(back to top)

Frameworks, Vorlagen, Codepakete und Themen

Manchmal müssen Sie jeden Teil einer Website von Grund auf neu programmieren, manchmal aber auch nicht. Hier finden Sie eine Liste von Frameworks, Vorlagen, Code-Packs und Themes, die Sie verwenden können, um sich die Arbeit zu erleichtern.

69. WP-Flex
Eine leere, responsive WordPress-Theme-Vorlage, die den offiziellen WordPress Codex Best Practices und Anforderungen folgt.

70. Foundation
Ein fortschrittliches responsives Framework, das zu den beliebtesten da draußen gehört.

71. Ionic
Erstellen Sie mobile Anwendungen mit den Webtechnologien, die Sie kennen und lieben.

72. Initializr
Schnell eine Vorlage auf Basis von HTML5 Boilerplate erstellen.

73. Materialize
Ein modernes, responsives Framework, das auf Googles Material Design Spezifikationen basiert.

74. WordPress Plugin Boilerplate
Wenn Sie WordPress Plugins erstellen wollen, ist die Plugin Boilerplate ein standardisierter, objektorientierter Ausgangspunkt.

75. Frontend Boilerplate
Ein grundlegender Ausgangspunkt für die Erstellung Ihrer Websites, damit Sie nicht jedes Mal alles von Grund auf neu erstellen müssen.

76. HTML5 Boilerplate
Das erste und das beste. Kostenloser HTML5 Boilerplate Code.

77. HTML5 UP
Freie voll responsive HTML5 Vorlage.

78. 1 Line CSS Grid Framework
Ein Framework für CSS, das nur 1 Zeile lang ist!

79. 960 Grid System
Ein Skillcrush Favorit.

80. Starkers für WordPress
Eine grundlegende Vorlage für die Entwicklung Ihres ersten WordPress-Themas.

81. Barebones für WordPress
Kostenlose WordPress-Vorlage für Entwickler.

82. Underscores
WordPress-Vorlage für den Aufbau eines brandneuen Themes.

83. Sage für WordPress
Ein WordPress-Starter-Theme basierend auf HTML5 Boilerplate und Bootstrap.

84. Whiteboard für WordPress
Ein sauberes, einfaches WordPress-Theme für Entwickler.

85. Bootstrap
Ein responsives HTML-, CSS- und JS-Framework.

86. Bootswatch
Freie Themes für Bootstrap.

(zurück zum Anfang)

Code Style Guides

Sie können nicht mit der Programmierung beginnen, ohne die grundlegenden Fähigkeiten zu erlernen, aber sobald Sie diese Fähigkeiten erlernt haben, ist es an der Zeit, zu lernen, wie man kunstvoll programmiert. In diesen Leitfäden lernen Sie die besten Programmierpraktiken kennen, die Ihre Arbeit über die Grundkenntnisse hinaus verbessern werden.

87. Web Field Manual
Eine Sammlung von Ressourcen, Best Practices, Inspirationen und Referenzmaterialien für moderne Programmierung. Es gibt auch Abschnitte mit Tools und zusätzlichen Ressourcen und sprachspezifischen Informationen.

88. Google Developers Web Fundamentals
Eine umfassende Ressource für Best Practices in der Webentwicklung, direkt von Google. Perfekt sowohl für neue Entwickler als auch für diejenigen, die ihre Projekte verbessern wollen.

89. Best Practices für die Bereitstellung
Bevor Sie eine Website oder Anwendung bereitstellen, sollten Sie sich diese Best Practices ansehen, um sicherzustellen, dass alles reibungslos abläuft.

90. GitHub
GitHub’s eigener Code Style Guide.

91. Google
Google’s Code Style Guide.

92. Mozilla
Ein Code Style Guide von den Profis bei Mozilla.

(zurück zum Anfang)

Code Validation

Fertig mit dieser Website? Nicht so schnell. Bevor Sie das Projekt als „fertig“ markieren, verwenden Sie diese Tools, um lose Enden in Ihrem Code zu verpacken und zu überprüfen, ob Sie die Standards für Zugänglichkeit, Stil und bewährte Praktiken der Branche einhalten.

93. w3.org

94. Web Design Group HTML Validator

95. Validome

96. Validator.nu

97. Code Beautify

98. JSLint

99. Free Formatter

(zurück zum Anfang)

Sind Sie bereit, diese Tools mit den Fähigkeiten zu kombinieren, die Sie brauchen, um im technischen Bereich Geld zu verdienen? Schauen Sie sich unsere Programmseite an, um den richtigen Skillcrush Blueprint-Kurs für Sie zu finden. In nur drei Monaten können Sie sich qualifizieren, um im Internet zu arbeiten.