Grundlagen zum Webdesign - Teil 3: Design und Farbwirkung
Die ersten beiden Teile des Webdesign-Mehrteilers haben sich mit der Webdesign Planung und der Benutzerfreundlichkeit des Webdesigns 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!
Die Voraussetzung für ein gutes Design-Konzept
Wenn 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.
Corporate Design
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.
Richtlinien für das Corporate Webdesign
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.
Das Logo
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:
- Verständlichkeit: Das Logo dient als Stellvertreter einer Marke. Es hat zur Aufgabe, diese Marke zu betonen und auf sie hinzuweisen. Für eine bessere Verständlichkeit können angebotene Produkte oder Dienstleistungen im Logo stilisiert abgebildet werden.
- Unverwechselbarkeit: Das eigene Logo sollte sich von denen anderer Firmen abheben. Wenn ein bekanntes Logo-Design einfach nur kopiert und an die eigene Marke angeglichen wird, stehen die Chancen schlecht, damit eine eigene Identität aufzubauen. Zudem drohen auch rechtliche Konsequenzen vom Urheber des Original-Logos.
- Einprägsamkeit: Ein Logo sollte nicht zu detailliert und verspielt sein. Simple Logo-Designs kann man sich besser merken.
- Reproduzierbarkeit: Ein Logo wird auf verschiedenste Weise verwendet. Auf Visitenkarten oder Stempeln sollte es ebenso erkennbar sein wie auf großformatigen Plakaten. Damit hierbei nicht die einzelnen Pixel hervortreten, empfiehlt es sich, Logos in einer hohen Auflösung anzulegen (sie sind dann verlustfrei skalierbar). Außerdem sollten sie in verschiedenen Dateiformaten (wie JPG, PNG und PDF) vorliegen, um universell anwendbar zu sein.
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!
Hausschrift, Bildsprache und Farbkonzept
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:
- Die Hausschrift: Als Hausschrift (oder auch Corporate Font) wird die Schriftart bezeichnet, die von einem Unternehmen mehrheitlich oder sogar ausschließlich verwendet wird. Die Schrift sollte nicht nur einen hohen Wiedererkennungswert haben und gut lesbar sein (auch in verschieden großen Abbildungen), sondern darüber hinaus zum Image, Firmenphilosophie oder zur beabsichtigten Wirkung passen. Diese Schriftart sollte in allen Texten verwendet werden. Oft findet man sie auch im Logo.
- Die Bildsprache: In vielen Fällen bietet sich der Einsatz von Bildern auf der eigenen Website an – sie sorgen für Vielfalt und können bei den Betrachtern Emotionen wecken. Die Gesamtheit aller prägnanten Bilder, Fotos, Motive und Symbole macht die Bildsprache aus. Genau wie die Schriftart sollte auch die Bildsprache einheitlich erscheinen und konsequent umgesetzt sein. Der Inhalt und der Stil der verwendeten Bilder unterstreichen idealerweise das auf der Website vermittelte Image des Unternehmens. Generell sind unprofessionelle Bilder in schlechter Auflösung zu vermeiden, da durch diese schnell der komplette Webauftritt als laienhaft wahrgenommen wird.
- Das Farbkonzept: Auch bezüglich der Farben gilt, dass sie wohlüberlegt eingesetzt werden sollten. Das Farbkonzept umfasst jene Farbtöne, die auf jeder Unterseite Ihrer Webpräsenz Verwendung finden. Das Logo-Design, die Bildelemente, Hintergründe und andere Gestaltungselemente greifen im Normalfall allesamt auf die festgelegten Farben zurück.
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.
Farben beim Webdesign
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.
Farbwirkung
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.
Weitere wichtige Aspekte bei der Webseiten-Erstellung
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).