Was ist Webdesign?

Webdesign beinhaltet alles Visuelle einer Website. Doch ein gutes Webdesign dient nicht nur der Ästhetik, sondern löst beim Betrachter Emotionen aus und hilft diesem, den Inhalt zu verstehen und damit zu interagieren. Wir erklären die wichtigsten Elemente.

Farben

Etwas vom ersten, was Websitebesucher wahrnehmen, sind die verwendeten Farben. Nutze sie also, um die wichtigen Inhalte hervorzuheben. Am besten verwendest du Komplementärfarben oder Farben mit gegensätzlichen Farbtönen für die verschiedenen Elemente deiner Website. So kannst du die Aufmerksamkeit des Users auf bestimmte Abschnitte lenken und schenkst deiner Website gleichzeitig einen harmonischen Gesamtauftritt. Zudem beeinflussen Farben unsere Stimmung. Demnach wählst du mit Vorteil Farben, die zu dir und deinem gewünschten Auftritt passen, je nachdem, was für ein Bild du nach aussen abgeben willst. Du bist noch unsicher bezüglich Farbwahl? Coolors ist ein hilfreiches Tool, um deine Farbpalette zu bestimmen.

Menü

Das Menü ist quasi der Stadtplan deiner Website. Hier orientieren sich die User, wenn sie etwas Bestimmtes suchen. Das Menü hilft, zwischen den verschiedenen Seiten zu navigieren und sich einen Überblick zu verschaffen. Darum solltest du sorgfältig abwägen, was ins Menü aufgenommen werden soll. Versetz dich in einen Besucher deiner Website und überlege, welche Punkte dieser in deinem Menü antreffen wollen würde.

Pass den Menü-Inhalt unbedingt den Zielen für deine Website an. Wenn du beispielsweise einen Onlineshop für deine Kleider aufbauen willst, würde es vermutlich Sinn machen, verschiedene Kleiderkategorien wie Jeans, Pullover, Schuhe usw. im Menü zu integrieren. Dafür braucht es den Abschnitt «Über uns» vielleicht nicht unbedingt. Bei einer wohltätigen Organisation hingegen ist diese Seite unabdingbar, da sie ein Verständnis für die Einrichtung und ihre Arbeit schafft. Du siehst, das Menü variiert je nach Ziel. In diesem Artikel stellen wir dir die am häufigsten verwendeten Menüs vor.

Call-to-action

Ein Call-to-action, oder kurz CTA, fordert deine Besucher auf, Artikel zu kaufen, den Newsletter zu abonnieren oder mit deinem Unternehmen in Kontakt zu treten. Damit diese das aber auch wirklich tun, muss der CTA auffällig und vor allem unmissverständlich sein. Niemand klickt auf einen Button, wenn er nicht weiss, was ihn danach erwartet. Und wenn er den Button gar nicht erst findet, wird er erst recht nicht darauf drücken. Achte darum darauf, dass deine CTAs einfachen Text oder ein erkennbares Symbol wie Icons für Facebook, Instagram & Co. oder ein nach unten zeigender Pfeil für Downloads enthalten, und dass du sie strategisch platzierst. Für eine noch bessere Sichtbarkeit kannst du auch noch leuchtende Farben hinzufügen oder mit der Grösse spielen.

Visuelle Elemente

Bilder und Videos werten das visuelle Erlebnis auf und tragen dazu bei, dass deine Website in Erinnerung bleibt. Wähle Komponenten, die zu den von dir festgelegten Farben und Schaltflächen passen, um einheitlich zu bleiben. Schliesslich erstellst du hier deine Onlinevisitenkarte und keine Collage. Darum gilt bei Bildern und Videos auch: weniger ist mehr.

Mobile Design

Dein Desktop Design steht? Schön. Nun solltest du noch überprüfen, ob es auch auf dem Mobilescreen funktioniert. Falls du dich fragst, ob das wirklich nötig ist, können wir dir sagen: Ja, unbedingt. Es ist sogar fast wichtiger als die Desktopversion. Denn über die Hälfte der weltweiten Internetnutzung erfolgt über Mobile, Tendenz steigend. Weil die Bildschirmgrösse von Handys deutlich kleiner ist, müssen Layout und Design angepasst werden. Es kann sogar sein, dass du gewisse Inhalte für die Mobileversion entfernen musst, um den Nutzern die bestmögliche Erfahrung zu gewährleisten. Das heisst, dass du inhaltliche Prioritäten setzen musst. Welches sind die Hauptinformationen, was kannst du weglassen? Oft macht es sogar Sinn, zuerst mit dem Mobile Design zu beginnen und danach die Desktopversion zu erstellen. Dazu mehr in unserem Blogartikel zu Mobile First Design.