10 Web-basierte Apps und Tools für Webdesigner
Kommentare

Ohne Werkzeuge lässt sich nichts bauen. Das gilt auch für die erfahrensten Webdesigner. Doch wo findet man geeignete Tools, die beim aktuellen Projekt helfen können? Die Antwort ist einfach: Sie liegen im Netz und warten darauf, gefunden zu werden. Heute stellen wir Euch zehn Web-basierte Apps und Tools aus den Kategorien CSS, HTML und Responsive Design vor. Alle sind frei und kostenlos erhältlich.

1. Adobe Edge Web Fonts
Adobe bietet ein breites Spektrum an kostenlosen Fonts, die sie in Kooperation mit Google frei zugänglich gemacht haben. Die Web Fonts können etwa in Adobe Muse oder Edge Code, einem Open Source Editor, genutzt werden.


Screenshot: Adobe Edge Web Fonts

2. Css2Less
Mit Css2Less könnt Ihr Eure alten CSS-Dateien in neue LESS-Dateien konvertieren. Die Änderungen könnt Ihr auf den dargestellten Buchseiten direkt mitverfolgen.


Screenshot Css2Less

3. CSS3Gen
Mit diesem CSS3 Generator könnt Ihr schnell und einfach Snippets kopieren und sie direkt in Euer Projekt einfügen. Hier findet Ihr Tools zum Erzeugen von Schatten und anderen Effekten.


Screenshot CSS3Gen

4. Colllor
Dieses Tool ermöglicht es, konstante Farbschemen zu erzeugen. Die Farbbezeichnungen können frei aus den bekannten X11 Color Names gewählt werden.


Screenshot Colllor

5. HTML5 Please
Mit HTML5 Please könnt Ihr nachschauen, welche HTML5 und CSS3 Features für Euer Projekt interessant sein könnten.


Screenshot HTML5 Please

6. Stitches
Bei Stitches handelt es sich um einen sogenannten Sprite Sheet Generator. Ihr könnt per Drag and Drop Bilder und Dateien hinzufügen, anschließend “Generate” drücken und schon bekommt Ihr ein fertiges Sprite- und Stylesheet. Das Tool ist kompatibel mit dem aktuellen Chrome und Firefox.


Screenshot Stitches

7. The Responsive Calculator
Der Responsive Calculator rechnet für Euch! Einfach die Werte eingeben und schon könnt Ihr Euer PSD Web Template in Eure Responsive Design Website übertragen.


Screenshot The Responsive Calculator

8. Responsivepx
Dieses Tool eignet sich zum Testen von Responsive Design. Dazu die URL eingeben und die Regler betätigen. Funktioniert online und lokal.


Screenshot Responsivepx

9. Plunk
Mit Plunk könnt Ihr herausfinden, ob Euer Design auch auf einem Smartphone ansprechend ausschaut und funktioniert.


Screenshot Plunk

10. Word2cleanhtml
Mit diesem Tool wird aus Word-Dateien ein lupenreines HTML-Dokument ohne Wenn und Aber. Copy Paste and Go!


Screenshot Word2cleanhtml

Aufmacherbild: Screenshot Plunk

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -