multiple media

apropos Mediendesign

Nerdromantik - Sag´s mit SASS

Jul 232016

Grundproblematik

Zugegeben, Grußkarten werden in 95% aller Fälle von meiner Frau verfasst. Die Gründe dafür kann ich (zumindestens bei mir) eindeutig identifizieren!

  1. Weil Mann oft einfach nicht viel zu sagen pflegt, die Karten in durchschnittlicher Schreibschriftgröße aber verlangen, mit etwa 5-8 Zeilen gefüllt zu werden.
  2. Weil Mann sich vielleicht oft auch nicht adäquat auszudrücken vermag?
  3. Weil für Mann in den meisten Fällen ein starker Händedruck, eine freundschaftliche Umarmung, ein lockerer Spruch oder ein Insider-Gangsterfäustchen mehr rüberbringt als ein Stück DinA6-Karton mit Hochglanzmotiv und rückseitigem Text.

Ausgangssituation

Die Tage saß ich genau vor jener Herausforderung. Meine Frau konnte nicht helfen, da sie den "Akzeptant" kaum kennt.

Thema: Geburt
Was schreibt man da als mittlerweile pragmatisch entzauberter Vater von drei wundervollen Kindern?
"Herzlichen Glückwunsch. Euer Kind ist da! Wahnsinn, das habt ihr toll gemacht. Wir wünschen Euch ein gesundes und glückliches Baby ..." IM ERNST?
Ja, nee, weiß nicht.

Lösung

Da kam mir die Idee, diesen eigentlich total generischen Text in eine Zielgruppen gerechte Form zu bringen.
Zielgruppe: Designer, Frontendentwickler, UX-Designer
Ich entschied mich für SASS. Nicht ganz so trivial wie CSS aber doch einfach zu lesen (sogar für Zielgruppenferne dechiffrierbar).

Der generische Text sah am Ende dann so aus:

#baby {
	content: 'Hooray!';
	.wishes {
		face-family: smile, 'Laughter', sans crying;
		health: 100%;
		problems: 0%;
		sleep-mode: deep;
	}
	.parents {
		content: 'You did it!';
		&--wishes {
			endurance: 100%;
			nerves: strong;
			program-mode: love 100%;
		}
	}
	.diaper--full {
		contents: scentless;
	}
}

Zugegeben: Es sind viele Schummler dabei, aber zu kryptisch soll es ja auch nicht sein.

Ergebnis

Was soll ich sagen. Kam super an!

Abwandlung

Das Medium kann für verschiedene Zwecke eingesetzt werden.

Liebesbrief zum 13. Hochzeitstag

$darling: 'Maike';

#loveLetter {
	&--recipient {
		content: $darling;
	}
	&--purpose {
		overflow-x: love;
		overflow-y: gratitude;
	}
	.year:nth-child(-13) {
		date: '2016-07-19';
		boots-style: shaking;
		eye-align: $darling;
		eye-style: beautiful;
	}
	.question {
		date: '2016-07-18';
		future-collapse: true;
		&--result {
			happiness: 100%;
		}
	}
	&--hope {
		duration: everlast;
	}
	.greetings {
		heart-style: 100% love $darling;	
	}
	&--author {
		content: 'Christoph';
	}
}

Immerhin hat sich meine zielgruppenferne Frau darüber gefreut und auch das meiste verstanden.

Anschiss für Schlechtparker

#parkingYourCar {
	parking-space-offset: 100%;
	&--nextTime {
		align-self:center;
		vertivcal-align: middle;
	}
}

Viel Spaß beim Coden!

Atom

Ein Blog von schuetz mediendesign