Layout-Planer

Hier finden Sie einige Layout-Ideen, also mögliche Grundstrukturen für Ihre zukünftige Homepage. Selbstverständlich sind Kombinationen oder individuelle Anpassungen nach Ihren Wünschen möglich.

Wie am sinnvollsten vorgehen?

  1. Beachten Sie bei einer ersten Vorselektion zunächst, ob sich das Layout für das Format Ihres Logos bzw. Firmennamen eignet.
  2. Fragen Sie sich, was Sie durch das Hauptbild visuell präsentieren möchten und entscheiden Sie über seine Dimensionen. Je mehr sich das, was Sie anbieten durch ein Foto emotional unterstützen lässt, desto eher empfehle ich ein eher großes Hauptbild. Neben einem einzigen Hauptbild können auch mehrere im Wechsel angezeigt werden. Zu beachten ist aber die größere Datenmenge, die geladen werden muss.
  3. Überlegen Sie, wie viele Inhalte, auch in Form von Zusatz-Informationen gezeigt werden sollen. Brauchen Sie einen größeren Bereich für einen Slogan bzw. Claim? Macht eine Box mit aktuellen Nachrichten oder Events Sinn oder erwarten Sie dort nur wenig wechselnde Infos? Wo und in welchem Umfang sollen Kontaktinfos ins Layout integriert werden? usw.

Mit einem Klick auf eine der Vorschau-Grafiken öffnet sich die Detailansicht, innerhalb der Sie mit Hilfe der Pfeiltasten (⇦ / ⇨) durch alle Layouts navigieren können.

  • Screenshot Homepage

    Layout 1

    Layout 1

    Layout-Beispiel

    Der Fußbereich kann z.B. mit Kontaktdaten, Navigationslinks oder Links zu sozialen Medien gefüllt werden.

    Layout 1

    Legende:

    • Hauptmenü
    • Nebenmenü, Untermenü oder Links
    • Nebeninhalte, z.B. Untermenüs / Links, Aktuelles, Events
    • Hintergrund
    • Hauptbild / Produktfoto
    • Textzeilen (z.B. Telefon, E-Mail-Adresse, Anschrift, Slogan, Claim, Copyright-Infos, Hinweise etc.)

    Allgemeine Infos

    Die Unterseiten sind immer durch ein Dropdown-Menü sofort und bequem aufrufbar. Auf kleinen Ausgabegeräten, z.B. Smartphones, wird die komplette Navigation ganz oder teilweise über ein ausklappbares Menü zugänglich gemacht.

  • Screenshot Homepage

    Layout 2

    Layout 2

    Layout-Beispiel

    Der Fußbereich kann z.B. mit Kontaktdaten, Navigationslinks oder Links zu sozialen Medien gefüllt werden.

    Layout 2

    Legende:

    • Hauptmenü
    • Nebenmenü, Untermenü oder Links
    • Nebeninhalte, z.B. Untermenüs / Links, Aktuelles, Events
    • Hintergrund
    • Hauptbild / Produktfoto
    • Textzeilen (z.B. Telefon, E-Mail-Adresse, Anschrift, Slogan, Claim, Copyright-Infos, Hinweise etc.)

    Allgemeine Infos

    Die Unterseiten sind immer durch ein Dropdown-Menü sofort und bequem aufrufbar. Auf kleinen Ausgabegeräten, z.B. Smartphones, wird die komplette Navigation ganz oder teilweise über ein ausklappbares Menü zugänglich gemacht.

  • Screenshot Homepage

    Layout 3

    Layout 3

    Layout-Beispiel

    Der Fußbereich kann z.B. mit Kontaktdaten, Navigationslinks oder Links zu sozialen Medien gefüllt werden.

    Layout 3

    Legende:

    • Hauptmenü
    • Nebenmenü, Untermenü oder Links
    • Nebeninhalte, z.B. Untermenüs / Links, Aktuelles, Events
    • Hintergrund
    • Hauptbild / Produktfoto
    • Textzeilen (z.B. Telefon, E-Mail-Adresse, Anschrift, Slogan, Claim, Copyright-Infos, Hinweise etc.)

    Allgemeine Infos

    Die Unterseiten sind immer durch ein Dropdown-Menü sofort und bequem aufrufbar. Auf kleinen Ausgabegeräten, z.B. Smartphones, wird die komplette Navigation ganz oder teilweise über ein ausklappbares Menü zugänglich gemacht.

  • Screenshot Homepage

    Layout 4

    Layout 4

    Layout-Beispiel

    Der Fußbereich kann z.B. mit Kontaktdaten, Navigationslinks oder Links zu sozialen Medien gefüllt werden.

    Layout 4

    Legende:

    • Hauptmenü
    • Nebenmenü, Untermenü oder Links
    • Nebeninhalte, z.B. Untermenüs / Links, Aktuelles, Events
    • Hauptbild / Produktfoto
    • Textzeilen (z.B. Telefon, E-Mail-Adresse, Anschrift, Slogan, Claim, Copyright-Infos, Hinweise etc.)

    Allgemeine Infos

    Die Unterseiten sind immer durch ein Dropdown-Menü sofort und bequem aufrufbar. Auf kleinen Ausgabegeräten, z.B. Smartphones, wird die komplette Navigation ganz oder teilweise über ein ausklappbares Menü zugänglich gemacht.

  • Screenshot Homepage

    Layout 5

    Layout 5

    Layout-Beispiel

    Der Fußbereich kann z.B. mit Kontaktdaten, Navigationslinks oder Links zu sozialen Medien gefüllt werden.

    Layout 5

    Legende:

    • Hauptmenü
    • Nebenmenü, Untermenü oder Links
    • Nebeninhalte, z.B. Untermenüs / Links, Aktuelles, Events
    • Hintergrund
    • Hauptbild / Produktfoto
    • Textzeilen (z.B. Telefon, E-Mail-Adresse, Anschrift, Slogan, Claim, Copyright-Infos, Hinweise etc.)

    Allgemeine Infos

    Die Unterseiten sind immer durch ein Dropdown-Menü sofort und bequem aufrufbar. Auf kleinen Ausgabegeräten, z.B. Smartphones, wird die komplette Navigation ganz oder teilweise über ein ausklappbares Menü zugänglich gemacht.

  • Screenshot Homepage

    Layout 6

    Layout 6

    Layout-Beispiel

    Der Fußbereich kann z.B. mit Kontaktdaten, Navigationslinks oder Links zu sozialen Medien gefüllt werden.

    Layout 6

    Legende:

    • Hauptmenü
    • Nebenmenü, Untermenü oder Links
    • Nebeninhalte, z.B. Untermenüs / Links, Aktuelles, Events
    • Hintergrund
    • Hauptbild / Produktfoto
    • Textzeilen (z.B. Telefon, E-Mail-Adresse, Anschrift, Slogan, Claim, Copyright-Infos, Hinweise etc.)

    Allgemeine Infos

    Die Unterseiten sind immer durch ein Dropdown-Menü sofort und bequem aufrufbar. Auf kleinen Ausgabegeräten, z.B. Smartphones, wird die komplette Navigation ganz oder teilweise über ein ausklappbares Menü zugänglich gemacht.

  • Screenshot Homepage

    Layout 7

    Layout 7

    Layout-Beispiel

    Der Fußbereich kann z.B. mit Kontaktdaten, Navigationslinks oder Links zu sozialen Medien gefüllt werden.

    Layout 7

    Legende:

    • Hauptmenü
    • Nebenmenü, Untermenü oder Links
    • Nebeninhalte, z.B. Untermenüs / Links, Aktuelles, Events
    • Hintergrund
    • Hauptbild / Produktfoto
    • Textzeilen (z.B. Telefon, E-Mail-Adresse, Anschrift, Slogan, Claim, Copyright-Infos, Hinweise etc.)

    Allgemeine Infos

    Die Unterseiten sind immer durch ein Dropdown-Menü sofort und bequem aufrufbar. Auf kleinen Ausgabegeräten, z.B. Smartphones, wird die komplette Navigation ganz oder teilweise über ein ausklappbares Menü zugänglich gemacht.

  • Screenshot Homepage

    Layout 8

    Layout 8

    Layout-Beispiel

    Der Fußbereich kann z.B. mit Kontaktdaten, Navigationslinks oder Links zu sozialen Medien gefüllt werden.

    Layout 8

    Legende:

    • Hauptmenü
    • Nebenmenü, Untermenü oder Links
    • Nebeninhalte, z.B. Untermenüs / Links, Aktuelles, Events
    • Hintergrund
    • Hauptbild / Produktfoto
    • Textzeilen (z.B. Telefon, E-Mail-Adresse, Anschrift, Slogan, Claim, Copyright-Infos, Hinweise etc.)

    Allgemeine Infos

    Die Unterseiten sind immer durch ein Dropdown-Menü sofort und bequem aufrufbar. Auf kleinen Ausgabegeräten, z.B. Smartphones, wird die komplette Navigation ganz oder teilweise über ein ausklappbares Menü zugänglich gemacht.

  • Screenshot Homepage

    Layout 9

    Layout 9

    Layout-Beispiel

    Der Fußbereich kann z.B. mit Kontaktdaten, Navigationslinks oder Links zu sozialen Medien gefüllt werden.

    Layout 9

    Legende:

    • Hauptmenü
    • Nebenmenü, Untermenü oder Links
    • Nebeninhalte, z.B. Untermenüs / Links, Aktuelles, Events
    • Hintergrund
    • Hauptbild / Produktfoto
    • Textzeilen (z.B. Telefon, E-Mail-Adresse, Anschrift, Slogan, Claim, Copyright-Infos, Hinweise etc.)

    Allgemeine Infos

    Die Unterseiten sind immer durch ein Dropdown-Menü sofort und bequem aufrufbar. Auf kleinen Ausgabegeräten, z.B. Smartphones, wird die komplette Navigation ganz oder teilweise über ein ausklappbares Menü zugänglich gemacht.

  • Screenshot Homepage

    Layout 10

    Layout 10

    Layout-Beispiel

    Der Fußbereich kann z.B. mit Kontaktdaten, Navigationslinks oder Links zu sozialen Medien gefüllt werden.

    Layout 10

    Legende:

    • Hauptmenü
    • Nebenmenü, Untermenü oder Links
    • Nebeninhalte, z.B. Untermenüs / Links, Aktuelles, Events
    • Hintergrund
    • Hauptbild / Produktfoto
    • Textzeilen (z.B. Telefon, E-Mail-Adresse, Anschrift, Slogan, Claim, Copyright-Infos, Hinweise etc.)

    Allgemeine Infos

    Die Unterseiten sind immer durch ein Dropdown-Menü sofort und bequem aufrufbar. Auf kleinen Ausgabegeräten, z.B. Smartphones, wird die komplette Navigation ganz oder teilweise über ein ausklappbares Menü zugänglich gemacht.

  • Screenshot Homepage

    Layout 11

    Layout 11

    Layout-Beispiel

    Der Fußbereich kann z.B. mit Kontaktdaten, Navigationslinks oder Links zu sozialen Medien gefüllt werden.

    Layout 11

    Legende:

    • Hauptmenü
    • Nebenmenü, Untermenü oder Links
    • Nebeninhalte, z.B. Untermenüs / Links, Aktuelles, Events
    • Hintergrund
    • Hauptbild / Produktfoto
    • Textzeilen (z.B. Telefon, E-Mail-Adresse, Anschrift, Slogan, Claim, Copyright-Infos, Hinweise etc.)

    Allgemeine Infos

    Die Unterseiten sind immer durch ein Dropdown-Menü sofort und bequem aufrufbar. Auf kleinen Ausgabegeräten, z.B. Smartphones, wird die komplette Navigation ganz oder teilweise über ein ausklappbares Menü zugänglich gemacht.

  • Screenshot Homepage

    Layout 12

    Layout 12

    Layout-Beispiel

    Der Fußbereich kann z.B. mit Kontaktdaten, Navigationslinks oder Links zu sozialen Medien gefüllt werden.

    Layout 12

    Legende:

    • Hauptmenü
    • Nebenmenü, Untermenü oder Links
    • Nebeninhalte, z.B. Untermenüs / Links, Aktuelles, Events
    • Hintergrund
    • Hauptbild / Produktfoto
    • Textzeilen (z.B. Telefon, E-Mail-Adresse, Anschrift, Slogan, Claim, Copyright-Infos, Hinweise etc.)

    Allgemeine Infos

    Die Unterseiten sind immer durch ein Dropdown-Menü sofort und bequem aufrufbar. Auf kleinen Ausgabegeräten, z.B. Smartphones, wird die komplette Navigation ganz oder teilweise über ein ausklappbares Menü zugänglich gemacht.

  • Screenshot Homepage

    Layout 13

    Layout 13

    Layout-Beispiel

    Der Fußbereich kann z.B. mit Kontaktdaten, Navigationslinks oder Links zu sozialen Medien gefüllt werden.

    Layout 13

    Legende:

    • Hauptmenü
    • Nebenmenü, Untermenü oder Links
    • Nebeninhalte, z.B. Untermenüs / Links, Aktuelles, Events
    • Hauptbild / Produktfoto
    • Textzeilen (z.B. Telefon, E-Mail-Adresse, Anschrift, Slogan, Claim, Copyright-Infos, Hinweise etc.)

    Allgemeine Infos

    Die Unterseiten sind immer durch ein Dropdown-Menü sofort und bequem aufrufbar. Auf kleinen Ausgabegeräten, z.B. Smartphones, wird die komplette Navigation ganz oder teilweise über ein ausklappbares Menü zugänglich gemacht.

  • Screenshot Homepage

    Layout 14

    Layout 14

    Layout-Beispiel

    Der Fußbereich kann z.B. mit Kontaktdaten, Navigationslinks oder Links zu sozialen Medien gefüllt werden.

    Layout 14

    Legende:

    • Hauptmenü
    • Nebenmenü, Untermenü oder Links
    • Nebeninhalte, z.B. Untermenüs / Links, Aktuelles, Events
    • Hauptbild / Produktfoto
    • Hintergrundbild mit Transparenz-Verlauf
    • Textzeilen (z.B. Telefon, E-Mail-Adresse, Anschrift, Slogan, Claim, Copyright-Infos, Hinweise etc.)

    Allgemeine Infos

    Die Unterseiten sind immer durch ein Dropdown-Menü sofort und bequem aufrufbar. Auf kleinen Ausgabegeräten, z.B. Smartphones, wird die komplette Navigation ganz oder teilweise über ein ausklappbares Menü zugänglich gemacht.

  • Screenshot Homepage

    Layout 15

    Layout 15

    Layout-Beispiel

    Der Fußbereich kann z.B. mit Kontaktdaten, Navigationslinks oder Links zu sozialen Medien gefüllt werden.

    Layout 15

    Legende:

    • Hauptmenü
    • Nebenmenü, Untermenü oder Links
    • Nebeninhalte, z.B. Untermenüs / Links, Aktuelles, Events
    • Hintergrund
    • Hauptbild / Produktfoto
    • Hintergrundbild mit Transparenz-Verlauf
    • Textzeilen (z.B. Telefon, E-Mail-Adresse, Anschrift, Slogan, Claim, Copyright-Infos, Hinweise etc.)

    Allgemeine Infos

    Die Unterseiten sind immer durch ein Dropdown-Menü sofort und bequem aufrufbar. Auf kleinen Ausgabegeräten, z.B. Smartphones, wird die komplette Navigation ganz oder teilweise über ein ausklappbares Menü zugänglich gemacht.

  • Screenshot Homepage

    Layout 16

    Layout 16

    Layout-Beispiel

    Der Fußbereich kann z.B. mit Kontaktdaten, Navigationslinks oder Links zu sozialen Medien gefüllt werden.

    Layout 16

    Legende:

    • Hauptmenü
    • Nebenmenü, Untermenü oder Links
    • Nebeninhalte, z.B. Untermenüs / Links, Aktuelles, Events
    • Hintergrund
    • Hauptbild / Produktfoto
    • Textzeilen (z.B. Telefon, E-Mail-Adresse, Anschrift, Slogan, Claim, Copyright-Infos, Hinweise etc.)

    Allgemeine Infos

    Die Unterseiten sind immer durch ein Dropdown-Menü sofort und bequem aufrufbar. Auf kleinen Ausgabegeräten, z.B. Smartphones, wird die komplette Navigation ganz oder teilweise über ein ausklappbares Menü zugänglich gemacht.

  • Screenshot Homepage

    Layout 17

    Layout 17

    Layout-Beispiel

    Der Fußbereich kann z.B. mit Kontaktdaten, Navigationslinks oder Links zu sozialen Medien gefüllt werden.

    Layout 17

    Legende:

    • Hauptmenü
    • Nebenmenü, Untermenü oder Links
    • Nebeninhalte, z.B. Untermenüs / Links, Aktuelles, Events
    • Hauptbild / Produktfoto
    • Hintergrundbild mit Transparenz-Verlauf
    • Textzeilen (z.B. Telefon, E-Mail-Adresse, Anschrift, Slogan, Claim, Copyright-Infos, Hinweise etc.)

    Allgemeine Infos

    Die Unterseiten sind immer durch ein Dropdown-Menü sofort und bequem aufrufbar. Auf kleinen Ausgabegeräten, z.B. Smartphones, wird die komplette Navigation ganz oder teilweise über ein ausklappbares Menü zugänglich gemacht.

  • Screenshot Homepage

    Layout 18

    Layout 18

    Layout-Beispiel

    Der Fußbereich kann z.B. mit Kontaktdaten, Navigationslinks oder Links zu sozialen Medien gefüllt werden.

    Layout 18

    Legende:

    • Hauptmenü
    • Nebenmenü, Untermenü oder Links
    • Nebeninhalte, z.B. Untermenüs / Links, Aktuelles, Events
    • Hintergrund
    • Hauptbild / Produktfoto
    • Textzeilen (z.B. Telefon, E-Mail-Adresse, Anschrift, Slogan, Claim, Copyright-Infos, Hinweise etc.)

    Allgemeine Infos

    Die Unterseiten sind immer durch ein Dropdown-Menü sofort und bequem aufrufbar. Auf kleinen Ausgabegeräten, z.B. Smartphones, wird die komplette Navigation ganz oder teilweise über ein ausklappbares Menü zugänglich gemacht.

  • Screenshot Homepage

    Layout 19

    Layout 19

    Layout-Beispiel

    Der Fußbereich kann z.B. mit Kontaktdaten, Navigationslinks oder Links zu sozialen Medien gefüllt werden.

    Layout 19

    Legende:

    • Hauptmenü
    • Nebenmenü, Untermenü oder Links
    • Nebeninhalte, z.B. Untermenüs / Links, Aktuelles, Events
    • Hintergrund
    • Hauptbild / Produktfoto
    • Textzeilen (z.B. Telefon, E-Mail-Adresse, Anschrift, Slogan, Claim, Copyright-Infos, Hinweise etc.)

    Allgemeine Infos

    Die Unterseiten sind immer durch ein Dropdown-Menü sofort und bequem aufrufbar. Auf kleinen Ausgabegeräten, z.B. Smartphones, wird die komplette Navigation ganz oder teilweise über ein ausklappbares Menü zugänglich gemacht.

  • Screenshot Homepage

    Layout 20

    Layout 20

    Layout-Beispiel

    Der Fußbereich kann z.B. mit Kontaktdaten, Navigationslinks oder Links zu sozialen Medien gefüllt werden.

    Layout 20

    Legende:

    • Hauptmenü
    • Nebenmenü, Untermenü oder Links
    • Nebeninhalte, z.B. Untermenüs / Links, Aktuelles, Events
    • Hauptbild / Produktfoto
    • Hintergrundbild mit Transparenz-Verlauf
    • Textzeilen (z.B. Telefon, E-Mail-Adresse, Anschrift, Slogan, Claim, Copyright-Infos, Hinweise etc.)

    Allgemeine Infos

    Die Unterseiten sind immer durch ein Dropdown-Menü sofort und bequem aufrufbar. Auf kleinen Ausgabegeräten, z.B. Smartphones, wird die komplette Navigation ganz oder teilweise über ein ausklappbares Menü zugänglich gemacht.

  • Screenshot Homepage

    Layout 21

    Layout 21

    Layout-Beispiel

    Der Fußbereich kann z.B. mit Kontaktdaten, Navigationslinks oder Links zu sozialen Medien gefüllt werden.

    Layout 21

    Legende:

    • Hauptmenü
    • Nebenmenü, Untermenü oder Links
    • Nebeninhalte, z.B. Untermenüs / Links, Aktuelles, Events
    • Hauptbild / Produktfoto
    • Hintergrundbild mit Transparenz-Verlauf
    • Textzeilen (z.B. Telefon, E-Mail-Adresse, Anschrift, Slogan, Claim, Copyright-Infos, Hinweise etc.)

    Allgemeine Infos

    Die Unterseiten sind immer durch ein Dropdown-Menü sofort und bequem aufrufbar. Auf kleinen Ausgabegeräten, z.B. Smartphones, wird die komplette Navigation ganz oder teilweise über ein ausklappbares Menü zugänglich gemacht.

  • Screenshot Homepage

    Layout 22

    Layout 22

    Layout-Beispiel

    Der Fußbereich kann z.B. mit Kontaktdaten, Navigationslinks oder Links zu sozialen Medien gefüllt werden.

    Layout 22

    Legende:

    • Hauptmenü
    • Nebenmenü, Untermenü oder Links
    • Nebeninhalte, z.B. Untermenüs / Links, Aktuelles, Events
    • Hintergrund
    • Hauptbild / Produktfoto
    • Textzeilen (z.B. Telefon, E-Mail-Adresse, Anschrift, Slogan, Claim, Copyright-Infos, Hinweise etc.)

    Allgemeine Infos

    Die Unterseiten sind immer durch ein Dropdown-Menü sofort und bequem aufrufbar. Auf kleinen Ausgabegeräten, z.B. Smartphones, wird die komplette Navigation ganz oder teilweise über ein ausklappbares Menü zugänglich gemacht.

  • Screenshot Homepage

    Layout 23

    Layout 23

    Layout-Beispiel

    Der Fußbereich kann z.B. mit Kontaktdaten, Navigationslinks oder Links zu sozialen Medien gefüllt werden.

    Layout 23

    Legende:

    • Hauptmenü
    • Nebenmenü, Untermenü oder Links
    • Nebeninhalte, z.B. Untermenüs / Links, Aktuelles, Events
    • Hintergrund
    • Hauptbild / Produktfoto
    • Textzeilen (z.B. Telefon, E-Mail-Adresse, Anschrift, Slogan, Claim, Copyright-Infos, Hinweise etc.)

    Allgemeine Infos

    Die Unterseiten sind immer durch ein Dropdown-Menü sofort und bequem aufrufbar. Auf kleinen Ausgabegeräten, z.B. Smartphones, wird die komplette Navigation ganz oder teilweise über ein ausklappbares Menü zugänglich gemacht.

  • Screenshot Homepage

    Layout 24

    Layout 24

    Layout-Beispiel

    Der Fußbereich kann z.B. mit Kontaktdaten, Navigationslinks oder Links zu sozialen Medien gefüllt werden.

    Layout 24

    Legende:

    • Hauptmenü
    • Nebenmenü, Untermenü oder Links
    • Nebeninhalte, z.B. Untermenüs / Links, Aktuelles, Events
    • Hintergrund
    • Hauptbild / Produktfoto
    • Hintergrundbild mit Transparenz-Verlauf
    • Textzeilen (z.B. Telefon, E-Mail-Adresse, Anschrift, Slogan, Claim, Copyright-Infos, Hinweise etc.)

    Allgemeine Infos

    Die Unterseiten sind immer durch ein Dropdown-Menü sofort und bequem aufrufbar. Auf kleinen Ausgabegeräten, z.B. Smartphones, wird die komplette Navigation ganz oder teilweise über ein ausklappbares Menü zugänglich gemacht.