Intelligente Tools und Apps - vor allem solche, die Zeit sparen - sind für Designer ein Muss. Und wir haben einige der neuesten und besten in dieser Liste der kostenlosen Tools für Designer gesammelt!
Von typografischen Hilfselementen bis hin zu Code-Snippets und Farbpaletten, die Sie herunterladen können, ist diese Liste mit Alltagsgegenständen gefüllt, um Ihnen das Design zu erleichtern. Tauchen Sie ein und finden Sie kostenlose, praktische Tools, um Ihren Workflow zu vereinfachen.
1. Webgradienten
Wer liebt eine gute Steigung nicht? WebGradients ist eine Sammlung von 180 linearen Farbverläufen, die Sie als Hintergrund für Inhalte in einem beliebigen Teil Ihrer Website verwenden können. Kopieren Sie den CSS3-Crossbrowser-Code oder laden Sie die Versionen PNG, Sketch or Photoshop herunter.
2. Checkliste für fehlerlose Typografie
Die Liste von Typewolf ist ein umfassender Typografie-Meisterkurs, der sich auch als interaktives Werkzeug zur Vermeidung von Typkatastrophen eignet. Die Liste ist umfassend und bietet eine einfache Anleitung, um Fehler zu korrigieren.
3. LOL-Farben
Benötigen Sie eine inspirierende Farbpalette? LOL ist vollgepackt mit Farbquads (und HEX-Codes), mit denen Sie Kombinationen finden können, die Sie möglicherweise nicht berücksichtigt haben.
4? Resizr
Testen Sie die Reaktionsfähigkeit Ihrer Website mit diesem Tool, mit dem Sie eine URL eingeben können und die Benutzer auf verschiedenen Geräten sehen können. Sie können auch zwischen Quer- und Hochformatansichten wechseln.
5. CSS-Statistiken
Wie sehen Ihre Stylesheets aus? CSS Stats ist ein cooles Tool, das alles in ein brauchbares Format zerlegt. (Es ist ein großartiger Helfer, wenn Sie sehen möchten, welche Farbe oder Schriftart in einem Design enthalten ist.)
6. Adobe Spark
Das Spark-Tool von Adobe ist ein kostenloser Image-Builder, mit dem Werbegrafiken für soziale Medien erstellt werden können. Das Tool ist schnell und kann Sie davon abhalten, sehr viel Zeit für diese kleinen Bilder aufzuwenden. (Und es funktioniert wie die meisten anderen Adobe-Produkte, sodass es keine echte Lernkurve gibt.)
7. Google Web Designer
Diese App befindet sich noch in der Beta-Phase, hilft jedoch dabei, ansprechende, interaktive HTML5-basierte Designs und Bewegungsgrafiken zu erstellen, die auf jedem Gerät ausgeführt werden können. Wer möchte diese Hilfe nicht von Google?
8. Schriftbibliothek
Bleiben Sie mit all diesen Google-Schriftarten mit diesem Tool auf dem Laufenden, mit dem Sie alles, was Sie verwenden, mit Tags versehen und organisieren können.
9. Was ist ein Font?
Sie sind sich nicht sicher, was für eine coole neue Schrift Sie immer sehen? Was für eine Schrift ist, können Sie ein Bild hochladen oder eine URL angeben und Typübereinstimmungen erhalten. Es bietet auch eine nette Liste enger Übereinstimmungen, die Ihnen helfen, genau die richtige Schrift zu finden.
10. Tod für Lager
Dies ist eine Fotoarchiv-Website, die nicht das traditionelle Aussehen von Fotoaufnahmen hat. Jeden Monat erhalten Abonnenten ein kostenloses Fotopaket, das sie nach Belieben verwenden können. Jeder wird von verschiedenen Fotografen kuratiert.
11. Todoist
Todoist ist eine praktische kleine Checklisten-App. Verwenden Sie es, um Projekte in der schlanken, minimalistischen Benutzeroberfläche zu verfolgen, die einfach zu bedienen ist und keine Störungen verursacht.
12. Bulma
Bulma ist ein einfaches und modernes CSS-Framework, das auf Flexbox basiert. Es ist modular und reaktionsschnell und jeder Teil des Codes ist auf GitHub verfügbar.
13. Musik zum Programmieren
Vergib das brutalistische Design. Nutzen Sie die großartige Funktion von Music for Programming. Die Website ist eine kollaborative Sammlung von Musikmischungen, die für das Anhören während des Programmierens erstellt wurden. (Oder Sie können es einfach zu Ihrer Playlist für so ziemlich alles machen.)
14. PlaceIt
Wenn Sie ein Modell benötigen, um Projekte zu zeigen, stehen Ihnen auf dieser Website mehr als 2.500 Creative Commons-Optionen zur Auswahl.
15. CSS-Lineal
Verwenden Sie dieses Tool, um die Unterschiede zwischen den CSS-Längen (relative Schriftart, prozentualer Ansichtsbereich und absolut) anzuzeigen. Geben Sie Ihre Werte ein und gehen Sie.
16. Patterninja
Diese kleine App nimmt jedes Bild - Sie können Ihr eigenes oder die kostenlose Bibliothek verwenden - und daraus ein Muster für die Verwendung in einer Vielzahl von Projekttypen machen. Mit diesem Werkzeug können Sie den ganzen Tag spielen und sich nicht langweilen.
17. Theme.Cards
Finden Sie die besten kostenlosen Themes für WordPress, Bootstrap und mehr an einem Ort. Außerdem ist jedes Thema und jede Vorlage auf der Website ansprechend, sodass Sie sich nicht durch viel Durcheinander kümmern müssen.
18. Geben Sie etwas ein
Denken Sie, Sie haben eine perfekte Typografie-Palette, bis Sie sie im CSS erhalten und erkennen, dass die Dinge nicht wie geplant funktionieren? Type Anything hilft Ihnen beim Erstellen großartiger Schriftkombinationen, die Sie auf dem Bildschirm sehen können, indem Sie alles von der Schrift über die Größe bis zum Abstand anpassen. Testen Sie es, bevor Sie es codieren.
19. Img2CSS
Konvertieren Sie ein beliebiges Bild in reines CSS. Laden Sie einfach Ihr Bild hoch und sehen Sie, wie der Zauber passiert.
20. Glyphdiff
Vergleichen Sie zwei Schriften mit diesem Werkzeug. Wählen Sie zwei Schriftarten aus derselben Familie oder sehr unterschiedlichen Kombinationen, nur zum Spaß.
21. Impalette
Prüfen Sie mit einem Pantone-basierten Raster, ob Farben in Bildern dominieren. Was das Tool außergewöhnlich macht, ist, dass es auch viele verwandte Farboptionen bietet.
22. Visual Center
Mit diesem Werkzeug das visuelle Zentrum von Objekten suchen. (Möglicherweise sind Sie überrascht, wo einige Bilder liegen.) Sie können das Tool auch mithilfe von Sketch- oder Illustrator-Plugins offline verwenden.
23. Heldenmuster
Diese Datenbank ist mit wiederholbaren SVG-Hintergründen gepackt, die Sie für Webprojekte verwenden können. Passen Sie die Vordergrund- und Hintergrundfarben, die Deckkraft und den Download an.
24. Standortprüfer
Ärgern Sie sich nicht über die Suchmaschinenoptimierung. Site Auditor analysiert Ihre Website, um SEO-Probleme zu finden, durch die Ihre Website möglicherweise nicht in Suchmaschinen wie Google eingestuft wird. Es enthält Probleme und Lösungen, mit denen Sie Ihre Website besser optimieren können. (Kostenlos für eine Website, bis zu 50 Seiten.)
25. Skizzenpakete
Suchen und verwalten Sie Plugins für die Sketch-App direkt über die Menüleiste. Die Installation mit nur einem Klick.
26. Ethische Webentwicklung
Helfen Sie als ethischer Designer, ein besseres Web zu schaffen. Diese Liste enthält viele Grundsätze und Richtlinien, um Sie auf dem Laufenden zu halten.
27. Responsive Image Breakpoint Generator
Mit diesem Tool können Sie mithilfe eines algorithmischen Konzepts die besten Bildauflösungen für verschiedene Bildschirmgrößen auswählen, um Werte für die Bildbreite zu finden, die eine erhebliche Reduzierung der Dateigröße ermöglichen.
28. Unsplash
Unsplash ist eine weitere Datenbank für hochauflösende Bilder. Durchsuchen Sie die Datenbank oder abonnieren Sie Fotos und erhalten Sie Fotos in Ihrem Posteingang.
29. Material Design Palette
Alles Material Design ist heutzutage im Trend, besonders die helle Farbauswahl. Mit diesem Tool können Sie Farben auswählen, sehen, wie sie im Design aussehen werden, und eine alternative Palette zum Herunterladen bereitstellen.
30. Typbegriffe
Wenn der Typografie-Jargon von Zeit zu Zeit fremd klingt, hilft Ihnen dieses animierte Typografie-Spickzettel, die Sprache schnell zu erlernen.