Die größte Auswahl an kostenlosen Tools und Ressourcen für Webdesigner und Entwickler

Webdesign
24 Juli 2018 Nataly Ohlsen
Share Tweet Share Pin

Kann es sein, dass man zu viele kostenlose Werkzeuge hat, um seinen Webdesign-Prozess zu verbessern? Es ist natürlich nicht möglich, da immer neue fortschrittliche Technologien erscheinen. Jeden Tag entdecken Webentwickler etwas Interessantes und Neues. Es dauert jedoch lange, relevante Inhalten im Netzwerk zu finden.

Spare Zeit und Energie für den Erstellungsprozess. Der heutige Beitrag stillt den Wissensdurst, befriedigt die Neugier und beantwortet drängende Fragen. Hier findest Du 137 Werkzeuge und kostenlose Web-Entwicklungs-Ressourcen, die für Webdesigner und Entwickler nützlich sein könnten.

Alle Werkzeuge,  Tutorials, Plug-Ins, Tipps und Tricks aus diesem Beitrag kosten Dich keinen Cent. Alle Premium Webdesign Tools, die wir hier vorgestellt haben, bieten eine kostenlose Testphase zum Kennlernen an. Du gehst kein Risiko ein und kannst während dieser Zeit alles ganz normal ausprobieren. Falls es Dir gefällt, kannst Du dich fürs Einkaufen entscheiden. Die folgende Liste enthält einige Produkte, die sowohl kostenlose als auch kostenpflichtige Pläne haben.

Beachte bitte, dass fast alle Materialien dieses Beitrags in Englisch verfügbar sind.

Unsere Auswahl ist die Abschnitte wie folgt aufgeteilt:

Webdesign-Werkzeuge

  • Macaw -  Dank diesem mächtigen Webdesign-Tool muss man den Code nicht manuell schreiben. Es erlaubt in einer Art WYSIWYG-Editor die Website zeichnen und per Drag & Drop alle nötigen Assets auf die Seite bringen. Das semantische HTML und CSS wird dann automatisch erstellt.
  • Gravit  ist ein professionelles Online-Tool, mit dem man hochauflösende Icons, Vektor-Grafiken, Präsentationen, Illustrationen, Screen-Entwürfe, Flyer, Prototypen und Animationen erstellen kann.
  • Lucidpress - Das Tool zum Erstellen und Teilen von beeindruckenden visuellen Inhalten: Broschüren, Flyern, Newslettern, Berichten, digitalen Publikationen, Online-Broschüren, digitalen Magazinen und u.ä.
  • Sparkle - Das professionelle Tool zum Erstellen und Bearbeiten von Vektorgrafiken. Die Lernkurve ist sehr niedrig und wenn Du schon mal mit Word oder PowerPoint gearbeitet hast, sollte es kein Problem für Dich sein mit Sparkle umzugehen.
  • LogoGala - In der Galerie können Designer ihre Arbeit zeigen oder einfach nach Inspiration suchen.
  • Fabricator - Organisiere dein Designsystem nach deinen Wünschen. Mit Fabricator kann man ein eigenes UI-Toolkit erstellen, um daraus einen StyleGuide zu generieren.
  • Uilang - Uilang ist gut darin, benutzerdefinierte UI-Komponenten zu erstellen. Es ermöglicht Entwicklern etwas Interaktivität in eine Website hinzufügen, Prototypen zu erstellen usw. Das Tool lässt sich komplett ohne spezielle Programmierkenntnisse verwenden.
  • Anijs - Dank dieser deklarativen Behandlungsbibliothek für CSS-Animationen erweiterst Du deine Web-Design-Fähigkeiten ohne Programmierung. Es funktioniert gut auf iPad, iPhone, Android und in  allen modernen Browsern.
  • ColorFavs - ein Ort zum Erstellen und Entdecken neuer Farben und Paletten für Projekte.
  • Bei Froont handelt es sich um einen WYSIWYG-Editor, der Websites für verschiedene Gerätegrößen selbst entwickeln und anpassen lässt. Der Kreativität sind dabei keine Grenzen gesetzt.
  • STATNUT versorgt Dich mit Online-Statistiken all jener Web-Dienste (Facebook, Twitter, Instagram, Dribble, Youtube, Tumblr und Vimeo etc.). Das App ist schön und bunt.
  • Designfeed - Man sagt Designfeed einfach, was man will, und es werden   unzählige Design-Varianten zur Auswahl automatish erstellt.

  • Bonsai - Es hilft mehr als 10.000 unabhängigen Fachleuten, Zahlungen pünktlich zu erhalten. Bei der Anmeldung werden 5 kostenlose Rechnungen geliefert.
  • The Pattern Library  ist ein tolles Projekt, das eine breite Sammlung unterschiedlichster Muster bietet. Alle Designs liegen entweder als JPG oder als PNG vor. Alle Pattern stammen von verschiedenen Designern und sind frei für private und kommerzielle Benutzung.
  • Write a Book - Möchtest Du dein Wissen mit der Welt teilen? Und dafür plannst Du ein Buch zu schreiben? Dieses Produktionswerkzeug hilft Dir bei der Erstellung und Bearbeitung von eBooks.
  • Hack - ein beliebtes Tool zur Bearbeitung von Schriftarten, das nach  Deinen Bedürfnissen angepasst werden kann. Es erhält Sets mit regulären, fettgedruckten, kursiven und schrägen Buchstaben und hilft Dir alle Anforderungen an die Syntaxhervorhebung zu erfüllen. Es wird mehr als 1500 Zeichen, einschließlich lateinischer, griechischer moderner und kyrillischer erweiterter Sätze angeboten.
  • Desygner - Mit Desygner kann man Texte bearbeiten und Fotos von einer Smartphone/Tablet-Kamera, Facebook, Instagram, usw. einfügen. Es bietet Hunderte von vorgefertigten Templates an, die Dir beim Designen eigener Illustrationen helfen. Das Ergebnis kann man online teilen oder als PDF, JPG oder PNG völlig frei herunterladen.
  • CMD space - Jeder Designer braucht ein Portfolio. Dieses Tool verbindet sich mit deinem Dribble-Konto und gibt Dir die Möglichkeit, sofort ein Design-Portfolio zu erstellen.
  • WeVideo ist ein Online Videobearbeitungsprogramm. Man kann Videos in der Cloud bearbeiten. Es benötigt keine Installation. Egal, ob Du Anfänger oder Profi bist, jeder kann an Videoprojekten arbeiten. Die Vorteile von WeVideo liegen in seiner einfachen Benutzung und seiner kollaborativen Natur.
  • Semplice - Das erste voll responsive "Case Study" Portfolio-System mit erweiterten Funktionen für kleine Studios und Startups. Code-Kenntnisse werden nicht benötigt.
  • Build it with Me ist ein Tool, mit dem man sich mit Gleichgesinnten verbinden und nützliche Anwendungen zusammen erstellen kann.
  • Visage - Willst Du viele visuelle Inhalte erstellen? Visage ist ein Design-Tool, das die Erstellung von Markeninhalten vereinfacht.
  • Ezgif - Mit diesem GIF-Maker-Tool kann man schnell Gifs erstellen, skalieren, zuschneiden, invertieren, optimieren und sogar auch einige Effekte anwenden.  Es ist auf fast alle Bildtypen anwendbar (jpeg, png, bmp, tiff).
  • Imgix - Mit Imgix kann man Bilder online auf eine bestimmte Größe skalieren und verarbeiten. Das spart Platz und macht deine Website schneller.

  • Mobile Wireframe Kit ist ein Sketch-Dokument, das die häufig verwendeten UI-Elemente im Mobile App Design erhält.
  • Sketch Plugins - eine Sammlung von Sketch-Add-Ons, die von Drittentwicklern erstellt wurden.
  • Sketch Toolbox - ein einfacher PlugIn-Manager für Sketch. Man kann hier die beliebtesten Add-Ons für Sketch finden. Die neuen Addons lassen sich mit einem einzigen Klick herunterladen und installieren. Alle Add-Ons werden automatisch aktualisiert.
  • Sketch Land - eine Liste der nützlichsten Ressourcen für diejenigen, die Sketch verwenden.
  • Craft ist ein PlugIn für Sketch und Photoshop, das Ideen von Softwareentwicklern mit den Herausforderungen von digitalen Designern verknüpft. Es macht den gesamten Arbeitsprozess von Designern durch Automatisierung schlanker, schneller und anpassungsfähiger.
  • Bjango - ein umfassendes Set von App-Icon-Templates für Photoshop, Illustrator, Sketch und Affinity Designer. Es gibt Templates für Android, iOS, OS X, Apple TV (TVOS), Apple Watch (watchOS), Windows, Windows Phone und Web-Favicons. Es bietet auch eine Sammlung von Photoshop-Aktionen, Photoshop-Skripten, Hazel-Regeln, OS X-Workflows und weiteren nützlichen Dingen für Designer und Entwickler.
  • Sketch Palettes - ein Sketch-Plugin, mit dem man Farben speichern und zum Farbwähler hinzufügen kann.
  • Marvel - ist eine Erweiterung für Sketch, um mobile und Web-Prototypen zu erstellen.
  • Cognitom - eine Sammlung von Vorlagen zum Erstellen mit Sketch einer Symbolschrift.
  • Devices - eine Sammlung von Bildern und Sketch-Dateien für beliebte Geräte.

Tools, die nur für Mac geeignet sind

  • RapidWeaver - Zum Designen, Erstellen und Veröffentlichen von eigenen Websites.
  • Cactus for MAC - ein schneller und einfacher statischer Website-Generator, der die beste Webdesign-Technologie in einer eleganten Lösung verwendet.
  • iOS 9 GUI - Mit diesem Kit kann man die Elemente der Benutzeroberfläche für iOS 9 im 100% Vektorformat analysieren.


UI/UX Werkzeuge

  • UI - eine tägliche Inspiration aus dem UI-Archiv.  Es wird Dir insgesamt 117 Kategorien mit ca 2200 Designs zur Verfügung gestellt.
  • Heat Map - hilft Dir zu verstehen, welche Elemente von Webseiten mehr oder weniger Aufmerksamkeit erregen. Das Ergebnis wird innerhalb der 20 Sekunden erscheinen. Keine speziellen Codes oder Skripts sind nötig. Der Algorithmus basiert auf wissenschaftlichen Untersuchungen.
  • Usability Square - Hier treffen sich Usability-Enthusiasten, um Ideen zu teilen und neue Produkte zu testen. Wenn Du ein unvoreingenommenes  Feedback von echten Menschen brauchst - dies ist der richtige Ort.
  • Marvel - Mit der Drag & Drop-Funktion kannst Du schnell deine Entwürfe und Skizzen in iOS-Prototypen verwalten, sie an die Benutzer senden und mit dem Testen beginnen. Es wird auch angezeit, was an jedem Punkt deines Prototyps passiert. Die Ergebnisse kann man mit dem Team einfach teilen.

Zum Lesen rund um UI/UX

  • Im Creator - Es ist mehr als nur ein typischer Webseite-Ersteller. Man kann Streifen und Polymere bereit für die Erstellung verwenden. Hier ist Programmieren gar nicht notwendig und alle Ergebnisse sind responsive und kompatibel mit Google. Es beinhaltet auch eCommerce und Blogs.
  • StackHive ermöglicht responsive und pixelgenaue Websites mit Drag-and-Drop zu gestalten und automatisch HTML-, CSS- und JS-Qualitätscodes zu generieren. Hier findet man viele umfangreiche Stil- und Animationspanels.
  • RAML - Mit RAML sieht man, wie sein API aussieht. Es ist gut lesbar. Man muss keine einzelne Codezeile schreiben. Es erlaubt nicht nur das API-Design zu verfeinern, sondern auch eine voll funktionsfähige Simulation zu erstellen.
  • Design Research Techniques - Dies ist ein Online-Verzeichniss für partizipative Design-Techniken. Diese Techniken helfen bei der Entwicklung eines Projektlebenszyklus durch die Beteiligung mehrerer Interessengruppen, einschließlich potenzieller Nutzer oder Zielgruppen, Partner oder interner Teams.
  • Surreal CMS  verbindet sich über FTP, SFTP oder Amazon S3 mit Deiner Website, um Änderungen vorzunehmen. Mache Dir um Updates keine Sorgen mehr. Deine Kunden können den Inhalt nur innerhalb der angegebenen Elemente bearbeiten. Alle Änderungen werden nachverfolgt, sodass Du sehen kannst, was deine Kunden tun, und gegebenenfalls sogar zu den vorherigen Versionen zurückkehren. Die kostenlose Testversion ist 14 Tage lang gültig.
  • Brackets - ein Open-Source-Texteditor für Webdesigner, der mit Adobe in JavaScript, HTML und CSS erstellt wurde.
  • Mit Web Designer erstellt man ansprechende interaktive HTML5-basierte Designs und animierte Grafiken, die auf allen Geräten überzeugend dargestellt werden. Dies ist ein komplettes Design-Paket, mit dem man jede Idee realisieren kann.
  • Responsive Web Design Tester zeigt wie dein Design in verschiedenen Bildschirmgrößen ausgezeigt werden.
  • Browser Shots macht Screenshots des Webdesigns in verschiedenen Betriebssystemen und Browsern. Das ermöglicht die Website auf verschiedenen Browsern zu testen. Außerdem kann man Umgebungsfaktoren wie die Auflösung, Farbtiefe, Aktivierung von Javascript etc. testen.
  • Fenix Web Server - ist ein einfacher statischer Desktop-Web-Server. Er eignet sich gut für Entwickler und Designer, die mit statischen Sites arbeiten.
  • NW.js (früher „node-webkit“) vereint die Browser-Engine WebKit mit Node.js und ist plattformübergreifend. Durch den Einsatz von NW.js schafft man es sehr leicht, eine Anwendung mit nur einer Codebasis auf allen wichtigen Plattformen bereitzustellen.
  • Commerce.js - Mit diesem Tool erstellt man schnell schöne E-Commerce-Dinge, die mit ein paar Zeilen Code beginnen.
  • Valence - ist ein experimentelles AddOn, welches die Firefox Developer Tools auch in anderen - auch nicht-gecko-basierten - Browsern bereitstellt.
  • Bedrock ist als „Wrapper“ für WordPress zu verstehen. Plugins und Themes können damit mit Composer verwaltet (auch aktualisiert) werden.
  • MJML  ist eine Open Markup-Sprache, die die Erstellung einer responsiven E-Mail vereinfacht. Dies ist durch ihre klar verständliche Syntax und zahlreiche integrierte Komponenten möglich.
  • Web-Konsole - Das beliebteste und leistungsfähigste Tool für Entwickler. Mit der Entwicklerkonsole kannst Du verschiedene Befehle eingeben, um mehr Informationen über deinen Client und deine Spielsitzung anzuzeigen.
  • UserForge ist sehr flexibles Web-App-Tool, mit dem man User-Persona-Templates leicht entwickelt. Man kann die Interessenvertreter in allen Phasen auf dem Laufenden halten, Menschen zur Zusammenarbeit einladen und viel mehr.
  • Kore ist ein benutzerfreundliches Framework für Webanwendungen zum Schreiben von C-skalierbaren Web-APIs. Sein Hauptziel ist die Sicherheit, Skalierbarkeit und die schnelle Entwicklung und Bereitstellung dieser APIs.
  • Hoodie ist ein komplettes Backend für Anwendungen: entwickele den Frontend-Code, verbinde ihn mit der API und genieße die vorbereitete Anwendung.
  • Tumult Hype - Generiere schöne HTML5-Webinhalte ohne Programmierung. Interaktive Inhalte und Animationen, die mit Tumult Hype erstellt wurden, funktionieren genau so gut auf PCs, Smartphones und iPads.
  • WebShell ist ein Web-App, das in das OS X App ohne Programmierung integriert ist.
  • WatchPeopleCode - Hier kann man Livestreams von Codern beobachten und das Programmieren live lernen.
  • Mobirise - ist ein Offline Website-Baukasten Programm für Windows oder Mac, mit der man ganz einfach kleine bis mittlere Webseiten, Landingpages, online Bewerbungen, Portfolios und Werbeseiten für Apps, Events, Dienste oder Produkte erstellen kann.
  • GrapesJS - ist ein kostenloser und Open Source Web Template Editor - das Werkzeug der nächsten Generation zum Erstellen von Vorlagen ohne Programmierung.
  • Mailmalade - Mit diesem Tool kann man schnell HTML-E-Mails je nach Custom-Design erstellen. Programmierkenntnisse sind nicht erforderlich.
  • Challenge Hunt  ist ein Open-Source-Programmierwettbewerb und ein Hackathon-Aggregator.
  • Lytmus - ist ein Live-Interview-Tool für Leute, die Ingenieure interviewen. Führe Interviews für Back-End-Entwickler, Front-End-, Full-Stack-, Mobil- und Produktanalysten. Der virtuelle Rechner im Browser enthalt ca. 21 Sprachen, 6 Frames und 10+ Tools.
  • Experimental Platform - Als Entwickler kann es Spaß machen, einige Dinge mit der experimentellen Plattform zu erstellen.

Communities speziell für Webentwickler und Webdesigner

  • Designer-Hangout ist wahrscheinlich eine der größten und aktivsten Community für UX-Designer im Netz.
  • Stack Overflow - Es ist eine der beliebtesten Entwickler-Community-Site. 4,7 Millionen Programmierer und Entwickler helfen Dir schnell.
  • #frontendDevelopers - Man kann Feedback von gleichgesinnten Entwicklern erhalten, die neuesten Trends kennenlernen und Ideen in diesem Forum austauschen.
  • Front-end Front: Eine Community speziell für Front-End-Entwickler. Hier kann man Fragen stellen und wichtige Links miteinander teilen.
  • Hashnode: Eine globale Community für Software-Entwickler zum gegenseitigen Vernetzen und um voneinander zu lernen.
  • Refind: Eine Community, welche die besten Links des Netzes sammelt und miteinander teilt.
  • Webdeveloper.com: Hier können Webentwickler das Entwickeln einer Website erlernen. Es geht um HTML, Java und JavaScript.

Collaboration-Tools zur Webentwicklung

  • Figma ermöglicht kollaboratives Webdesign. Alles was ihr tun wird ständig gespeichert. Das Tool funktioniert auf jedem Betriebssystem und seine Version von Preview Release ist kostenlos.
  • Trello:  Trello ist ein flexibler und visueller Weg, um Teams miteinander zu organisieren. Die Software basiert auf »Karten«, die kommentiert werden und auch mit Prioritäten versetzt werden können. Schnell und einfach zu erlernen.
  • Asana: Mit diesem Collaboration-Tool können Teams ihre Arbeit verfolgen und bisherige Ergebnisse einsehen. Perfekt um zu sehen, wo das Projekt gerade steht.
  • Jira: Jedes Mitglied deines Software-Teams kann seine Arbeit planen, Ergebnisse verfolgen und die Software anschließend freigeben.

Zum Lesen

  • Google Accelerated Mobile Pages -  eine Erklärung von Christian Cantrell: Alles, was man über Accelerated Mobile Pages von Google wissen muss.
  • Improve Google Ranking von Brian Jackson - 5 Möglichkeiten, das Ranking von Google im SERP mit einem CDN zu verbessern.
  • A Frame -  Die Anatomie eines Frames von Aerotwist.
  • Cleaning After Internet Explorer - Bereinigung nach dem Internet Explorer - Ein Tutorial von Adrian Sandu.
  • Jade Tutorial for Beginners - Ein Jade Tutorial für Anfänger von Sanjay Guruprasad.
  • Remote Debugging - Remote-Debugging für Frontend-Entwickler von Panayiotis Velisarakos.
  • Frontend Design - Frontend Design von Brad Frost.
  • Packt Pub - ein Ort wo sich die neue und beliebteste Bücher und Videos für Designer und Entwickler befinden. Die Redakteuren der Website wählen sie manuell aus.


HTML und CSS Werkzeuge

  • HTML Cheat Sheet - Dieser interaktive HTML-Spickzettel enthält eine vollständige Liste aller HTML-Elemente einschließlich ihrer Beschreibungen, Codebeispiele und Live-Vorschau.
  • W3Schools ist eine E-Learning-Webseite für Tutorials und Hilfestellungen im Bereich Webentwicklung und Webdesign.
  • Enjoy CSS - Dies ist ein fortgeschrittener CSS-Generator, um umfangreiche Grafikstile ohne Programmierung zu erstellen.
  • CSS Generator Tool, um viele verschiedene praktische CSS-Deklarationen zu demonstrieren und schnell zu generieren.
  • CSS Typeset - Füge einfach den Text ein, den Du ändern möchtest, und kopiere dann das generierte CSS
  • One CSS Feature - Die einzige CSS-Funktion, die wir wirklich von Bitsofcode haben wollen.
  • Imperfect Buttons - Handgezeichnete Border Buttons von Tiffany Rayside.
  • Poor Man's Styleguide - ein Frontend-Style-Guide von Bryan Braun.
  • Sass Placeholders - Sass: Platzhalter und @extend-only Selektoren  von Steven Bradley.
  • Penguin - Penguin: kein HTML, kein JS. Ein Pen von Abdullah Abusall

Wenn Du HTML5-Animations-Tools suchst, dann sieh Dir unbedingt unsere Liste mit 15 Top HTML5 Werkzeugen zur Erstellung von Fortgeschrittenen Animationen an.

Zum Lesen rund um CSS


JS Werkzeuge

  • Learn JS - Wie man JavaScript lernt  - von Derek Sivers.
  • MERN - Mit diesem Werkzeug erstellt man isomorphe Apps mit Mongo, Express, React und NodeJS. Es spart Zeit bei Konfiguration und bringt dich auf den neuesten Stand mit bewährten Technologien.
  • Ember - Funktionale Programmierung in Ember - Jeffrey Biles interviewt talentierte Ember-Entwickler aus der ganzen Welt und teilt ihre Herausforderungen, Leidenschaften und Triumphe.

JS Reading


ES6 Werkzeuge

  • ES6 - ES6 cheatsheet.
  • ES6 Library - Das Minimum für eine ES6-Bibliothek.
  • Descartes  ist eine experimentelle Bibliothek zum Schreiben von CSS in JavaScript für Programmierer.
  • Search Index ist eine dauerhafte Volltext-Suchmaschine für den Browser und Node.js.

Zum Lesen rund um ES6

  • Waka Time - Quantifiziere deine Programmierung mit diesem  PlugIn. Metriken, Statistiken und Zeiterfassung werden basierend auf deinen Programmieraktivitäten automatisch generiert.
  • Bricks.js -  Ein schneller Masonry-Layout-Generator für Element mit fester Breite.
  • okayNav jQuery Plugin - Das PlugIn dient dazu, die Navigationslinks in einer Off-Screen-Navigation anstatt aller Links gleichzeitig zusammenzufassen.
  • jQuery easypin - Ein einfaches und schnelles Plugin, das Objekte in den Bildern fixiert.
  • Sticky Elements - Zur Erstellung von Sticky Elements und Sticky Links

Beim Spielen Programmieren lernen

  • Hour of Code - In dieser speziellen Ausgabe von Box Island Code Time lernst Du/ Deine Kinder die Grundlagen von Algorithmen, Sequenzen, Loops und Conditionals. Das Tutorial wird von Studenten geleitet und ist für alle Altersgruppen geeignet.
  • Codingame - Wenn Du Freude am Programmieren hast oder einfach dein Skill verbessern möchtest, solltest du Dir das unbedingt mal anschauen.
  • Hopscotch - Erforsche die Grundlagen von CS als Abstraktion, Variablen, Bedingungen, Schleifen und anderes mehr, während Du lustige Dinge machst.
  • MeteorToys - Unglaublich nützliche Entwicklungswerkzeuge, die dabei helfen, exzellente Anwendungen zu erstellen. Die Verwendung von MeteorToys erhöht die Geschwindigkeit der Fehlerbehebung und hilft Dir dabei, schnellere und funktionalere Lösungen zu erstellen.
  • ScratchJr - Mit ScratchJr lernen junge Kinder (5-7 Jahre) wichtige neue Fähigkeiten, indem sie ihre eigenen interaktiven Geschichten und Spiele programmieren.

Wir haben Dir mehr als 135 Webdesign und Entwicklungswerkzeuge und nutzliche Quellen zur Verfügung gestellt. Welches praktische Tool fehlt Dir, was Du häufig oder besonders gerne benutzt?

CodierungFreebiesWeb-EntwicklungWerkzeuge
Nataly Ohlsen
Nataly Ohlsen

Ist Expertin auf dem Gebiet Content-Marketing bei TemplateMonster. Nataly auf Facebook.

Verwandte Beiträge

Webdesign

WordPress Themes für Fotografie: Deine besten Fotos im Rampenlicht

28 Mai 2021 7K
Anleitungen

Wo finde ich die php.ini-Datei?

15 Februar 2021 12K
Webdesign

Wie man herausfindet, mit welchem CMS eine Website erstellt wurde

18 Mai 2020 20K