Gestaltungsgrundlagen für Webdesigner

Seitentypen unterscheiden

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Die Basis-Seitentypen, die Christoph Luchs in diesem Video vorstellt, sind Counter, OnePager, Homepage, Landingpage und Portal.
07:35

Transkript

Wenn Sie sich mit Websites beschäftigen, so werden Sie schnell auf einige Begriffe stoßen, die Ihnen nicht sofort klar sind. Was ist eigentlich der Unterschied zwischen einem Counter, einem Onepager, einer Homepage, einer Landingpage oder einem ganzen Portal? Dafür habe ich Ihnen einige Beispiele hier vorbereitet. Beginnen wir mal mit dem Counter. Sie haben eine Veranstaltung oder eine Website soll veröffentlicht werden. Es ist jedenfalls klar, hier läuft die Zeit ab, sodass hinterher zu einem Stichtag etwas veröffentlicht werden soll. Bis dahin kann man eine Counter-Seite einrichten. Diese Counter-Seite sieht ungefähr so aus, das heißt, eine Ankündigung mit einer schönen Grafik und hier läuft automatisch die Zeit runter, und zwar auch in Sekunden. Das heißt, man gibt im Hintergrund irgendwo einen Stichtag an und automatisch beim Seitenaufruf wird hier die entsprechende, passende Zeit eingebaut. Natürlich gibt es vielleicht noch eine Möglichkeit, eine Kontaktaufnahme vorzunehmen, und das war es auch schon. Vielleicht gibt es noch ein Impressum, was hier aus rein rechtlichen Gründen noch ergänzt werden muss. Und das ist es, das ist eine sogenannte Counter-Seite. Etwas komfortabler wird es dann schon mit dem Onepager. Wie der Name schon sagt, geht es also darum, innerhalb einer Seite alle wichtigen Informationen bereitzustellen. Hier haben wir eine kleine Demo-Seite, wo dieses dargestellt wird, also eine schöne große Infografik, in dem wir begrüßt werden direkt mit Kontakt-Buttons, und wir haben hier natürlich einen Pfeil, der sich nach unten bewegt, das heißt, da soll ich offensichtlich klicken und dann kommen wir weiter in den unteren Bereich. Wir sehen, hier kann ich also mit der Maus dadrüber gehen, alles ist sehr großzügig dargestellt und die Seite fordert mich also auf, letztendlich immer weiter nach unten zu scrollen, um die nächsten Informationen aufzurufen. Diese Informationen sind so programmiert, dass Sie erst dann aktiviert werden, wenn ich in den sichtbaren Bereich der Seite komme. Die Seite ist also ein sehr langes Format, wo ich stückweise jetzt hier nach unten scrollen kann. Teilweise auch mit so schönen Parallax-Effekten, dass ich im Hintergrund hier Bilder hab, im Vordergrund verschiebt sich der Text, das nennt sich Parallax, und wir haben hier noch weitere Infoboxen mit einigen Punkten und vielleicht eine Kontaktaufnahme und noch weitere Möglichkeiten und natürlich auch wieder die Impressumsangabe. Und mit diesem Button kann ich wieder ganz nach oben scrollen. Das heißt, wir haben hier eigentlich gar kein Hauptmenü in dem Sinne, sondern wir haben eine komplette Seite, auf der alles zu finden ist und die Informationen untereinander angeordnet werden. Das ist also der Onepager. Kommen wir zu einem ähnlichen Onepager, hier am Beispiel eines Restaurants. Der Onepager ist so aufgebaut, dass wir hier oben eigentlich ein Hauptmenü haben: Welcome, About, Menu, Contact, und wenn ich dadrauf klicke, dann springe ich auf diesem Onepager weiter nach unten. Das nennt man auch eine Ankernavigation, weil wir hier über HTML-Anker die Position anfahren. Das heißt, es gibt gar keine Unterseite, sondern ich scrolle einfach nur feste Punkte auf meinem Onepager ab. So einfach kann das also auch gestaltet sein. Kommen wir zu Standard-Homepage. Eine Homepage ist so aufgebaut, dass sie vielleicht für ein Unternehmen oder für ein Angebot insgesamt steht, vielleicht auch für ein Shop. Eine komplette Homepage zeichnet sich dadurch aus, dass wir echte Unterseiten haben. Wir befinden uns hier auf der Startseite mit einem großen Slider, der hier angekündigt wird, wo die einzelnen Bilder durchgeblendet werden, und wenn ich weiter nach unten scrolle, komme ich natürlich in weitere Informationsgruppen, auch hier alles sehr großzügig gestaltet. Aber diese Seite hier hat Unterseiten und die werden mir auch noch in diesen Ausklappmenüs dargestellt. Einfache Drop-down-Menüs oder diese Mega-Menüs, wie sie hier heißen, können mir den Weg zu einer Unterseite zeigen. Weitere Unterseiten gibt es hier ebenfalls, zum Beispiel auch einen internen Blog und natürlich auch eine vollständige Suche über die komplette Website; also eine Möglichkeit, eine Seite aufzubauen als Homepage. Merken Sie sich dabei, eine komplette Homepage ist also letztendlich eine Website mit Start- und Unterseiten. Was macht dann den Unterschied zu einer Landingpage aus? Eine Landingpage sieht vielleicht so aus, hier am Beispiel eines Heizungsbauers. Zum Beispiel soll ich mich hier beraten lassen und einfach eine Berechnung starten. Ich hab hier ein Energiegebäude-Spar-Check und den starte ich jetzt einfach mal von hier aus. Und wir werden hier das Ganze starten und dann habe ich meine weiteren Punkte, die ich erreichen kann. Das heißt, hier geht es um Marketingaktivitäten, Informationen aufzunehmen und eine möglichst schnelle Kontaktaufnahme mit dem Kunden zu erreichen. Das ist eine sogenannte Landingpage. Also wähle ich als Kunde hinterher aus, was ich machen möchte, scrolle weiter nach unten, gebe meine Werte ein und ganz zum Schluss kann ich sagen, wie hoch ist eigentlich mein Energiesparpotenzial. Und natürlich gibt es ganz zum Schluss auch einen Button, dass ich hier diesen Check starten kann und natürlich auch Kontakt aufnehmen kann mit dem Hersteller. Also es geht um ein Thema, einen Sachverhalt, mit einer schnellen Kontaktaufnahme zum Kunden; dafür steht die Landingpage. Kommen wir noch zum Portal. In dem Fall bleiben wir mal bei dem Heizungsbau. Ein anderer Heizungsbauer hier hat eine eigene Website mit einem sehr üppigen Navigationsinstrument, mit einer Hauptnavigation mit Unterseiten. Es ist ganz klar, dass wir hier sehr viele Unterseiten dadrunter finden, aber der Unterschied zu einer klassischen Homepage besteht dadrin, dass wir ein komplettes Portal wechseln können. Es geht also darum, dass sich hier der Hersteller an verschiedene Zielgruppen wendet oder verschiedene Geschäftsbereiche ansprechen möchte: Mein Zuhause, das ist natürlich der Hausbauer, an den er sich richtet; Fachkunden, die direkt im Handwerk dadrauf zugreifen wollen oder natürlich auch nach Branchen sortiert. Also, es gibt dort weitere Seiten, die erreichbar sind. Wenn ich hier auf Mein Zuhause klicke, dann bekomme ich wirklich tatsächlich eine komplett andere Seite, als wenn ich hier im Portal die Fachkunden wähle. Darunter befindet sich dann tatsächlich auch ein komplett eigenes Menü und eine komplett eigene Darstellung, die sich natürlich innerhalb des Corporate Designs ähnelt. Wir sprechen hier also von einem Portal. Alle diese Seitentypen, vom Counter über Onepager, die Homepage, Landingpage oder Portal können natürlich auch mehrsprachig gestaltet sein und responsiv, also für mobile Geräte passend.

Gestaltungsgrundlagen für Webdesigner

Lassen Sie sich die Grundlagen guten Webdesigns anhand eines Praxisbeispiels näherbringen.

2 Std. 30 min (20 Videos)
Derzeit sind keine Feedbacks vorhanden...
Exklusiv für Abo-Kunden
Erscheinungsdatum:27.07.2017

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!