Asymmetrisches Rasterlayout. WebDesign der IconScreen HomePage
Asymmetrisches Rasterlayout. Nicht überlappend. Andere nennen es Petersburger Hängung

IconScreen Relaunch 2019

Es wurde einfach Zeit. Und es hat sich viel in der Webtechnologie getan. IconScreen/v4 aus dem Jahr 2012 war zwar aus dem Stand schon responsive, aber einige andere neue CSS Features mussten einfach mal nachgereicht werden: Scalable Vector Graphics, srcset und sizes, CSS Grid Layout und CSS Variablen.

Und ein neues CMS sollte es sein. Es wurde Kirby : Unser neues – Flat-File – CMS. Kirby ist ein Contentmanagementsystem (CMS) ganz ohne Datenbank. Es ist flexibel aufgebaut, leicht zu installieren und leicht zu transferieren. Inhalte werden in normalen Textdateien gespeichert und können sowohl über ein Kirby-Backend als auch mit einem normalen Texteditor bearbeitet werden. Easy.

SiteMap der IconScreen GmbH in Form einer Mindmap
Wiederkehrende Seitenelemente (header, footer, …) vielfach genutzt, variabel angeordnet

Kirby verfügt über ein sehr schönes Backend, basierend auf Vue, mit dem es möglich ist, benutzerdefinierte Oberflächen für jede Art von Projekten zu erstellen. Nice.

Und ein neues Design: Wir nennen es asymmetrisches Rasterlayout. :-)

Mockup - Entwurf - IconScreen WebSite 2018Mockup - Entwurf - IconScreen WebSite 2018Mockup - Entwurf - IconScreen WebSite 2018
Asymmetrisches Rasterlayout: Early Drafts

Die Idee eines asymmetrischen Rasterlayouts schlummerte schon lange in uns.

Dieses Layout scheint sich vom strengen und vorhersehbaren Raster zu befreien und liefert so mehr Aufmerksamkeit und Bewegung. Es scheint sich aber nur zu befreien, es ist natürlich so definiert. Mit zufallsbasierten Abständen zum festen Raster.

Mit der neuen CSS-Grid Technologie war es ein leichtes dieses umzusetzen. CSS-Grid: Ein brauchbares, flexibles Grid-System, ohne lästige Floats, mit schlankem Code und unendlichen Möglichkeiten. Und ja, für den den IE gibt es bei uns auch noch eine kleine Fallback-Lösung.

Zur Variabilität im Erscheinungsbild werden zusätzlich kleine Vektorgrafiken als Hintergrundbilder genutzt, die sich jeweils der Größe der Website anpassen.

Schriftfamilie: »Inter«

Eine neue Schrift sollte es auch sein: Gut lesbar und ohne Tracking.
Inter UI: Open Source Schrift für User-Interfaces von Rasmus Andersson.

Beispieltext der Open Source Schrift INTER von Rasmus Andersson.

Die vorliegende Version der Open Source Schrift gibt es kostenlos zum Downloaden. Die Fonts dürfen im Rahmen der SIL Open Font License 1.1 frei verwendet werden. Und bei Verwendung dieser Schrift im Internet: Kein »Third-party-request« oder Tracking durch externe Scripte, was leider bei einigen Schriftenanbieter immer noch erforderlich und ein Ärgernis ist, wenn es die DSGVO zu beachten gilt.

Fakten

Zeitraum
15.05.2019 – …
Techniken
Konzeption, Asymmetrisches Rasterlayout, Responsive, Kirby ♡, Webdesign, CMS
Online
https://www.iconscreen.d…
Kunde
IconScreen
  1. pmp Architekten
    - Minimalistisches Layout Architekten - Webdesign
  2. Annrika Kiefer
    - Modernes Gestaltungsraster - Webdesign
  3. Q8 Sozialraumorientierung
    - Stadtentwicklung und Sozialraumorientierung - Webdesign

Mehr

nach oben
IconScreen seit 1997 mit ♡.
Keine Cookies, Tracking, Referrers & keine Nazis.