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

Wie bereits im Oktober und September, habe ich auch in diesem Monat die besten Webdesign-Tools der vergangenen 30 Tage zusammengefasst. Die Sammlung ist sehr abwechslungsreich. Scripte zur Erstellung von Parallax-Effekten, Tools zum Sortieren des CSS-Codes, PDF Generierung per JavaScript, Bild- und Texteffekte mit jQuery, Cheatsheets für Media Queries … ich bin sicher, es ist für jeden etwas dabei.

Frameworks

34 Responsive Grid System

Das 34 Responsive Grid System ist ein Framework für Multi-Screen-Websites. Im Gegensatz zu vielen anderen Frameworks wird mit einem fest definierten Spaltenabstand gearbeitet.

Screenshot von 34 Responsive Grid System
Screenshot von 34 Responsive Grid System

Online-Tools

Media Query Snippets

Auf Media Query Snippets könnt ihr die exakten Media Queries von unzähligen Smartphones und Tablets nachlesen. Der Code kann direkt kopiert werden.

Screenshot von Media Query Snippets
Screenshot von Media Query Snippets

MQtest.io

Auf MQtest.io könnt ihr euch anzeigen lassen, auf welche verschiedenen Media Queries euer Computer oder euer mobiles Endgerät momentan reagiert.

Screenshot von MQtest.io
Screenshot von MQtest.io

Create CSS3

Create CSS3 ist ein puristischer Online-Generator für die Erstellung diverser CSS3-Effekte. Die Effekte lassen sich kombinieren und per Copy and Paste in das eigene Projekt übernehmen.

Screenshot von Create CSS3
Screenshot von Create CSS3

CSS Comb

CSS Comb ist ein Online-Tool mit dem ihr die Eigenschaften eures CSS-Codes in einer gewünschten Reihenfolge sortieren könnt. Nutzt einfach die vorgeschlagene Sortierung oder ordnet die Eigenschaften selbst an. Das Tool existiert auch als Plugin für verschiedene Web- & Text-Editoren.

Screenshot von CSS Comb
Screenshot von CSS Comb

vintageJS

Mit vintageJS könnt ihr eure Fotos altern lassen. Ladet ein Bild hoch, und stellt ein, welche Effekte ihr anwenden möchtet.

Screenshot von vintageJS mit Demo-Bild
Screenshot von vintageJS mit Demo-Bild

Thinkingtags (alpha)

Thinkingtags, aktuell in einer public Alpha-Version, ist ein Online-Tool um interaktive Prototypen auf Basis von CSS Frameworks wie YAML oder Blueprint zu erstellen.

Screenshot von Thinkingtags
Screenshot von Thinkingtags

Palm Reader

Palm Reader zeigt euch eine Liste aller verfügbaren Media Queries und welche davon aktuell genutzt werden.

Screenshot von Palm Reader
Screenshot von Palm Reader

147 Colors

Was? Ihr habt nicht alle CSS-Farbnamen im Kopf? Mit der Website 147 Colors fällt das Lernen vielleicht etwas leichter.

Screenshot der Farbauswahl von 147 Colors
Screenshot der Farbauswahl von 147 Colors

Scripte

FILo – Facebook Image Loader

Mit dem jQuery Plugin „Facebook Image Loader“ könnt ihr die auf eurer Facebook-Seite gehosteten Bilder in eure Website integrieren. Die Vorteile liegen auf der Hand: Volle Kontrolle über die Auswahl der Fotos, keine doppelte Datenpflege, unbegrenzter Speicherplatz bei Facebook.

Screenshot von FILo
Screenshot von FILo

head.js

head.js ist ein winziges JavaScript das die Performance eurer Website verbessert. Es lädt alle anderen Scripte ohne den Seitenaufbau zu blockieren.

Screenshot von head.js
Screenshot von head.js

Adaptor

Adaptor ist ein auf jQuery basierender Image-Slider mit CSS3-Transitions und beeindruckenden 3D-Effekten. Es können verschiedene Übergänge zwischen den Bildern ausgewählt werden.

Screenshot von Adaptor
Screenshot von Adaptor

tiltShift.js

Mit dem jQuery-Plugin tiltShift.js könnt ihr einen sehr ansehnlichen Tilt-Shift-Effekt für Bilder herstellen. Das Script nutzt CSS3-Filter und funktioniert aktuell nur im neuen Chrome und Safari.

Screenshot von tiltShift.js
Screenshot von tiltShift.js

Smart Time Ago

Mit dem jQuery Plugin Smart Time Ago könnt ihr anzeigen wann eine Seite zuletzt aktualisiert wurde. Das Plugin prüft wie viel Zeit seit dem letzten Update vergangen ist und zeigt die entsprechende Information an. Die Zeitangabe wird dabei relativ abgebildet (z.B. „vor 20 Minuten“).

Screenshot von Smart Time Ago
Screenshot von Smart Time Ago

Really Simple Slideshow

Das jQuery Plugin Really Simple Slideshow erstellt Slideshows mit verschiedensten Optionen und Bildübergängen. Die Grafiken werden dynamisch geladen.

Screenshot von Really Simple Slideshow
Screenshot von Really Simple Slideshow

jsPDF

Mit dem Script jsPDF generiert ihr PDF-Dokumente über JavaScript.

Screenshot von jsPDF
Screenshot von jsPDF

Jarallax

Mit dem Script Jarallax stellt ihr recht unkompliziert einen sog. Parallax-Effekt für eine Website her.

Screenshot von Jarallax
Screenshot von Jarallax

jQuery Zoom

Mit dem jQuery Plugin jQuery Zoom lassen sich kinderleicht Mouse Over-Effekte für Bilder herstellen. Wird das Bild mit dem Cursor berührt, zoomt es automatisch heran – eine komfortable Lösung für Produktabbildungen.

Screenshot von jQuery Zoom
Screenshot von jQuery Zoom

Power Tip

Power Tip ist ein jQuery Plugin zur Erstellung von Tooltips.

Screenshot von Power Tip
Screenshot von Power Tip

trunk8

Mit dem jQuery-Plugin trunk8 könnt ihr Textelemente auf eurer Website verkürzen, der Text wird dabei nach einer festgelegten Länge abgebrochen. Ihr könnt genau definieren wie der Text enden soll. So könnt ihr einen Weiterlesen-Link einbinden, Pfeile verwenden oder den Text mit drei Punkten (…) auslaufen lassen.

Screenshot von trunk8
Screenshot von trunk8

Lettering.js

Lettering.js ist ein JavaScript zum Stylen von Texten. Mit Hilfe des Scripts können individuelle Einstellungen für jeden einzelnen Buchstaben eines Textes festgelegt werden. Das Tool eignet sich daher für auch für manuelles Kerning.

Screenshot von lettering.js
Screenshot von lettering.js

jPanelMenu

Mit dem jQuery Plugin jPanelMenu könnt ihr ein Off-Canvas Menü in eure Website integrieren. Off-Canvas ist ein typisches Gestaltungsmuster im Responsive Webdesign und bekannt aus den mobilen Apps von Facebook und Google.

Screenshot von jPanelMenu
Screenshot von jPanelMenu

jqTiles

jqTiles ist ein jQuery Plugin zur Erstellung von Bildergalerien / Slidern. Der Slider unterstützt verschiedene Arten der Navigation (Vor/Zurück, Bullets etc. ) und erzeugt die Übergänge zwischen Bildern auf CSS3-Basis.

Screenshot von jqTiles
Screenshot von jqTiles

jResize

jResize ist ein Script/Vorschau-Tool zur Entwicklung von Responsive Websites. Per Klick werden alle Elemente der Seite auf einen bestimmten Viewport reduziert, ihr erhaltet also eine optimale Live-Vorschau direkt im Browser.

Eingeblendete Media Query-Leiste von jResize
Eingeblendete Media Query-Leiste von jResize

Sly

Sly ist ein jQuery-Plugin zur Erstellung von Slidern. Das Script arbeitet sehr übersichtlich mit einem Container-Element und einer Liste. Ihr könnt verschiedene Einstellungen festlegen und zwischen vertikalen und horizontalen Slidern wählen. Auch Infinite Scrolling wird unterstützt.

Screenshot von Sly
Screenshot von Sly

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. Hannes
    schrieb am 04.03.2013 um 16:22 Uhr:

    Super Auswahl und sehr nützlich für alle Webdesigner und angehenden Webdesignern wie mich. Ich interessiere mich aber vor allem für Responsive Design und Online Marketing. Ich möchte beide Elemente in einer neuen Webseite mit ansprechendem Webdesign (Grafik Design) vereinen und erfolgreich auf den Markt bringen.

    Antworten
  2. 24 neue Tools, Scripte & Frameworks für Webdesigner – Dezember 2012 | kulturbanause blog
    schrieb am 13.12.2012 um 15:05 Uhr:

    […] 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 […]

    Antworten
  3. Create CSS3 – Easy CSS 3 Code Generator « Abseits.cibis.de « cibis.de
    schrieb am 30.11.2012 um 11:29 Uhr:

    […] blog.kulturbanause.de. Ähnliche Einträge34 Responsive Grid System (30. Nov, […]

    Antworten
  4. 34 Responsive Grid System « Abseits.cibis.de « cibis.de
    schrieb am 30.11.2012 um 11:21 Uhr:

    […] blog.kulturbanause.de. Ähnliche EinträgeWebdesign der 90er Jahre (13. Mai, […]

    Antworten
  5. Felix
    schrieb am 17.11.2012 um 21:20 Uhr:

    Wieder einmal eine tolle Auswahl. Dankeschön.

    Antworten
  6. casi
    schrieb am 17.11.2012 um 16:04 Uhr:

    Danke:-) sehr schöne Sammlung..
    LG aus Berlin

    Antworten
  7. Tobias
    schrieb am 16.11.2012 um 17:20 Uhr:

    Sehr schöne Übersicht.
    Vielen Dank für deine Mühen!

    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 →