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

Jeden Monat erscheinen unzählige Tools, Scripte und Plugins, die dem Webdesigner das Leben erleichtern sollen. Vergangenen Monat habe ich angekündigt, alle Tools die nicht mit einem eigenen Beitrag vorgestellt wurden in einem gemeinsamen Beitrag aufzulisten. Entstanden ist so die Liste der Webdesign-Tools von September. Nun möchte ich im Oktober erneut ein paar Ressourcen zusammenfassen. Neben Frameworks und Online-Tools sind diesmal auch einige Scripte, Slideshows und Templates dabei. Viel Spaß.

Bookmarklets

Live.js

Mit dem Bookmaklet Live.js müsst ihr eure Seite nicht länger manuell neu laden. Das Script überwacht den JavaScript- HTML- und CSS-Code der Website und aktualisiert die Ansicht, sobald ihr etwas geändert habt. Ein ähnliches Tool habe ich bereits detailliert vorgestellt.

Screenshot von live.js
Screenshot von live.js

Frameworks & Boilerplates

The Goldilocks Approach

The Goldilocks Approach ist ein CSS-Framework für Multi-Screen-Websites. Das Framework unterstützt drei Ansichten einer Website, flüssige und starre Raster.

Website von The Goldilocks Approach
Website von The Goldilocks Approach

Proportional Grids

Proportional Grids ist ein responsive CSS-Framework das mit Proportionen anstelle fester Breitenangaben arbeitet. Mit CSS-Klassen legt ihr die Proportionen fest, die Abstände zwischen den Spalten werden mit festen Breiten gefüllt.

Screenshot von Proportional Grids
Screenshot von Proportional Grids

The Boiler

The Boiler ist ein auf HTML5, CSS3 und einem flüssigen Raster basierendes Framework für den Einsatz in WordPress.

The Boiler WordPress-Theme
The Boiler WordPress-Theme

Susy

Wenn ihr den CSS-Code euerer Seite mit dem Preprocessor Compass schreibt, hilft euch dieses Framework sicher weiter. Susy ist ein responsive Grid Framework auf Basis von Compass.

Screenshot von Susy
Screenshot von Susy

Fluid Baseline Grid

Das Fluid Baseline Grid ist ein mobile First, responsive Framework. Um dem Anspruch typografisch hochwertige Projekte zu ermöglichen gerecht zu werden, basiert das Framework auf flüssigen Spaltenbreiten und einem Grundlinienraster. Wo der Vorteil eines Grundlinienrasters im Webdesign liegt, steht hier.

Screenshot von Baseline
Screenshot von Baseline

Wirefy

Wirefy ist ein responsive Framework um schnelle Prototypen, Mockups oder Wireframes zu erstellen. Auf Basis dieser Struktur kann später der interaktive Prototyp gestaltet werden.

Screenshot von Wirefy
Screenshot von Wirefy

Amazium

Amazium ist ein Responsive Webdesign Framework auf Basis des 12-Spalten/960 Pixel Rasters. Es bietet diverse Voreinstellungen für Bilder, Videos oder Tabellen.

Screenshot von Amazium
Screenshot von Amazium

Online-Tools

Google Tag Manager

Der Google Tag Manager ist ein Dienst zur Verwaltung von Code-Snippets (Tags). Über die Benutzeroberfläche können Tags für diverse Einsatzgebiete (z.B. Google Analytics, AdWords, benutzerdefinierte HTML-Tags) konfiguriert werden. Der Tag Manager erlaubt die Verwaltung verschiedener Websites und bietet die Möglichkeit mehrere Benutzer mit unterschiedlichen Rechten einzusetzen.

Screenshot des Tag Managers
Screenshot des Tag Managers

iOS Fonts

Welche Schriften sind in welcher Version von iOS verfügbar? Um vernünftige Fallbacks und Font-Stacks zu konstruieren, ist es praktisch ein Tool wie iOS-Fonts zur Hand zu haben.

Screenshot von iOS-Fonts
Screenshot von iOS-Fonts

Facebook ID ermitteln

Mit diesem kleinen Tool könnt ihr die ID eines Facebook-Users oder einer Facebook-Seite über die URL auslesen. Kopiert einfach die URL in die Suchmaske, das Tool antwortet mit der passenden ID.

Screenshot des Tools
Screenshot des Tools

Gradient Scanner

Mit dem Gradient-Scanner könnt ihr CSS3-Verläufe aus Grafiken generieren lassen. Ladet einfach eine Grafik hoch, erstellt eine Auswahl des gewünschten Bereichs und kopiert den passenden CSS-Code. Die Option innerhalb des hochgeladenen Bildes noch eine Auswahl definieren zu können, hebt dieses Tool von vergleichbaren Diensten ab.

Screenshot des Gradient Generators
Screenshot des Gradient Generators

Contrast Ratio

Mit dem Tool Contrast Ratio kann das Kontrast-Verhältnis zwischen Text- und Hintergrundfarbe berechnet werden. Ziel ist es die Lesbarkeit von Web-Texten zu optimieren.

Screenshot von Contrast Ratio
Screenshot von Contrast Ratio

Plugins

Guide Guide

Guide Guide ist ein Photoshop-Plugin zur Erstellung von Gestaltungsrastern.

Screenshot der Guide Guide-Website
Screenshot der Guide Guide-Website

Scripte

Uniform

Uniform hat zwar schon einige Jahre auf dem Buckel, funktioniert aber immer noch einwandfrei. Das Script arbeitet auf Basis von jQuery und ermöglicht es euch Formularelemente zu gestalten. select-, radio-, input– und checkbox-Elemente werden maskiert und können mit CSS3 oder einer Grafik überschrieben werden.

Screenshot der Uniform-Website
Screenshot der Uniform-Website

ArcText

Mit dem jQuery Plugin ArcText könnt ihr Textelemente verformen. Das Script erhaltet Ihr übrigens durch einen Klick auf den Link ganz oben rechts. Wenn Euch Bögen und Kreise nicht ausreichen, werft auch einen Blick auf dieses Tool.

Website des ArcText-Scripts
Website des ArcText-Scripts

Retina Images

Das Script Retina Images liefert Bilder in verschiedenen Auflösungen anhand der Auflösung des Betrachtungsgeräts. Somit lassen sich auch img-Tags im HTML-Markup Retina-Ready umsetzen.

Screenshot von Retina Images
Screenshot von Retina Images

Tweet!

Puh! Noch ein Tool zur Intergration eines Twitter-Streams? Dieses Tool hat es in die Liste geschafft, da es einfach zu implementieren ist und Links, Retweets und Benutzerbilder anzeigt.

Screenshot von Tweet!
Screenshot von Tweet!

FancyMoves

FancyMoves ist ein auf jQuery basierendes Carousel zur attraktiven Darstellung von Bildern. Pro Element können weitere Bilder in einer Lightbox angezeigt werden, das Script lässt sich auch über die Tastatur steuern.

Screenshot von FancyMoves
Screenshot von FancyMoves

jQSlickWrap

Mit dem jQuery-Plugin jQSlickWrap könnt ihr Texte um filigrane Formen in Bildern herumfließen lassen. Das Tool ermöglicht also komplexere Seitenlayouts als das mit den Floating-Eigenschaften von CSS möglich ist. Adobe arbeitet übrigens bereits an einer ähnlichen Lösung namens Adobe CSS Regions.

Screenshot von jQSlickWrap
Screenshot von jQSlickWrap

Swipe.js

Mit Swipe.js wandelt ihr eine Liste kinderleicht in einen per Touch-Control steuerbaren Slider um. Das Script arbeitet unabhängig von JavaScript-Bibliotheken wie jQuery.

Screenshot von swipe.js
Screenshot von swipe.js

iView Slider

Der iView Slider ist ein auf jQuery basierender Bildslider mit einigen interessanten Funktionen. Neben der „responsive“-Komponente können Video-, HTML- und iframe-Inhalte im Slider platziert werden. Zusätzlich können Bildbeschreibungen animiert werden.

Screenshot von iView Slider
Screenshot von iView Slider

Responsly.js

Das jQuery Plugin responsly.js bindet „Responsive Widgets“ für die Elemente Slider und Accordion ein. Die Effekte sind mit CSS3 realisiert.

Screenshot von responsly.js
Screenshot von responsly.js

Photo Swipe

Photo Swipe ist eine für Touchscreens und mobile Geräte optimierte Bildergalerie. Die Fotos werden im Vollbild dargestellt; per Gestensteuerung (Swipe) kann zum nächsten Bild gewechselt werden.

Screenshot von Photo Swipe
Screenshot von Photo Swipe

Templates

HTML5 Blank WordPress Theme

Dieses Blank-Theme bietet euch die perfekte Grundlage für den Start eines neuen HTML5-WordPress-Projekts. Diverse Techniken wie das Auslagern von Scripten, Custom Post Types, mobile Unterstützung u.v.m. sind bereits enthalten. Auf der Website findet ihr eine vollständige Liste. Sehr empfehlenswert – auch um einfach im Code zu stöbern.

HTML5 Blank WordPress-Theme
HTML5 Blank WordPress-Theme

Interface Sketches

Mit dieser umfangreichen Sammlung an Vorlagen für Browser, Tablets und Smartphones, könnt ihr euer nächstes Projekt optimal beginnen.

Screenshot von Interface Sketches
Screenshot von Interface Sketches

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

  1. 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 Einsatz im […]

    Antworten
  2. 25 neue Tools, Scripte & Frameworks für Webdesigner – November 2012 | kulturbanause blog
    schrieb am 16.11.2012 um 15:38 Uhr:

    […] bereits im Oktober und September, habe ich auch in diesem Monat die besten Webdesign-Tools der vergangenen 30 Tage […]

    Antworten
  3. 26 neue Tools, Scripte & Frameworks für Webdesigner – Oktober 2012 | Web-CMS | Scoop.it
    schrieb am 06.11.2012 um 21:24 Uhr:

    […] Jeden Monat erscheinen unzählige Tools, Scripte und Plugins, die dem Webdesigner das Leben erleichtern sollen.  […]

    Antworten
  4. flobbymedia präsentiert: KW 42 | flobbymedia’s mind
    schrieb am 19.10.2012 um 17:41 Uhr:

    […] Eine wirklich gelungene Zusammenfassung neuer Webdesign Tools fanden wir diese Woche hier. […]

    Antworten
  5. platzh1rsch
    schrieb am 19.10.2012 um 10:42 Uhr:

    Wow. Das ist mal eine ausführliche Liste. Die verschiedenen Gallery Tools werde ich mir mal anschauen. Was hälst du von Grids? Bisher habe ich all meine Responsive Layouts „from Scratch“ erstellt, hatte nie wirklich Lust mich in ein Grid System einzuarbeiten.

    Antworten
    • Jonas Hellwig
      schrieb am 19.10.2012 um 11:05 Uhr:

      Ich selbst nutze eigentlich immer einen Grid-Calculator (wenn überhaupt) und kein Framework. Da nutze ich dann GridCalculator oder Gridpak. Vorab erstelle ich normalerweise eine Skizze und schaue dann was für ein Raster überhaupt Sinn macht.

      Antworten
  6. Jürgen
    schrieb am 16.10.2012 um 21:03 Uhr:

    Hi Jonas,
    danke für die tolle Aufstellung, auch ich habe hier neues gefunden.

    Antworten
  7. Florian
    schrieb am 16.10.2012 um 19:35 Uhr:

    Herzlichen Dank, super Zusammenstellung, wie immer. :-)
    Aber habe nur ich das Gefühl, dass die Welt langsam von *enorm* vielen Grid-Layouts und Responsive Design – Scripts überflutet wird?

    Antworten
  8. Marcel Kalveram
    schrieb am 16.10.2012 um 00:45 Uhr:

    OMG, das sind so viele Tools, dass ich einen Monat brauche, mir alle reinzuziehen :)

    Antworten
  9. Felix
    schrieb am 15.10.2012 um 15:07 Uhr:

    Du hast wieder einmal vieles vorgestellt, was ich noch nicht kannte. Recht herzlichen Dank!

    Antworten
  10. Ralf Heumann
    schrieb am 15.10.2012 um 11:24 Uhr:

    Danke, Jonas! Live.js werde ich mal ausprobieren. Habe bisher immer CSSrefresh verwendet und fand es immer schade, dass nur die CSS-Datei überprüft wird.

    Antworten
    • Jörg
      schrieb am 15.10.2012 um 12:08 Uhr:

      Wobei ich statt live.js lieber das FF Addon „Auto Reload“ nutze. Denn das funktioniert auch lokal und man kann ganze Ordnerinhalte auf Änderungen überprüfen lassen.

      Antworten
      • Ralf Heumann
        schrieb am 15.10.2012 um 15:11 Uhr:

        Noch besser! Danke :)

  11. Bertram Simon
    schrieb am 15.10.2012 um 10:07 Uhr:

    Schöne Auflistung, obwohl ich die vielen Grid-Frameworks nicht mehr sehen kann;)

    Antworten
    • Jonas Hellwig
      schrieb am 15.10.2012 um 11:54 Uhr:

      Ich frage mich eher wer noch die Motivation hat ein neues Framework zu entwickeln, obwohl es schon so viele gibt :)

      Antworten
  12. Justin Schueler
    schrieb am 15.10.2012 um 08:48 Uhr:

    Moinsen.
    Super Beitrag, Danke :)
    Nur zur Info: Der Link zu Wirefy ist leider broken :(

    Antworten
    • Jonas Hellwig
      schrieb am 15.10.2012 um 11:56 Uhr:

      Danke für die Info. Das Tool ist wohl jetzt unter einer eigenen Domain erreichbar. Ist korrigiert. http://getwirefy.com/

      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 →