Relaunch 2021: Corona made me do it.

Frankfurt am Main im Januar 2021 — 
Jede/r hat wohl die Zeit im Lockdown irgendwie auch zu etwas Positivem genutzt: So habe ich endlich die Muße gefunden, meine Seite und mein Gesamterscheinungsbild neu zu gestalten. Aber wie in vielen Dingen, so ist man bei seiner eigenen Website dann doch übertrieben kritisch. 
Kommt daher nicht auch der Satz “Schuster tragen die schlechtesten Schuhe”..? Man konzentriert sich eher auf Kundenprojekte, und in der Freizeit benötigt man einen Ausgleich anderer Art, wie etwa den Bau eines automatischen Kaninchen-Futterautomats. …Nur so als Beispiel.

"Marilyn Diptych" von Andy Warhol; unterteilt in die einzelnen Farbschichten
"Marilyn Diptych" von Andy Warhol — "seziert" in die einzelnen Farbschichten

Vom Siebdruck inspiriert

Ich habe mich in den letzten Monaten (wenn auch zunächst nur theoretisch) mit Siebdruck befasst und habe mich in meinem Design- und Bildkonzept von der Technik inspirieren lassen.

Weißräume werden ausgespart, Farben werden separat in einzelnen Arbeitsschritten mit Siebmasken aufgetragen, Fotos werden aufgerastert und mit 100 % Farbauftrag Schwarz gedruckt.
So entsteht der Eindruck von Graustufen.

Für die Hauptvisuals im Kopfbereich der Seiten versuche ich, diese Technik in Animationsschritten zu simulieren.

Responsive? — aber  selbstverständlich.

Passend für jeden erdenklichen Bildschirm, passend für jedes Gerät. Das ist die Idee des responsiven Webdesigns. Hier wird derselbe Inhalt per CSS an jede Bildschirmgröße angepasst. Das geht so weit, dass man völlig andere Layouts für Desktop und Mobile anbieten kann.

Wie sich dieses auf meiner Seite verhält, kannst Du entweder mit dem Handy oder Tablet testen; oder Du skalierst einfach mal das Browserfenster von breit zu schmal und schaust zu, wie sich die Elemente verändern/anpassen.

Responsive

Ein Blog über Design und Technik

Im Blog finden sich hilfreiche Tipps für Grafik- und Webdesigner — aber auch Anwendungsbeispiele in diversen Programmiersprachen. Dinge, die Einsteigern sowie Profis die Arbeit erleichtern sollen.

Die Tutorials werden mit Codeschnipseln verdeutlicht, die einfach kopiert werden können.

const webpack = require('webpack');
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const FixStyleOnlyEntriesPlugin = require("webpack-fix-style-only-entries");

module.exports = {
	entry: {
	  app: "./src/js/app.js",
	  style: "./src/scss/style.scss",
	},
	output: {
	path: path.resolve(__dirname, 'js'),
	filename: "[name].js"
	},
	plugins: [
		new FixStyleOnlyEntriesPlugin(),
		
	    new MiniCssExtractPlugin({
	      // Options similar to the same options in webpackOptions.output
	      // both options are optional
	      filename: "../css/[name].css",
	      chunkFilename: "../css/[id].css",
	    }),
	  ],
	module: {
	  rules: [
	    {
	      test: /\.s[ac]ss$/i,
			use: [
	          MiniCssExtractPlugin.loader,
	          "css-loader",
	          "sass-loader"
			],
	    },
	  ],
	},
	mode: 'production',
};

Fig. 1: Beispiel einer Webpack Configurations-Datei

Neues aus dem Blog

Einblicke ins Portfolio

Navigation ein-/ausblenden