Kommentare 29

Eine neue Webseite entsteht (Teil 2): Die Layout-Vorlage (Mockup)

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.

Webdesign Mockups erstellen
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.

Webdesign Mockups erstellen

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.

Webdesign Mockups erstellen
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.

Webdesign Mockups erstellen
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.

Webdesign Mockups erstellen
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.

Webdesign Mockups erstellen
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.

Webdesign Mockups erstellen
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.

Webdesign Mockups erstellen
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!

Weitere Teile der Tutorial-Serie

29 Kommentare

  1. 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

  2. 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

      • 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

  3. 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

  4. 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

      • Till

        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

  5. 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

    • 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

  6. andy

    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 :)

  7. 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

  8. norman

    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

Schreibe eine Antwort