Die ersten beiden Teile des Webdesign-Mehrteilers haben sich mit der Planung und der benutzerfreundlichen Umsetzung einer Internetpräsenz beschäftigt. Der dritte Teil behandelt nun den eigentlichen Gegenstand des Webdesigns: das Aussehen einer Website. Logos, Formen und Farben prägen wesentlich die Wahrnehmung des eigenen Internetauftrittes. Neben dem Content (Texte, Bilder, Videos etc.) und dessen Anordnung sollte deshalb auch Wert auf die Optik gelegt werden. Denn das Design einer Website trägt viel zur Gesamtwahrnehmung der Seite, ihrer Inhalte und der dahinterstehenden Firma oder Marke bei. Design-Richtlinien helfen Ihnen dabei, den passenden Look für Ihre Internetpräsenz zu finden.
Eine Homepage erstellen mit IONOS
MyWebsite ist die schlüsselfertige Lösung für Ihre professionelle Präsenz im Internet inklusive persönlichem Berater!
SSL-ZertifikatDomainE-Mail-PostfachWenn Sie sich mit dem Erscheinungsbild Ihrer Website auseinandersetzen, sollten Sie bereits eine recht präzise Vorstellung von deren wesentlichen Inhalten haben. Denn der Inhalt bestimmt zu großen Teilen die Form. Verdeutlichen Sie sich, was genau die Informationen, Dienstleistungen oder Produkte auszeichnet, die Ihre Website präsentiert. Was macht Ihr Unternehmen oder Ihre Marke aus? Und wie unterscheidet sich Ihr Angebot von dem der Konkurrenz? Es ist wichtig, dass das Design Ihrer Website genau auf den Content und das angestrebte Image zugeschnitten ist. Unternehmen sollten bei der Gestaltung ihrer Website zudem darauf achten, dass selbige auch das Corporate Design der Firma widerspiegelt.
Das Erscheinungsbild eines Unternehmens wird als Corporate Design bezeichnet. Es ist sozusagen die visuelle Identität einer Firma – wobei auch Institutionen, Organisationen, Vereine und Marken häufig ein Corporate Design besitzen. Die Gestaltung von Logos, Werbemitteln, Produkten und deren Verpackungen wie auch von Websites wird wesentlich durch das einmal festgelegte Corporate Design bestimmt – es beinhaltet gestalterische Konstanten (bspw. bestimmte Farben und Formen sowie Schrifttypen) die man bei sämtlichen Produkten und Kommunikationsmittel des jeweiligen Unternehmens wiederfindet. Die Website ist also in der Regel nur ein Teil des Corporate Designs. Wenn Sie eine Website für ein bereits bestehendes Unternehmen gestalten, dann können Sie sich meist schon an einem Corporate Design orientieren. Beispielsweise an der Farbgebung des Logos oder dem Schrifttyp in Marketing-Materialien wie Broschüren, Anzeigen oder Pressemitteilungen.
Falls Sie das Aussehen des früheren Designs überarbeiten möchten oder Sie über keinerlei Vorlagen verfügen, sollten Sie sich spätestens jetzt überlegen, wie Ihr Corporate Design aussehen soll.
Das Corporate Design spiegelt stets ein bestimmtes Image wider. Darüber hinaus bietet es einen hohen Wiedererkennungswert: Konsequent umgesetzt, sorgt das Corporate Design dafür, dass alle Veröffentlichungen und Kommunikationsmittel über ein einheitliches und eingängiges Aussehen verfügen. Hierbei unterliegt das Corporate Design der Prämisse „form follows function“ – die einzelnen Design-Elemente sollen also nicht nur Wiedererkennungswert bieten, sondern auch funktional sein. Für Logo und Schrifttypen gilt so beispielsweise, dass sie auch lesbar sein sollen.
Im Folgenden stellen wir die wichtigsten Bestandteile des Corporate Webdesigns vor.
Ein Logo ist ein grafisches Zeichen und das Herzstück des Corporate Designs. Es beeinflusst das Aussehen aller weiteren Veröffentlichungen maßgeblich. Die Farbgebung des Logos findet sich in den meisten – wenn nicht sogar allen – Marketing-Materialien wieder. Oftmals sind ein Schriftzug (oder zumindest ein oder mehrere Buchstaben) und ein Bildelement bzw. Symbol Bestandteile eines Logos. Manchmal besteht es allein aus einem Bildzeichen oder einem Schriftzug. Über die Formgebung des Bildzeichens oder über die Aufmachung der Schrift kann man dem Logo ein unverwechselbares Design verleihen.
Ein Marken- oder Firmenzeichen ist unerlässlich, wenn Sie aus der Masse hervorstechen wollen. Das Logo sollte auf jeder Seite Ihrer Webpräsenz sichtbar sein. Üblicherweise befindet es sich im Header – der oberen Zeile jeder Webpage. Das Zeichen ist idealerweise prägnant und identitätsstiftend. Bei der Gestaltung eines Logos sollten einige Prinzipien berücksichtigt werden:
Falls Sie das Logo Ihrer Webpräsenz selbst designen möchten, aber nicht über ein Bildbearbeitungsprogramm und die entsprechenden Grafik-Kenntnisse verfügen, können Sie auf einige Online-Dienste zurückgreifen. Websites wie flinq.de, logaster.de oder freelogoservices.com bieten Logo-Editors mit vielfältigen Tools an. Das von Ihnen erstellte Logo bekommen Sie auf solchen Seiten meist kostenfrei zur Verfügung gestellt – allerdings nur in einer geringen Auflösung. Die hochauflösenden Varianten sind hingegen kostenpflichtig.
Mit dem Logo-Generator von IONOS erstellen Sie kostenlos und in nur wenigen Schritten Ihr eigenes Logo. Jetzt ausprobieren!
Neben dem Logo beinhaltet das Corporate Webdesign noch weitere Elemente, die auch bei der Websitegestaltung von Bedeutung sind. Die wichtigsten entnehmen Sie der nachkommenden Übersicht:
Gerade das zuletzt angeführte Farbkonzept bildet ein weites Feld, mit dem man sich im Webdesign ausführlicher beschäftigen sollte. Durch die Verwendung bestimmter Farben lassen sich unterschiedlichste Effekte erzielen. Da mit den verschiedenen Farben auch unterschiedliche Assoziationen verknüpft sind, lassen sich durch die Farbwahl gezielt Merkmale der Firmenidentität hervorheben. Für das Corporate Webdesign ist ein Farbkonzept daher unentbehrlich. Denn die Farbgebung einer Website bestimmt maßgeblich den ersten Eindruck, den ein Besucher von der Seite hat.
Die Bedeutung der Farbgestaltung einer Webseite darf man nicht unterschätzen. Farben werden stets – ob nun bewusst oder unbewusst – mit ganz bestimmten Kontexten und Emotionen in Verbindung gebracht. Grundsätzlich werden Farben in warme (Gelb, Orange, Rot) und kalte (Grün, Blau, Violett) Töne unterschieden. Als neutral gelten hingegen Schwarz, Weiß, Grau (die auch als unbunte Farben bezeichnet werden) und Braun.
Jeder Farbton löst bestimmte Assoziationen beim Betrachter aus: Die Farbe Rot wird im positiven Sinne häufig mit Liebe, Wärme, Aufmerksamkeit, Energie oder Mut verknüpft. Rot ist allerdings auch eine Signalfarbe. Negative Assoziationen sind unter anderem Gefahr, Feuer, Gewalt, Blut, Arroganz oder Zorn. Ganz allgemein gilt, dass beim Webdesign rote Elemente hohe Aufmerksamkeit erregen. Positive und negative Verknüpfungen bietet jeder Farbton. Deshalb ist es ratsam, dass man sich im Vorfeld nicht nur aus ästhetischen Gründen mit der passenden Farbwahl für die eigene Homepage beschäftigt.
Womit die Betrachter eine Farbe assoziieren, hängt von dem jeweiligen Kolorit und Kontext ab. Die Bedeutung einer Farbe kann auch je nach Kulturkreis variieren. Hier eine Übersicht der wichtigsten Farben, die zeigt, welche Assoziationen im westlichen Kulturkreis mit ihnen verbunden werden und für welchen Website-Bereich man sie häufig verwendet:
| Farbe | Positive Assoziationen | Negative Assoziationen | Oft genutzte Anwendungsgebiete im Webdesign |
| Weiß | sauber, rein, unschuldig, friedlich, sicher, freundlich, minimalistisch, schlicht, neutral | leer, kalt, steril | Grundsätzlich ist Weiß für jede Art von Webseite geeignet, da die Wirkung stark von der Kombination mit anderen Farben abhängt. Trotzdem gibt es Branchen, in denen auffällig oft ein weißes Webdesign genutzt wird: Medizin, Hightech, Religion/Kirche, Rechtswesen, Wissenschaft, Luxusartikel. |
| Schwarz | seriös, klassisch, elegant, geschmeidig, sachlich, funktional, modern, autoritär, professionell | einsam, traurig, düster, böse, illegal | Ähnlich wie bei Weiß hängt die Wirkung von der Farbkombination ab. Schwarz wird oft in den Bereichen Mode, Kosmetik, Luxusartikel oder auch in bestimmten Musiksparten verwendet. |
| Grau | zeitlos, hochwertig, edel, kompetent, professionell, sachlich, neutral | eintönig, trüb, emotionslos, distanziert, alt, vergangen | Grau ist generell gut geeignet für geschäftliche Webauftritte oder Luxusartikel. |
| Braun | natürlich, naturverbunden, reif, fruchtbar, warm, bodenständig, geborgen, gemütlich, genussvoll, kreativ | faul, schwer, altmodisch, dreckig | Tier-, Natur- und Umweltthemen |
| Rot | auffällig, leidenschaftlich, verlockend, liebevoll, warm, dynamisch, aufmerksam, kraftvoll, mutig | gefährlich, aggressiv, arrogant, zornig, laut | Notfall- und Gesundheitsdienste, Mode, Entertainment, Sport, Nahrungsmittel |
| Orange | freundlich, fröhlich, jung, warm, energisch, einladend, preiswert | unseriös, aufdringlich, unruhig, billig | Fahrzeugindustrie, Entertainment, Technologie, Nahrungsmittel |
| Gelb | glücklich, freundlich, jung, optimistisch, heiter | giftig, aufdringlich, unbeständig, feige | Gelb wird als bestimmende Farbe im Webdesign nur selten genutzt, da es auf Dauer anstrengend für die Wahrnehmung ist. Wenn jedoch das Produkt oder Thema einer Webseite gelb ist (z. B. ein Taxiunternehmen oder eine Imkerei), kann es in Maßen eingesetzt werden. |
| Grün | natürlich, lebendig, frisch, glücklich, hoffnungsvoll, positiv, großzügig, ruhig, entspannend, friedvoll | giftig, unerfahren, unreif, sauer, bitter, herb | Tier-, Natur- und Umweltthemen, Wissenschaft, Tourismus, Medizin |
| Blau | zuverlässig, stark, kompetent, seriös, sympathisch, harmonisch, freundlich, entspannend, still | kalt, schwer, depressiv, distanziert | Wirtschaft, Rechtswesen, Verwaltung, Wissenschaft, Hightech, Medizin |
| Violett | fantasievoll, magisch, spirituell, außergewöhnlich, kreativ | unnatürlich, künstlich, unsachlich | Mode, Kosmetik, Luxusartikel |
Wie Sie sehen, ist die Welt der Farben vielseitig. Es hängt von Ihrer individuellen Entscheidung ab, welchen Aspekt Ihrer Website Sie durch eine bestimmte Farbwirkung hervorheben wollen und in welcher Form dies geschehen soll. Aus gestalterischer Sicht sollten Sie allerdings nicht zu viele Farben verwenden: Viele, sehr unterschiedliche Farben lassen eine Website schnell unübersichtlich oder überladen wirken. Nutzen Sie lieber ganz bewusst eine kleine Farbpalette und achten Sie darauf, dass Sie diese stimmig einsetzen.
Gutes Webdesign erfordert Zeit und Arbeit. Doch mit ein wenig Geduld kommen Sie Ihrer eigenen professionellen Website Stück für Stück näher. Die im Webdesign-Mehrteiler vorgestellten Prinzipien sind grundlegend bei der Umsetzung eines Website-Projekts. Darüber hinaus gibt es noch andere Methoden, mit denen Sie Ihren Internetauftritt weiter optimieren können. Lesen Sie hierzu unsere weiteren Ratgeber-Artikel, die sich einem bestimmten Thema detaillierter widmen (z. B. die wichtigsten SEO Tools, die Impressumspflicht im Internet oder die fünf gängigsten Content Management Systeme im Vergleich).
Webdesigner werden im Jahr 2021 größtenteils dort weitermachen, wo sie 2020 schon ihr Hauptaugenmerk hatten: bei der Nutzerfreundlichkeit. Dabei liegt die Herausforderung hauptsächlich darin, interaktive Komponenten und 3D- bzw. VR-/AR-Effekte möglichst natürlich im eigenen Projekt unterzubringen. Wir verraten Ihnen anhand von 11 Trends, wie sich das Webdesign 2021 weiterentwickeln wird.
Wer eine Website erstellen möchte, sollte sich bewusst machen, was er mit seiner Website bezweckt und welche Funktionen die Seite bieten soll. Nur so kann man bei der Websitegestaltung einem roten Faden folgen: Denn am Anfang des Webdesigns steht immer die Planung – auf ihr gründet die Umsetzung jeder Internetseite. Was gilt es zu beachten, worauf sollten Sie Wert legen? Wenn Sie ausreichend Zeit...
Die Aufmachung und Bedienung einer Website erfolgt häufig intuitiv – selbst wenn wir die Seite zum ersten Mal besuchen. Konventionelle Gestaltungsmuster sichern solch eine schnelle Nutzbarkeit. Sie werden aus gutem Grund eingesetzt: Über die verbreiteten Standards und Regeln wird die Benutzerfreundlichkeit eines Internetauftrittes gewährleistet. Diese Usability-Richtlinien sollte jeder Webdesigner...
Wir sind ständig umgeben von Marken-Logos. Doch wie genau schauen wir uns die Grafiken wirklich an? Die Studie „Branded in Memory“ hat den Test gemacht: Wie gut kann man ein bekanntes Logo aus der Erinnerung aufmalen? Über 150 Männer und Frauen, Jung und Alt, haben es versucht und teilweise sehr krude Ergebnisse abgeliefert. Großer Gewinner: Einfache Strukturen und starke Farben. Erfahren Sie,...
RGB erzeugt als Farbmodell mit den drei RGB-Farben Rot, Grün und Blau die Gesamtmenge der auf einem Bildschirm darstellbaren Farben. Das physikalische Prinzip dahinter ist die additive Farbmischung von definierten Bestandteilen des sichtbaren Lichts. Mit verschiedenen Farbräumen wird die größtmögliche Annäherung an die Farbwiedergabe der Wirklichkeit erreicht.
