Asymmetrisches Rasterlayout, gif Animation
Asymmetrisches Rasterlayout. Nicht überlappend. Andere nennen es Petersburger Hängung

IconScreen Relaunch 2019 – Mit neuem CMS

Version 5.

Intro

Es war an der Zeit für eine Aktualisierung. Die Webtechnologie hatte sich in der Zwischenzeit deutlich weiterentwickelt. IconScreen V4 aus dem Jahr 2012 war zwar bereits responsiv, doch es gab einige neue CSS-Features, die noch nicht unterstützt wurden: Scalable Vector Graphics, srcset und sizes, CSS Grid Layout und CSS Variablen.

Kirby – Flat-File – CMS

Kirby ist ein Content-Management-System (CMS), das ohne Datenbank auskommt. Es zeichnet sich durch seine Flexibilität, leichte Installation und Transferierbarkeit aus. Inhalte werden in normalen Textdateien gespeichert und können sowohl über ein Kirby-Backend als auch mit einem normalen Texteditor bearbeitet werden. Dies macht Kirby zu einer besonders benutzerfreundlichen Lösung.

SiteMap
Wiederkehrende Seitenelemente (header, footer, …) vielfach genutzt, variabel angeordnet

Das Kirby-Backend basiert auf Vue und besticht durch sein ansprechendes Design. Es ermöglicht die Erstellung benutzerdefinierter Oberflächen für jede Art von Projekten.

IconScreen Entwurf, Layout, Wireframe 01
IconScreen Entwurf, Layout, Wireframe 02
IconScreen Entwurf, Layout, Wireframe 03

Asymmetrisches Rasterlayout: Early Drafts

Asymmetrisches Rasterlayouts

Die Idee eines asymmetrischen Rasterlayouts wurde bereits seit Längerem diskutiert. Dieses Layout scheint sich vom strengen und vorhersehbaren Raster zu befreien und liefert so mehr Aufmerksamkeit und Bewegung. Es scheint sich jedoch nur zu befreien, da es natürlich so definiert ist. Mit zufallsbasierten Abständen zum festen Raster.

Die Umsetzung erfolgte mit der neuen CSS-Grid-Technologie. CSS-Grid stellt ein brauchbares, flexibles Grid-System dar, das ohne lästige Floats auskommt und mit schlankem Code sowie unendlichen Möglichkeiten aufwartet. Für den Internet Explorer steht zudem eine kleine Fallback-Lösung zur Verfügung.

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

Final: 2019 - 2023

IconScreen V5 Screenshot

Tags

Arbeiten Webdesign

Vorherige und nächste Arbeit

nach oben

IconScreen seit 1997 mit
No: Cookies, Tracking, Referrers & Nazis

Shop / Blog / Kontakt
Datenschutz / Impressum