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

Ich habe erneut eine Liste mit den interessantesten Webdesign-Tools der letzten Wochen für euch zusammengestellt. Dieses Mal bin ich über verschiedene Code-Generatoren für WordPress, für das Flexbox-Modell oder zur Identifikation von Media Queries gestolpert. Auch Scripte zur Umsetzung von mobilen Navigationslösungen, CSS Animationen und für die „Retina“-Optimierung sind in der Sammlung enthalten. Viel Spaß beim Stöbern!

Frameworks

Pure

Pure ist ein responsive CSS Framework mit verschiedenen Website-Modulen: Buttons, Tabellen, Navigationsmenüs, Formulare, Raster etc.

Responsive CSS Framework Pure – Buttons, Tabellen, Navigationsmenüs, Formulare, Raster etc
Responsive CSS Framework Pure – Buttons, Tabellen, Navigationsmenüs, Formulare, Raster etc

Topcoat

Topcoat ist eine sehr umfangreiche Sammlung verschiedener Web-Elemente. Alle Elemente sind so gestaltet, dass sie die Performance schonen. Neben HTML- und CSS-Dateien zur Web-Entwicklung liegen dem Framework auch Photoshop-Dateien, SVGs und Webfonts bei. Das Framework ist von Adobe veröffentlicht worden.

CSS-Framework von Adobe
CSS-Framework von Adobe

Centurion

Centurion ist ein weiteres responsive HTML/CSS-Framework. Das Tool basiert u.a. auf SASS und beinhaltet bereits einige praktische Module und jQuery-Plugins.

Responsive Framework auf Basis von SASS
Responsive Framework auf Basis von SASS

Magic

Das CSS3 Framework Magic stellt sehr viele hübsche CSS3-Animationen zur Verfügung.

CSS3-Animationen mit Magic
CSS3-Animationen mit Magic

Extra Strength Responsive Grids

Extra Strength Responsive Grids ist ein robustes CSS/SASS-Framework für responsive Websites.

Responsive CSS/SASS-Framework
Responsive CSS/SASS-Framework

Online-Tools

WordPress Query Generator

Mit dem WordPress Query Generator könnt ihr euch den Code für individuelle Loops erzeugen lassen.

WordPress Loop Generator
WordPress Loop Generator

Embed Responsively

Mit Embed Responsively generiert ihr die notwendigen Code-Snippets um externe Web-Dienste wie YouTube, Vimeo, Twitter, Soundcloud etc. mit flexibler Breite in eure Website zu integrieren.

YouTube, Twitter, Vimeo & Co. für Responsive Webdesign
YouTube, Twitter, Vimeo & Co. für Responsive Webdesign

Lorem Pixel

Mit Lorem Pixel könnt ihr Platzhalter-Grafiken mit echtem Bildinhalt in eure Website oder in den Prototypen laden. Die Bilder können dabei aus verschiedenen Kategorien ausgewählt werden. Auch Beschriftungen, Zufallsbilder und individuelle Bildgrößen sind möglich.

Platzhalter-Bilder für Websites
Platzhalter-Bilder für Websites

Density Converter

Mit dem Density Converter könnt ihr die Pixelabmessungen von Bildern für die verschiedene Arten von hochauflösenden Displays (z.B. das Retina-Display) umrechnen lassen.

Pixelgrafiken in Retina-Auflösung umrechnen
Pixelgrafiken in Retina-Auflösung umrechnen

Screen Sizes

Auf der Websites Screen Sizes findet ihr die Abmessungen, Pixelwerte und Pixeldichten aller gängigen Smartphones, Tablets und Desktop-Monitore. Die Seite hilft euch enorm bei der Optimierung einer Website für spezielle Displaygrößen oder Auflösungen.

Alle Displaygrößen und Auflösungen im Überblick – Screen Sizes
Alle Displaygrößen und Auflösungen im Überblick – Screen Sizes

Noise Texture Generator

Mit dem Noise Texture Generator könnt ihr ein Endlosmuster (seamless pattern) mit Rausch-Struktur herstellen.

Rauschen und Körnung erstellen – Noise Texture Generator
Rauschen und Körnung erstellen – Noise Texture Generator

DPI Love

DPI Love zeigt euch die Abmessungen und Pixeldichten verschiedener (hochauflösender) Displays an.

Überblick über die Auflösungen und Pixeldichten gängiger Displays
Überblick über die Auflösungen und Pixeldichten gängiger Displays

Flexplorer

Mit dem Flexplorer könnt ihr den Code zur Verwendung des Flexbox-Modells generieren lassen. Das Online-Tool hilft auch generell beim Verständnis des Modells.

Flexbox Generator
Flexbox Generator

Tiff

Mit dem Online-Tool Tiff könnt ihr Schriften bzw. einzelne Buchstaben vergleichen. Im Moment werden die Google Webfonts unterstützt.

Schriften und Webfonts vergleichen – Tiff
Schriften und Webfonts vergleichen – Tiff

CSS Media Query Generator

Mit dem CSS Media Query Generator könnt ihr den exakten Media Query für das aktuell verwendete Endgerät herausfinden.

CSS Media Query Generator
CSS Media Query Generator

Scripte

Smint

Mit Smint könnt ihr eine Navigation erstellen, die sticky wird sobald sie die obere Kante des Browserfenster erreicht hat. Das Script bietet sich für den Einsatz auf One-Single-Pages ideal an.

Sticky Navigation in One-Single-Pages
Sticky Navigation in One-Single-Pages

CountDown

Mit CountDown erstellt ihr – wie der Name bereits vermuten lässt – einen CountDown auf jQuery-Basis.

jQuery-Countdown
jQuery-Countdown

Minified.js

Minified.js ist eine neue JavaScript-Bibliothek mit großem Funktionsumfang und kleiner Dateigröße.

JavaScript-Bibliothek mit geringer Dateigröße – Minified.js
JavaScript-Bibliothek mit geringer Dateigröße – Minified.js

ReView.js

Das Script ReView.js ermöglicht es zwischen der optimierten Ansicht einer Website (mobile, responsive) und der Standard-Ansicht (meist Desktop) zu wechseln.

Manueller Wechsel zwischen Responsive Design und Desktop-Ansicht
Manueller Wechsel zwischen Responsive Design und Desktop-Ansicht

Dropzone.js

Mit Dropzone.js realisiert ihr Drag & Drop Dateiuploads inkl. Bildvorschau.

Drag & Drop Dateiuploads mit Dropzone.js
Drag & Drop Dateiuploads mit Dropzone.js

Layered Mobile Nav

Mit diesem jQuery-Plugin könnt ihr Off-Canvas-Navigationen für responsive Websites herstellen. Das tolle an diesem Plugin ist, dass es Swiping unterstützt.

Off-Canvas-Navigation im Responsive Design
Off-Canvas-Navigation im Responsive Design

Top Drawer

Mit Top Drawer erstellt ihr einen hübsch animierten Slider auf Basis von jQuery und Modernizr. Die Lösung ist sehr gut geeignet für versteckt Navigationen im Responsive Design.

Menu Slider für Responsive Web Design
Menu Slider für Responsive Web Design

Masonry

Mit Masonry erzeugt ihr gekachelte Grid-Layouts im „Pinterest-Stil“.

Layouts im Pinterest-Stil mit Masonry
Layouts im Pinterest-Stil mit Masonry

Sonstiges

Batch.

Batch. ist eine Sammlung von mehr als 300 schicken Icons in den Formaten PSD, SVG, PNG und als Webfont.

Icons für Webdesigner – PNG, SVG, Webfont, Photoshop
Icons für Webdesigner – PNG, SVG, Webfont, Photoshop

Less Hat

Mit Less Hat haben die Macher von CSS Hat eine Sammlung praktischer LESS Mixins zusammengestellt.

Less Mixins von den Machern von CSS Hat
Less Mixins von den Machern von CSS Hat

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

  1. Bogdan
    schrieb am 24.07.2013 um 14:54 Uhr:

    sehr interessant für mich sind die Frameworks.
    danke

    Antworten
  2. Eva
    schrieb am 21.07.2013 um 18:24 Uhr:

    Hallo Jonas,

    bin heute das erste Mal über deine Tool-Sammlung gestolpert – die sind super hilfreich, auch wenn man in den vorher gehenden Monaten stöbert. Viele Dank und weiter so!

    Antworten
  3. Sebastian
    schrieb am 18.07.2013 um 18:02 Uhr:

    Und wieder jede Menge für mich neue Skripte. Vielen Dank!

    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 →