Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

7 Tools, die jeder Webworker kennen sollte

    7 Tools, die jeder Webworker kennen sollte

Als Webdesigner ist man immer auf der Suche nach neuen Workflows, Ideen und Tools, die unsere alltägliche Arbeit ein wenig vereinfachen können. Fast täglich finden neue Tools ihren Weg auf den Markt und auch eine Vielzahl von altbewährten Helfern steht Designern und Webworkern zur Verfügung. 7 Werkzeuge, die jeder Webworker kennen sollte, haben wir hier zusammengestellt.

Responsive Inspector

responsive_inspector_yeebase-595x371

Der Responsive Inspector macht die Arbeit mit Media Queries zum Kinderspiel. Das Tool zeigt, welche Media Queries im Dokument vorhanden sind, kann den Browser auf die Einstellungen der jeweiligen Media Query bringen und die genaue Position der Query im Stylesheet anzeigen.

Responsive Test

responsive_test_tool

Mit Designmodo's Responsive-Design-Test-Tool kannst Du schnell in Erfahrung bringen, wie dein Design auf verschiedenen Bildschirmgrößen aussieht. Neben manueller Eingabe der Viewport-Größe bietet das Tool zahlreiche Voreinstellungen für Mobile-, Tablet- und Desktop-Geräte.

Adobe Edge Reflow

edge_reflow_hero-595x315

Adobe Edge Reflow soll Designer dabei unterstützen, responsive Webseiten zu gestalten. Durch ein intuitives User-Interface kann ein Design für mehrere Bildschirmgrößen per Drag & Drop zusammengestellt werden. Dabei gibt das Tool bei Klick sofort ein visuelles Feedback für die festgelegten Viewport-Breiten. Mit der Edge-Inspect-Anbindung kann das Werk auch direkt auch auf verschiedenen Endgeräten betrachtet werden.

Color Scheme Designer

color_scheme_designer

Im Internet kursieren unzählige Farb-Paletten-Generatoren – Color Scheme Designer ist einer der besten. Das Tool stellt eine Vielzahl von Methoden für die Farbfindung zur Verfügung und liefert passende Farbkombinationen. Außerdem generiert es bei Bedarf eine Vorschau für den Farbeinsatz in einer Musterwebseite, kann die Wahrnehmung bei verschiedenen Arten der Farbblindheit simulieren und stellt eine Vielzahl von Exportmöglichkeiten zur Verfügung.

Fake images please?

fake_images_please

Es ist schwierig, Design-Projekte ohne passendes Bildmaterial zu erstellen. Manchmal kommt man aber nicht drum herum. Mit Fake images please? kannst du schnell Platzhalterbilder in allen erdenklichen Formaten generieren. So gewinnt das Design noch vor Anlieferung des eigentlichen Contents an Form und ist bereit für Feedback und Anpassungen.

CSS Beautifier

css_beautifier-595x201

Die Zeit für schönen Code ist nicht immer da. Gut, dass es Tools wie den CSS Beautifier gibt, mit dem Webentwickler CSS-Stylesheets mit nur einem Klick lesbar und konsistent machen können. Das Online-Tool formatiert die unübersichtlichsten CSS-Dokumente in ein gut lesbares Stylesheet zu einem gut strukturierten Dokument und kann sogar minifizierte Stylesheets wieder lesbar machen.

MyScriptFont

my_script_font_webworker_tools

Mit MyScriptFont kannst du eigene Fonts erstellen. Ursprünglich wurde das Tool für die Erstellung von Handschriften-Fonts entwickelt, es eignet sich aber genauso gut für die Erstellung eigener Zeichensätze oder von Icon- und Logo-Fonts. Vorlage herunterladen, ausfüllen und hochladen: schon steht die neue Font als True Type, Open Type oder SVG zur Verfügung.

Weiterführende Links

Finde einen Job, den du liebst

3 Reaktionen
Peter
Peter

Um responsive Websites schnell auf den wichtigsten Endgeräten anzuschauen, ziehe man einfach am Bowserfenster :-)

Antworten
Simon

Vielen Dank für die Auflistung! Bin sehr gespannt, wo uns dieser Weg hinführt. Und ob wir nicht bald direkt im Browser prototypen!?

Antworten
Thomas

Um responsive Websites schnell auf den wichtigsten Endgeräten anzuschauen, eignet sich auch der Responsive Design Viewer von Active Value ganz gut.

Antworten
Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden