{"id":6637,"date":"2022-06-30T13:14:00","date_gmt":"2022-06-30T11:14:00","guid":{"rendered":"https:\/\/www.sortlist.de\/blog\/?p=6637"},"modified":"2026-01-21T09:16:38","modified_gmt":"2026-01-21T08:16:38","slug":"mockup-erstellen","status":"publish","type":"post","link":"https:\/\/www.sortlist.de\/blog\/mockup-erstellen\/","title":{"rendered":"Wie man ein Website-Mockup erstellt: Darauf ist zu achten"},"content":{"rendered":"

Um Ihre Website online zu stellen, ist der erste Schritt, den Sie tun m\u00fcssen, ein Website-Mockup zu erstellen<\/strong>. Das wird Ihnen dabei helfen, die Struktur Ihrer Website zu entwerfen und zu wissen, wie sie aussehen wird, bevor Sie mit der Einrichtung beginnen.<\/p>\n

Um es metaphorisch auszudr\u00fccken, ist das Erstellen eines Website-Mockups vergleichbar mit dem Befolgen eines Fahrplans: Er hilft Ihnen, klarer zu sehen<\/strong> und zu wissen, was Sie tun m\u00fcssen, um Ihr Ziel zu erreichen.<\/p>\n

Warum sollte man ein Mockup erstellen?<\/h2>\n

Ein Website-Mockup zu erstellen hat zwei Vorteile<\/strong>:<\/p>\n

    \n
  1. Mit einem Website-Mockup k\u00f6nnen Sie die Struktur<\/strong> und das grafische Aussehen<\/strong> Ihrer Website aufbauen, ohne dass Sie eine einzige Zeile Code verfassen m\u00fcssen.<\/li>\n
  2. Wenn Sie w\u00e4hrend der Arbeit neue Ideen haben, kostet Sie das \u00c4ndern<\/strong> oder Verschieben eines Elements<\/strong> auf einem Mockup 0\u20ac. Das ist bei weitem nicht der Fall, wenn Sie eine solche \u00c4nderung an einer Website vornehmen m\u00f6chten, die bereits online ist. Das Verschieben eines Fensters auf dem Grundriss eines Hauses ist mit einem Bleistiftstrich erledigt, w\u00e4hrend das Verschieben eines Fensters auf einem bereits gebauten Haus mehrere tausend Euro kostet.<\/li>\n<\/ol>\n

    Daher besteht der ganze Nutzen eines Website-Mockups darin, dass Sie den Grundriss Ihrer Website<\/strong> kennen, bevor Sie mit dem Bau beginnen. Mehrere Elemente m\u00fcssen in Ihrem Modell ber\u00fccksichtigt werden. Es gibt nat\u00fcrlich den grafischen Aspekt<\/strong>, der sich auf den Stil Ihrer Website bezieht, aber es gibt auch den funktionalen Aspekt<\/strong>, der sich auf die Navigation bezieht.<\/p>\n

    Die Herausforderung besteht darin, ein ansprechendes Layout zu erstellen, das den Besuchern Ihrer Website eine einfache Navigation erm\u00f6glicht.<\/p>\n

    Layout, Wireframe, Mockup: Wo liegen die Unterschiede?<\/h2>\n

    Es gibt viele verschiedene Begriffe, um \u00fcber das Layout einer Website<\/strong> zu sprechen. Wireframe<\/a> ist ziemlich bekannt, aber man kann auch von Ergolayout und Mockup sprechen. In Wirklichkeit beziehen sich alle diese Begriffe auf dasselbe<\/strong>: ein Website-Mockup, das eine vereinfachte grafische Darstellung der Art und Weise ist, wie Sie Ihre Website gestalten m\u00f6chten.<\/p>\n

    Das Ziel ist, dass Sie Ihrem Webdesigner ein Dokument an die Hand geben k\u00f6nnen, das zeigt, wie Ihre Website aussehen soll. Das Einzige, was Sie sich merken m\u00fcssen, ist, dass es zwei Arten<\/strong> von Website-Mockups gibt, die Sie erstellen k\u00f6nnen.<\/p>\n

    Das funktionale Mockup<\/h3>\n

    Ein funktionales Mockup dient dazu, die Struktur Ihrer Website<\/strong> aufzubauen und die Nutzererfahrung, die Sie schaffen werden, vorherzusagen. Ganz konkret ist es das funktionale Mockup, in dem Sie Ihre verschiedenen Elemente platzieren:<\/p>\n