Image und Layoutgestaltung
Das Unternehmensimage ist die Darstellung der Corporate Identity (Unternehmensidentität). Das Logo fasst die wesentlichen Punkte der Corporate Identity zusammen. Ihr Logo bildet die Grundlage für jede Ihrer weiteren Werbeaktivitäten. Es ist das wichtigste Element sowohl im Gestaltungsgesamtkonzept als auch in der Gestaltung eines einzelnen Werbeträgers. Jede weitere Gestaltung ist abhängig vom Logo. Sicher wäre es möglich hier zu beschreiben wie man ein gutes Logo kreiert. Wir möchten jedoch dringend davon abraten das Logodesign selbst in die Hand zu nehmen. Die eigene Firma mit anprechenden Texten und Farben ins rechte Licht zu rücken, dürfte mit ein wenig Hintergrundwissen für jeden machbar sein. Ein Logo entwickeln, welches die Seriösität einer Firma unterstreicht und sich aus der Masse heraushebt, kann nur ein Profi.
Ein "gutes" Logo...
- verkörpert die Unternehmensbranche (man assoziiert keine andere Branche damit)
- transportiert das Unternehmensimage (Seriösität, Modernität, Kompetenz, Größe usw.)
- ist prägnant (einfache, klare Formen und Farben; Stempeleffekt)
- ist unverwechselbar (hebt sich eindeutig von der Konkurrenz ab)
- ist ästhetisch ansprechend (angenehme, harmonische Ausstrahlung)
- ist immer anwendbar (schwarz-weiß Darstellung; plottbar; gut verkleinerbar usw.)
Diese Punkte kann nur ein erfahrener Designer in ein Logo einarbeiten. Das Logo selbst gestalten heißt, an der falschen Stelle sparen. Wenn Sie für Ihre Firma bereits ein Logo haben, sollten Sie sich über ein evtl. Redesign beraten lassen. Mit dem Logo steht oder fällt jede weitere Werbegestal- tung. Ein professionell gestaltetes Logo schafft Wettbewerbsvorteile im Konkurrenzkampf.
Weitere Beispiele finden Sie unter: www.design-by.com/logo.phtml.
"Weniger ist mehr." und "Klein ist fein." - Gestaltungsgrundsätze
Gestalten Sie die einzelnen Komponenten Ihrer Homepage dezent. Das heißt, überfrachten Sie Ihre Seite nicht mit visuellen Informationen. Wählen Sie eine kleine Schriftgröße, verwenden Sie nur eine oder höchstens 2 bunte Farbtöne und nicht zu viele Bilder. Entscheiden Sie welche Bilder wirklich wichtig für Ihre Besucher sind. Der Text soll informieren, das Bild die Information verdeutlichen. Eine eher zurück-haltende Gesamtgestaltung gewährleistet später das bessere Setzen von Akzenten und Wahrnehmung von Blickfängen.
Sie möchten, daß sich der Besucher auf Ihrer Seite wohlfühlt. Dies erreichen Sie mit einer klaren Ordnung der Elemente. Ihre Homepage erzeugt, wenn sie fertig ist, eine Bildkomposition. In einer Bildkomposition gibt es Punkte, die das Auge anziehen, weil sie eine Dominanz besitzen und Punkte, die das Auge vernachlässigt, weil sie keine Dominanz besitzen. Wenn Ihre Homepage mit dominierenden Punkten überladen ist, kämpfen diese Punkte um die Vorherrschaft und das Auge weiß nicht, wo es hinsehen soll. Das Unterbewußtsein des Betrachters reagiert mit Frustration, und Frustration ist nicht das Bedürfnis, das Ihr Besucher befriedigen möchte.
Mit ein wenig Einfühlungsvermögen können Sie die Anziehungskraft eines dominierenden Punktes selbst überprüfen. Öffnen Sie in Artweaver eine neue Datei mit der Größe 500 x 500 Pixel. Erstellen Sie 4 neue Ebenen. Klicken Sie auf Ebene 1 und erstellen Sie in der linken oberen Ecke ein kleines schwarzes Viereck:
- Formauswahl
-Werkzeug
- Viereck markieren
- Doppelklick auf die Vordergrundfarbe
- schwarz wählen
- Füllwerkzeug
- Viereck mit der Vordergrundfarbe füllen
Dann auf Ebene 2 die selbe Prozedur für die rechte obere Ecke, Ebene 3 unten links, Ebene 4 unten rechts. Es befinden sich jetzt 4 schwarze Vierecke im Bild auf weißem Hintergrund. Schließen Sie die Augen und öffnen Sie sie wieder. Das Auge nimmt alle 4 Vierecke als gleichwertig wahr und kann sich im ersten Moment nicht für eins entscheiden. Stellen Sie jetzt im Ebenenfenster die Deckkraft von Ebene 2, 3 und 4
auf 20%. Schließen Sie die Augen und öffnen Sie sie wieder. Im ersten Moment nimmt das Auge das schwarz gebliebene Viereck von Ebene 1 wahr. Das ist der dominierende Punkt im Bild. Übrigens funktioniert das Ganze auch umgekehrt mit weißen Vierecken auf schwarzem Hintergrund. Dominanz hat also nichts mit dunkel zu tun. Reduzieren Sie auf Ihrer Homepage die Anzahl dominanter Punkte auf 3 oder 4, um das Auge zu beruhigen und ihm Blickfänge zu bieten. Setzen Sie die Dominanz weniger wichtiger Punkte zurück. Das erreichen Sie z.B. durch verkleinern, aufhellen oder auch durch entfernen des Elements. Die Anzahl zurückgesetzter Elemente sollte im Verhältnis deutlich überwiegen.
Die Imagegestaltung
Die Informationen Ihrer Seite müssen in einem ansprechenden Rahmen
präsentiert werden. Nicht nur die Texte sprechen mit Ihren Besuchern. Die
Homepage ist Teil der Kommunikationspolitik Ihres Unternehmens
und jedes einzelne Detail spricht mit dem Besucher. Für die Image-
gestaltung gehen wir von einem professionell, gestaltetem Logo
aus, daß den obigen Ansprüchen genügt. Ein professionelles
Logo hat zusätzlich den entscheidenden Vorteil, daß Sie eine
Vorlage und Orientierung für Ihre eigene Gestaltung haben.
Das gewünschte Unternehmensimage wurde in der Corporate
Identity bereits ausgearbeitet und kann in der weiteren Ge-
staltung vertieft werden. Hier kommen die Erkenntnisse aus
der Farbenlehre und der Fotografie ins Spiel.
Das Image versucht die Meinungsbildung über ein Unternehmen
zu steuern. Eine Meinung wird unterbewußt auf der emotionalen
Ebene gebildet. Wie in der Farbenlehre bereits besprochen, funktioniert
das durch Assoziationen. Sie müssen also darauf achten, daß die visuellen Darstellungen Ihrer Webseite (Farben und Fotos) auch tatsächlich die, für Ihr Image, gewünschten Assoziationen hervorrufen. Es kann mehrere Jahre dauern, bis sich ein Image gefestigt hat und es von der Öffentlichkeit als Meinung über ein Unternehmen auch tatsächlich wiedergegeben wird.
Farbgebung der Homepage
Mit Farben wird der Sitedummy in einzelne Bereiche aufgeteilt. Es gibt insgesamt 5 Flächen, denen Sie eine Farbe zuweisen können. Den Hintergrund des Browserfensters, Header und Footer, Menü und Inhalt. Die Flächen können durch die Farbwahl zu einem Bereich verschmolzen oder voneinander getrennt
werden. Farben können außerdem für Umrandungen und den Text vergeben werden. Mit Umrandungen werden Flächen, die die gleiche Farbe besitzen, wieder voneinander abgegrenzt oder die Fläche wird zusätzlich hervorgehoben. Der Text befindet sich immer auf einer Fläche. Übereinander liegende Farben dürfen nicht flimmern. Der Kontrast zwischen Fläche und Text muß also besonders hoch sein, damit Ihr Text gut lesbar erscheint und der Besucher Ihre Seite nicht enttäuscht wieder verläst. Einen höheren Kontrast zwischen 2 nebeneinanderliegenden Buntfarben erreichen Sie, indem Sie Ihre gewählten Farben auf dem Farbkreis weiter spreizen oder durch aufhellen bzw. abdunkeln einer Farbe. Wenn Sie die warmen Farbtöne gelb, orange und rot abdunkeln, verringern Sie die Leuchtkraft der Farben und sie werden schmutzig. Schmutzige Farben werden vom Betrachter auf Ihr Image übertragen. Schmutzige Farben = schmutzige Firma. Bei einem warmen Farbton ist es deshalb sinnvoll ihn auf dem Frabkreis in 2 Farben aufzusplitten, um einen höheren Kontrast zu erreichen.
Sie sehen, es gibt eine Vielzahl an Variationen, Farben zu wählen. Wir möchten Ihnen hier eine Vorgehensweise zeigen, nach welchen Kriterien die Wahl und Verteilung von Farben getroffen werden kann.
Nehmen Sie Ihr Logo als Grundlage für die Farbgebung. Ihr Logo kann mit einer oder auch mehreren bunten Farben gestaltet sein. Sind es mehrere, besitzt eine der Farben eine Dominanz, zieht also die Aufmerksamkeit des Betrachters besonders auf sich. Wählen Sie Ihre dominante Logofarbe als Hauptfarbe für Ihre Homepage. Alternativ können Sie auch eine im Farbkreis neben Ihrer dominanten Logofarbe liegende Farbe als Hauptfarbe wählen. Wenn Sie Ihre Homepage mit 2 Farben gestalten möchten, wählen Sie Ihre dominante
Logofarbe und zusätzlich eine im Farbkreis daneben liegende Farbe. Sollte Ihr Logo z.B. nur schwarz sein, sind Sie frei in der Farbwahl. Wählen Sie in diesem Fall eine Farbe deren Assoziationen am besten zu Ihrem Image passt. Wenn die Hintergrundfläche des Logos und das Logo die selbe Farbe haben sollen, muß der Hintergrundfläche durch aufhellen oder abdunkeln genügend Kontrast zum Logo gegeben werden.
Vergeben Sie Ihre Hauptfarbe im Administrationsbereich Design an einzelne Hintergrundflächen. Welchen Flächen Sie die Farbe zuweisen, bleibt Ihnen überlassen. Empfehlenswert ist:
- Header und Footer
- Header, Footer und Menü
- Header, Footer, Menü und Contentbereich
- oder Sie vergeben die Hauptfarbe nur
an den Browserhintergrund
Ihre Entscheidung muß davon abhängig sein, wie intensiv Sie die Hauptfarbe und die damit verbundenen Assoziationen, auf Ihrer Homepage, in den Vordergrund treten lassen wollen. Die übrigen Flächen werden mit unbunten Farbtönen eingefärbt.
Nach der Flächengestaltung werden noch ein paar Akzente (das Auge anziehende Punkte) gesetzt. Mit Akzenten lenken Sie den Blick des Betrachters. Akzente können mit den verbleibenden Elementen Umrandung, Schrift und Bild gesetzt werden. Für das Setzen von Akzenten ist die Verwendung einer dritten Farbe möglich. Es kann sich dabei um die Komplementärfarbe handeln. Die Komplementärfarbe darf sich, wegen des Flimmereffekts, aber nicht auf einer Fläche mit einer der beiden anderen bunten Farben befinden. Durch den Kontrast Ihrer Akzente, sowohl mit der Hintergrundfläche als auch der Elemente untereinander, können Sie Räumlichkeit im Gesamtbild erzeugen. Das heißt, Sie lassen einzelne Elemente in den Vordergrund treten und stellen andere zurück. Weitere Hinweise zum setzen von Akzenten finden Sie auf der nächsten Seite Arbeiten mit dem Editor.
Als eingeloggter Kunde können Sie sich in unserem Archiv Beispiele für Farbkompositionen ansehen und diese auch, durch die Export-Import Funktion, in Ihren Sitedummy übertragen.
Gestaltung mit Hintergundgrafiken
Die grafische Gestaltung der Homepage mit Hintergrundbildern ist ungeübten Anwendern eigentlich nicht zuzumuten. Ursprünglich gab es im Sitedummy nur die Möglichkeit eine Grafik in den Header einzufügen. Auf vielfachen Wunsch haben wir uns jedoch dazu entschlossen unseren Kunden auch diese Möglichkeit zu bieten. Das Arbeiten mit Hintergrundgrafiken gibt Ihnen ein Höchstmaß an Freiheit für die Gestaltung Ihrer Homepage. Achten Sie immer auf genügend Kontrast zwischen Hintergrund und Text.
Die Gestaltung mit Hintergrundgrafiken sollte erst nach dem Einfügen der Inhalte und der Festlegung der Dimension Ihrer Homepage durchgeführt werden. Das erspart Ihnen das Nacharbeiten der Grafiken, falls plötzlich etwas nicht mehr so passt, wie Sie es sich vorgestellt haben. Evtl. ist es sinnvoll jemandem, der Erfahrung mit einem Bildbearbeitungsprogramm hat, diese Aufgabe zu übertragen. Alternativ können Sie sich auch auf die Gestaltung der Headergrafik beschränken.
Die Headergrafik des Sitedummys
Ihr Header muß nicht nur das Logo und einen Slogan o.ä. enthalten. Die Headergrafik erscheint auf jeder Ihrer Seiten und kann dazu benutzt werden das Unternehmensimage zu verstärken. Benutzen Sie dafür ein Foto, daß Ihr Image bestmöglich verkörpert. Oder montieren Sie mit Artweaver mehrere Fotos, die verschiedene Situationen zeigen, zu einer Grafik zusammen. Wenn Sie die Headergrafik benutzen, sollten Sie Ihr Logo direkt mit in diese Grafik einbauen und die Logografik in den Einstellungen deaktivieren. So erhalten Sie ein Qualitativ wesentlich besseres Ergebnis.
Beispiele:
Ein Foto, daß 2 Personen mit Businesskleidung im Büro zeigt, die sich die Hände reichen, läst auf eine gute Geschäftsbeziehung schließen. Benutzt man so ein Bild in der Headergrafik, wird das Unternehmen als ein kompetenter Partner assoziiert.
Wenn Sie die qualitativ, hochwertige Produktion Ihres Unternehmens zum Ausdruck bringen möchten, reicht es nicht einen Maschinenpark abzubilden. Sie wollen schließlich keine Maschinen verkaufen. Besser wäre z.B. die Darstellung von Präzision, wie Messungen an produzierten Teilen o.ä.
Naturfotos eignen sich besonders gut, um den Aspekt Umweltschutz zum Ausdruck zu bringen. Bei der Wahl des Motives ist eine Verbindung zu Ihrer Unternehmensbranche von Vorteil.
Durch die Montage zweier verschiedener Situationen kann auch eine neue Assoziation entstehen, die ungewollt ist. Ein ausgeschnittener Geschäftsmann auf einer Waldwiese im Hintergrund, soll vielleicht "Umweltschutz ist bei uns Chefsache" zum Ausdruck bringen. In Wirklichkeit assoziiert man aber: "Während die anderen arbeiten, mache ich mir einen schönen Tag". Damit würden Sie eine Negativwirkung Ihres Images provozieren. Beurteilen Sie deshalb nach der Montage, ob sich eine ungewollte Assoziation eingeschlichen hat und wählen Sie evtl. andere Bilder, die sich besser miteinander verbinden lassen.
Vorgehensweise:
Optimal ist es, wenn Sie sich in Artweaver, direkt die im Sitedummy eingestellte Größe der Headergrafik, als Größe des Arbeitsbereiches festlegen:
- Datei > Neu...
- Breite (in Pixeln) / Höhe (in Pixeln)
- Auflösung 72dpi (Standardauflösung für's Internet)
- klicken Sie auf die Papierfarbe und vergeben Sie, im neuen Fenster, im Eingabefeld ganz unten, die im Sitedummy eingestellte Hintergrund- farbe für den Header und Footer
- Bestätigen Sie Ihre Eingaben mit OK
Öffnen Sie Ihr Logo sowie die Fotos, die in die Headergrafik montiert werden sollen. Entfernen Sie Hinter- gründe, wenn Sie dies geplant haben, und kopieren Sie anschließend Ihre Bilder in den Arbeitsbereich:
- Formauswahl-Werkzeug wählen
- Alles markieren
- Bearbeiten > Kopieren
- zum Arbeitsbereich der Headergrafik wechseln (einfach anklicken)
- Bearbeiten > Einfügen
Die Bilder werden auf einer neuen Ebene in den Arbeitsbereich eingefügt. Jetzt müssen Ihre Bilder noch, für den Arbeitsbereich passend, skaliert werden. Klicken Sie im Ebenenfenster auf die Ebene, auf der sich
das zu skalierende Bild befindet. Wählen Sie danach
- Bearbeiten > Transformieren > Skalieren
Ihr zu skalierendes Bild bekommt einen Rahmen mit 8 Anfassern. Wählen Sie einen Anfasser an einer Ecke, drücken Sie die Shifttaste (Taste für Großbuchstaben) auf Ihrer Tastatur und bewegen Sie den Anfasser, sodaß sich das Bild verkleinert. Mit der Shifttaste bewirken Sie, daß das Bild beim skalieren seine Proportionen behält, also nicht verzerrt wird. Wenn Sie auf die gewünschte Größe skaliert haben, klicken Sie zur Bestätigung oben im Untermenü auf Anwenden.
Möglicherweise ist Ihr, in den Arbeitsbereich kopiertes, Bild so groß, daß Sie keine Anfasser sehen können. Klicken Sie in diesem Fall erst im Untermenü auf Abbrechen, wählen Sie die verkleinern Lupe
(Lupe > Untermenü > Lupe Minus) und verkleinern Sie den Arbeitsbereich. Der Arbeitsbereich kann, z.B. bei Bildern, die mit hoher Auflösung fotografiert wurden, sehr winzig werden, bis Sie die Anfasser sehen können.
Wenn Sie die Bilder aller Ebenen an Ihren Arbeitsbereich angepasst haben, können Sie sie noch verschieben. Wählen Sie eine Ebene im Ebenenfenster, klicken Sie auf das Verschieben
-Werkzeug und positionieren Sie das Bild der Ebene. Zum Schluß das Bild im JPEG-Format abspeichern und auf die Homepage übertragen.
Als eingeloggter Kunde können Sie sich in unserem Archiv Beispiele für Headergrafiken ansehen und, wenn Sie möchten, natürlich auch für Ihre Homepage verwenden.
Navigationsmenü
Der Sitedummy bietet Ihnen die Möglichkeit das Menü zu kategorisieren und zu sortieren. So entsteht eine Ordnung auf Ihrer Seite, die dem Besucher einen besseren Überblick über die Zusammenhänge Ihrer einzelnen Seiten gibt. Fassen Sie mehrere Seiten eines Themas zu einer Kategorie zusammen. Sie
können auch Unterkategorien anlegen und das Menü so noch feiner gliedern. Wenn Sie Kategorien benutzen, sollten diese eine logische Schlußfolgerung auf die darin enthaltenen Seiteninhalte gewährleisten. Seiten und Module können innerhalb des Menüs jederzeit verschoben oder umbenannt werden.
Wählen Sie die Schriftgröße des Menüs nicht zu groß. So wird die benötigte Menüfläche nicht zu breit und Sie haben mehr Platz für Ihre Seiteninhalte. Passen Sie, nach dem Anlegen aller Menüpunkte, die Breite der Menüfläche an den Platzbedarf der Menüpunkte an. Klappen Sie dafür alle Kategorien auf, wechseln Sie in den Administrationsbereich, Menüpunkt Design, und verkleinern oder vergrößern Sie Ihre Menübreite schrittweise, bis Sie die optimale Einstel- lung gefunden haben. Wenn Sie im Editor mit Tabellen arbeiten, sollten Sie die Breite der Tabellen auf 100% stellen. Nur so können Sie später ohne Probleme die Breite Ihrer Menü- fläche ändern, z.B. wenn neue Menüpunkte hinzukommen und die Fläche breiter gestellt werden muß.
Schriftarten
Der Sitedummy stellt 4 Schriftarten zur Verfügung. Der Text einer Webseite greift immer auf die, auf dem Computer des Besuchers, installierten Schriften zu. Die wählbaren Schriftarten sind die Standardschriftarten für Webseiten und in der Regel auf jedem Computer installiert.
Die Arial ist eine schmale, serifenlose Schriftart, die Verdana eine breite, serifenlose. Die Times ist eine schmale Serifenschriftart und die Courier eine breite. Serifenlose Schriften sind auf dem Bildschirm besser lesbar. Besonders bei der Wahl einer kleinen Schriftgröße entstehen bei den Serifenschriften unschöne kleine Buckel. Bei der Wahl der Schriftart sollte vorallem auf die Corporate Identity geachtet
werden. Serifenlose Schriften wirken etwas moderner als eine Serifenschrift. Die Times wirkt eher traditionell, alt oder antik. Die Courier ist die Schriftart der Schreibmaschine. Sie passt deshalb gut zum Thema Büro oder Dienstleistung. Für ein gut leserliches Schriftbild sollten Sie bei Wahl der Times oder Courier mindestens eine Schriftgröße von 11 Pixeln wählen.
