Beim Gestalten von Webseiten-Layouts, Seitenrastern und Mockups hat jeder Webdesigner so seine ganz eigenen Vorgehensweisen und Tricks. Und von chao­ti­scher Zettelskizze bis super durch­or­ga­ni­sierten, farbig struk­tu­rierten Layouts ist sicher alles ver­treten ;-) Um den Design-Prozess zu opti­mieren und letzt­end­lich wert­volle Zeit zu sparen, gibt es etliche kos­ten­lose Tools und Ressourcen im Netz. Hier eine Auswahl prak­ti­scher kleiner Helfer :-)

1. MockingBird

Mit dem kos­ten­losen Online-Tool MockingBird kannst du schnell über­sicht­liche Webdesign-Layouts ent­werfen. Das Tool ermög­licht es dir meh­rere Seiten anzu­legen, Platzhalter, Links, Buttons und etliche wei­tere Elemente ein­zu­fügen. Deine Entwürfe kannst du später auch mit Kunden oder Kollegen teilen bzw. gemeinsam überarbeiten.

2. Lumzy

Mit Lumpsy kannst du rich­tige Prototypen deiner spä­teren Webseite online erstellen. Deinen Entwurf kannst du direkt an deinen Kunden wei­ter­leiten, und anschlie­ßend im Lumzy Live-Chat bespre­chen. Die Benutzeroberfläche von Lumzy ist ein­fach auf­ge­baut und weit­ge­hend selbst­er­klä­rend. Für kom­ple­xere Webseiten und Kundenprojekte ist Lumpzy super geeignet.

3. Cacoo

Cacoo ist ein wei­teres Online-Tool, mit dem du schnell Diagramme, Layouts, oder Sitemaps erstellen kannst. Bei Cacoo kannst du deine Layouts eben­falls teilen, und so deine Entwürfe mit meh­reren Personen wei­ter­ent­wi­ckeln. Die Benutzeroberfläche bei Cacoo ist modern und anspre­chend gestaltet.

4. Pencil Project

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

5. iPhone Mockup Web App

Mit diesem Tool kannst du ganz ein­fach und schnell Mockups für iPhones online ent­werfen und per URL mit anderen teilen.

6. Free Sketching & Wireframing Kit

Ein kos­ten­loses Elemente-Set im EPS- und PDF-Format. Mit diesen prak­ti­schen Platzhaltern für Bilder, Text, Buttons, Navigationselementen etc. kannst du schnell ein neues Seiten-Mockup in Indesign oder Illustrator skizzieren.

7. Omnigraffle Wireframe Stencils

Ein wei­teres tolles Set mit Elementen für Web-Layouts, vor­be­reitet 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

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

9. Free Photoshop Browser Screenshots

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 kos­tenlos downloaden.

10. Free Vector Pack Browser Screens and Website Elements

Arbeitest du lieber mit Illustrator, um deine Layouts zu ent­werfen, kannst du diese Browser-Vorlage (für Safari und Firefox) von Vectortuts für deine Entwürfe ver­wenden. 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 wel­chen Tools arbei­test du am liebsten? Ich freue mich auf deinen Kommentar!