Kommentare 5

Layout-, Raster- und Mockup-Tools und Ressourcen für Webdesigner

Beim Gestalten von Webseiten-Layouts, Seitenrastern und Mockups hat jeder Webdesigner so seine ganz eigenen Vorgehensweisen und Tricks. Und von chaotischer Zettelskizze bis super durchorganisierten, farbig strukturierten Layouts ist sicher alles vertreten ;-) Um den Design-Prozess zu optimieren und letztendlich wertvolle Zeit zu sparen, gibt es etliche kostenlose Tools und Ressourcen im Netz. Hier eine Auswahl praktischer kleiner Helfer :-)

1. MockingBird

Layout-, Raster- und Mockup-Tools und Ressourcen

Mit dem kostenlosen Online-Tool MockingBird kannst du schnell übersichtliche Webdesign-Layouts entwerfen. Das Tool ermöglicht es dir mehrere Seiten anzulegen, Platzhalter, Links, Buttons und etliche weitere Elemente einzufügen. Deine Entwürfe kannst du später auch mit Kunden oder Kollegen teilen bzw. gemeinsam überarbeiten.

2. Lumzy

Layout-, Raster- und Mockup-Tools und Ressourcen

Mit Lumpsy kannst du richtige Prototypen deiner späteren Webseite online erstellen. Deinen Entwurf kannst du direkt an deinen Kunden weiterleiten, und anschließend im Lumzy Live-Chat besprechen. Die Benutzeroberfläche von Lumzy ist einfach aufgebaut und weitgehend selbsterklärend. Für komplexere Webseiten und Kundenprojekte ist Lumpzy super geeignet.

3. Cacoo

Layout-, Raster- und Mockup-Tools und Ressourcen

Cacoo ist ein weiteres Online-Tool, mit dem du schnell Diagramme, Layouts, oder Sitemaps erstellen kannst. Bei Cacoo kannst du deine Layouts ebenfalls teilen, und so deine Entwürfe mit mehreren Personen weiterentwickeln. Die Benutzeroberfläche bei Cacoo ist modern und ansprechend gestaltet.

4. Pencil Project

Layout-, Raster- und Mockup-Tools und Ressourcen

Pencil Project ist ein geniales Firefox-Addon mit jeder Menge Möglichkeiten, um Mockups oder Diagramme zu erstellen. Du kannst mehrere Seiten mit Hintergrundbild anlegen. Es gibt einen On-Screen Texteditor und viele Vorlagen für deine Layout-Entwürfe.

5. iPhone Mockup Web App

Layout-, Raster- und Mockup-Tools und Ressourcen

Mit diesem Tool kannst du ganz einfach und schnell Mockups für iPhones online entwerfen und per URL mit anderen teilen.

6. Free Sketching & Wireframing Kit

Layout-, Raster- und Mockup-Tools und Ressourcen

Ein kostenloses Elemente-Set im EPS- und PDF-Format. Mit diesen praktischen Platzhaltern für Bilder, Text, Buttons, Navigationselementen etc. kannst du schnell ein neues Seiten-Mockup in Indesign oder Illustrator skizzieren.

7. Omnigraffle Wireframe Stencils

Layout-, Raster- und Mockup-Tools und Ressourcen

Ein weiteres tolles Set mit Elementen für Web-Layouts, vorbereitet für das Mac-Tool OmniGraffle5. Du kannst die Elemente aber auch als PDFs in Illustrator einsetzen.

8. Design Stencil Kit vom Yahoo Developer Network

Layout-, Raster- und Mockup-Tools und Ressourcen

Das Vorlagen-Set des Yahoo Developers Network kannst du dir für Illustrator (als PDF oder SVG), Photoshop (PNGs), OmniGraffle oder Visio (XML) kostenlos herunterladen.

9. Free Photoshop Browser Screenshots

Layout-, Raster- und Mockup-Tools und Ressourcen

Das Set bietet jede Menge Browser-Screenshots als Unterlagen für deine Mockups. Du kannst dir die Photoshop-Vorlagen in der Auflösung 1024×768 Pixel oder 800x600px kostenlos downloaden.

10. Free Vector Pack Browser Screens and Website Elements

Layout-, Raster- und Mockup-Tools und Ressourcen

Arbeitest du lieber mit Illustrator, um deine Layouts zu entwerfen, kannst du diese Browser-Vorlage (für Safari und Firefox) von Vectortuts für deine Entwürfe verwenden. Im Paket sind außerdem noch Grund-Elemente für deine Seiten-Layouts enthalten.

Wie gefallen die Mockup-Tools? Was sind deine Erfahrungen beim Entwerfen von Webseiten-Layouts? Und mit welchen Tools arbeitest du am liebsten? Ich freue mich auf deinen Kommentar!

5 Kommentare

  1. Vielen Dank für diese hilfreiche Ressourcen-Liste. Ich halte schon seit längerer Zeit Ausschau nach guten Wireframing-Tools und kann deine Tipps gut gebrauchen. Gerade beim Konzipieren von grösseren Projekten können solche Werkzeuge sehr nützlich sein. Bei kleineren Webseiten bin ich mit Handskizzen schneller und effizienter :) Welches ist denn dein liebstes Tool?

  2. @Barbara: Vielen Dank für dein Feedback :-) Ja, ich zeichne auch gerne, aber wie du schon gesagt hast, bei größeren Projekten sind Layout-Tools schon sehr praktisch.

    Meine derzeitigen Favoriten sind MockingBird und Cacoo. Lumzy finde ich für Kundenprojekte super, da man richtig funktionierende Prototypen erstellen kann. Das ist für nicht Web-Profis sehr viel anschaulicher.

    Viele Grüße
    Ellen

  3. Pingback: Das Leben mit Typografie und Raster | Die Grauzone

Schreibe eine Antwort