imarketinx.de
Start   •   Artikel   •   Artikel-Verzeichnis

16. Dezember 2020

Minimalist Whitespace Website Template zum Download

HTML- und CSS-Vorlage mit CSS Grid Layout und CSS Flexbox

Englische Version

Im Webdesign gibt es eine Unmenge an Designtrends: Brutalism, Material Design, Flat Design, illustrative Design usw. Einige dieser Trends sind dem Zeitgeist geschuldet und nur von kurzer Dauer, andere wiederum werden alle paar Jahre wieder als dernier cri aus der Mottenkiste hervorgeholt.

Klassisches Design

Daneben gibt es zeitlose Gestaltungsprinzipien, die nicht von kurzer Dauer sind und keinem Modetrend folgen, die man auch klassisch nennen kann. Dazu gehört ohne Zweifel die minimalistische Gestaltung von Websites, das sogenannte Minimalist Design. ( Lesenswert ist auch dieser Artikel zum Thema.) Ich möchte Ihnen hier meinen Entwurf eines minimalistischen Designs einer Website vorstellen.

Eine Anregung aus dem Jahr 1977

Als Vorlage diente mir die Rückseite eines Plattencovers der Punkband „The Clash“ aus dem Jahr 1977.

Grafik zeigt die Cover-Rückseite einer Clash-LP von 1977.
Die Vorlage für das Minimnalist Template

Gestaltungsprinzipien

Ich ließ mich bei der Gestaltung des Minimalist Templates von folgenden Prinzipien leiten:

  • Reduktion an Informationen – nur das notwendigste anbieten
  • klare Strukturierung
  • intuitive Nutzerführung
  • Farbestaltung: schwarz-weiß mit viel Weißraum
  • typographische Gestaltung: eine Schriftart, Kleinschreibung, fett
  • wenig Bilder

Technische Basis

Die Techniken, die ich bei der Entwicklung des Minimalist Templates verwende, sind für das Raster „CSS Grid Layout“ und für die Inhalte „CSS Flexbox“. Die Topnavigation habe ich ebenfalls mit „CSS Grid Layout“ gestaltet.

Für welche Websites Minimalist Design besonders geeignet ist

Minimalist Websites eignen sich für viele Fälle, insbesondere wenn Konzentration auf ein bestimmtes Thema gefragt ist oder wenn eine Botschaft klar und einfach vermittelt werden soll.

Minimalist Design sollte immer dann in Erwägung gezogen werden, wenn es um Websites

  • mit informativem Charakter
  • mit wenig Themen
  • mit klarer Botschaft
  • mit Fokus auf Ladegeschwindigkeit

geht.


--> Hier geht es zum Minimalist Template.

--> Hier können Sie sich das Template downloaden.

In der ZIP-Datei finden Sie die HTML-Dateien, die CSS-Dateien (auch in komprimierter Form) und die Bilder zum Template.

Viel Spaß bei der Anwendung und Weiterentwicklung der Vorlage!


Diesen Artikel teilen