jQuery-Plugins für´s Webdesign
Heute stelle ich euch ein paar kleine jQuery-Plugins vor. Die euch beim Gestalten einer Website helfen können.
Suchvervollständigung
Wer einfach und simple eine Suche braucht, in deren Suchfeld sich die Begriffe performant vervollständigen, sollte das jQuery-Plugin typehead.js probieren. Ähnlich wie bei anderen Suchen ergänzen sich die Begriffe je nach vorhandenen Suchergebnissen.
Schriftgrößenmesser
Für die richtige Schriftgröße kann ich euch das jQuery-Plugin Responsive Measures empfehlen. Das Plugin berechnet die exakte Schriftgröße eurer Website.
Scrollbar-Tool
Auch für eher für´s Auge sind individuell angepasst Scrollbars. Mit dem jQuery Custom Content Scroller bastelt ihr euch eigene Scrollbars, passend zur Website.
Overlay-Tool
Mit dem chardin.js , einem jQuery-Plugin, lassen sich Overlays für Apps und Webseiten easy gestalten. Das Tool enthält auch eine einfach Erklärung.
Icons für die Website
Wer auf der Suche ist nach Icons, sollte mal auf Endless Icons suchen. Dort gibt es ganz einfache, meist einfarbige Icons im PNG-Format, die man kostenlos herunterladen kann. Eine andere Icon-Sammlung findet man auf iconmonstr. Dort gibt es die kostenlosen Icons im SVG und PNG-Format zum Download angeboten. Beide Sammlung bestehen aus einfarbige sehr simple gestaltete Icon.
Kostenlose Icon-Sammlungen und Generatoren
Wer seine Icons selbst erstellen will, für den gibt es einige Ganerator-Tools. Zum Beispiel bietet IcoMoon nicht nur kostenlose SVG und Webfont-Icons, über ein Online-Toll können auch eigenen Webfont-Icons erstellt werden. Iconbench ist ein Pimp-Programm, das die einfarbigen Icons mit Effekten wie Schlagschatten und Konturen und Farbverläufen aufwertet. Wer sich für ein Design entschieden hat, kann mit einem Klick das Icon-Set als PNG-Format herunterladen.
Icons für professionelle Webdesigner
Für den Anspruch ganz individuell gestaltete Icons auf der Website zu verwenden, bietet sich der X-Icon Editor an. Er ist ein Favicon-Generator, der Icons in allen Größen herstellt. Mit etwas Kreativität ist ein Icon auf einfache Weise erstellt. Wer sich mit Programmen wie Paint auskennt, für den sollte die Handhabung des Icon-Generators kein Problem sein.
Tools für responsives Webdesign
Für professionelle Webdesigner und Website-Entwicklung möchte ich hier eine Sammlung interessanter Tools vorstellen, die es Wert sind einmal ausprobiert zu werden. Vor allem sollen die kleinen Werkzeuge, Hilfsmittel sein, die bei der täglichen Arbeit als Webdesigner helfen sollen.
Professionelles Webdesign ist responsive
Vorneweg Tools zum Thema Responsive Design, das heute im Hinblick auf ein professionelles Webdesign in aller Munde ist – eigentlich gar nicht mehr wegzudenken im Zeitalter von Smartphone und Tablet. Viewport Resizer ist so ein tolles Tool, dass den Viewport des Browsers je nach Gerät auf verschiedene Formate einstellt. Der aktuelle Viewport zeigt Viewport Resizer anhand der Größe des Browserfensters an. Es gibt eine Liste von vorgegebener Geräte, die man durch eigenen individuelle Voreinstellungen erweitern kann.
Framework im Pinterest-Stil
Wer nun sicher gehen will, dass das Layout wirklich voll responsive ist, erstellt mit dem jQuery-Plugin Grid-A-Licious eine Seite, die aus unzähligen Boxen besteht, die sich fließend der Anzeigefläche anpassen. Das System erinnert an die Plattform Pinterest.
Weiter sollte in der Werkzeugkiste des professionellen Webdesigners nicht BASE fehlen. Das ist nicht nur ein Telefonanbieter, es ist auch ein responsives Framework das vor allem Anfänger und für die Grundlage neuer Projekte ein solides Gerüst bietet.