Möchtest du einen Onlineshop erstellen?

Homepage Design: Website Elemente und Trends

Homepage Design

Natürlich dient deine Homepage vor allem zur Präsentation und Vorstellung deiner Marke. Allerdings besteht sie zudem aus einer Reihe an kodierten Anleitungen, die neue und bestehende Kundschaft das finden lässt, wonach sie sucht.

Jedes Detail sollte darauf ausgerichtet sein, einen guten ersten Eindruck zu hinterlassen und zu motivieren, bestimmte Handlungen zu vollziehen. Solche Handlungen sind eng gekoppelt an das Ziel, welches deine Homepage bzw. Shop verfolgt. Ziele können beispielsweise der klassische Produktverkauf sein oder Newsletter-Abonnenten zu generieren.

Es gibt nicht den einen, richtigen Weg, für ein erfolgreiches Homepage Design. Im Folgenden findest du dennoch bewährte Tipps und Website Elemente, die du im Kopf behalten solltest, wenn du deine Website erstellst. Diese Grundlagen des Homepage Designs solltest du stets berücksichtigen - unabhängig davon, ob du deinen ersten Store aufbaust oder die Startseite deines Shops überarbeitest. Außerdem zeigen wir dir aktuelle Design-Trends an ausgewählten Beispielen.

Inhaltsverzeichnis


Setze dein Wissen direkt in die Praxis um und bau dir deinen Shopify-Store. Jetzt 14 Tage lang kostenlos testen.


Was macht ein gutes Homepage Design aus? 5 Fragen an dich

Eine Homepage, die für das eine Unternehmen gut funktioniert, kann für ein anderes Unternehmen ein Flop sein. Wenn du Ausschau nach Design-Optionen hältst und dir unsicher bist, in welche Richtung du gehen möchtest, dann stell dir folgende Fragen, um eine fundierte Entscheidung zu treffen:

  • Was soll die Kundschaft machen? (z. B. kaufen, sich in deinen E-Mail-Verteiler eintragen usw.)
  • Wie einfach ist es, genau das auf deiner Homepage zu tun?
  • Wie viele Schritte müssen Leute unternehmen, um ihr Ziel auf deiner Website zu erreichen?
  • Wie viele Informationen braucht deine Kundschaft, um zum nächsten Schritt überzugehen?
  • Gibt es Schritte, die du löschen könntest?

Setze dir also ein klares Ziel für dein Website Layout und richte dein Design auf dieses aus. Versetze dich dazu mit den genannten Fragen in deine Zielgruppe. Beachte, manche Personen, die auf deiner Website landen, wissen genau, was sie wollen - andere wissen es nicht.

Du musst dein Homepage Design für beide Gruppen ausrichten und gleichzeitig sichergehen, dass deine Entscheidung zu deinen Zielen passt.

Eine gute Startseite sollte diejenigen Personen willkommen heißen, die auf der Suche nach einem bestimmten Ergebnis sind, und gleichzeitig denjenigen die Richtung weisen, die es noch nicht sind.


Template Icon

Kostenloses Webinar: In 30 Minuten zum eigenen Onlineshop

Du willst selbst mal sehen, wie schnell du einen Shop aufsetzen kannst?

Der Shopify-Experte und leidenschaftliche Shop-Betreiber Adrian Piegsa zeigt dir, wie du dich anmeldest, eine Domain verknüpfst, Produkte auswählst und natürlich alle rechtlichen Vorgaben umsetzt.

Jetzt kostenlos teilnehmen

Diese Website Elemente dürfen auf keiner Homepage fehlen

Im Durchschnitt verbringen Menschen zehn bis zwanzig Sekunden auf deiner Homepage. Aus der Design-Perspektive bedeutet es, dass der Navigationsfluss klar und verständlich sein muss, sodass die Leute schnell den besten Pfad für sich ausfindig machen können.

Dieser Drang nach Schnelligkeit und “Flow” ist ein psychologisches Phänomen und nennt sich “Entscheidungsvermeidung”, welches die menschliche Tendenz beschreibt, eine Entscheidung abzuwenden, die zu lange dauert.

Wie du weitere psychologische Trigger für dein Business nutzt, steht in diesem wichtigen Artikel.

Auf einer Homepage z.B. deines Shops nennt sich Entscheidungsvermeidung “Absprung” und beschreibt den Prozess des Verlassens einer Seite. Um dies zu umgehen, sollte die erste Aufgabe deiner Startseite sein, potenzielle Kundschaft zum Bleiben zu bewegen. Um das zu tun, musst du die Rolle dieses wichtigsten Teils deiner Website ganz genau verstehen.

Diese Elemente einer Website helfen dabei, Leute auf deiner Homepage zu halten:

  1. Above-the-fold Content
  2. Verständliche Navigation
  3. Auffällige Bildsprache
  4. Direkter Call-to-Action
  5. Leicht zugänglicher Warenkorb
  6. Suchleiste
  7. Blogs, Videos, Testimonials und Produkte geringerer Priorität
  8. Weitere Seiten mit geringerer Priorität: Über uns, Kontakt und Co.
  9. Mobiles Design

Lesetipp: 20 Beispiele von Händlern, die ihre Onlineshops grandios umgesetzt haben.

1. Above-the-Fold (ATF) Content als Inspiration für Handlungen

Wenn Webdesigner:innen über den “above-the-fold” Bereich auf einer Homepage reden, dann meinen sie die Sektion, die für Menschen auf den ersten Blick sichtbar ist, ohne dass sie scrollen müssen.

Wenn du darüber nachdenkst, was sich “above-the-fold” befinden soll und welchen Effekt es auf den Rest deines Website Layouts hat, so konzentriere dich auf die ersten Handlungen, von denen du willst, dass sie Personen vollziehen, wenn sie auf deiner Homepage landen.

Das heißt: Welche Informationen brauchen sie zuerst? Und wie kannst du diese Entscheidungen vereinfachen?

Homepage Design

Im Beispiel siehst du den oberen Teil der Homepage von GØLD's. GØLD's verkauft Bartöl und Bartpflegesets. Da ihr einziges Ziel darin besteht, potenzielle Kundschaft zum Kauf ihres Hauptproduktes zu bewegen, schmückt ein knallbuntes und produktspezifisches Bild die above-the-fold-Sektion mit einem klaren Call-to-Action, der Personen weiterleitet, um einen Kauf zu tätigen.

Auf dieser Homepage gibt es zwei schnelle Entscheidungen, die man treffen kann:

  1. Weiter gehen, um zu kaufen.
  2. Nach unten scrollen, um mehr Informationen “below-the-fold” zu erhalten. Das heißt in diesem Fall: Bewertungen, Videos und Informationen über die Zutaten und Wirkung des Produktes.

Die meisten Homepage Designs nutzen im Website-Header eine Kombination aus den folgenden drei Website Elementen:

  • einem ausdrucksstarken Titel,
  • einem überzeugenden Untertitel und
  • einem packenden Bild im above-the-fold Bereich,

um neue Besucher:innen auf der Seite zu halten und sie mit der Marke vertraut zu machen.

Natürlich gibt es auch viele andere Wege, wie du das Interesse deiner Kundschaft von Anfang an auf der Homepage deines Shops wecken kannst. Zum Beispiel mit einem Promo-Banner über der Navigationsleiste, um ein besonderes Angebot oder kostenlosen Versand zu bewerben.

2. Verständliche Navigation

Die Navigationsstärke eines Website Layouts beruht auf der Simplizität. Das scheint widersprüchlich, wenn du unterschiedliche Besuchertypen im Onlineshop empfangen willst, doch ist es sinnvoll, wenn man bedenkt, wie schnell sich Menschen im Internet von einer Seite zur nächsten bewegen.

Die Navigation im Header sollte so überschaubar sein wie möglich und die Pfade priorisieren, die am relevantesten sind. Gemäß der Millerschen Zahl empfehlen Fachleute des Webdesigns nicht mehr als sieben Navigationslinks auf der Homepage zu verwenden.

Menschen bedienen sich einer organisatorischen Erinnerungstechnik, die "Chunking" heißt und in der Informationen auf kleine mentale Einheiten - die Chunks - runtergebrochen werden. Je weniger Chunks es gibt, desto einfacher ist es, die Erinnerung abzurufen. In einer einflussreichen Zeitschrift, die 1956 veröffentlicht wurde, erklärte der Psychologie Professor George A. Miller, dass unser Kurzzeitgedächtnis generell nur sieben Posten gleichzeitig präsent halten kann.

Homepage Design

Seiten mit zu vielen Navigationsoptionen können überfordernd wirken, was die Wahrscheinlichkeit erhöht, dass Besucher:innen abspringen oder dem falschen Pfad folgen. Als eine gute Praktik hat sich erwiesen, die Navigation von links nach rechts zu priorisieren, angefangen mit der wichtigsten Seite links.

Wenn du sehr viele Produkte und Kollektionen hast, konzentriere dich in deiner Navigation auf der Homepage auf deine hochkarätigen Hauptkollektionen und verwende ein Mega Menü oder ein Drop Down Menü, um eine Subnavigation einzubauen.

Eine Subnavigation ist eine gute Methode, deine Produkte zu organisieren sowie eine einfache Entdeckungstour durch deine Seiten anzubieten, ohne deine Kundschaft mit zu vielen Optionen zu überfordern.

Homepage Design

Die Homepage von VYREU vereint zum Beispiel eine minimale Navigation und ein umfassendes Inventar mit einem kleinen Dropdown Menü sowie einem schönen Mega Menü, das einzelne, ausgewählte Uhren präsentiert.

Einige Seiten beinhalten ebenfalls Links zu der Über-Uns-Seite, einer Kontaktseite, einer FAQ-Seite und anderen Seiten in der Header-Navigation, weil diese die wichtigsten Ziele unterstützen.

Findest du allerdings heraus, dass Leute auf diesen Seiten nicht mit Hinblick auf deine Ziele konvertieren, ist es wahrscheinlich, dass diese Links deine Kundschaft eher von dem richtigen Pfad zur Conversion abbringt. Wenn das der Fall ist, ist es ratsamer, diese Links stattdessen im Footer zu platzieren.

Homepage Design

3. Auffällige Bildsprache

Entscheidungsvermeidung gilt nicht nur für die Navigation, sondern auch für andere Elemente einer Website. Berücksichtige die Grenzen der Aufmerksamkeit deiner Besucher:innen, denn das wird dir helfen beim Homepage Design, den Schwerpunkt auf das zu legen, was am wichtigsten ist.

Ob du ein Produkt oder eine Kollektion promotest oder versuchst, neue Leads zu generieren, das Ziel deines Bildmaterials ist es stets, Aufmerksamkeit zu wecken, sobald jemand deine Seite ansurft.

Im Folgenden findest du einige Methoden, Bildmaterial in der above-the-fold Sektion deiner Homepage unterzubringen:

Bild mit einer Texteinblendung

Homepage Design

Dieser Stil des above-the-fold-Bildmaterials verbindet oft ein einziges, aussagekräftiges Bild, einen Slogan und einen Call-to-Action. Es funktioniert am besten für Händler:innen, die sich auf ein konkretes Angebot above-the-fold konzentrieren, wie zum Beispiel einen Ausverkauf in einem begrenzten Zeitraum, ein Vorzeigeprodukt oder eine saisonale Kollektion.

Slideshows

Homepage Design

Du könntest dich auch für eine Slideshow entscheiden und mit jedem einzelnen Slide für einen besonderen Sale, eine Produktgruppe oder ein qualitativ hochwertiges Produktfoto werben. Shopinhabende, die eine große Produktauswahl über wenige Kategorien verkaufen, wählen oft diese Option, wenn sie einige wenige Kollektionen oder Seiten haben, die sie auf der Homepage ihres Shops promoten wollen.

Sortiere die Slides nach ihrer Priorität angefangen mit der wichtigsten Botschaft. Es ist ratsam, sich auf drei Slides zu limitieren. Die Leute werden sich nicht allzu lang jeden einzelnen Slide ansehen, bevor sie dann den nächsten Schritt unternehmen.

Video

Homepage Design

Gewisse Marken profitieren vom Bildmaterial auf ihrer Homepage, welches ihre Geschichte erzählt. Einige Produkte, vor allem besonders innovative oder komplexe, erfordern zusätzliche Informationen über ihre Verwendung, um Menschen neugierig zu stimmen.

Schau dir zum Beispiel die Homepage von Searebel an. Viele Personen wissen wahrscheinlich noch nicht, dass sie das Produkt brauchen, also schafft das Website Layout Aufregung und eine bestimmte Atmosphäre, um das Produkt durch eine Videodemonstration zu zeigen - ein natürlicher erster Schritt im Conversion-Prozess.

Da die Bilder einen sofortigen und signifikanten Effekt haben, ist es wichtig deren hohe Qualität und den Vorzeigecharakter deiner Brand sicherzustellen. Wenn du nicht gerade dein eigenes Fotografieteam zur Verfügung hast, kannst du jemanden engagieren oder den Image Picker im Shopify Theme Editor nutzen, um aus unserer Kollektion aus lizenzfreien Fotos auszuwählen.

Homepage Design

4. Ein direkter Call-to-Action

Betrachte einen Call-to-Action wie ein Ausfahrtsschild auf der Autobahn: kurz, schwer zu verfehlen und sollte Fahrende dorthin dirigieren, wo sie hin müssen.

Deine Calls-to-Action (CTAs) und wohin sie verlinken, sollten mit den nächsten Schritten, die deine Kundschaft unternimmt, übereinstimmen, um das Ziel deiner Homepage zu erreichen. Das könnte bedeuten, dass du zu deiner aktuellsten Kollektion verlinken musst oder Personen dazu auffordern musst, sich ein Erklärungsvideo anzuschauen, um mehr zu erfahren.

Die Nutzer:innen müssen sofort verstehen, wohin sie klicken sollen, denn dein Call-to-Action-Button muss aus dem umgebenden Homepage Design hervorstechen. Je länger eine Person braucht, um den Call-to-Action zu finden, desto wahrscheinlicher werden er oder sie verwirrt und klicken weg.

Homepage Design

Die Homepage von Stilnest, die oben zu sehen ist, verdeutlicht ganz hervorragend, wie Menschen auf den idealen Conversionpfad gelangen. Brillantes Bildmaterial und ein einziger Hashtag fangen die Aufmerksamkeit ein, während der Call-to-Action ganz klar und deutlich platziert ist und durch das Schwarz aus dem hellen Hintergrund hervorsticht.

Nichts in der above-the-fold Sektion lenkt von dem eigentlichen Ziel der Homepage ab, und zwar die Leute in die Richtung zu weisen, durch die aktuellsten Produkte zu browsen. Wenn du herunterscrollst, siehst du noch mehr CTAs, die auffordern, weitere Produkte zu kaufen.

5. Ein leicht zugänglicher Warenkorb

Der Warenkorb ist für die meisten E-Commerce-Websites ein essenzieller Teil der Homepage. Zu einer intuitiven Gestaltung der Navigation für deine Kundschaft gehört ein leicht auffindbarer Warenkorb. Ein “sticky” Warenkorb (manchmal auch Slide-Out Warenkorb genannt und in einigen Shopify Themes erhältlich) ist die ganze Zeit, also während des gesamten Browsens, präsent und zugänglich auf dem Bildschirm und meistens in der rechten oberen Ecke platziert.

Noch besser ist es, wenn du die Anzahl der Produkte anzeigst, die aktuell im Warenkorb liegen. Eine deutliche und auffällige Benachrichtigung neben dem Warenkorb zeigt an, wie viele Produkte sich darin befinden und erinnert zusätzlich daran, dass der Kaufprozess noch nicht abgeschlossen ist. Das motiviert dazu, zur Kasse zu gehen und den Kauf zu vervollständigen.

Im Klartext: Mach es deiner Kundschaft so deutlich wie möglich, dass sich Objekte in ihrem Warenkorb befinden und zeig ihnen, wie sie an diese Produkte kommen.

Homepage Design

Die Homepage von Fritzvold präsentiert eine Benachrichtigung, welche die Anzahl der Objekte im Warenkorb hervorhebt, sowie einen Slide-out Link, der Nutzenden ermöglicht, ganz einfach weiter zu shoppen oder zur Kasse zu gehen.

6. Eine Suchleiste (für große Kollektionen oder viele Produkte)

Neben einer minimalistischen Navigation und einem sticky Warenkorb implementieren viele Onlineshops eine Suchleiste, um der Kundschaft, die genau weiß, was sie will, zu helfen, das zu finden, was sie sucht. Insbesondere, wenn du mehrere unterschiedliche Produkte hast oder viel Content veröffentlichst, ist eine solche Suchleiste empfehlenswert.

Homepage Design

Innonature zum Beispiel haben eine umfassende Kollektion unterschiedlicher Produkte. Um es den Leuten leichter zu machen, ihr Zielprodukt zu finden, hat Innonature eine smarte Suchleiste eingebaut, die Suchbegriffe automatisch vervollständigt und Produkte, Kollektionen und Seiten vorschlägt. Das kreiert einen direkten Pfad zu der Seite, nach der auf deiner Homepage gesucht wird.

Allgemein gilt: Nutzer:innen, die eine Suche tätigen, führen häufiger zu Conversions. Wenn deine Brand viele Produkte vertreibt, bietest du deiner Kundschaft eine einfache Suchleiste an als Alternative zu einer komplexen Navigation, die eher abschreckt.

Wenn du eine smarte Suchleiste in deinen Shopify Store implementieren willst, versuch es mit Smart Search & Instant Search oder Instant Search+.

was ist anderen Gründer:innen bei ihrer Webseite oder ihrem Shop wichtig? Im Shopify Podcast verraten sie unter anderem diese Geheimnisse!

    Abonniere am besten direkt den Shopify Podcast und verpasse keine Folge mehr!

    7. Jenseits der Kante: Andere Elemente einer Homepage, die du berücksichtigen solltest

    Alle Elemente, die du “below-the-fold” integrierst, das heißt nach dem Scrollen, sind nicht zwingend weniger wichtig. Oft verstärken sie und bauen Informationen aus, die du bereits vorgestellt hast. Sie bieten andere Pfade mit dem gleichen Conversionziel an und machen Seiten verfügbar, die die Kundschaft braucht.

    Im Folgenden findest du eine kurze Liste mit Website Elementen, die du als Teil deines Homepage Designs oder in den Footer integrieren kannst, abhängig davon, wie wichtig sie für deine Ziele sind.

    Blogs, Videos und weiterer Content

    Blog oder Video Content kann sehr gut für SEO (Was ist SEO?) sein, doch Content, der “above-the-fold” ist, hat die Eigenschaft, die Kundschaft abzulenken und die Aufmerksamkeit weg von den Produkten zu ziehen. Generell willst du mit deinem Content die Aufmerksamkeit auf die Produkte lenken und nicht andersherum.

    Ziehe in Betracht, Links in deinen Content below-the-fold oder sogar in den Footer zu platzieren, insbesondere wenn der Content nicht das Schlüsselelement deines Unternehmens ist. Erlaube Nutzer:innen, die deine Website untersuchen wollen, diesen Content zu finden.

    Möchtest du deinen Content promoten, fügen einen Link in deine Top-Navigation hinzu. Doch am besten ist es, den Link im Content in den sozialen Medien und über E-Mail- und Drittanbieter zu veröffentlichen, sodass externer Traffic zu deiner Seite entsteht.

    Homepage Design

    Cerascreen zum Beispiel verkauft medizinische Tests, mit denen man die eigene Gesundheit überprüfen kann. Ihr informatives Video auf der Homepage ist below-the-fold, was verhindert, dass Nutzer:innen von ihrem Hauptangebot abgelenkt sind. Alles andere - vom FAQ bis zum YouTube Kanal ist unten im Footer verfügbar, sollte jemand danach suchen.

    Social Proof: Bewertungen, Testimonials und Presse

    Der Social Proof, zu deutsch soziale Bewährtheit, dient einer Brand dazu, das vorhandene Vertrauen von deiner Kundschaft oder Fachleuten als Hebelwirkung zu nutzen, um das Vertrauen neuer Besucher:innen zu gewinnen. Das können zum Beispiel Pressemitteilungen sein, Bewertungen, Posts in sozialen Medien, Galerien auf Instagram oder Aussagen von Influencern oder Fachleuten.

    Wenn du einen überzeugenden Social Proof hast, den du einsetzen kannst, dann könnte deine Homepage der richtige Ort dafür sein.

    Die Homepage von Five unten präsentiert die Brands und Mitarbeiterstimmen von bekannten Unternehmen, die als Beleg für die Qualität des Produktes gelten. Dieser Beweis wird allerdings im unteren Teil der Seite vorgestellt, nachdem bereits festgestellt wurde, was das Produkt macht.

    Homepage Design

    Produkte geringer Priorität und Zusatzprodukte

    Ältere Produkte und Zusatzprodukte wie Uhrenarmbänder oder anderes Zubehör können im unteren Teil des Homepage Design aufgeführt werden. Denn du willst den Fokus auf deine Hauptprodukte setzen und auf neue Produktlinien verweisen.

    Produkte, die kostengünstiger sind und deine Hauptartikel unterstützen, funktionieren am besten als Impulskäufe, die als Upsell-Produkte im Checkout angeboten werden. Sie können dennoch auf der Startseite in der “below-the-fold” Sektion auftauchen und Besucher:innen auf sich aufmerksam machen, zum Beispiel wenn du Produkte verkaufst, die Ersatzteile benötigen.

    Lizza konzentrieren sich auf den Verkauf des Low-Carb-Pizzateigs, doch bewerben sie auch ihre Premium Zusatzprodukte wie die Low Carb Tomatensoße und das Goldleinmehl im unteren Teil ihrer Homepage.

    Homepage Design

    8. Seiten mit geringfügiger Priorität

    Seiten, die du als nicht so wichtig einstufst, können sich je nach Business-Modell unterscheiden.

    Generell machen sich Seiten wie die AGBs, Datenschutzbestimmungen und Rückversandrichtlinien am besten im Footer. Da es inzwischen eine inoffizielle Standardpraktik ist, Links zu solchen Seiten im Footer zu finden, suchen Leute intuitiv im Footer danach.

    Andere Seiten wie die “Über uns”-Seite, das Kontaktformular, die Filialstandorte oder die Bestellverfolgung können ebenfalls im Footer verbaut werden. Doch wenn diese Seiten ausschlaggebend dafür sind, ob Leute kaufen oder andere von dir angestrebte Ziele erfüllen, dann kannst du dich dafür entscheiden, die Links in deiner Hauptnavigation oder sogar in dein Homepage Design mit aufzunehmen.

    Zum Beispiel kann ein Shop, der einen Abo-Service vertreibt, seine Conversion signifikant steigern, indem er einen FAQ-Link in die Hauptnavigation platziert. One47 verkaufen sehr gut im stationären Handel, so lohnt es sich für sie ihren Besucher:innen schnell zu helfen, eine Filiale in ihrer Nähe zu identifizieren. Das Ganze funktioniert mit einem Store Locator Link.

    Homepage Design

    Möchtest du eine Seite mit geringfügiger Priorität identifizieren, so frag dich, wie du konkret davon profitierst, wenn du Leute zu einer bestimmten Seite schickst oder ob der Link sie eher von den eigentlichen Zielen ablenkt.

    9. Denk an das mobile Design

    Der mobile Traffic wächst bekanntermaßen rasant. Da ein guter Teil deines Traffics höchstwahrscheinlich von mobilen Geräten kommt, sollte jede Entscheidung, die sich um das Website Layout dreht, mobile Nutzer:innen mit einschließen.

    Für die mobile Ansicht ist eine einfache Bedienung der Homepage besonders wichtig, um durch eine bestimmte Folge von Aktionen zu leiten.

    Wenn du einen Shopify Store hast, passen sich alle Elemente deines Website-Themes aus dem Shopify Theme Store der Bildschirmgröße an. Doch bedenke, dass Bilder, die auf einem Desktop-Bildschirm gut wirken, auf einem mobilen Bildschirm womöglich abgeschnitten werden. Calls-to-Action können schwerer zu finden sein oder werden so verschoben, das Leute eher wegklicken als draufzuklicken.

    Im Vorschau-Modus des Shopify Theme Editors kannst du ganz einfach überprüfen, wie dein Shop auf unterschiedlichen Geräten wirkt.

    Kostenlos und exklusiv für dich: Der Shopify-Starter-Guide (40-seitiges Ebook)

    Die Schritt-für-Schritt-Anleitung zeigt dir, wie du deinen Onlineshop einrichtest!

    Design-Trends für deine Homepage 2021

    Du kennst nun die wichtigsten Elemente für deine Homepage, doch wie gestaltest du sie am besten? Ein Blick auf aktuelle Trends im Webdesign kann helfen. Online-Trends sind zwar sehr schnelllebig, jedoch halten sich ein paar davon wacker mehrere Jahre lang und werden eher fließend abgelöst. Besonders, wenn du etwas findest, das deine Marke gut widerspiegelt, ist es wichtiger daran festzuhalten, als dein Design bei jedem neuen Trend anzupassen. Schauen wir uns ein paar Dinge an, die sich aktuell auf modernen Websites wiederfinden.

    1. Parallax-Effekt

    Der Parallax-Effekt ist tatsächlich schon seit einigen Jahren in den meisten Website Layouts vertreten. Hier wird durch Elemente, welche sich unterschiedlich schnell bewegen Tiefe erzeugt. Häufig im Einsatz ist der Effekt, bei vollflächigen Designs, in denen sich Bilder zwischen einfarbigen Abschnitten befinden. Die Modemarke Magdeburg – Los Angeles zeigt, wie ein Parallax den Website-Besuch spannend macht. Weiße Flächen und vollflächiges Bild liegen augenscheinlich auf unterschiedlichen Ebenen. So rückt das stillstehende Bild in den Hintergrund während sich andere Elemente der Website darüber weiterbewegen.

    Homepage Design

    2. Abstrakte Formen und lebendige Farben

    Der zweite Trend unserer Liste ist besonders geeignet, wenn du mit deinem Website Layout Lebendigkeit vermitteln willst. Abstrakte Formen treffen auf strahlende Farben und heben bei deiner Kundschaft direkt die Laune. yfood setzen auf ihrer Homepage gezielt die in Kontrast stehenden Farben Lila und Türkis ein und kombinieren sie mit außergewöhnlichen Formen. Das weckt Aufmerksamkeit und lässt Besucher:innen innehalten.

    Homepage Design

    3. Organische Formen

    Wer den ganzen Tag von digitalen Anzeigen umgeben ist, sehnt sich nach Natürlichkeit. Jedes Webdesign folgt einer bestimmten Ordnung. Inhalte werden in Abschnitten angeordnet und mal mehr mal weniger sichtbar in einem Boxlayout dargestellt. Die Nutzung von organischen Formen schwächt diese geradlinigen Vorgaben ab und schaffen, ähnlich wie abstrakte Formen, Lebendigkeit. Auf der Website von Vanilla & Pepper werden organische Formen mit sanften Farben und zarten Illustrationen eingesetzt.

     

    Homepage Design

    4. Scrollen als Erlebnis

    Spätestens seit den Produktseiten von Apple, wird die Scroll-Bewegung nicht mehr nur als einfaches Hoch- und Runter-Navigieren auf einer Website gesehen. Die Bewegung, die ohnehin jede Nutzer:in ausführt, kann hervorragend genutzt werden, um auf neue Weise in eine Homepage einzutauchen. So muss keine zusätzliche Aktion, wie ein Hover, ausgeführt werden, um diesen Effekt zu erzeugen. Betrachtende stoßen ganz automatisch darauf, wenn sie sich über die Seite bewegen. Swedish Fall nutzen diesen Eye Catcher, um einen simplen Textabschnitt aufzuwerten. Ein rundgeformter Text dreht sich mit der Scroll-Bewegung im und entgegen dem Uhrzeigersinn.

    Homepage Design

    Lesetipp: Swedish Fall starteten wie diese anderen 16 Startups nach der Gründershow "Die Höhle der Löwen" durch.

    5. Schlichte Farben

    Die Nutzung von gedeckten Farben lädt zum Wohlfühlen und Bleiben ein. Während starke Kontraste auf Dauer anstrengend werden, entschleunigen weiche Farbpaletten den Website-Besuch. Auch ooia setzen auf augenschonende beige Farbtöne für ihre Homepage. Für die Schrift wird kein reines Schwarz genommen sondern eine hellerer Nuance, die sich besser in das Farbschema einfügt. Als Eye-Catcher fungieren hier gelbe Buttons, die jedoch nur selten zum Einsatz kommen.

    Homepage Design

    6. Physische Produkte

    Unser sechster Trend dreht sich ganz um die Vorstellung von Produkten. Auf deiner Homepage willst du den Blick auf deine Verkaufsobjekte lenken, warum nutzt du sie also nicht direkt selbst als Design-Element? Lasse Produkte direkt in dein Layout einfließen, indem du freigestellte Bilder nutzt und sie so unmittelbar auf deinen Hintergründen erscheinen lässt. Auch die Nachbildung haptischer Effekte, wie die Spritzer eines umgekippten Nagellacks und verstreutes Müsli, verschafft Aufmerksamkeit. Waterdrop präsentieren ausgewählte Produkte so, als ob sie direkt vor dir liegen und du sie im nächsten Moment greifen kannst.

    Homepage Design

    Lesetipp: Hole dir noch mehr Inspiration bei diesen großartigen Designs mit Shopify.

    Verbessere dein Homepage Design im Laufe der Zeit

    Zu diesem Zeitpunkt hast du sicherlich festgestellt, dass es nicht den einen richtigen Weg gibt, eine Homepage zu designen. Faktoren wie die Demographie der Nutzer:innen, das Branding, die Anzahl der Produkte, Marketing Kanäle und Sonstiges können das Verhalten vielfältig beeinflussen.

    Daher ist es auch so essentiell deine Startseite als einen Prozess zu betrachten, den du anhand des Traffics und der Verkäufe misst und entsprechende Anpassungen im Laufe der Zeit machst.

    Aufmacherfoto von José Alejandro Cuffia.

    Häufig gestellte Fragen zu Homepage Design

    Was macht eine gute Homepage aus?

    Eine Homepage dient vor allem dem Zweck Leute zu einem bestimmten Ziel zu lenken oder sie eine bestimmte Aktion ausführen zu lassen. Was genau das bei deiner Homepage ist, musst du dir zu aller erst überlegen. Danach gestaltest du deine Website allein, um Leute, die noch nicht wissen, was sie bei dir suchen, und auch Leute, die es bereits wissen, genau zu deinem Ziel zu lenken.

    Wie erstelle ich ein Homepage Design?

    Es gibt nicht den einen richtigen Weg, um eine Homepage zu designen. Egal, wie du es machst, behalte immer im Hinterkopf, was dein Ziel ist, was deine Kundschaft will und ob diese Dinge unkompliziert erreichbar sind. Suche dir Inspiration bei deiner Konkurrenz und evaluiere, ob die Umsetzung gut oder schlecht war und warum. Daran kannst du dein Design ausrichten.

    Was muss unbedingt auf eine Homepage?

    Die Homepage ist das Aushängeschild deiner Website. Die folgenden Elemente dürfen deshalb nicht fehlen: 1. der wichtigste Inhalt above-the-fold, 2. verständliche Navigation, 3. auffällige Bildsprache, 4. direkte Call-to-Actions, 5. leicht zugänglicher Warenkorb, 6. Suchleiste und zur Ausschmückung 7. Blogs, Videos, Testimonial und Produkte geringerer Priorität.

    Was sind aktuelle Trends im Homepage Design?

    Online-Trends helfen dir dabei eine moderne Richtung für deine Homepage einzuschlagen. Achte aber darauf, deiner Mark treu zu bleiben und nicht jeder Neuerung nachzueifern. Suche dir Inspiration unter den folgenden Trends: 1. Parallax-Effekt, 2. Abstrakte Formen und lebendige Farben, 3. Organische Formen, 4. Scrollen als Erlebnis, 5. Schlichte Farben, 6. Integration physischer Produkte.

    Which method is right for you?Geposted von Hendrik Breuer: Hendrik ist Redakteur des deutschen Shopify-Blogs. Möchtest Du einen Gastbeitrag veröffentlichen? Dann lies bitte zuerst diesen Leitfaden.

    Dieser Artikel von Evan Ferguson erschien ursprünglich auf Englisch im Shopify.com-Blog und wurde lokalisiert und komplett überarbeitet von Inara Muradowa.