Hamburger Menü im Webdesign

Seit das Zeitalter der mobilen Endgeräte angebrochen ist, ist ein Symbol präsenter denn je: Das Hamburger Menü. Drei horizontale Balken - gesehen haben es sicher die meisten schon mal, aber nicht jeder kennt es beim Namen.

Was genau verbirgt sich dahinter? Die Funktion der drei symmetrischen Striche erschließt sich sicherlich nicht sofort, aber sobald man die Anwendung dahinter einmal verstanden hat, ist es eindeutig, oder nicht? Das kleine Icon teilt die Webdesigner in zwei Lager.

Entstehung des Hamburger Menüs

Nur was für Kenner?

Wer technisch versiert ist, kann sich denken welche Funktion hinter dem Icon steckt und klickt drauf. Das Symbol mit den drei horizontalen Strichen dient dazu das Navigationsmenü aus- bzw. einzuklappen. Wer jedoch nicht so routiniert im Internet unterwegs ist, klickt nur auf Buttons, die er kennt oder sucht zunächst nach einer mitgelieferten Erklärung.

Bei der Erstellung einer Website ist es daher wichtig, dass das Hamburger Menü stets präsent und nie außerhalb des Sichtfeldes des Users ist. Denn hier gilt: Aus den Augen aus dem Sinn. Sobald die drei Striche dauerhaft sichtbar sind, liegt es quasi auf der Hand, dass sich dahinter das Seitenmenü verstecken muss.

Hamburger Menü für mobile Webauftritte

Ähnlich wie die Lupe für eine Suchfunktion steht oder sich hinter der Weltkugel eine Sprachauswahl verbirgt, wird auch das ausklappbare Hamburger Menü in der digitalen Welt als Standard angesehen, sobald es einmal als Menü-Icon erkannt wurde.

Inzwischen nutzen nicht nur Webseiten die drei horizontalen Striche als Symbol für ein ausklappbares Menü, sondern auch in Apps, Online-Tools oder auf mancher Fernbedienung ist es zu finden.

Hamburger Menü auf YouTube

Die rasante Ausbreitung des Hamburger Menüs im Webdesign ist ein deutliches Zeichen für dessen Funktionalität. Gerade beim Aufruf über mobile Endgeräte kann durch die Verwendung einer versteckten Navigation Platz gespart werden. Für ein Responsive Webdesign ist das Hamburger Menü eine ideale Alternative für den mobilen Auftritt einer Website.

Nicht immer die beste Wahl

Gerade für die mobile Version einer Website ist das Hamburger Menü die optimale Lösung für ein platzsparendes und übersichtliches Design. Für die klassische Desktop-Version empfiehlt sich jedoch weiterhin ein gut strukturiertes offenes Menü, das schnell einen Überblick über die Seiteninhalte bietet.

Für Websites wie Google+ oder zum Beispiel Pinterest, bei denen sich User durch den Content einer großen Hauptseite scrollen und sich typischerweise nicht über einzelne Menüpunkte navigieren lassen, kann die Navigation problemlos versteckt bzw. eingeklappt werden, da sie für den Besucher nicht essentiell ist.

Hamburger Menü bei Google+

Bevor Sie sich im Webdesign für ein Hamburger Menü entscheiden und dadurch für eine versteckte Navigation, sollten Sie immer prüfen, ob ihre Besucher trotzdem eindeutig zu den relevanten Inhalten navigiert werden.

Hamburger Webdesign

Bilder für Webseiten: Wo gibt's die besten Fotos?

Ein Bild sagt mehr als tausend Worte - diese Phrase bestätigt sich auch im Webdesign. Denn bei der Gestaltung der eigenen Webseiten kommt es immer darauf an, dem Betrachter ein bestimmtes Gefühl zu vermitteln. Bilder als Stimmungsträger sind optimal geeignet, um Ihre Besucher in die gewünschte emotionale Richtung zu lenken.

Dabei können Bilder für Webseiten von A bis Z die unterschiedlichsten Gefühle vermitteln und eignen sich tatsächlich zur Verwendung in allen Branchen. Der seriöse Geschäftsmann, die mitfühlende Pflegerin oder der ausgelassene Kunde, der soeben ein tolles Produkt gekauft hat - innerhalb eines Sekundenbruchteils hat unser Hirn eine Stimmung mit dem Foto assoziiert. Machen Sie sich das zunutzen und positionieren Sie die passenden Bilder für Webseiten!

Woher bekomme ich stimmige Bilder?

Um Ihre Website mit Fotos auszustatten haben Sie verschiedene Möglichkeiten. Jede davon bietet ihre eigenen Vor- und Nachteile. Welche Variante Sie wählen, ist abhängig davon, wie viel Zeit Sie zur Erstellung der Bilder haben, welche Qualität diese haben sollen und wie viel Geld Sie investieren können und möchten.

(1) Eigene Bilder erstellen

Authentisch und überzeugend: Fotos, welche Sie, Ihre Kollegen und Ihr Unternehmen selbst darstellen, wirken immer am besten. Sie geben dem Betrachter bereits einen Einblick in Ihre Arbeit und Sie können ab dem ersten Sichtkontakt Sympathiepunkte sammeln. Setzen Sie sich in Szene - am Arbeitsplatz oder Einsatzort, bei typischen Tätigkeiten Ihres Berufs oder auch im Kontakt mit Kunden. Die Kamera sollten aber nur diejenigen selbst in die Hand nehmen, die sich damit auskennen. Denn Fotos, die aussehen wie “will und kann nicht” vermitteln nichts als Unprofessionalität, die Ihre Besucher sicher nicht überzeugt.

Kontaktieren Sie lieber einen profesionellen Fotografen, der die nötige Erfahrung, Expertise und Ausstattung mitbringt. Er kann Sie beraten zur Wirkung von Bildaufbau und Farbwahl - passend zu den Farben, die Sie auf Ihrer Website verwenden möchten.

Selbstverständlich ist dies eine sehr kostenintensive Variante - man zahlt hier allerdings auch für die kreative Leistung des Fotografen, die Beratung und besonders hochwertige Bilder in bester Qualität. Die professionellen Bilder können Sie dann nicht nur für Ihre Website, sondern auch im Print-Bereich für Broschüren oder Visitenkarten verwenden.

Grundsätzlich empfehlen wir als Firma für Webdesign in Berlin diese Alternative zu wählen. Wenn Sie eigene Bilder für Webseiten verwenden, ist Ihnen der einzigartige Auftritt gesichert.

(2) Bilder einkaufen

Im Internet bieten Fotografen Ihre Bilder zu guten Preisen an. Auf den sogenannten Stock-Seiten können Sie mithilfe von Schlagworten die Bilder suchen, die Ihren Vorstellungen entsprechen. Oft wird der Preis in Credits oder Points angegeben, von denen Sie im Vornherein ein bestimmtes Budget buchen. Falls Ihnen ein Restbetrag bleibt, können Sie sich diesen einfach für später aufbewahren - Bilder werden immer gebraucht, zum Beispiel in einem Blog.

Ein großer Nachteil dieser kostengünstigeren Variante: Sie sind höchstwahrscheinlich nicht die einzige Person, die diese Bilder für Webseiten verwendet. Um unangenehme Überraschungen oder Verwechslungen zu vermeiden, können Sie sich vorher typische Webseiten aus der Branche ansehen.

Die Website iStockPhoto ist wohl der bekannteste Anbieter in diesem Bereich - schauen Sie sich um, vielleicht ist das richtige für Sie dabei!

(3) Kostenlose Bilder nutzen

Wer für den Geldbeutel die beste Alternative wählt, muss sich dafür an anderen Stellen eingrenzen. Im Web gibt es zahlreiche Anbieter für kostenlose und lizenzfreie Bilder, aus deren Repertoire Sie wählen können. Auch hier gilt: Wer sich vorher auf ein paar Websites der Konkurrenz umsieht, vermeidet es, die gleichen Bilder zu verwenden. Es lohnt sich außerdem, ausreichend Zeit in die Suche zu investieren.

Hier finden Sie ein paar Anbieter, bei denen Sie Bilder für Webseiten finden:

  • Pixabay, der Klassiker mit vielen Illustrationen, Bildern und und Vektorgrafiken
  • Unsplash, hier finden Sie wundervolle Stillleben, Fotos mit Menschen, Tieren und Landschaften
  • Splitshire sortiert die Bilder bereits in Kategorien für SIe und macht die Suche noch einfacher
  • Jay Mantri stellt Ihnen beeindruckende, sehr stimmungsvolle und teils künstlerische Fotos zur Verfügung
  • Bei Gratisography finden Sie alles von bunt und schrill über witzig und skurril bis hin zu einfach wunderschön und stimmungsvoll
  • Ganz besonders sind die Bilder im Vintage-Stil von New Old Stock
  • Fotos von Lebensmitteln und leckerem Essen finden Sie bei Foodiesfeed

Diese Liste könnte noch um unzählige Seiten ergänzt werden - schauen Sie sich einfach um!

Wie kann ich Bilder auf meiner Website einbeziehen?

Mit Fotos können Sie Ihr Unternehmen präsentieren, Ihre Arbeit für Interessenten transparenter machen oder eben Stimmungen transportieren. Besonders auf der Startseite ist letzteres angebracht, um den Beuschern ab der erstenSekunde einen Eindruck zu vermitteln.

Der Klassiker sind Slideshows mit großen Bildern im oberen Bereich (above the fold) der Startseite. Auf den Bildern können auch kurze Texte oder Schlagworte eingeblendet werden. Generell sind Bilder im Querformat im oberen Teil der Startseite sehr beliebt.

 

Last but not least: Hinweise für Bilder auf Webseiten

Wenn Sie im Begriff sind, eine neue Website zu erstellen oder erstellen zu lassen, benötigen Sie in jedem Fall Bilder. Bereiten Sie sich darauf vor und überlegen Sie sich bereits zu Beginn des Design- und Programmierprozesses, woher Sie die Bilder für die Website nehmen möchten! So vermeiden Sie unnötigen Leerlauf in der Entwicklung und unterstützen die Arbeit Ihrer Webdesigner optimal. Dieser sollte Sie außerdem zeitig genug darauf hinweisen, wann er die Bilder benötigt und welchen Anforderungen Sie gerecht werden müssen.

Beziehen Sie außerdem in die Auswahl der Fotos unbedingt eine zweite Meinung ein! Ob Fotograf, Webdesigner oder einfach nur Kollegen - derjenige muss (nicht unbedingt) fundiertes Wissen aus dem gestalterischen Bereich haben. Erkundigen Sie sich einfach, wie die von Ihnen bereits vorausgewählte Bilder auf denjenigen wirken.

 

Blocksatz oder Flattersatz: Responsive Design ist ausschlaggebend

Blocksatz oder Flattersatz im Webdesign - das ist hier die Frage! Und unter erfahrenen Webdesignern herrscht Einigkeit: Der Blocksatz hat im Webdesign nichts zu suchen, wenn das Ergebnis optisch ansprechend sein soll und einen Webseitenbesuch zu einem gelungenen Gesamterlebnis machen soll.

Wer sich auf seiner Website, Facebook-Seite oder für ein Mailing dennoch an die vermeintlich strukturiertere, übersichtlichere Textausrichtung wagt, sollte über ausreichend Erfahrung und Fingerspitzengefühl verfügen - denn schon im Print-Bereich muss der Blocksatz händisch in der Regel noch nachbearbeitet werden. Die Möglichkeiten, die es diesbezüglich für Druckerzeugnisse gibt, z.B. das Kerning, gibt es im Webdesign nicht bzw. nur bedingt und erfordern dann einen sehr hohen zeitlichen und technischen Aufwand, weshalb der Flattersatz für Digitales gänzlich ungeeignet ist.

Aber es gibt noch einen anderen gewichtigen Grund, weshalb der Flattersatz als Sieger aus dem ewigen Duell der beiden Textausrichtungsvarianten hervorgeht.

Responsive Design: Kein Mut zur Lücke im Webdesign

Immer mehr Suchanfragen stellen die User mittlerweile über ihre mobilen Endgeräte. Wer mit seinem Angebot auch auf Smartphone und Tablet conversionnah auftreten will, muss über kurz oder lang auf responsive Webdesign umstellen. Nur so werden Inhalte endgerätunabhängig einheitlich und benutzerfreundlich angezeigt.

Wer dabei aber den Webdesign-Fehler macht, seine Texte im Blocksatz zu gestalten, muss sich darauf gefasst machen, dass seine Texte von unschönen Lücken zersetzt werden. Diese werden umso größer, je kleiner der Bildschirm wird. Besonders Besitzer älterer iPhone-Modelle dürften wenig Spaß am “Lesen” von Blocksatz haben. Ungleichmäßig groß sind die Wortabstände obendrein, sodass Blocksatz-Texte nicht nur unansehnlich sind, sondern auch den Lesefluss erheblich stören.

Wenn dann auch noch die automatische Silbentrennung eingeschaltet ist, ist eine hohe Bounce Rate vorprogrammiert: Vor lauter Lücken und Bindestrichen ist an Leserlichkeit kaum mehr zu denken. Ihr potenzieller Kunde ist schnell unzufrieden und macht sich auf und davon. Conversion adé!

Leserführung auf ganzer Linie: Alternativen für optische Anker

Damit Ihr digitaler Text auch ohne Blocksatz möglichst leserfreundlich - in diesem Fall freundlich fürs Auge ist - können Sie auf verschiedene Hilfsmittel aus dem Bereich Webdesign zurückgreifen: Einzelne Sinnabschnitte grenzen Sie beispielsweise durch Trennlinien oder textumschließende Kästen voneinander ab. Auf diese Weise lässt effizient erreichen, was im Blocksatz nur mit sehr viel mehr Aufwand herbeigeführt werden kann.

Google bestraft künftig störende Pop-ups auf mobilen Webseiten

Für verbesserte Usability auf mobilen Endgeräten: Ab Januar 2017 sind Fullsize-Werbebanner auf mobil optimierten Seiten ein negatives Ranking-Signal. In den mobilen Suchergebnissen könnten betroffene Webseiten dadurch Plätze verlieren.

Nervige Interstitials sind ab 2017 ein negatives Ranking-Signal

Dass Google mobile Webseiten auch auf Basis der mobilen Nutzerfreundlichkeit bewertet, ist keine Neuheit. Neu ist aber, dass sich störende Werbung ab 10. Januar 2017 negativ auf die Platzierung einer mobil optimierten Webseite in den mobilen Suchergebnissen auswirken soll. Sogenannte Interstitials (Pop-up Werbebanner), die sich großflächig über die gesamte Seite legen und erst einmal weggeklickt werden müssen, um den eigentlichen Inhalt der Seite betrachten zu können, stuft Google künftig als usability-behindernd ein.

Was hat Google gegen Werbung?

Solche Banner stehen entgegen Googles Bestreben, dem Suchenden schnell die gewünschte Information zur Verfügung zu stellen, da sie das Nutzererlebnis beeinträchtigen: Nach dem Öffnen einer Seite legt sich das Banner über den Seiteninhalt und muss zuerst einmal weggeklickt werden. Gerade auf mobilen Endgeräten passiert es dann oft, dass ein Banner angeklickt wird und sich (eigentlich) unbeabsichtigt eine weitere Seite öffnet. Für viele User ist das unerfreulich.

Großflächige Pop-ups sind ein No-Go

Ein paar Beispiele, was von Google als hinderlich eingestuft wird:

  • Pop-ups, die den gesamten Seiteninhalt überdecken (völlig egal, ob es das sofort nach dem Aufrufen der Webseite oder erst nach einiger Zeit während des Betrachtens macht).
  • Großflächige Interstitials, die den Seiteninhalt überdecken und zuerst weggeklickt werden müssen, um die eigentlichen Inhalte der Webseite zu erreichen.
  • Layouts, die den Teil der Webseite above-the-fold bedecken und damit wie Standalone-Interstitials erscheinen, wobei der User scrollen muss, um die Hauptinhalte zu sehen.

 

interstitials google abstrafung

Ausnahmen bei kleinen und informativen Bannern

Nicht alles wird negativ bewertet. Erlaubt sollen unter anderem sein:

  • Interstitials, welche aufgrund einer Verpflichtung eingeblendet werden, wie etwa ein Cookie-Hinweis oder eine Altersüberprüfung.
  • Banner mit einer geringen Größe, welche einen angemessenen Teil des Bildschirms bedecken und leicht zu schließen sind. Als positives Beispiel führt Google die App-Installation-Banner von Chrome und Safari an.
  • Anmeldedialoge auf Webseiten, deren Inhalte nicht indexierbar sind. Dazu gehören unter anderem private Inhalte wie Emails oder kostenpflichtige Inhalte.

 

erlaubte interstitials google

Muss ich jetzt alle Interstitials deaktivieren?

Google gibt zu bedenken, dass es neben diesem einen Ranking-Signal noch Hunderte andere Faktoren gibt, die in die Bewertung einer Webseite einfließen. Wenn eine Webseite qualitativ hochwertige und relevante Inhalte vorweist, kann sie trotz störenden Werbebannern eine sehr gute Position in den Suchergebnissen belegen.

Für störende Werbebanner wird es keine “Abstrafung” bzw. manuelle Maßnahme geben, wie es bei Verstößen gegen die Google Webmaster Richtlinien üblich ist. Es gibt lediglich bessere oder schlechtere Ranking-Signale durch den ganz normalen Google Algorithmus. Negative (und übrigens auch positive) Signale wirken sich auch nicht gleich auf die gesamte Domain aus, sondern nur auf die einzelne Seite.

Da es auch kein Test-Tool seitens Google dafür geben soll, ob ein Banner als störend bewertet wird, muss jeder Webmaster selbst entscheiden, wie hoch er das Risiko einschätzt, großflächige Banner und Interstitials für Werbung oder call-to-action zu nutzen oder ob er eventuell kleinere Banner einsetzt oder sogar zugunsten seiner User völlig auf solche Elemente verzichtet. ;-)

Quelle: https://webmasters.googleblog.com/2016/08/helping-users-easily-access-content-on.html

Webseiten mehr Leben einhauchen mit Storytelling Webdesign

Wie der Visual Storytelling Trend das Netz erobert

Meist gehören Aspekte wie Produkt- und Geschäftsziele, Markenidentität sowie Nutzerbedürfnisse und Usability zu den bestimmenden Eigenschaften bei der Planung und Gestaltung einer Webseite oder Webanwendung. Schnell verliert man dabei aus den Augen, wie wichtig die grundlegende Erfahrung eines Users beim ersten Besuch ist und welchen bleibenden Eindruck diese hinterlässt. Webdesign, das mit narrativen Elementen angereichert ist, stellt den Benutzer in den Mittelpunkt und erreicht so, dass dieser auf einer emotionale Ebene angesprochen wird. Erfahren Sie hier mehr über Storytelling Webdesign und lassen sich von Storytelling Websites inspirieren:

Mithilfe narrativer Webseiten-Elemente hinterlässt eine Website einen viel größeren Eindruck beim Besucher.

Storytelling Website Beispiel Jess & Russ (jessandruss.us).

 

Chapter One – Kleine Geschichte vom Geschichten-Erzählen:

Zunächst einmal bedeutet der Begriff Storytelling „Geschichten erzählen“. Die Kunst des Geschichtenerzählens existiert Jahrhunderte lang schon als Methode Informationen und Wissen sowie Werte und Meinungen zu vermitteln. Für Werbung und Marketing-Zwecke bedienen sich viele Unternehmen schon lange den Mitteln des Geschichten-Erzählens. Auf diese Weise können auch trockene Informationen und scheinbar wenig interessante Daten auf eine ansprechende Weise weitergegeben werden und bleiben dem Rezipienten viel eher in Erinnerung. In den 2000er Jahren erlebte das Storytelling eine Renaissance – die Erzählkunst wird gerade im World Wide Web, das tagtäglich mit immer größer werdenden Informationsfluten aufwartet, zu einem Schlüsselfaktor, sich von der Konkurrenz abzuheben. Denn Geschichten verleihen Struktur und wirken zugleich auf emotionaler Ebene.

Visuell überzeugende Stories erzählen

Eine spannende Geschichte kann auch mit nur einem Bild erzählt werden.

 

Chapter Two – Kein Märchen: Der Einfluss gut erzählter Stories

Die emotionale Verbindung zwischen einem Unternehmen und seinen Kunden bzw. dem Webseiten-Betreiber und dem -Besucher ist gerade in unserer modernen Konsumgesellschaft von hoher Bedeutung. Besonders eindrücklich zeigt uns Creative Director Don Draper, der fiktive Charakter der US-amerikanischen Serie Mad Men, die uns die Welt der Werbung in den 60er Jahren näher bringt, was für ein Machtinstrument das Beherrschen von (Visuellem) Storytelling bedeuten kann. Denn Geschichten

  • bleiben länger und einfacher im Gedächtnis
  • wecken von Emotionen
  • verleihen einem Sachverhalt Bedeutung und Sinn
  • aktivieren deutlich mehr Gehirnregionen als „einfache“ Informationen
  • ermöglichen es mitzudenken und mitzufühlen
  • dadurch einen einer persönlichen Verbindung herzustellen
  • wirken unterhaltend
  • können das Publikum zu etwas motivieren
  • werden eher weitererzählt.

 

Visulles Storytelling: Mit Scroll-Activated-Animations einen Geschichtsstrang aufbauen.

 Visuelles Storytelling am Beispiel der everylastdrop.co.uk Webseite

 

Chapter Three – Die Kunst Geschichten zu erzählen:

Mit Blick auf Webdesign bedeutet gutes Storytelling, sich selbst sowie die eigenen Produkte bzw. Dienstleistungen spannend darzustellen und so nachhaltig Eindruck zu hinterlassen. Mithilfe von Storytelling Webdesign sollen Inhalte möglichst einfach und visuell stimulierend präsentiert werden, sodass der Rezipient sie aufgrund der Eingängigkeit und emotionalisierenden Wirkung besser aufnimmt und sich länger erinnert.

Für viele Menschen und in vielen Unternehmen werden Kenntnisse über Produkte, Daten und Prozesse immer wichtiger. Im Visual Storytelling lassen sich gerade sehr komplexe Inhalte spannend und einfach darlegen. Stories sind dann nicht zwingend Texte, sondern vielmehr auch Grafiken, Animationen oder Kunden-zentrierte sowie interaktiv ausgerichtete Design-Elemente.

visual storytelling snow fall

Pulitzer preisgekröntes Projekt "Snow Fall" gilt als Vorreiter in der Sparte journalistisches Multimedia Storytelling.

 

Chapter Four: Storytelling Websites – Webseiten mit Identität

In Branchen mit starker Konkurrenz heben sich Unternehmen durch genau solche Geschichten ab, weil sie Menschen durch emotionale und erinnerungswürdige Botschaften ansprechen und abholen. Schließlich wird auf diese Weise Vertrauen und Loyalität aufgebaut und der Kunde an Marken gebunden. Geschichten geben dem Besuch einer Webseite eine Struktur und hinterlassen einen bleibenden Eindruck, indem sie die Identität einer Marke (sog. "brand stories") oder eines Produktes (sog. "product stories") stärken.

Im Storytelling Webdesign prägen insbesondere die folgenden Elemente die Geschichte einer Webseite:

  • visuelle Webdesign-Elemente: Ersteindruck einer Website/ Verwendung gestalterischer Trends
  • visuelle Elemente des Unternehmens: Unternehmenslogo-Aussage/ Werbesprüche/ Slogans
  • Tonalität der Webseite: Wie wird der Besucher angesprochen/ wie Informationen vermittelt
  • Informationsdesign & -architektur: Aufbau und Fokus der Inhalte
  • Interaktives Webdesign: Wie kann ein Besucher mit der Webseite interagieren
        

Ein großer Vorteil von Storytelling Websites ist zudem, dass sie sich hervorragend mit Design-Elementen anderer Webdesign Trends (z.B. Flat Design, Minimalistisches Webdesign, Parallax Scrolling Webdesign, Infografiken und Ghost Buttons) verbinden lassen.

Interesse geweckt? Dann erzählen Sie uns Ihre Geschichte! Unser Webdesign Berlin haucht Ihrer Website Leben ein.

Jetzt unverbindlich und kostenlos beraten lassen!

030 53 08 82 35