Im ersten Teil des Tutorials haben wir bereits jede Menge Inspirationen und Material für die neue Webseite gesammelt. Jetzt beginnt endlich die richtige Schweißarbeit, eine Layout-Vorlage auch Mockup genannt, muss erstellt werden. In diesem visuellen Konzept wird geklärt, wie viele Seiten eine Webseite haben soll und wo die einzelnen Seitenelemente angelegt werden. Los geht’s, machen wir uns an die Arbeit!
1. Eine Sitemap erstellen
Als erstes muss man natürlich klären, wie viele Seiten und Unterseiten die Webseite haben soll. Um einen Überblick über die Seitenanzahl und Verschachtelung (vor allem bei größeren Webseiten) zu behalten, legst du dir am besten eine grafische Sitemap an.
Natürlich kannst du dir eine Sitemap einfach von Hand skizzieren. Damit du deinen Seitenaufbau schnell ändern kannst, hilft es ein Grafikprogramm zu nutzen. Eine tolle Möglichkeit eine Sitemap online zu erstellen, und so praktisch mit Kollegen oder Kunden teilen zu können, ist das Skizzen und Diagramm Online-Tool Cacoo.
Bei Cacoo kannst dir ein kostenloses Account einrichten und deine Diagramme online speichern oder mit anderen teilen. Mit praktischen Grundelementen kannst du dir ganz schnell deine Sitemap erarbeiten.
Eine hilfreiche Sitemap mit Cacoo erstellen und online teilen.
2. Ein erstes, grobes Layout-Konzept entwickeln
Für meine Café-Webseite werde ich erst einmal nur vier Seiten (die Home-Seite, Über Uns, News und Kontakt) anlegen. Außerdem möchte ich gerne einen Bilder-Slider auf der Startseite einfügen, einen Blog unter dem Punkt News einrichten und auf der Kontaktseite Google Maps integrieren.
Um mir klarer zu werden, wo ich alle Elemente der Webseite platzieren möchte, skizziere ich mir ein erstes Layout aller Seiten von Hand.
Diese Skizzen müssen wahrlich keine Meisterwerke sein (wie man an meinem Beispiel sieht), sondern sie sollen dir helfen die Seiten und Unterseiten zu strukturieren, und alle Webseiten-Elemente vernünftig anzulegen.
3. Welche Breite soll die Webseite haben
Hast du dein erstes grobes Mockup für alle Seiten skizziert, solltest du als nächstes überlegen, in welcher Breite du deine Webseite anlegen möchtest. Auf Grund der unterschiedlichsten Bildschirmgrößen und verschiedener Geräte (von Desktop-Monitor bis zum iPhone) gibt es hier leider keine ideale Lösung für Webdesigner.
Du kannst dich entweder für eine feste Webseitenbreite entscheiden, und dann eventuell in der Zukunft eine mobile Version deiner Webseite erstellen. Oder du legst deine Breite flexibel an, so dass sich die Webseite bis zu einem gewissen Maße entsprechend des Bildschirms anpasst. Hierfür gibt es diverse Helfer, zum Beispiel das Tiny Fluid Grid Online-Tool, der dir bereits eine HTML/CSS Grundlage für eine spätere Programmierung deiner Fluid-Webseite generiert.
Da eine flexible Webseite einiges an Geschick (und jede Menge Kopfzerbrechen) im Webdesign und der Programmierung erfordert, möchte ich meine Webseite hier im Turtorial mit einem fixen Layout entwerfen. Eine praktische und sehr beliebte Webseiten-Breite ist z.B. 960 Pixel. Mit 960 Pixeln kann man recht vielseitige Layouts gestalten, ohne das die einzelnen Webseiten-Elemente in ungerade Zahlen unterteilt werden müssen.
Das 960 Grid System mit 12-Spalten.
Außerdem gibt es für die HTML/CSS Programmierung praktische Raster- Systeme (z.B. das 960 Grid System), die bei Programmierung und das Webdesign hilfreich sind (dazu aber später mehr).
4. Praktische Online-Mockups mit Mocking Bird
Wenn du dich für eine Webseiten-Breite entschieden hast, wird es Zeit dir ein praktisches Mockup-Layout zu erstellen. Ein solches Webseiten-Gerüst kannst du z.B. ganz leicht mit einem Online-Tool wie Mocking Bird erstellen (MockingBird bei einem Projekt von bis zu 10 Seiten kostenlos).
So kannst du die Größenverhältnisse der einzelnen Elemente auf deiner Webseite schnell klären, und deine Entwürfe auch gleich (z.B. deinem Kunden) online präsentieren. Außerdem bieten die Mockups später eine tolle Unterlage für dein Webdesign im Illustrator oder Photoshop.
Hast du dich bei MockingBird angemeldet, kannst du ein neues Projekt erstellen und alle Seiten innerhalb des Dokuments anlegen.
Im Menü »Pages« kannst du alle Seiten deiner Webseite anlegen.
Als nächsten Schritt legst du dir unter View Spalten an (die Grundlage eines Webseiten-Grids), in denen du dann deine Webseiten-Elemente anlegst. Du kannst unter Custom selbst die Anzahl der Spalten bestimmen, oder die Vorlagen für eines der beliebten CSS Grid-Systeme nutzen.
Spalten (columns) für ein Grid oder Raster anlegen.
Du kannst natürlich das Raster eines Grid-Systems auch nur als hilfreiche Grundlage für das Webseiten-Layout verwenden, ohne später in der Programmierung das CSS-Grid System zu nutzen.
Um die Höhe und Breite deiner Seiten anzulegen, verstellst du einfach den praktischen Schieber unten und an der rechten Seite des Dokuments.
Höhe (oder Breite) der Seiten ändern.
Jetzt kannst du beginnen, deine Elemente Schritt für Schritt auf den Seiten anzulegen. In Mocking Bird gibt es dafür praktische Vorlagen (links im Menü) für Texte, Buttons, Links, Flächen, Bilder etc. Die Grid-Spalten helfen dir, deine Elemente strukturiert und sauber anzuordnen.
So kannst du leicht alle Webseiten-Elemente bereits im richtigen Maßstab anlegen.
Wenn das Mockup deiner Webseite fertig ist, kannst du dein Projekt speichern und dir die Layout-Vorlagen im Original-Maßstab als PNGs oder PDFs auf deinen Computer herunterladen.
Das Mockup der Startseite für meine Coffee Love-Webseite.
Im nächsten Schritt sind diese Layout-Vorlagen praktische Helfer bei der Arbeit im Grafikprogramm.
Ich hoffe dir hat der zweite Teil des Webseiten-Tutorials gefallen, und du bist bereit im nächsten Teil mit der Gestaltung der Webseite zu beginnen :-)
Hast du Fragen, Feedback oder hilfreiche Tipps zur Erstellung eines Webseiten-Mockups? Wie ist deine Arbeitsweise bei der Erstellung einer Layout-Vorlagen und mit welchen Tools arbeitest du am liebsten? Über deinen Kommentar freue ich mich schon sehr!
Wow Ellen, da hast du dir aber eine Menge Arbeit gemacht und der Artikel ist absolut Klasse geworden.
Danke für die vielen wertvollen Tipps!
Hallo Stefan,
vielen herzlichen Dank für dein tolles Feedback. Das freut mich ja riesig, dass dir der Artikel so gut gefällt :-)
Viele Grüße
Ellen
Hallo Ellen,
ich danke Dir für dieses Tutorial. Ich konnte bis jetzt schon eine Menge lernen.
Beste Grüße,
Mathias
Hallo Mathias,
herzlichen Dank für deinen Kommentar. Ich bin sehr froh, dass du meine Tipps auch hilfreich findest :-)
Viele Grüße,
Ellen
Hi,
eine schöne Fortsetzung des ersten Teils, freue mich schon auf Teil 2.
Seit kurzem setze ich in meinem Projekten auch Mockups ein, und ich muss sagen, seit dem habe sich Mißverständnisse mit den Kunden, die das Layout betreffen, extrem minimiert.
Ich werde in Zukunft nur noch auf diese Art arbeiten.
Grüße vom Bodensee
Wolfgang
Ich meinte natürlich, ich freue mich auf Teil 3 :-/
Hallo Wolfgang,
vielen herzlichen Dank für dein Feedback :-) Oh ja, das stimmt! Auch wenn es am Anfang ein wenig mehr Arbeit scheint, Mockups sind auch bei Kundenprojekten ungemein hilfreich. Meist kann man mit einer schnellen, visuellen Skizze bereits viel klären, und so spätere Änderungsarbeiten vermeiden.
Viele Grüße
und ein schönes Wochenende :-)
Ellen
Wie man gewohnt ist von euch… super aufgearbeitet und absolut interessant.
Wenn ich das so lese habe ich das Gefühl, dass ich anderweitig die Steinzeit-Variante vom Webdesign lerne…
Aber bekanntlich führen ja viele Wege nach Rom und da soll es sehr schön sein :P
Greetinx Nick
ups… ein »es« vergessen :(
Hallo Nick,
vielen herzlichen Dank für deine netten Worte. Es freut uns total, dass du die Artikel und Tipps hilfreich findest :-)
Naja, wie du ja gesagt hast, es gibt viele Wege… ;-) Ich finde es am allerwichtigsten, dass man Spaß am Webdesign und am Ausprobieren neuer Tools und Möglichkeiten hat. Das machen wir auf unserem Blog auch täglich und lernen so ständig etwas Neues dazu :-)
Viele Grüße und ein schönes Wochenende :-)
Ellen
Hi ihr beiden,
ich glaube, einfacher und besser kann man es nicht erläutern! Danke für den klasse Artikel! Ich freue mich schon riesig auf die nächsten Teile und werde mich irgendwann sicher auch mal selbst daran ausprobieren :)
Viele liebe Grüße
Jasmina
Hallo Jasmina,
vielen herzlichen Dank für dein tolles Feedback. Das freut uns so sehr, dass du dir das Tutorial zu den Mockup-Skizzen so gut gefällt :-)
Ja, probiere es doch auch einmal aus, MockingBird ist z.B. ein klasse Tool und super verständlich :-)
Viele liebe Grüße,
und noch ein schönes Wochenende
Ellen & Manuel
Ich hoffe, ihr werdet nicht eingebildet. Bei allem dem Lob und dem Grad an Beifall. Ich finde auch: Wieder ein ganz toller Artikel. Man merkt, dass Profis am Werk sind. Und es ist schön zu sehen, wie ihr eure Erfahrungen teilt. Danke.
Hallo Horst,
vielen herzlichen Dank für dein tolles Feedback :-)
Nene, keine Sorge! Eingebildet zu sein finden wir überhaupt nicht schick :-) Wir freuen uns allerdings riesig, wenn jemand unsere Artikel hilfreich findet und die Tipps für die eigene Arbeit weiter verwenden kann. Eine Ellbogen-Mentalität, wie sie einem so oft in Firmen, während des Studiums oder auch schon an der Schule begegnet, mögen wir überhaupt nicht. Unser Motto ist eher, dass man gemeinsam am besten lernen kann. Außerdem macht es ja auch viel mehr Spaß, nicht ständig mit anderen konkurrieren zu müssen :-)
Viele Grüße,
und noch einen schönen Sonntag :-)
Ellen
Hi,
genau das wäre meine Frage gewesen beim Lesen eures Blogs, warum ihr euer Wissen hier so veröffentlicht …
Klar ist die Ellenbogenmentalität bescheuert und ich nutze selber gerne Tutorials bzw. gebe auch gerne mein Wissen an meine Kommilitonen oder Kollegen weiter.
Aber könnte nicht die »Gefahr« bestehen, dass Kunden, die über eure Portfolioseite auch auf diesen Blog stoßen denken könnten, dass sie es mit dieser Schritt-für-Schritt-Anleitung auch einfach selber machen könnten?
Auf der anderen Seite könnten die Kunden natürlich auch besser nachvollziehen, dass so etwas wirklich Arbeit und sein Geld wert ist.
Also ich bin da mit meiner Meinung noch nicht sicher festgelegt wie du siehst ;)
Viele Grüße,
Till
Hallo Till,
vielen herzlichen Dank für deinen Kommentar und deine interessanten Überlegungen. Eigentlich fände ich es klasse, wenn durch die Tutorials mehr Leute Spaß an kreativer Arbeit und Webdesign bekommen würden. Meiner Meinung nach schadet es keineswegs, Wissen zu teilen.
Ich finde du hast Recht, Kunden können auf diese Weise den Arbeits-Prozess und Aufwand für professionelles Webdesign besser nachvollziehen, was aus unserer Erfahrung die Zusammenarbeit sehr erleichtert.
Neulich habe ich auf dem WordWeb-Blog ebenfalls einen interessanten Artikel zum Thema »Wissen teilen« gelesen, schau doch mal rein!
Viele Grüße,
Ellen
Bei der Breite würde ich zur Zeit immer ein 960er Raster wählen. Damit ist man immer auf der sicheren Seite und hat natürlich auch einen sehr harmonischen Schnitt.
Mockinbird ist ein sensationelles Tool, aber leider in Kürze gar nicht mehr kostenlos zu haben, wenn ich das richtig verstanden habe. Leider gibt´s auch kein »Einmal kaufen immer nutzen« Preismodell, sondern nur Modelle mit monatlichen Kosten.
Hallo Michael,
vielen herzlichen Dank für deinen Kommentar :-) Ja, das finde ich auch. Das 960 Raster ist wirklich super vielseitig, und für die meisten Webseiten eine passende Wahl.
Ich habe gerade noch einmal auf der Webseite von MockingBird gecheckt. Ich glaube sie haben das Datum und die Bedingungen zur Beendigung der Beta-Version noch einmal geändert. Inzwischen steht dort, die kostenfreie Beta-Phase endet am 1. Sept. Ab dann gibt es eine kostenlose Account-Option, allerdings nur für ein Projekt mit max. 10 Seiten. Das ist ja leider nicht sonderlich viel.
Weißt du eventuell, ob es eine gute, kostenlose Alternative zu MockingBird gibt?
Viele Grüße,
Ellen
Ich habe mir http://cacoo.com/ mal kurz angeschaut. Scheint auch nicht ganz schlecht zu sein, aber Mockinbird hat mir schon besser gefallen.
Ansonsten gibt´s ja noch die Möglichkeit mit Google Docs Wireframes zu bauen. Schau mal hier: http://speckyboy.com/2010/08/20/google-docs-templates-for-web-designers-and-developers/
Hallo Michael,
vielen herzlichen Dank für deine Tipps :-) Das man mit Google Docs auch Wireframes erstellen kann, wusste ich garnicht. Die Liste sieht ja echt klasse aus, das möchte ich unbedingt ausprobieren. Bis jetzt habe ich Google Docs meist nur für Text-Dokumente genutzt.
Ja, Cacoo ist auch ein nettes Tool, aber eher für einfachere Skizzen (z.B. schnell Online-Sitemaps etc.) geeignet. Die Möglichkeit in MockingBird die Seiten gleich im richtigen Maßstab mit Grid etc. anzulegen und Links miteinander zu verknüpfen finde ich schon super klasse.
Viele Grüße,
Ellen
Boooaar…ich Hirni. Cacoo stand ja schon im Artikel. Ich werde alt ;-)
Hallo Michael,
hehe, ich hatte es ja nur ganz kurz für die Sitemap verwendet und nicht fürs Mockup selbst ;-) Sag mal, hast du schon einmal mit Lumzy oder PencilProject gearbeitet? Ich finde beide sehen auch sehr interessant aus, bin aber noch nicht dazu gekommen einmal näher reinzuschauen…
Beste Grüße,
Ellen
Leider nein, aber ich habe sie beide mal gebookmarkt und werde sie mir sicher ansehen. Danke für die Tipps ;-)
Ich hab da noch etwas zum Theme Wireframing gefunden. Ist offline für Keynote, scheint aber recht praktisch zu sein. Leider noch nicht getestet.
http://www.smashingmagazine.com/2010/09/06/keynotopia-wireframing-set-free-wireframing-templates-for-apple-keynote/
Hallo Michael,
hey, vielen Dank für den Link, dass Set sieht auch klasse aus. Eine tolle weitere Option! Leider arbeite ich selbst auf Windows und kann das Set daher nicht testen. Sag aber bescheid, sobald du es einmal ausprobiert hast :-)
Viele Grüße,
Ellen
Sehr schöne Serie. Ich habe für die Mockups noch das Firefox Plugin Pencil entdeckt. Cooles Ding!
http://pencil.evolus.vn/en-US/Home.aspx
danke, jetzt weiß ich endlich auch was das ist.
da »mock up« ja m. E. im Englischen irgendwas bedeutet in Richtung »sich über jmd, lustig machen« hatte ich zuvor immer gedacht, Mockups wären diese betrügerischen Flashs, die immer aussehen als ob man ein kurzes Spiel spielen kann (z. B. Hau den Lukas) und dann auf irgendeine Handy-Aboseite weitergeleitet wird. Also die heißen dann wohl nochmal anders :)
Vielen Dank für die tolle Arbeit die ihr hier macht ich bin schlicht sprachlos ob der Ausführlichkeit und der vielen tollen Tools die einem hier an die Hand geben werden. Ich bin gerade erst dabei mich in das Thema einzuarbeiten, (bei der Umsetzung hapert es leider noch ein bisschen) und hoffe das ich mit diesem Tutorial ein rasches Ergebniss erziehlen kann.
Die besten Grüße aus München
S. Burghardt
hallo ellen. vielen dank für dein ausführliches tutorial. ich hatte davor noch nie in wordpress gearbeitet geschweige den etwas programmiert und bin dank deinem tutorial super klar gekommen! mein blog ist noch nicht ganz fertig, aber macht jetzt schon einiges her. werde dann natürlich auch ein link hinterlassen sobalt er fertig ist :) schau dir mal die seite http://www.cakesweetcake.co.uk/cupcakes/ an. sieht ganz dannach aus als hätte sich da jemand inspirieren lassen!
norman