Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

Es ist wieder soweit, ich habe die interessantesten Tools des Monats für euch zusammengefasst. Wie bereits in den letzten drei Monaten (Nov., Okt., Sep.) findet ihr in diesem Artikel eine bunte Zusammenstellung an Hilfsmitteln für den Einsatz im Webdesign. Aktuell besonders interessant sind die Tools zum Thema Responsive Design, aber auch Video-Hintergründe, Animations-Tools, Slideshows, Scrolling-Effekte, SVG-Renderer und CSS3-Generator sind mit von der Partie.

Bookmarklet

Viewport Resizer

Mit dem Viewport Resizer könnt ihr den Viewport eures Browsers auf verschiedene typische Formate (iPhone, iPhone5, iPad …) einstellen. Das Tool zeigt darüber hinaus den aktuellen Viewport anhand der Größe des Browserfensters an. Über einen Konfigurator können auch eigene Voreinstellungen festgelegt werden.

Screenshot von Viewport Resizer
Screenshot von Viewport Resizer

Download-Quellen

Endless Icons

Auf Endless Icons findet ihr einfarbige, simple und sehr brachbare Icons zum kostenlosen Download im PNG-Format.

Screenshot von Endless Icons
Screenshot von Endless Icons

Online-Tools

Ringmark

Mit Ringmark wird überprüft, wie gut ein mobiler Browser den Anforderungen mobiler Web-Entwicklung gerecht wird. Das Tool sollte über einen mobilen Browser aufgerufen werden und zeigt dann in Form von Ringen wie gut der Browser sich geschlagen hat.

Screenshot von Ringmark auf einem Dekstop-Browser
Screenshot von Ringmark auf einem Dekstop-Browser

BrandColors

Wenn ihr in Zukunft einmal die exakte Hausfarbe eines (Online)-Unternehmens sucht, schaut bei BrandColors vorbei. Hier werden die Farbcodes der prominentesten Vertreter gelistet und können per Klick kopiert werden.

Die Farben bekannter Marken auf BrandColors
Die Farben bekannter Marken auf BrandColors

CSS3 Selectors Test

Mit diesem Tool testet ihr welche CSS3 Selektoren (z.B. .class, E + F, :nth, etc.) euer Browser unterstützt. Ein sehr hilfreiches Werkzeug bei der Suche nach Inkompatibilitätsproblemen.

Screenshot des CSS3-Selector Tests in Chrome
Screenshot des CSS3-Selector Tests in Chrome

Easing.net

Auf easing.net findet ihr eine Übersicht über die verschiedenen Easing-Animations-Effekte. Mit diesem Tool lässt sich sehr schnell die gewünschte Art der Animation finden.

Screenshot von Easing.net
Screenshot von Easing.net

On/Off FlipSwitch

Mit diesem Online-Tool könnt ihr im Handumdrehen ansehnliche und animierte An/Aus-Schalter für eure Website herstellen. Ihr könnt entweder das Aussehen von iOS oder Android übernehmen, oder den Schalter selbst gestalten.

Screenshot von On/Off FlipSwitch
Screenshot von On/Off FlipSwitch

CSS Media Queries Test

Auf der Website CSS Media Queries Test könnt ihr Media Queries erstellen und über einen QR-Code sofort am Handy/Tablet testen. Interessant ist das vor allem, wenn ihr mit Extensions für Media Queries arbeitet (z.B. -webkit-device-pixel-ratio: 2) und/oder experimentelle CSS4-Eigenschaften einsetzt.

Screenshot von CSS Media Queries Test
Screenshot von CSS Media Queries Test

Scripte

enquire.js

Mit enquire.js könnt ihr Media Queries über JavaScript ansprechen und Funktionen verknüpfen. Die Möglichkeiten klassischer Media Queries werden somit erweitert.

Screenshot von enquire.js
Screenshot von enquire.js

BonsaiJS

BonsaiJS ist eine JavaScript-Bibliothek, die grafische Objekte mit Hilfe eines integrierten SVG-Renderers darstellt. Das Tool kann für kleine Animationen, Grafik-Effekte oder für die Visualisierung von Datensätzen benutzt werden.

Screenshot von BonsaiJS
Screenshot von BonsaiJS

Kerning.js

Mit dem JavaScript Kerning.js könnt ihr das Kerning von Web-Texten buchstabengenau optimieren. Das Script wird einmal im head eingebunden, anschließend werden über individuelle CSS-IDs die Abstände, Farben und Schriftschnitte definiert.

Screenshot von Kerning.js
Screenshot von Kerning.js

Sequence.js

Mit Sequence.js lässt sich eine Responsive Slideshow mit sehr ansehnlichen CSS3-Animationseffekten herstellen. Das Script zwingt euch dabei kein Standard-Theme für den Slider auf, alles lässt sich frei gestalten.

Screenshot von Sequence.js - Responsive Slider
Screenshot von Sequence.js – Responsive Slider

BigVideo.js

Mit dem Script BigVideo.js könnt ihr vollformatige Video-Hintergründe für eure Website erstellen. Das Script ermöglicht es auch Playlisten oder Bilder einzusetzen.

Screenshot von Big Video
Screenshot von Big Video

Tooltipster

Mit dem jQuery-Plugin Tooltipster könnt ihr HTML valide, stylische Tooltips erstellen. Das Script bietet von Haus aus bereits verschiedene Arten von Tooltips und verschiedene Themes.

Screenshot von Tooltipster
Screenshot von Tooltipster

Freetile.js

Freetile.js ist ein Plugin für jQuery mit dem Ihr das Layout eurer Website in einem Pinterest-ähnlichen Aufbau darstellen könnt.

Screenshot von Freetile.js
Screenshot von Freetile.js

Moment.js

Mit moment.js könnt ihr Datumsangaben formatieren. Möglich sind klassische Zeitangaben wie „24. Dezember 2008“ oder relative Angaben wie „vor 6 Monaten“, „letzten Freitag“ etc.

Screenshot von moment.js
Screenshot von moment.js

Typograph

Mit dem Typograph könnt ihr relative Schriftgrößen (em) für verschiedene HTML-Elemente recht unkompliziert festlegen. Die typografische Gestaltung und das Verhältnis der Schriftelemente zueinander steht dabei im Vordergrund.

Screenshot des Typograph
Screenshot des Typograph

JZoopraxiscope

Mit dem jQuery-Plugin JZoopraxiscope lassen sich Animationen aus Einzelbildern erstellen. Schaut euch am besten die Demo auf der Website des Tools dazu an.

Screenhot von JZoopraxiscope
Screenhot von JZoopraxiscope

SwipeView

Mit SwipeView könnt ihr Slideshows oder Carousels für Touchscreens erstellen. Das Design ist sehr reduziert und unterstützt von Haus aus die Steuerung per Wischen (Swipe).

Screenshot von SwipeView
Screenshot von SwipeView

Infinity.js

Mit Infinity.js verbessert ihr die Performance von langen Listen, Feeds oder Websites mit Infinite Scrolling.

Screenshot von infinity.js
Screenshot von infinity.js

Chromath

Mit Chromath könnt ihr auf JavaScript-Basis Farben konvertieren, berechnen und umwandeln. Die Konvertierung von einem Farbraum in einen anderen ist dabei ebenso denkbar wie die Generierung eines Farbkonzeptes auf Grundlage einer Ausgangsfarbe.

Screenshot von Chromath
Screenshot von Chromath

Frameworks

Bourbon Neat

Bourbon ist ein auf SASS und Bourbon basierendes Framework. Und ja, es ist responsive.

Screenshot von Bourbon Neat
Screenshot von Bourbon

Kube CSS-Framework

Das Kube-Framework bietet eine sehr ordentliche und minimalistische Grundlage für neue Projekte. Adaptive, Responsive und typografisch hochwertig.

Screenshot des Kube-Frameworks
Screenshot des Kube-Frameworks

Toast

Toast ist ein minimalistisches CSS3-Framework für responsive Websites. Es bietet ein zwölfspaltiges Raster, einen CSS Normalizer und ein paar typografische Grundlagen.

Screenshot vom Toast-Framework
Screenshot vom Toast-Framework

Noch mehr Tools gefällig?

Als Gedankenstütze für mich selbst, habe ich eine Website gebastelt, die alle mir bekannten Tools auflistet. Wenn ihr ein Hilfsmittel für ein bestimmtes Anwendungsgebiet sucht, werden ihr dort sicher schnell fündig.

Screenshot der Website
Screenshot der Website

Die Tools sind verschlagwortet und können am einfachsten über die Suche gefunden werden. Probiert es doch mal aus und sucht nach Responsive Slidshow jQuery, Retina Script oder CSS3 Tooltip.
Die Website ist noch lange nicht fertig. Für Bug-Reports, Anregungen und Hinweise bin ich euch sehr dankbar.

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 7 Kommentare

  1. Patrick
    schrieb am 27.12.2015 um 16:15 Uhr:

    Hey Jonas,

    ich hab mir die Resizer und RWD Bookmarklet auf dem Chrome installiert/ in den Fav drin.

    irgend wie funktionieren sie bei Offline Seiten nicht, muss man irgend was einstellen das es klappt?

    Antworten
    • Jonas Hellwig
      schrieb am 28.12.2015 um 17:00 Uhr:

      Hallo Patrick, die von dir angesprochenen Tools sind mittlerweile in fast allen Browsern automatisch integriert. Ich würde die Tools heute nicht mehr verwenden und statt dessen die Google Chrome Developer Tools nutzen.

      Antworten
  2. Die besten meiner geteilten Links im Dezember 2012 | pixelstrol.ch
    schrieb am 31.12.2012 um 17:08 Uhr:

    […] 24 neue Tools, Scripte & Frameworks für Webdesigner – Dezember 2012 24 neue Tools, Scripte & Frameworks für Webdesigner – Dezember-2012 – kulturbanause blog […]

    Antworten
  3. Nico (giga tags)
    schrieb am 29.12.2012 um 11:26 Uhr:

    Super Artikel, vielen Dank für die Tools und Frameworks :)

    Antworten
  4. Chris09
    schrieb am 26.12.2012 um 17:40 Uhr:

    Ich muss zustimmen, da sind einige Werkzeuge bei, mit denen ich das Webdesign von meinen einfachen CMS aufmöbeln werde.

    Antworten
  5. Rocki
    schrieb am 20.12.2012 um 21:58 Uhr:

    Sehr schöne Tools, besonder der Viewport Resizer hilft mir beim etwickeln eines Webdesign für mein WordPress Blog.

    Antworten
  6. Daniele De Rosa
    schrieb am 16.12.2012 um 21:27 Uhr:

    Wie immer sehr nützliche Tools, danke dafür!

    Viele Grüße,
    Daniele

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Website-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir realisieren komplette Projekte oder unterstützen punktuell in den Bereichen Design, Development, Strategy und Content.

Übersicht Kompetenzen →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →