Bootstrap Themes – Ideen und Konzepte

Bootstrap ist das wohl bekannteste Frontend-CSS-Framework und hat in den letzten Jahren stark an Bedeutung gewonnen. Ein CSS-Framework beinhaltet zahlreiche Vorlagen und Designs für Webseiten Elemente wie z.B. Buttons oder Tabellen. Damit wird dem Webdesigner viel Aufwand erspart und er kann bereits vordefinierte Objekte nutzen und für sein Design einsetzen und arbeitet dabei mit einheitlichen Design-Vorgaben aus dem Framework. Diese Objekte, die am Ende eine fertige Webseite oder ein Theme ergeben, können auf vielen verschiedenen Endgeräten dargestellt werden und sind responsiv.

Mit Bootstrap stehen uns als Webdesigner viele Möglichkeiten zur Gestaltung offen. Es gibt unendlich viele Kombinationen von Elementen und Objekten für unser Template.  Deshalb sollte man sich im Vorfeld einen klaren Plan für sein Theme machen und ein bestimmtes Konzept bzw. eine Idee verfolgen. In diesem Beitrag stelle Ich euch mehrere solcher Konzepte vor und wie sie sich für das Design deines Themes verwenden lassen.  Dabei gehe Ich von „oben nach unten“ die einzelnen Abschnitte des Themes durch.

Navigation

Die meisten Webseiten fangen mit einer Navigationsleiste an. In Bootstrap wird diese Leiste bzw. dieses Navigationsmenü „Navbar“ genannt. Hierbei gibt es zwei wesentliche Varianten: Die starre Navbar und die folgende/wandernde Navbar. Eine feste Navigationsleiste bleibt immer da, wo wir sie angelegt haben. Eine folgende Navigationsleiste wird beim Scrollen auf der Webseite mit bewegt und bleibt dabei immer am oberen Rand des Ausschnittes, der beim Scrollen gerade vom Benutzer gesehen wird.


<nav class="navbar sticky-top navbar-light bg-light">
[...]
</nav>

Für die eigentliche Navigation gibt es zahlreiche Gestaltungsmöglichkeiten. Diese Möglichkeiten betreffen das Design der Leiste, die Menü-Punkte der navbar (z.B. deren Funktionalität oder deren Design) und die Anordnung der einzelnen Objekte der Navbar.

Beim Design der Leiste seht ihr hier zwei Design-Möglichkeiten:

Einmal eine dunkle Leiste mit hellen Elementen


<nav class="navbar sticky-top navbar-dark bg-dark">
[...]
</nav>

Eine transparente Navbar


<nav class="navbar sticky-top navbar-light bg-trans">
[...]
</nav>
 

Navigation: Variationen

Ein weiteres Design für eure Navigationsleiste ist eine Kombination aus transparenter Navbar und dunkler Leiste, die der Ansicht des Nutzers folgt.

Zu Beginn ist die Navbar transparent und mit dem Herunterscrollen auf der Seite ändert sie ihre Farbe, damit man die Elemente auch hinter unterschiedlichen Hintergründen erkennen kann.


Bei den beiden Bespielen hat man bereits eine Variante zur Anordnung der Navbar Elemente gesehen. Auf der linken Seite ist ein Logo bzw. Text angesiedelt und auf der rechten Seite die einzelnen Menü-Punkte.

Eine weitere Anordnung legt die Elemente mittig in die Leiste und lässt einen gewissen Abstand zu den äußeren Rändern. Mit den Anordnungen kann man viel herumprobieren, um das passende Design zur Seite zu finden.

Hier seht ihr ein Beispiel für eine Navigationsleiste mit so einer Art von Anordnung:

      <nav class="navbar navbar-expand-lg navbar-light fixed-top py-3">
        <div class="container">
            <a class="navbar-brand" href="#page-top">Bootstrap Example</a>
            <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarResponsive">
              <ul class="navbar-nav ml-auto my-lg-0">
                <li class="nav-item">
                  <a class="nav-link" href="#about">About</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#services">Services</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#team">Team</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#contact">Contact</a>
                </li>
              </ul>
            </div>
        </div>
      </nav>

Welche Elemente am Ende in der Navbar vorkommen, hängt meist mit dem Zweck des Themes zusammen. Bei einem Theme für einen E-Commerce Shop ist es naheliegend, ein Warenkorb-Symbol in die Navbar einzubauen. Für einfache Symbole und Logos (z.B. auch für Social-Media Buttons) gibt es eine Bibliothek namens „fontawesome“, die sich einfach in euer Bootstrap-Theme einbinden lässt. Damit habt ihr nun Zugriff auf eine Vielzahl an Symbolen für allerlei Zwecke, die ihr mit einer Zeile Code an die richtige Stelle einfügen könnt.

Buttons

Für das Designen von Buttons kann man viel Zeit aufwenden. Ich zeige euch zwei Button-Designs, die für viele Zwecke verwendet werden können und sich gut in das Gesamtbild eures Themes einfügen lassen.

„Scharfe“ Buttons: Buttons mit harten Kanten und rechteckiger Form. Bei den folgenden Themes werden diese Art von Buttons verwendet. Für übersichtliche Inhalte mit Überschrift und kurzem Text lassen sich diese Buttons, meiner Meinung nach, gut einsetzen. Z.B. als Button, der den Nutzer zu einer Seite mit zusätzlichen Informationen bringt. Hierbei nutze ich in der Regel schwächere Farben oder auch transparente Buttons, bei denen nur die Umrandung und der Text angezeigt wird.

<a class="btn btn-primary sharp" href="#about" role="button">Learn more...</a>
.btn.sharp {
    border-radius:0;
    background:  #8B0000;
    box-shadow: none;

    font-size: 1rem;
    letter-spacing: 2px;
    margin-top: 0.7rem;
}

Als Schriftart für den Button-Text würde ich euch Serifenschriftarten empfehlen (z.B. ähnliche Schriftarten wie Times New Roman und optional in kursiv).

„Runde“ Buttons: Buttons mit abgerundeten Kanten und ellipsenartiger Form. Für Themes mit starken Farben und einem modernen spielerischen Look kann man diese Art von Button-Design verwenden. Z.B. als Download-Button oder um ein Dialog-Fenster zu öffnen etc. Die Buttons sollten sich deutlich von der Hintergrundfarbe absetzen.

.btn.round {
    border-radius:17px;
}

Hierfür eignen sich runde, serifenlose Schriftarten als Button-Text (vielleicht auch in Bold).

Inhalte

Die Inhalte in den Content-Sections stellen das Herzstück eures Themes dar. Ähnlich wie bei den Navigationsleisten gibt es auch hier unzählige Variationen zur Gestaltung der einzelnen Inhalte. Zur Inspiration stelle ich euch hier drei moderne Möglichkeiten vor, eure Inhalte möglichst ansprechend zu gestalten und in euer Theme einzugliedern.

Das erste Design liegt aktuell stark im Trend und ist in Bootstrap mit dem interen Grid-System einfach umzusetzen. Das Karten-Design gliedert die Inhalte in mehrere Blöcke, die meiste einen großen Teil des Abschnitts des Themes einnehmen. In dem unteren Beispiel seht ihr eine Reihe von Blöcken mit großen Titelbildern und einer einfachen Überschrift im Block integriert. Alternativ könnte man auch einen Text unter den Blöcken als Einzeiler platzieren.

Quelle:
https://startbootstrap.com/themes/creative/

Umgesetzt wurde dieses Layout über eine einfache Kombination aus Zeilen- und Spalten-Elementen aus dem Bootstrap-System. Diese wurde mit ein paar zusätzlichen CSS-Anweisungen ergänzt und so das Cards-Design umgesetzt.

Das nächste Design für Content-Bereiche wird sehr häufig mit großen Titelbildern, z.B. am Anfang der Webseite, genutzt. Hierbei wird ein Bild in einem großen Format mit einem integrierten Content-Block kombiniert. In diesem Content-Block werden häufig kurze Überschriften mit Texten, Buttons etc. verwendet.

Quelle:
https://mobirisethemes.com/m3-blocks.html

Eine weitere Möglichkeit zur Darstellung des Contents besteht darin, mehrere „Spalten“ nebeneinander mit Content zu füllen und z.B. Logos und Überschriften dafür zu nutzen. Diese Spalten können z.B. mit Rändern abgegrenzt werden oder durch Hintergrundfarben der Spalten vom Hintergrund abgesetzt werden. Hier seht ihr zwei Beispiele von Themes, die dieses Design eingebaut haben. Ähnlich wie bei den Cards-Blöcken lassen sich diese Spalten mit den dazugehörigen Bootstrap-Elementen „cols“ innerhalb einer „row“ umsetzen.

Quelle:
https://bootsnipp.com/snippets/gN73Q
 

Hier könnt ihr den Code zu dem Spalten-Content-Design sehen: https://bootsnipp.com/snippets/gN73Q

Bei diesem Snippet erhaltet ihr den HTML und CSS-Code und könnt damit das Design nachbauen.

Als Einstieg in modernes Webdesign für responsive Webseiten kann ich euch abschließend dieses Buch empfehlen.  Hier werden viele weitere Konzepte gezeigt und anhand von anschaulichen Beispielen erklärt. Diese Konzepte lassen sich perfekt in euer Bootstrap-Projekt integrieren und für eure Themes nutzen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.