Grund­la­gen zum Webdesign - Teil 1: Die Planung

Auch beim Design einer Website gilt: Je besser die Planung, desto einfacher gestaltet sich die Umsetzung. Dabei spielt es keine Rolle, ob Sie eine Website für sich selbst bzw. Ihr Un­ter­neh­men erstellen oder für jemand anderen eine Website ent­wi­ckeln – die Planung der Seite ist in jedem Fall grund­le­gend für das spätere Ergebnis. Deswegen ist es ratsam, aus­rei­chend Zeit für die Ideen­fin­dung, Kon­zep­ti­on und Nach­bes­se­rung einer Website zu ver­an­schla­gen. Um eine strin­gen­te und passende Struktur für Ihre Web­prä­senz zu finden, sollten Sie die folgenden Punkte in Ihre Über­le­gun­gen ein­flie­ßen lassen.

Vor der Planung des Web­de­signs sollten Sie sich darüber klar sein, was und wen Sie erreichen wollen: Was ist der Zweck Ihrer Website? Dieser Zweck stellt das Fundament des gesamten Ar­beits­pro­zes­ses dar: Jeder Be­stand­teil der Homepage sollte sich an der zugrunde gelegten Ziel­set­zung ori­en­tie­ren. Eine Website kann bei­spiels­wei­se zum Zweck haben, den Be­kannt­heits­grad Ihrer Inhalte zu steigern, also zu werben oder zu in­for­mie­ren. Ist eine Seite im E-Commerce an­ge­sie­delt, sollen meist Kunden gewonnen oder Produkte verkauft werden. Die Web­prä­senz ist in der Regel das Aus­hän­ge­schild eines Un­ter­neh­mens oder einer In­sti­tu­ti­on. Was immer Sie mit Ihrer Seite erreichen wollen, es ist wichtig, dass Sie dies Ziel auch beim Aufbau und Design der Website be­rück­sich­ti­gen.  

Ziel­grup­pe der Website und Nut­zer­er­war­tung

Wen möchten Sie erreichen? Bestimmen Sie die Ziel­grup­pe Ihrer Website. Behalten Sie dabei immer auch Ihre eigene Ziel­set­zung im Auge: Wollen Sie ein Produkt oder eine Dienst­leis­tung bewerben oder verkaufen, sollten Sie die Ziel­grup­pe de­fi­nie­ren und das Webdesign auf sie abstimmen. Ebenso, wenn es sich um ein In­for­ma­ti­ons­por­tal oder ein the­men­be­zo­ge­nes Forum handelt. Im Endeffekt sollte jeder Website-Betreiber wissen, wen er an­spre­chen möchte – egal, ob mit einem kom­mer­zi­el­len oder in­for­ma­ti­ven Angebot. Denn nur, wer seine User kennt, kann seine Seite auf diese abstimmen.

In vielen Bereichen haben sich Standards bezüglich der Inhalte und der Auf­ma­chung etabliert. So findet man zum Beispiel auf Shopping-Seiten immer prak­ti­sche Such- und Sor­tie­rungs­funk­tio­nen für die Produkte. Jede Branche und jede Ziel­grup­pe zeichnet sich durch bestimmte Ei­gen­hei­ten aus, die die Inhalte und die Prä­sen­ta­ti­on im Web prägen. Es ist wichtig, solche Nut­zer­er­war­tun­gen zu kennen – selbst wenn Ihre Website abseits der gängigen Muster agieren soll.

Die Struktur der Sitemap

Nun folgt die Aus­ein­an­der­set­zung mit der Webseiten-Struktur. Hierfür erstellen sie am besten eine Sitemap. Die Sitemap ist ein Diagramm, das die Sei­ten­struk­tur und Ver­knüp­fun­gen der einzelnen Seiten abbildet. Ob mit Stift und Papier oder am PC: Vi­sua­li­sie­ren Sie die Hier­ar­chie Ihrer In­ter­net­sei­te, um sich einen Überblick zu ver­schaf­fen. Dadurch struk­tu­rie­ren Sie nicht nur den Content, sondern bestimmen gleich­zei­tig auch die Na­vi­ga­ti­on der Website. In der Sitemap legen Sie fest, welcher Link zu welcher Seite führt. Sie sortieren jede Page nach ihrer Wich­tig­keit und erstellen eine kurze Be­schrei­bung ihrer geplanten Inhalte. Selbst­ver­ständ­lich sollte die Sei­ten­struk­tur über­sicht­lich bleiben und nicht zu viele Un­ter­sei­ten zu einem The­men­be­reich be­inhal­ten.

Das Layout der Website

Eng mit der An­fer­ti­gung der Sitemap verbunden ist der Lay­out­ent­wurf der Website. Hierbei geht es noch nicht um das finale Design der Website, sondern erst einmal um die Anordnung und Funktion der Inhalte auf den einzelnen Seiten. Beim Layout ent­schei­den Sie bei­spiel­wei­se, wo welches Menü platziert sein soll, wie die Nutzer zu den Un­ter­punk­ten des Menüs gelangen und wo das Logo der Website po­si­tio­niert ist. Mit welchen weiteren Aspekten Sie sich beim Layout-Entwurf be­schäf­ti­gen sollten, hängt stark vom Content ab. Weitere po­ten­zi­el­le Website-Funk­tio­nen, über deren Ein­bin­dung und Po­si­tio­nie­rung man sich Gedanken machen sollte, sind:

• Eine Kom­men­tar­funk­ti­on für die Besucher
• Social-Media-Buttons, mit denen die User Website-Inhalte liken und teilen können
• Anzeigen, Banner und Videos von Wer­be­part­nern
• Affiliate-Links zu Partner-Un­ter­neh­men, für die Sie auf Ihrer Webseite werben

Zudem sollten Sie sich früh­zei­tig überlegen, ob Sie die Dar­stel­lung Ihrer Website für un­ter­schied­li­che Geräte (PC, Tablet, Smart­phone etc.) op­ti­mie­ren wollen. In der Regel ist es vor­teil­haft, die Ansicht für ver­schie­den große Displays ent­spre­chend an­zu­pas­sen. Dafür müssen oftmals die einzelnen Be­stand­tei­le der Seite neu an­ge­ord­net werden. Sitemap und Layout sind stets eng mit­ein­an­der verknüpft und sollten von Anfang zu gleichen Teilen in die Planung ein­be­zo­gen werden.

Eine In­ter­net­sei­te können in­zwi­schen nicht nur Profis erstellen. Waren früher noch Pro­gram­mier­kennt­nis­se er­for­der­lich, um eine Website zu erstellen und zu verwalten, so können dies heute auch Laien. Wer keine Webdesign-Erfahrung besitzt, greift üb­li­cher­wei­se auf einen Homepage-Baukasten zurück. Dieser basiert auf einem Content Ma­nage­ment System (CMS). Ein CMS bietet den Nutzern eine grafische Ober­flä­che, mit der die einzelnen Kom­po­nen­ten der Seite erstellt und an­ge­ord­net werden. Kennt­nis­se einer Pro­gram­mier­spra­che sind damit nicht mehr zwingend er­for­der­lich – wenn auch oft hilfreich. Der Funk­ti­ons­um­fang der einzelnen Homepage-Baukästen variiert je nach Programm al­ler­dings sehr stark: Welche Features in einem CMS vorhanden sind, hängt von dem gewählten Anbieter ab. Meist bieten diese ver­schie­de­ne Pakete an – mit stei­gen­dem Preis ver­grö­ßert sich der Funk­ti­ons­um­fang. Daneben exis­tie­ren auch kos­ten­lo­se Baukästen für In­ter­net­sei­ten. Al­ler­dings sind deren Features in der Regel derart limitiert, dass mit ihnen nur sehr einfache Websites erstellt werden können. Wenn Sie eine Homepage pro­fes­sio­nell erstellen möchten, sollten Sie grund­le­gen­de Pro­gram­mier­spra­chen wie HTML und CSS be­herr­schen. Mit ihnen verfügen Sie über den größten Ge­stal­tungs­spiel­raum. Al­ler­dings braucht es einige Erfahrung, um eine pro­fes­sio­nell wirkende und ein­wand­frei funk­tio­nie­ren­de Seite direkt über den Quellcode zu ent­wi­ckeln. Zudem ist die Wartung und Ak­tua­li­sie­rung kom­pli­zier­ter als bei einem CMS. Sie haben auch die Mög­lich­keit, Ihre Website bei einem Profi in Auftrag zu geben. Doch auch hier sollte Ihnen bewusst sein, welchen An­sprü­chen die fertige Seite genügen soll. Schließ­lich liegt es an Ihnen, der be­auf­trag­ten Person oder Agentur Ihre Vor­stel­lun­gen möglichst de­tail­liert zu ver­mit­teln. Sie werden sehen: Eine ganz­heit­li­che Planung wirkt sich in jedem Fall positiv auf den Prozess und das Ergebnis der Ent­wick­lung Ihrer Website aus.

Sobald Sie wissen, welche Inhalte Ihre Website bieten soll, sich außerdem über Struktur und Aufbau im Klaren sind und sich ent­schie­den haben, ob Sie sie selbst gestalten wollen oder andere damit be­auf­tra­gen, können Sie ab­schlie­ßend einen Zeitplan erstellen. Bei größeren Projekten bietet es sich an, den Zeitplan in ver­schie­de­ne Etappen zu un­ter­glie­dern (bei­spiels­wei­se das Verfassen von Ba­sis­tex­ten für den Content, die Umsetzung des grund­le­gen­den Designs usw.). In jedem Fall sollte der Zeitplan alle not­wen­di­gen Eckpunkte enthalten und gleich­zei­tig über­sicht­lich bleiben. Bedenken Sie auch, dass einzelne Bereiche unter Umständen angepasst oder nach­ge­bes­sert werden müssen. Ein guter Zeitplan enthält deshalb genügend Puffer für solche Kor­rek­tu­ren. Außerdem sollten Sie Ihren Zeitplan re­gel­mä­ßig ak­tua­li­sie­ren und an neue Ge­ge­ben­hei­ten des Projektes anpassen.

Wenn Sie alle diese Aspekte be­rück­sich­tigt und aus­ge­ar­bei­tet haben, steht nun das Grund­ge­rüst Ihrer Website. Als Nächstes geht es an die Umsetzung der einzelnen Punkte. Und auch hierbei sollten Sie einige Dinge beachten.

Erfahren Sie in den weiteren Teilen der Webdesign-Grund­la­gen-Reihe, wie Sie Ihre Homepage be­nut­zer­freund­lich gestalten und was es bei Design und Farb­wir­kung zu be­rück­sich­ti­gen gibt.