Divoc - bridging bubbles - Styleguide

Gesellschaften in Blasen

Eine Card10 schwebt in einer orangenen Seifenblase umgeben von Rauch auf einem leuchtenden Plateu. Auf dem Display ein text: Divoc - バブルス ブリッジ. Im Hintergrund ist eine grün schimmernde futuristische Stadt von Oben zu sehen. Ganz weit entfernt hinter einer Häusershlucht umgibt eine riesige blaue Seifenblase mit eine fliegende Untertasse. Die Antenne sieht etwas aus, wie der Berliner Fernsehturm.

Das Divoc Design nimmt soziale Blasen wörtlich. Nicht nur leben wir als Wesen in einer Blase, wir befinden uns in gigantischen Gesellschaften, die Blasen Bilden.

Das Design des DiVOC orientiert sich daher an visuell an Retro-Scifi-Anime. Ein paar Cyberpunk Einflüsse sind auch gern gesehen. Aber vielleicht ist diese Assoziation, die wir da haben auch nur ein Zeichen der Blase, in der wir leben und eure erste Assoziation ist Fantasy?

Wenn ihr mit euren eigenen Designs contributen möcht stellt euch die Fragen: Was macht die soziale Blase aus, in der ihr euch befindet und wir könnt ihr eure Gesellschaft umgeben von einer Blase repräsentieren?

Logo vor Hintergund. Ein grünes Kaninchen fliegt ein Seifenblasen-Ufo. Titel: DiVOC Untertitel: バブルス ブリッジ. Im Hintergrund sind ganz viele verschiedene bunte Kreaturen im gleichen Stil in Blasen: Otter, Aliens, Haie und Winkekätzchen

Das DiVOC Bunny macht sich auch dieses mal wider zu euch in's Wohnzimmer auf und bekommt diesmal jedoch Gesellschaft: Kreiert euch im Logogenerator von Tilcreator eine Kreatur für eure Profilbilder und Projekte.

mögliche Adaptionen

Es fehlt noch eine Kreatur? Baut euch ein ganz eigenes Logo aus den Vorlagen im Gitlab. Neben aufgeräumten SVGs, die sich gut fürs Plotten eignen, gibt es da auch die Rohversionen zum hacken.

Oder noch viel besser: adaptiert euer eigenes Logo und nimmt dafür inspiration von unserem Design.

das Farbschema

Das Farbschema basiert auf 5 Basisfarben - die je in einer "light" und einer "dark" Variante existieren und 5 dazugehörigen dunklen Gradienten.

Dabei sollte in den meisten Kontexten das dunkle Farbschema genutzt werden. Wenn sich Nutzende über eine CSS-Flag ein helles Theme wünschen oder der Kontext das erfordert, kann auch das Light theme verwendet werden. Die Grundfarben sind so abgestimmt, dass sie leicht verschiedene HEX-Werte haben, jedoch vor dem Untergrund visuell gleich aussehen.

Infographic on Color Sheme Base. It has text with a somewhat yellow tint, a dark background, a slightly brighter textbox and 5 colors: gree, blue, purple, red and yellow in front of a dark gradient. Infographic on Color Sheme Light. It has black text, a somewhat yellow background, a grey textbox and 5 colors: gree, blue, purple, red and yellow in front of a light gradient. Infographic on Gradients. There is for each before mentioned color a dark gradient.

Die Textfarbe ist dabei immer ein Beige. Bzw ein sehr sehr dunkles grau.

Themes ableiten

Aus den den Grundfarben lassen sich nun Themes ableiten. Jedes Theme benötigt:

Text-Demo

Überschrift 1
Überschrift 2

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Überschrift 3
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

UI-Elemente

Link Link (besucht)

Pixelwelt

Hier entsteht noch ein Abschnitt zum Thema Pixelwelt. Bitte habt einen kleinen Augenblick geduld!