JOKIC Studio
Portfolio
Überblick
Diese Website ist das Studio nach außen: Angebot, Arbeit, Kontakt. Und sie ist die Referenz dafür, wie eine Seite aus dem Studio sich anfühlt, wenn ich sie für mich selbst baue.
Der erste Blick ist das Meer, von oben, Schaum und tiefes Wasser. Darüber der Satz „Websites, die klar denken.“ Klein darüber die drei Worte Web, Design, Performance. Unten ein Knopf, Projekt starten, eine Haarlinie in Weiß, die sich beim Darübergehen füllt. Danach hört das Spektakel auf. Der Rest der Seite ist Papier, Tinte und Stein, damit die Projekte gelesen werden können, so wie diese Seite hier.
Eine Schrift für alles: Plus Jakarta Sans. Groß in den Sätzen, ruhig in den Absätzen, dieselbe Familie auf der Nacht des Meeres und auf dem Weißen darunter. Ich habe die Farbe nach dem ersten Bild wechseln lassen, die Stimme nicht.
- Kunde
- JOKIC STUDIO
- Kategorie
- Website
- Schrift
- Plus Jakarta Sans
Problemstellung
Ein Portfolio muss die Zusammenarbeit zeigen
Bilder allein erklären nicht, wie ein Projekt entsteht. Eine Kachel mit einem schönen Ausschnitt sagt, dass etwas gebaut wurde. Sie sagt wenig darüber, welche Farbe warum da ist, welche Schrift die Tür trägt, welche Frage der Gast zuerst hatte. Eine Agenturseite, die das in Floskeln ersetzt, erklärt es auch nicht.
Ich wollte eine Seite, die das Studio ist und gleichzeitig zeigt, wie ich arbeite. Wenige Wege. Große Typografie. Projekte als eigene Geschichten, mit dem Problem, dem Weg, der Gestaltung und dem, was am Ende dasteht. Diese Seite, die du gerade liest, ist dieser Anspruch, auf sich selbst angewendet.
Dazu gehört, dass die Seite sich sofort anfühlt. Der erste Blick ist ein Bild mit einem echten Satz an Größen, die Schrift ist eine Familie, der Schleier über dem Wasser ist nur so dicht, dass die Zeile sitzt. Was danach kommt, ist zum Lesen gebaut, mit Maß und mit Luft.
Lösung
Einmal das Meer, danach Papier
Das Meer ist die einzige große Geste. Tiefes Wasser, ein mittleres Blaugrün, Schaum. Ein Schleier liegt darüber, oben und unten dichter, in der Mitte durchlässiger, damit die Wellen bleiben und die weiße Schrift hält. Der Knopf ist eine Kontur. Er wird weiß, wenn man ihn sucht, und die Schrift darauf wird zur Tinte der Seite. So kündigt er an, was nach dem Scrollen kommt: Papier.
Darunter wechselt der Grund nach Weiß. Flächen, die sich absetzen, sind ein warmes Steinweiß. Eine Leiste kann den warmen Grauton des Steins tragen. Linien sind ein Ton dunkler als das Papier, mutige Sätze sind fast schwarz, Nebenzeilen ein warmes Grau. Die Projekte liegen als große Bilder mit wenig Text darüber, und jede Geschichte hat ihre eigene Seite, mit der Palette, die ich wirklich verwendet habe.
Plus Jakarta Sans läuft durch. Auf dem Meer in Weiß, groß, mit der Sicherheit einer Display-Schrift. Im Text in einer Größe, die lange Absätze aushält. Ich habe keine zweite Familie dazugeholt. Das Studio spricht mit einer Stimme, auch wenn die Gründe wechseln.
Der Satz
„Websites, die klar denken.“ Zwei Zeilen, weiß, auf dem Wasser. Die kleine Zeile darüber nennt die drei Dinge, aus denen die Arbeit besteht: Web, Design, Performance. Der Knopf darunter heißt Projekt starten. Drei Ebenen, eine Fläche, kein zweiter Claim, der den ersten erklärt. Wer weiterliest, findet die Erklärung in der Arbeit.
Die Geschichten
Jedes Projekt ist eine eigene Seite, mit Überblick, Problem, Weg, Gestaltung und Ergebnis. Die Farben stehen als Flächen daneben, mit dem Grund, warum sie so heißen. So sieht man die Scheune und das Weinrot, die Küche und das Rot der Schrift, die Praxis und das Marine. Die Kachel auf der Übersicht ist die Tür. Die Geschichte ist der Rundgang.
Das Papier
Nach dem Meer wird gelesen, also wird es hell. Weiß als Grund, ein warmes Steinweiß für Flächen, ein noch wärmeres Grau für die Leiste, eine leise Linie, eine Tinte, die lange Texte trägt. Die Chips unter den Projekten liegen auf einem hellen Stein. Nichts davon konkurriert mit dem Wasser. Das Wasser war der Auftakt. Das Papier ist die Arbeit.
Gestaltung
Tiefes Wasser, dann warmes Weiß
Das tiefe Wasser im Bild liegt bei #001818 und #062426, fast schwarz, grün vor blau, dort, wo die Wellen dicht werden. Der Mittelton, #5E8C88, ist das Blaugrün, in dem Schaum und Tiefe sich treffen. Der Schaum und die Schrift auf dem Heldenbild sind weiß. Die Leiste des Browsers habe ich auf #0F1E26 gelegt, ein Nachtblau, das das Wasser fortsetzt, wenn man die Seite öffnet und der Rahmen des Fensters noch da ist.
Der Schleier über dem Foto ist oben und unten stärker und in der Mitte leichter. Oben etwa die Hälfte Deckung, in der Mitte ein Viertel, unten wieder dichter. Die Zeile braucht Halt. Das Wasser braucht Luft. Beides auf einmal geht nur mit diesem Gefälle, nicht mit einer gleichmäßig grauen Scheibe.
Danach die Seite, auf der du gerade liest. Grund #FFFFFF. Tinte #0F0F0F. Ein dichteres Schwarz für das, was noch fester stehen soll, #1A1A1A. Die leise Schrift #6B6862, warm, nicht blau, damit lange Texte nicht klinisch werden. Der Stein der Flächen ist #F5F3F0. Die warme Leiste und der Ton, der an Papier und Sand erinnert, ist #CDCBC5. Linien sind #E0DDD7. Die kleinen Chips unter den Projekten liegen auf #F0EDE8. Alles eine Familie: warm, leise, lesbar, stundenlang.
Ich habe das Meer einmal zugelassen und dann aufgehört. Eine zweite große Farbgeste auf den Projektseiten hätte mit den Paletten der Arbeiten gestritten. Hückels May bringt sein Weinrot mit. ELVIRA bringt sein Küchenrot mit. OPSIS bringt sein Marine mit. Diese Seite stellt ihnen Papier zur Verfügung und eine Schrift, die zurücktritt. Plus Jakarta Sans ist diese Schrift, in mehreren Schnitten, vom laufenden Text bis zur großen Zeile. Eine Stimme, zwei Gründe, viele fremde Farben, die hier zu Gast sind und ihre eigenen Gründe mitbringen.
Palette
Tiefes Wasser
#001818
Das dunkelste Grün des Meeres, dort, wo die Wellen dicht sind. Es trägt den ersten Blick und gibt der weißen Zeile einen Grund. Danach kommt es auf der Seite nicht wieder.
Wasser
#062426
Die zweite Tiefe, etwas gehoben, immer noch fast schwarz. Zusammen mit dem tieferen Ton baut es den Raum des Fotos. Ein flaches Türkis hätte nach einem Filter ausgesehen.
Mittelton
#5E8C88
Das Blaugrün, in dem Schaum und Tiefe sich begegnen. Es bleibt im Foto. Als Fläche unter einem Absatz hätte es die Projekte gefärbt, die ihre eigenen Farben mitbringen.
Leiste
#0F1E26
Die Farbe des Browserrahmens, ein Nachtblau in der Familie des Wassers. Beim Öffnen setzt der Rahmen das Meer fort, noch bevor das Bild da ist. Ein neutrales Grau hätte diesen Auftakt zerschnitten.
Schaum
#FFFFFF
Die Schrift auf dem Meer, der Knopf als Linie, und danach der Grund der lesbaren Seiten. Dieselbe Helligkeit, zwei Aufgaben. Auf dem Wasser ist sie Licht. Darunter ist sie Papier.
Tinte
#0F0F0F
Die Farbe der Sätze auf dem Papier, fast schwarz, warm genug für lange Strecken. Sie trägt diese Geschichte und die anderen. Auf dem Meer wäre sie unsichtbar, also wechselt sie dort zu Weiß.
Dunkel
#1A1A1A
Die festere Stufe neben der Tinte, für das, was noch gesetzter stehen soll. Immer noch warm, immer noch ohne blauen Stich. Eine Stimme, ein wenig mehr Gewicht.
Leise
#6B6862
Nebenzeilen, Hinweise, das, was führen darf. Ein warmes Grau, verwandt mit dem Stein. Blaues Grau hätte die Papierseiten in ein anderes Klima gezogen als das Wasser.
Stein
#F5F3F0
Die Fläche, die sich vom weißen Grund absetzt, warm und fast unbunt. Hier ruhen Blöcke, die Luft brauchen. Es ist das Papier nach dem Meer, in einem Ton, den man lange ansehen kann.
Warm
#CDCBC5
Der Sandton der Leiste und der größeren warmen Flächen. Deutlicher als der Stein, immer noch leise. Er erdet die Seite, wenn das Weiß zu offen würde.
Linie
#E0DDD7
Die Haarlinie zwischen den Angaben, verwandt mit Stein und Warm. Ordnung ohne einen harten Schnitt. Man sieht sie, wenn die Liste einen Takt braucht.
Chip
#F0EDE8
Der Grund der kleinen Bezeichnungen unter den Projekten. Eine Stufe vom Stein, hell genug, um auf Weiß zu liegen, warm genug, um dazuzugehören. Eine Markierung, keine Plakette.
Ergebnis
Dieselbe Haltung wie die Arbeiten
Klar, lesbar, fertig gedacht. Der Auftritt hält, was die Kundenarbeiten zeigen: eine Entscheidung pro Fläche, eine Farbe mit einem Grund, eine Schrift, die ihre Aufgabe kennt. Das Meer einmal, dann das Papier, dann die Geschichten.
Wer hier anfragt, hat schon gesehen, wie ich einen Hof, eine Küche, eine Praxis und eine Bühne behandle. Diese Seite ist derselbe Umgang, auf das Studio selbst angewendet. Die Farben der anderen bleiben ihre Farben. Das Papier bleibt meins, damit man sie in Ruhe lesen kann.
