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

Ich habe erneut eine Liste mit hilfreichen Webdesign-Tools für euch zusammengestellt. Im der Sammlung von Mai finden sich verschiedene Scripte für Slider und Navigationsmenüs im Responsive Design, Websites zum Decodieren von URLs und Sonderzeichen, CSS3-Animationen, SVG-Hintergründe uvm. Es ist sicher für jeden etwas dabei.

Bookmarklets

Gridwax

Gridwax ist ein hilfreiches Bookmarklet das den Inhalt eures Browsers mit einem Grundlinienraster überlagert. Per Tastatur kann das Raster gesteuert werden. Das Tool kann euch dabei helfen, den vertikalen Rhythmus einer Website zu optimieren (Stichwort: Baseline Grid).

Ein Grundlinienraster per Bookmarklet – Gridwax
Ein Grundlinienraster per Bookmarklet – Gridwax

Frameworks

Cool Kitten

Cool Kitten ist ein Framework für die Erstellung von responsive Parallax-Effekten.

Responsive Parallax-Effekte mit Hilfe des Cool-Kitten-Frameworks
Responsive Parallax-Effekte mit Hilfe des Cool-Kitten-Frameworks

Scripte

Unslider

Unslider ist ein extrem reduzierter jQuery-Slider, ohne überflüssige Effekte oder aufgeblasenen Code. Die responsive Slideshow lässt sich auch mit der Tastatur steuern.

Responsive Slideshow mit jQuery
Responsive Slideshow mit jQuery

Strapdown.js

Mit Strapdown.js könnt ihr in Sekunden schicke Websites auf Basis von Marked (Markdown Parser) und einem Bootstrap-Theme erstellen. Schreibt einfach ein wenig Markup, bindet das JavaScript ein und gebt an, welches Bootstrap-Theme verwendet werden soll. Fertig ist die Micro-Website.

Schnell zur Micro-Website mit JavaScript und Bootstrap
Schnell zur Micro-Website mit JavaScript und Bootstrap

Sidr

Mit dem jQuery-Plugin Sidr lässt sich ohne großen Aufwand ein „Off-Canvas„-Menü für Responsive Websites herstellen.

jQuery-Plugin für Off-Canvas-Navigation
jQuery-Plugin für Off-Canvas-Navigation

Transit

Mit Transit erstellt ihr fantastische CSS-Transitions oder Animationen für jQuery.

jQuery und CSS Transitions und Animationen
jQuery und CSS Transitions und Animationen

Flexisel

Flexisel ist ein jQuery-Plugin zum Erzeugen eines responsive Carousels/Sliders.

jQuery-Plugin für Responsive Carousels und Slider
jQuery-Plugin für Responsive Carousels und Slider

Countable.js

Countable.js ist ein kleines JavaScript das für ein bestimmtes HTML-Element die enthaltenen Zeichen, Wörter und Absätze zählen kann.

Wörter, Buchstaben und Absätze per JavaScript zählen
Wörter, Buchstaben und Absätze per JavaScript zählen

Responsive Nav

Responsive Nav ist ein kleines JavaScript das eine für Touch-Screens und RWD optimierte Navigation erzeugt. Das Script basiert auf keiner Bibliothek wie etwa jQuery.

Touch Screen Navigation mit Responsive Nav
Touch Screen Navigation mit Responsive Nav

Chardin.js

Mit dem jQuery-Plugin Chardin.js könnt ihr sehr ansehnliche Overlays mit Erklärungen für Websites oder Apps erstellen.

Informationen per Overlay mit Chardin.js
Informationen per Overlay mit Chardin.js

Retinise.js

Mit dem jQuery-Plugin Retinise.js könnt ihr Grafiken im HTML-Code dank des data-src-Attributs für HiDpi-Displays optimieren.

Retina-Images mit dem jQuery-Plugin "Retinise.js"
Retina-Images mit dem jQuery-Plugin „Retinise.js“

jQuery Smart Banner

Mit dem Script jQuery Smart Banner rüstet ihr Smart App Banners in alten Versionen von iOS und unter Android nach.

Smart App Banners für Android nachrüsten
Smart App Banners für Android nachrüsten

TimeJump

Mit TimeJump könnt ihr in Audio- und Video-Podcasts an eine beliebige Position verlinken. Die Medieninhalte müssen dazu lediglich über HTML5 eingebunden sein.

Sprungmarken für HTML5 Audio- und Videodateien
Sprungmarken für HTML5 Audio- und Videodateien

whoops

Mit Hilfe von Whoops verbessert, bzw. vereinfacht ihr das Error-Handling, und könnt wunderschöne Fehlermeldungen ausgeben.

Vereinfachtes Error-Handling mit "whoops"
Vereinfachtes Error-Handling mit „whoops“

Helium

Mit dem JavaScript Helium erkennt ihr ob eure Website überflüssigen CSS-Code einsetzt. Das Tool untersucht verschiedene URLs und erstellt anschließend einen Report.

Mit Helium findet ihr unbenutzten CSS-Code
Mit Helium findet ihr unbenutzten CSS-Code

Online-Tools

CSS to Compass Converter

Der Name sagt eigtl. schon alles. Mit dem CSS to Compass Converter wandelt ihr validen CSS-Code in Compass-Code um.

CSS to Compass Converter
CSS to Compass Converter

Flat UI Colors

Das kostenlose UI-Kit Flat UI dürfte den meisten von euch bereits bekannt sein. Mit Flat UI Colors kann per Klick das Farbschema für Flat UI kopiert werden.

Farben für Websites im Flat Design
Farben für Website im Flat Design

SVG Patterns Gallery

In der SVG Patterns Gallery findet ihr diverse nahtlose Hintergrundgrafiken im SVG-Format bzw. als SVG-Code.

Endlosmuster auf Basis von SVG
Endlosmuster auf Basis von SVG

Animatable

Auf Animatable findet ihr diverse CSS3-Animationen zum Copy-&-Paste-Download. Alle Animationen verwenden nur eine Eigenschaft und zwei Werte.

CSS3 Animationen zum sofort einsetzen
CSS3 Animationen zum sofort einsetzen

URL-Encoder

Mit einem URL Encoder werden Internetadressen (URLs) so kodiert, dass diese URLs, auch wenn sie Sonderzeichen enthalten, von Browsern korrekt interpretiert werden und selbst Teil einer Internetadresse sein können.

Tool zum Encoden von Sonderzeichen in URLs
Tool zum Encoden von Sonderzeichen in URLs

HTML Live Code

HTML Live Code ist ein Code-Editor im Browser inkl. Live-Vorschau.

Online Code Editor
Online Code Editor

Unicode Table

Die Unicode Table listet alle Unicode-Zeichen auf und bietet sogar einen Converter an. Sehr praktisch ist auch die Suchfunktion.

Alle Unicode-Zeichen und ein Tool zum Umwandeln von Texten – Unicode Table
Alle Unicode-Zeichen und ein Tool zum Umwandeln von Texten – Unicode Table

Fake images please?

Mit Fake images please? könnt ihr Platzhalter-Bilder über eine URL einbinden. Im Gegensatz zu vielen anderen Anbietern könnt ihr sowohl die Größe des Bilders, als auch Farbe, Text, Textfarbe und Schriftart festlegen.

Platzhalter-Grafiken mit individueller Größe, Farbe und Schriftart
Platzhalter-Grafiken mit individueller Größe, Farbe und Schriftart

Sonstiges

Redacted Font

Der „Wireframe-Webfont“ Redacted ist sehr vergleichbar mit BLOKK, erzeugt meiner Ansicht nach aber einen besseren Eindruck vom optischen Gewicht des Textes.

Platzhalter-Webfont für Prototypen und interaktive Wireframe
Platzhalter-Webfont für Prototypen und interaktive Wireframe

ClearLess

ClearLess ist eine Sammlung von hilfreichen LESS mixins.

Hilfreiche Mixins für LESS
Hilfreiche Mixins für LESS

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

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 – 10 Kommentare

  1. Sam Jones
    schrieb am 17.10.2014 um 20:03 Uhr:

    Jetzt fehlt mir nurnoch eine Gallerie die ich mit Strapon.js benutzen kann, die zusätzlich auch noch mobil tauglich ist. Jemand eine Idee?
    Die Liste finde ich wirklich super. Passend zu Strapdown.js möchte ich noch Singularity CMS erwähnen. Das baut auf Strapdown.js auf und nutzt txt Dateien für den Inhalt. Ansonsten nutze ich persönlich noch gerne Font Awesome.

    Antworten
  2. Alex
    schrieb am 28.06.2013 um 15:01 Uhr:

    Um ein Layout auf „Responsiveness“ zu testen und somit auf verschiedenen mobilen Endgeräten anzuschauen kann ich dieses Tool empfehlen: http://www.active-value.de/responsive-design-viewer/

    Antworten
  3. Nicolas
    schrieb am 14.06.2013 um 08:28 Uhr:

    Super Sammlung!

    Danke!

    Antworten
  4. Marko
    schrieb am 06.06.2013 um 13:34 Uhr:

    Hi, habe gerade noch was gefunden und zwar http://skyfonts.com/ das ermöglicht Google Fonts auf dem Desktop zu Syncen.

    Antworten
  5. Marko
    schrieb am 03.06.2013 um 22:23 Uhr:

    Heir noch 2 Tools um Bootstrap und Foundation Layouts zusammen zu klicken
    http://www.divshot.com/
    https://www.jetstrap.com/

    Antworten
    • Jonas Hellwig
      schrieb am 04.06.2013 um 08:31 Uhr:

      Vielen Dank!

      Antworten
  6. newbusiness
    schrieb am 03.06.2013 um 12:41 Uhr:

    Danke … Danke … und immer wieder Danke :)

    Antworten
  7. Stephan
    schrieb am 31.05.2013 um 20:29 Uhr:

    Vielen Dank für die Tools. Besonders das Sidr Menü war für mich hilfreich.
    Ich Finde dein Blog einfach nur super. Bin hier regelmäßig und finde immer hilfreiche Sachen.

    Antworten
  8. xoxi
    schrieb am 30.05.2013 um 15:12 Uhr:

    „Mit Strapdown.js könnt ihr in Sekunden schicke Websites auf Basis von Bootstrap erstellen.“ –> sollte heißen: „Mit Strapdown.js könnt ihr in Sekunden schicke Websites auf Basis von Markdown erstellen.“

    Bootstrap seh ich da jedenfalls nicht erwähnt :)

    Antworten
    • Jonas Hellwig
      schrieb am 31.05.2013 um 08:35 Uhr:

      Danke für den Hinweis.

      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 →