Logo webuftritt.ch

WEBUFTRITT.CH

by Rita Ludwig-Helmchen

Webdesignerin, Logodesignerin, Code-Versteherin

  1. Farben und Formen
  2. Bilder und Grafiken
  3. Logo und einheitliches Design
  4. Fotografie
  5. Datenformate und Dateiformate nach Bedarf
  6. Ansichten im Web-Design
  7. Elemente die man braucht

Design Guidelines

Jetzt kommen wir zu den grafischen Elementen, die auch in verschiedenen Datenformaten benötigt werden. Es ist neben einem Firmenlogo wichtig, sich über viele Feinheiten der grafischen Welt bewusst zu werden.

Jede Grafik, jedes Bild löst im Menschen Emotionen aus. Von angewiedert bis zu fasziniert. Bedenken Sie immer die Wirkungsweise, die Ihre Entwürfe auf Sie uns andere haben könnten. Es muss auch wiederspiegeln, was Sie vermitteln wollen. Da Sie dies wissen, können Sie mit den Notizen Ihrer Recherche nun einen Schritt weitergehen und diese nach den grafischen Elementen filtern.

ESTELLEN SIE EIN KONZEPT

Für diese Webseite habe ich allein für die Ausarbeitung der Themengebiete 4 Entwürfe gemacht. Erst als ich halbwegs zufrieden war mit dem Grundkonzept, habe ich das Computerprogramm geöffnet, welches ich vor der technischen Umsetzung benutze, um Grafik und Text auszuarbeiten.

10.09.2019

1. Farben und Formen

Zu viel Farbe ist bekanntlich nicht gut. Die meisten Menschen können nicht mehr, wie drei Farben wahrnehmen und verarbeiten. Daher sollte man sich maximal drei Grundfarben aussuchen inkl. Der Schriftfarbe.

Der Kontrast zwischen Schrift und Hintergrundfarbe sollte so stark wie möglich sein, damit die Besucher der Webseite auch die Möglichkeit haben den Text zu lesen. Dies heisst jedoch nicht, das Sie zwingend eine schwarze oder weisse Webseitenfarbe benötigen. Es gibt Online verschiedene Möglichkeiten, die farbliche Gestaltung zu optimieren.

Bei Formen sieht es etwas anders aus. Hier haben Sie recht viel kreative Freiheit und auch Platz für innovative Ideen. Von den Formen sollte es jedoch zum Unternehmen passen und die richtige Botschaft vermitteln.

10.09.2019

2. Bilder und Grafiken

Bei Bildern und Grafiken ist es auch wichtig, bei der Gestaltung nicht zu übereifrig zu sein. Versuchen Sie klare und eindeutige Formen und Beschriftungen zu wählen. Auch bei Statistiken sollte man eine genaue Erklärung nicht direkt in der Grafik verstecken, sondern eher nebendran ausführen. Diejenigen, welche ernsthaft Interesse daran haben, können so auch ohne Öffnen oder Vergrössern der Grafik einen Überblick gewinnen. Dies gehört dann schon zu dem Teil der Webseite, der sich mit der ‘Usability’, also Bedienbarkeit der Elemente einer Webseite auseinandersetzt.

10.09.2019

Machen Sie mehrere Entwürfe eines Logos. Am einfachsten können Sie dies zuerst mit Papier und Stift machen.
Wenn Sie schon Erfahrungen mit Grafikprogrammen haben, können Sie selbstverständlich auch diese für Entwürfe nutzen. Legen Sie dabei verschiedene Ordner und Grössen (Pixel) an, die Sie klar deklarieren. Drucken Sie die Logo’s im CMYK-Farbformat (dazu später mehr) aus und hängen Sie an einem gut sichtbaren Ort auf. Wählen Sie den Entwurf aus, der Ihnen nach zwei Wochen immer noch gefällt.

Es ist wichtig, nicht das erstbeste zu nehmen, weil es einem gerade eben gefällt. Bedenken Sie, das ein Logo auf allen Ihren Dokumenten sein wird. Von der Visitenkarte über den Firmenbrief bis hin zur Webseite wird es die nächsten Jahre Ihr Begleiter sein.

10.09.2019

Fotografie

Nutzen Sie professionelle Bilder auf Ihrer Webseite, die dem Auge schmeicheln und eine gute Auflösung haben. Auch die Harmonie des Bildes ist ein wichtiger Bestandteil des Bildaufbaus.

Sollten Sie sich nicht sicher sein, ob Sie entsprechende Fotografien selber machen können, erkundigen Sie sich in Ihrer Umgebung nach einem Fotografen. Es gibt nichts schlimmeres, als eine schön designte Webseite, die mit amateurhaften Bilder gespickt ist. Ein Bildbearbeitungsprogramm kann nicht alles korrigieren.

Hier ein paar grundlegende Sachen, die bei der Fotografie zu beachten sind:
- Blickwinkel
- Licht und Schatten
- Abstand zum Objekt
- harmonische Bildaufteilung
- Einstellungsmöglichkeiten bei der Kamera und ob man Sie kennt und weiss damit um zu gehen.
- Kenntnisse der digitalen Bildbearbeitung
- . . .

Wie Sie sehen, benötigt man doch einiges an Kenntnissen um das eine oder andere gute Bild zu bekommen. Hier müssen Sie wieder einmal auf Ihr Budget und die Timeline achten. Auch Ihre Zeit die Sie in das Konzept einbringen, sollten Sie einberechnen.

10.09.2019

Datenformate und Dateiformate nach Bedarf

Für den Druck von Visitenkarten benötigen die Drucker ein anderes Format als Grafiken im Internet. Daher müssen Sie jede Grafik in unterschiedlichen Formaten erstellen und speichern.

Für Drucksachen, benötogen Sie das CMYK-Format. Dieses beschreibt die vier Grundfarben, welche beim Druck gebräuchlig sind.
Bei Webseiten benutzt man zwei verschiedene Formate. Ich selber bevorzuge das RGBA-Format, da sich mit diesem Transparente Farbtöne erzeugen lassen. Das andere Format wir als Hex-Format bezeichnet und wird mit einem Hashtag # angeführt.
Damit haben wir schon die Farbformate definiert.

In welchem Dateiformat müssen die Daten gespeichert werden?
Dies ist abhängig von Ihrem Verwendungszweck.

Geschüftsbriefe werden als .pdf gespeichert und Fotografien als .jpeg. Bei Grafiken gibt es verschiedene Möglichkeiten. Ein Logo wird eher als .svg gespeichert, da man diesem auch andere Informationen einprogrammieren kann. Meine Startseite war ein .svg, welches mit ein paar Zeilen HTML im Browser dargestellt wird. Andere Grafiken können Sie als .png speichern, wenn diese einen transparenten Hintergrund haben oder als .jpeg wenn die Grafiken keine Transparenz besitzen.

10.09.2019

Ansichten im Web-Design

Ansichten sind im digitalem Bereich weit grösser als Sie glauben zu Wissen. Angefangen mit den Smart-Watches bis hin zu Fernsehern. Dazwischen gibt es hunderte verschiedener Formate und auf allen sollte Ihr Design gut aussehen.

Für Desktop-Versionen gibt es neben der angezeigten Sicht auch noch das Printformat, welches man im Hintergrund direkt schreiben kann mittels CSS. Bei vielen Programmen gibt es im Hintergrund bereits Einstellungen dazu, aber es lohnt sich, diese zu testen. Mittels Rechtsklick, CTRL+P oder Cmd+P kann man diese Funktion aufrufen.

10.09.2019

Elemente die man braucht

‘Weniger ist mehr!’
Wählen Sie für das Webdesign nur notwendige Elemente, wie Kontaktformulare + Captcha (um Spam zu vermeiden).
Blinkende und zu viele Elemente, welche sich bewegen sind irritierend und lenken vom Wesentlichen ab. Ebenso sollten Sie das Design schlicht und aufgeraumt gestalten. Dazu gehört auch das Layout mit Zeilenabständen, Blockabständen, Ausrichten des Textes und Wahl der Schrift (Typografie).
Bei Animationen und Videos sollten Sie darauf achten, das diese produkt- und firmenbezogen sind. Unnötige Informationen sollten vermieden werden.

Erstellen Sie Vorlagen von Briefen und Rechnungen, die Sie später verwenden können. Diese sollten nicht zu viele Farbelemente enthalten, da diese zu viel Druckerfarbe benötigen. Das Design sollte dem der gedruckten Webseite wenigsten annähernd nahe kommen und im Idealfall das Selbe sein.

10.09.2019