Entwicklung & Design

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

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

6 Kommentare
Thomas

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

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
Peter
Peter

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

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.