Relaunch 2021: Der Lockdown war Schuld.
Kategorie
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.
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.
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
Gib mir Deinen Senf dazu
Kommentare sind für diesen Eintrag derzeit nicht aktiviert.
Kommentare zu diesem Beitrag