Effekt - Überblendung
ist gut geeignet für Bilderklärungen.
Tipps für gute Webseiten
Das Produkt ist fein und außergewöhnlich, die Idee hinreißend und einzigartig.
Wie wunderbar, aber vermittelt Ihre Webseite dies auch Ihrem Publikum?
TIPP 1
Ihre Webseite ist Ihr Schaufenster.
Wie schön ist ein alter Krämerladen.
Aber was ist Ihre Idee, Ihr Produkt, Ihr Alleinstellungsmerkmal?
Die Verweildauer online ist kurz und die Website muss schnell erkennbar die Botschaft senden.
Deshalb stellen Sie Ihre Webseite auf den Prüfstand.
Welches Produkt, welche Idee, welche Tätigkeit ist das Hauptmerkmal?
Welche Nebeninformation hat einen Mehrwert für meine Gäste/ Kunden?
Wohin möchte ich die Besucher bewegen?
Was ist Ihre Hauptzielgruppe?
Unsere Tipps für gute Webseiten.
Es lohnt sich, die folgenden Stichpunkte zuerst auf Papier zu bringen:
- Wichtigstes Hauptwort.
- 3 bis 6 untergeordnete Hauptwörter (Produkt, Tätigkeit, Ort).
- Wie werde ich für Kunden erreichbar sein (Tel., Google Maps, email, Kontaktformular, Öffnungszeiten ...)?
- Kurzer prägnanter Beschreibungstext (max. 120 Wörter).
- Planen Sie die interen Links.
- Entscheiden Sie sich für die geeignete Ansprache Ihrer Besucher (du/sie).
TIPP 2
Das Webseitenlayout muss zum Thema passen.
Nicht jede technisch schicke und moderne Optik schafft eine Atmosphäre für Ihre Aussage. Was nützt eine trendige Website, die nicht auch das Gefühl des Interessenten anspricht. Sie können nicht jedem Geschmack entsprechen. Das Thema heißt
emotionales Webdesign mit eigenem Stil.
Deshalb stellen Sie Ihre Webseite auf den Prüfstand.
Hell oder dunkel? Was passt zu meiner Idee?
Lässt sich das Material, mit dem gearbeitet wird, online darstellen und nutzen?
In welchen Farbtönen sind eigene Fotos vorhanden?
Hat die Webseite eine durchgängige Handschrift, die bestenfalls in erinnerung bleibt, sich aber garantiert von anderen abhebt?
Unsere Tipps für gute Webseiten.
- Sammeln Sie Material (bevorzugte Vorlage, Screenshot einer ähnlichen Webseite, Farbkarten Baumarkt,...).
- Sortieren und beschriften Sie Fotos (Material, Arbeitschritte, Produktfotos, Werkstätten, Team, Logo...).
- Sammeln Sie Grafiken, Symbole, Schaltflächenlayouts, die durchgängig eingesetzt werden können.
TIPP 3
Auch bei Farben gilt - weniger ist mehr.
Bitte laufen Sie nicht Farbtrends hinterher, die in einem Jahr besonders "angesagt" sind. Ein einheitliches Layout auf Autos, Briefpapier, Webseiten... steigert den Wiedererkennungswert (corporate identity) und ist nicht stets erneuerbar.
Deshalb stellen Sie Ihre Webseite auf den Prüfstand.
Haben Sie sich für eine bestimmende Hauptfarbe entschieden?
Nutzen Sie 1 oder 2 Schriftfarben komplementär (mehr Spannung) oder Ton in Ton (mehr Ruhe)?
In welchen Farbtönen sind schon andere Medien vorhanden (z.B. Logos)?
Unsere Tipps für gute Webseiten.
Erstellen Sie sich eine Farbpalette:
- Hauptfarbe Text (Hexcode, RGBA...)
- 1. Nebenfarbe (Hexcode, RGBA...)
- 2. Nebenfarbe (Hexcode, RGBA...)
- 1. Hintergrundfarbe
- 2. Hintergrundfarbe
TIPP 4
2 passende Schriftarten als gelungene Typografie.
Eine schmückende, Aufmerksamkeit erzeugende Schriftart und
eine gut lesbare Schriftart für den Textinhalt sind benutzerfreundlich und individuell zugleich.
Deshalb stellen Sie Ihre Webseite auf den Prüfstand.
Favorisieren Sie zwei Schriftarten?
Sind die Größen und Farben aufeinander abgestimmt?
Sind die Schriften auf dem Untergrund der Webseite gut lesbar?
Passen die Schriften auf unterschiedlichen mobilen geräten?
Sind die Zeilenabstände geeignet für flüssiges Lesen?
Unsere Tipps für gute Webseiten.
Solch eine Planung hilft beim Entwerfen und Bearbeiten von Webseiten:
| h1 | h2 | h3 | h5 | stil1 | stil2 | links | Texte | |
| Schriftart | ||||||||
| Schriftgröße | ||||||||
| Schriftfarbe |
Eine große Auswahl an Schriftarten für Webseiten zum Auswählen und Einbinden gibt es z.B. hier: fonts.google.com. Denken Sie an die Hinweise im Datenschutz.
TIPP 5
Denken Sie an die vielen verschiedenen Displaygrößen.
Handys und Tablets gibt es mit vielen Monitorgrößen. Dazu jedes im Hoch- und Querformat. Monitore von Tablets, Laptops und PCs können ganz verschiedene Auflösungen haben. Und auch auf riesig großen Fernsehgeräten und Monitoren sollen Ihre Webseiten gut aussehen.
Deshalb stellen Sie Ihre Webseite auf den Prüfstand.
Haben Sie Ihre evtl. vorhandenen Webseiten schon mal auf unterschiedlichen Geräten angeschaut oder deren Darstellung simuliert?
Sind platzsparende Elemente (z.B. einklappbare Menüs oder Akkordeons) benutzerfreundlich gestaltet?
Unsere Tipps für gute Webseiten.
Die entscheidende Technik heißt "responsives Webdesign". Responsive steht für beweglich = anpassungsfähig. Die Webseite liest die zur Verfügung stehende Breite des Gerätes aus und packt die Bereiche der Webseite an die vorher zugewiesenen Plätze. Die Befehle hierfür stehen in der css-Datei, geschrieben mit Media Queries.
Geben Sie dabei Breiten für Containern und Bilder, Schriftgrößen und Abstände immer prozentual an. Übrigens - auch bestehende Webseiten können nachträglich responsive angepasst werden.
Testmöglichkeiten:
- Webseiten auf Originalgeräten anschauen
- das eigene Browserfenster verkleinern und in die gewünschte Größe ziehen (Handy, Tablet... simulieren)
- externe Testseite amiresponsive.co.uk
Benötigen Sie Hilfe beim responsiven Anpassen Ihrer Webseiten? Wir sind darauf spezialisiert und haben unzählige Projekte (>> Referenzen) erfolgreich realisiert.
TIPP 6
Nutzen Sie Fotos, die emotional ansprechen.
Im Internet können Sie sich in zahlreichen Bildbibliotheken bedienen. Aber bedenken Sie - das tun andere auch. Für Ihre individuelle Webseite sind eigene Fotos ganz wichtig.
Deshalb stellen Sie Ihre Webseite auf den Prüfstand.
Haben Sie ausreichend viele Fotos, die eine emotional ansprechende Atmosphäre schaffen?
Sind die Hauptfarben der Fotos auf die Farbpalette (TIPP 3) abgestimmt?
Sind die Fotos richtig scaliert und laden schnell genug?
Werden die Fotos auf mobilen Geräten korrekt dargestellt?
Unsere Tipps für gute Webseiten.
- Fotografieren Sie Ihre Produkte / Tätigkeiten selbst oder angagieren Sie professionelle Fotografen*innen.
- Arrangieren Sie die Bildmotive mit Liebe zum Detail, evtl. mit passenden Accessoires.
- Hilfreiche Tipps zu Unschärfe, Perspektive, Licht, Drittelregel und mehr gibt es z.B. hier.
- Optimieren Sie die Fotos: normales eingebettetes Foto: ca. 600px Breite mit 72dpi + vergrößertes Bild (Lightshow): ca. 1200px Breite + Sliderbild: ca. 2000px Breite mit 72dpi
- Geben Sie, wenn überhaupt notwendig, die Bildbreite in % und keine Höhe an (responsives Webdesign Tipp 5)!
- Nutzen Sie für größere Bildmengen in Galerien eher kleinere Vorschaufotos mit Vergrößerungsfunktion oder Slider.
TIPP 7
Bewegen Sie Ihre Webseite - aber bitte in Maßen!
Animierte Webseiten gehören wohl schon zum 'guten Ton' im Webdesign. Deshalb machen Sie ruhig Freude, zeigen Sie, was Sie können, verhindern Sie Langeweile und heben Sie Besonderes hervor.
Deshalb stellen Sie Ihre Webseite auf den Prüfstand.
Welche 1 bis 2 animierten Effekte möchten Sie auf einer Website einsetzen?
Welche Inhalte lohnen sich dafür besonders?
Gibt es Serien von Fotos, die in einer Diashow oder zur Vergrößerung zusammengefasst werden sollten?
Unsere Tipps für gute Webseiten.
- Parallax scrolling bezeichnet den Effekt des Scrollens über eine scheinbar untere Ebene mit unterschiedlicher Geschwindigkeit. Der Effekt sieht gut aus und bleibt beliebt.
- Fade / Slide Effekte sind für breite Container gut geeignet. Werden Sie von unten nach oben eingesetzt, bringen sie eine sanfte Bewegung. Wiederkehrend heben sie gleiche Merkmale hervor (auf unserer Website die Tipps). Mit seitlicher Bewegung sorgen Sie eher für einen Überraschungseffekt.
- Fotos mit zoom bei Maus:hover können zur Vergrößerung eingesetzt werden.
- Bildbeschreibungen lassen sich gut mit Überblendungen bei Maus:hover (siehe Foto hier beim Tipp 7) realisieren.
- Mittels Lightshow - Diashow - lassen sich größere Datenmengen zusammenfassen, schneller Laden und bei Bedarf vergrößern.
- Der Wechsel von Schaltflächen-, Link- oder Menüfarben bei der Benutzung ist hilfreich zur Orientierung für Besucher.
- Slider im Kopf werden nach Untersuchungen für durchschnittlich 3 Sekunden betrachtet. Meist wird in dieser Zeit nicht einmal das 2. Bild angezeigt. Wählen Sie daher wenn, dann nur 2 bis 3 Bilder hierfür. Die Ladezeit verbessert es zusätzlich.
Diese und viele weitere Effekte werden i.R. mit css und JavaScript erzeugt. Sie selbst in Codezeilen zu fassen, ist müsam. Nutzen Sie lieber und leichter Editoren, die dies mehelos bereitstellen. Wir haben all unsere Webseiteneffekte mit dem >>CMS onweb erzeugt.
Fortsetzung folgt.
Unsere Themen
