30 einfache, kostenlose zeitsparende Tools für Designer

Intelligente Tools und Apps - insbesondere solche, die Zeit sparen - sind ein Muss für Designer. Und wir haben einige der neuesten und besten in dieser Liste der kostenlosen Tools für Designer zusammengestellt!

Von typografischen Hilfselementen bis hin zu Codefragmenten und Farbpaletten, die Sie herunterladen können, enthält diese Liste viele Alltagsgegenstände, um Ihnen das Designleben zu erleichtern. Tauchen Sie ein und finden Sie einige kostenlose, praktische Tools, um Ihren Workflow zu vereinfachen.

Entdecken Sie Envato-Elemente

1. Webverläufe

Wer liebt nicht ein gutes Gefälle? WebGradients ist eine Sammlung von 180 linearen Verläufen, die Sie als Inhaltshintergrund in jedem Teil Ihrer Website verwenden können. Kopieren Sie den CSS3-Cross-Browser-Code oder laden Sie die Versionen PNG, Sketch oder Photoshop herunter.

2. Checkliste für fehlerfreie Typografie

Die Liste von Typewolf ist ein umfassender Typografie-Meisterkurs, der gleichzeitig als interaktives Tool zur Vermeidung von Typenkatastrophen dient. Die Liste ist umfassend und enthält einfache Anweisungen zur Korrektur von Fehlern.

3. LOL Farben

Benötigen Sie eine inspirierende Farbpalette? LOL ist vollgepackt mit Farbquads (und HEX-Codes), damit 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 und diese wie Benutzer auf verschiedenen Geräten anzeigen können. Sie können auch zwischen Quer- und Hochformat wechseln.

5. CSS-Statistiken

Wie sehen Ihre Stylesheets aus? CSS Stats ist ein cooles Tool, das alles in ein verwendbares Format analysiert. (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 Sie Werbegrafiken für soziale Medien erstellen können. Das Tool ist schnell und kann Sie davon abhalten, viel Zeit mit diesen kleinen Bildern zu verbringen. (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 Ihnen 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 diesem Tool über alle Google-Schriftarten auf dem Laufenden, mit denen Sie alles, was Sie verwenden, markieren und organisieren können.

9. Was ist die Schrift?

Sie sind sich nicht sicher, welche coole neue Schrift Sie immer wieder sehen? Mit Font Is können Sie ein Bild hochladen oder eine URL angeben und Typübereinstimmungen abrufen. Es bietet auch eine schöne Liste enger Übereinstimmungen, damit Sie genau die richtige Schrift finden.

10. Tod auf Lager

Dies ist eine Stock-Foto-Site, die nicht das traditionelle Aussehen von Stock-Fotos hat. Jeden Monat erhalten Abonnenten ein kostenloses Paket mit Fotos, die sie nach Belieben verwenden können. Jedes Foto wird von verschiedenen Fotografen kuratiert.

11. Todoist

Todoist ist eine praktische kleine Checklisten-App. Verwenden Sie diese Option, um Projekte in der schlanken, minimalistischen Benutzeroberfläche zu verfolgen, die einfach zu verwenden und übersichtlich ist.

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 Open-Source auf GitHub.

13. Musik zum Programmieren

Vergib das brutalistische Design; Nutzen Sie die großartige Funktion von Musik zum Programmieren. Die Site ist eine kollaborative Sammlung von Musikmischungen, die zum Anhören während des Programmierens erstellt wurden. (Oder Sie können es einfach zu Ihrer Wiedergabeliste für so ziemlich alles machen.)

14. PlaceIt

Wenn Sie ein Modell benötigen, um Projekte zu präsentieren, stehen 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 zu ermitteln - Schriftart relativ, Ansichtsfensterprozentsatz und absolut. Geben Sie Ihre Werte ein und gehen Sie.

16. Patterninja

Diese kleine App nimmt jedes Bild auf - Sie können Ihr Bild verwenden oder die kostenlose Bibliothek verwenden - und verwandelt es in ein Muster für die Verwendung in einer Vielzahl von Projekttypen. Es ist ein Werkzeug, mit dem Sie den ganzen Tag spielen können und sich nicht langweilen.

17. Theme.Cards

Finden Sie die besten kostenlosen Themen für WordPress, Bootstrap und mehr an einem Ort. Außerdem reagiert jedes Thema und jede Vorlage auf der Website, sodass Sie nicht durch viel Unordnung waten müssen.

18. Geben Sie alles ein

Denken Sie, Sie haben eine perfekte Typografie-Palette, bis Sie sie im CSS erhalten und feststellen, dass die Dinge nicht wie geplant funktionieren? Mit Type Anything können Sie großartige Schriftkombinationen erstellen, die Sie auf dem Bildschirm sehen können, und alles von Schriftart über Größe bis hin zum Abstand anpassen. Testen Sie es, bevor Sie es codieren.

19. Img2CSS

Konvertieren Sie jedes Bild in reines CSS. Laden Sie einfach Ihr Bild hoch und beobachten Sie die Magie.

20. Glyphdiff

Vergleichen Sie zwei Schriften mit diesem Tool. Wählen Sie zum Spaß zwei Schriften aus derselben Familie oder sehr unterschiedliche Kombinationen aus.

21. Impalette

Überprüfen Sie Bilder mit einem Pantone-basierten Raster auf dominierende Farben. Was das Tool besonders schön macht, ist, dass es auch viele verwandte Farboptionen bietet.

22. Visual Center

Finden Sie mit diesem Werkzeug das visuelle Zentrum von Objekten. (Sie werden möglicherweise überrascht sein, wo es in einigen Bildern liegt.) Sie können auch Sketch- oder Illustrator-Plugins verwenden, um das Tool offline zu verwenden.

23. Heldenmuster

Diese Datenbank enthält wiederholbare SVG-Hintergründe, die Sie für Webprojekte verwenden können. Passen Sie die Vordergrund- und Hintergrundfarben, die Deckkraft und den Download an.

24. Site Auditor

Ärgern Sie sich nicht über die Suchmaschinenoptimierung. Site Auditor analysiert Ihre Website, um SEO-Probleme zu finden, die Ihre Website möglicherweise davon abhalten, in Suchmaschinen wie Google zu ranken. Es bietet Probleme und Lösungen, mit denen Sie Ihre Website besser optimieren können. (Kostenlos für eine Website, bis zu 50 Seiten.)

25. Sketchpacks

Suchen und verwalten Sie Plugins für die Sketch-App direkt in der 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 zahlreiche Grundsätze und Richtlinien, die Ihnen dabei helfen, auf dem Boden zu bleiben.

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 Bildbreitenwerte zu finden, die eine erhebliche Reduzierung der Dateigröße ermöglichen.

28. Unsplash

Unsplash ist eine weitere Datenbank für hochauflösende Fotografie. Durchsuchen Sie die Datenbank oder abonnieren Sie 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, und eine herunterladbare Palette mit Alternativen bereitstellen.

30. Typ Begriffe

Wenn Ihnen der Typografie-Jargon von Zeit zu Zeit immer noch fremd vorkommt, hilft Ihnen dieser animierte Typografie-Spickzettel dabei, die Sprache in Eile zu lernen.

© Copyright 2024 | computer06.com