vsble bietet dir ein sehr flexibles Design-System.
Jedes Seiten- und jedes Album-Layout kann separat für Desktop und Mobilgeräte gesteuert werden, sodass du eine Website erstellen kannst, die auf großen Bildschirmen stark aussieht und auf Handys dennoch praktisch und klar wirkt.
Dieser Artikel erklärt, wie es funktioniert.
1. Jede Seite kann ihr eigenes Design haben
Jede Seite deiner Website kann ihr eigenes Design verwenden.
Das bedeutet, dass du nicht auf ein einziges Seitenlayout für die gesamte Website beschränkt bist.
Zum Beispiel kann deine Home-Seite völlig anders aussehen als dein Portfolio, deine Über mich- oder deine Kontakt-Seite.
Du kannst das Design für jede Seite im Design Panel auswählen.
Wichtig
Jede Seite kann haben:
ein Design für Desktop
ein anderes Design für Mobilgeräte
So kann dieselbe Seite je nach Gerät unterschiedlich gestaltet sein.
Zum Beispiel:
Auf dem Desktop kann eine Seite ein großzügigeres, redaktionelles Layout verwenden
Auf dem Handy kann dieselbe Seite ein einfacheres und kompakteres Design für leichteres Scrollen nutzen
Seitendesign-Auswahl für Desktop und Mobilgeräte
Seitendesigns können aus verschiedenen Template-Stilen oder klassischen Grid-Layouts mit unterschiedlicher Anzahl von Zeilen ausgewählt werden.
Designauswahl für Seiten auf dem Desktop:
Designauswahl für Seiten auf dem Handy:
2. Alben können auch separate Desktop- und Mobil-Designs haben
Wenn eine Seite Alben enthält, haben auch die Alben ihre eigenen Design-Einstellungen.
Genau wie bei den Seiten können die Album-Layouts separat eingestellt werden für:
Desktop
Mobilgeräte
Dies ist nützlich, da die Albumpräsentation auf unterschiedlichen Bildschirmgrößen oft unterschiedlich funktionieren muss.
Beispiel
Du kannst wählen:
ein aufwendigeres, animiertes Album-Layout auf dem Desktop
ein praktischeres 2-Spalten-Grid auf dem Handy
Dies ermöglicht es dir, ein reichhaltigeres visuelles Erlebnis auf großen Bildschirmen zu schaffen, während die Navigation auf kleineren Bildschirmen einfach und benutzerfreundlich bleibt.
Albumdesign-Auswahl für Desktop und Mobilgeräte
Albumdesigns können aus verschiedenen Template-Stilen, klassischen Grid-Layouts mit unterschiedlicher Anzahl von Zeilen oder vertikalen bzw. horizontalen Scroll-Optionen mit verschiedenen Platzierungsmöglichkeiten für Beschriftungen ausgewählt werden.
Designauswahl für Alben auf dem Desktop:
Designauswahl für Alben auf dem Handy:
3. Album-Designs gelten immer für alle Alben auf derselben Seite
Dies ist eine wichtige Regel:
Wenn du das Album-Design für eine Seite änderst, gilt dieses Design für alle Alben auf dieser Seite.
Album-Designs werden also nicht jedem Album einzeln zugewiesen.
Stattdessen definiert die Seite, wie die Alben auf dieser Seite angezeigt werden.
Beispiel
Wenn deine Seite Portfolio die Alben enthält:
Fashion
Porträts
Reisen
und du dieser Seite ein bestimmtes Album-Design zuweist, dann folgen alle drei Alben auf dieser Seite diesem Album-Design.
Dies hält die Seite visuell konsistent.
4. Verschiedene Seiten können unterschiedliche Album-Designs verwenden
Während alle Alben auf einer Seite dasselbe Album-Design teilen, können verschiedene Seiten unterschiedliche Designs verwenden.
Das bedeutet:
Seite A kann ein Seitendesign und ein Albumdesign verwenden
Seite B kann ein anderes Seitendesign und ein anderes Albumdesign verwenden
Beispiel
Deine Portfolio-Seite verwendet vielleicht ein minimalistisches Album-Layout
Deine Journal-Seite verwendet vielleicht ein dynamischeres Album-Layout
Deine Archiv-Seite nutzt vielleicht ein klares, rasterbasiertes Album-Layout
Das Design ist also innerhalb einer Seite konsistent, muss aber nicht über die gesamte Website hinweg identisch sein.
5. Was ein Template eigentlich ist
Ein Template in vsble ist nicht nur ein einzelnes Design.
Ein Template ist eine Kombination aus:
Seitendesigns
Albumdesigns
Desktop-Einstellungen
Mobil-Einstellungen
Wenn du also ein Template auswählst, wählst du eine vordefinierte Kombination aus, wie Seiten und Alben über Desktop und Mobilgeräte hinweg gestaltet sind.
6. Templates können unabhängig für Desktop und Mobilgeräte geändert werden
Einer der leistungsstärksten Aspekte des Systems ist, dass du die Designs unabhängig voneinander ändern kannst.
Das bedeutet, du kannst folgendes separat ändern:
das Seitendesign auf dem Desktop
das Seitendesign auf dem Handy
das Albumdesign auf dem Desktop
das Albumdesign auf dem Handy
Du bist nicht gezwungen, auf jedem Gerät die gleiche Design-Logik zu verwenden.
Beispiel
Du könntest verwenden:
ein mutiges Full-Width-Seitendesign auf dem Desktop
ein klareres, gestapeltes Seitendesign auf dem Handy
ein animiertes Album-Layout auf dem Desktop
ein einfaches 2-Zeilen-Grid-Album-Layout auf dem Handy
Dies gibt dir viel mehr Kontrolle darüber, wie Besucher deine Seite erleben.
7. Du kannst deine eigenen Template-Setups speichern
Sobald du die Designs so kombiniert hast, wie du es möchtest, kannst du dieses Setup als dein eigenes benutzerdefiniertes Template speichern.
Dies ermöglicht dir:
deine eigenen Design-Versionen zu erstellen
später zwischen ihnen zu wechseln
ein gespeichertes Setup wiederherzustellen, ohne es neu aufbauen zu müssen
Dein gespeichertes Template kann Folgendes beinhalten:
deine gewählten Seitendesigns
deine gewählten Albumdesigns
Farben
Schriftarten
Seiteneinstellungen
Desktop- und Mobil-Kombinationen
Dies ist nützlich, wenn du verschiedene Looks testen oder mehrere Design-Richtungen einsatzbereit halten möchtest.
8. Deine Inhalte bleiben gleich
Das Ändern von Designs entfernt nicht deine Inhalte.
Deine:
Fotos
Seiten
Alben
Texte
Struktur
bleiben bestehen und passen sich automatisch an das von dir gewählte Design an.
Du kannst also das Aussehen der Seite neu gestalten, ohne den eigentlichen Inhalt neu erstellen zu müssen.
9. Kurz gesagt
Hier ist der einfachste Weg, es zu verstehen:
Seiten
Jede Seite kann ihr eigenes Design für Desktop und Mobilgeräte haben.
Alben
Alben können ebenfalls separate Designs für Desktop und Mobilgeräte haben.
Wichtige Regel
Alle Alben auf derselben Seite teilen sich immer dasselbe Album-Design.
Templates
Ein Template ist eine Kombination aus Seiten- und Album-Designs für Desktop und Mobilgeräte.
Flexibilität
Du kannst all dies unabhängig voneinander ändern und deine eigenen Template-Versionen speichern.
Beispiel-Szenario
Nehmen wir an, du hast zwei Seiten:
Portfolio-Seite
Desktop-Seitendesign: elegantes redaktionelles Layout
Mobil-Seitendesign: vereinfachtes gestapeltes Layout
Desktop-Albumdesign: animierte Album-Vorschau
Mobil-Albumdesign: klares 2-Spalten-Grid
Journal-Seite
Desktop-Seitendesign: eher minimalistisches Layout
Mobil-Seitendesign: kompaktes Scrolling-Layout
Desktop-Albumdesign: klassische Thumbnail-Ansicht
Mobil-Albumdesign: praktisches Grid
In diesem Fall:
hat jede Seite ihr eigenes Design
folgen die Alben auf jeder Seite dem Album-Design, das dieser Seite zugewiesen wurde
können sich Desktop und Mobilgeräte unterschiedlich verhalten
bleibt alles flexibel und konsistent
Fazit
Das Design-System von vsble gibt dir viel Freiheit, ohne die Dinge chaotisch zu machen.
Du kannst:
verschiedene Designs für jede Seite wählen
separate Layouts für Desktop und Mobilgeräte festlegen
Album-Designs pro Seite zuweisen
alle Alben auf einer Seite visuell konsistent halten
diese Einstellungen mischen und als deine eigenen benutzerdefinierten Templates speichern
Dies macht es möglich, eine Website zu erstellen, die viel durchdachter, raffinierter und gerätegerechter wirkt – ohne dass du deine Inhalte jedes Mal neu aufbauen musst.