Wie man Gewöhnliches im Webdesign außergewöhnlich macht (Teil 1)

Wir sind heutzutage an viel Scrollen gewöhnt, aber die Webseite des Glasgow International Festivals hat einen einfachen, cleveren Weg gefunden, einfach die Seiten kurz zu halten.

Die Homepage von Glasgow International reiht ihre drei Hauptbereiche nebeneinander an und ermöglicht es, sie unabhängig voneinander durchzublättern.

Auf dem Handy bilden dieselben drei Abschnitte eine große Spalte. Es ist eine clevere Lösung für die Beziehung zwischen Handy und Desktop, und auch eine ziemlich elegante.

Das CSS dahinter ist entsprechend einfach. Die drei Abschnitte befinden sich in einem Flex-Container, wobei alle drei die Werte overflow-y: auto; und height: 100vh; gemeinsam haben, sodass sie immer in den Desktop-Viewport passen. Das wirklich nette Detail dabei ist, scrollbar-width: auto; zu verwenden, um die Seitenleiste zu entfernen. Da die Spalten den gesamten Bildschirm einnehmen, erfährst du intuitiv, wie die Seite funktioniert, sobald du deine Maus bewegst.

Eine der Seiten der Woche auf Awwwards war diese Portfolio-Website des japanischen Frontend-Entwicklers Kenta Toshikura. Es ist einfach atemberaubend.

Das 3D-Karussell der Landingpage auf der Homepage von Kenta Toshikura ist so elegant gestaltet, dass man es fast für möglich hält, durch den Bildschirm in eine alternative CSS-Dimension zu fallen.

Im Zweifelsfall tendieren wir dazu, zu flachen, modularen Anordnungen zu tendieren, aber vielleicht sollten wir etwas öfter dreidimensional denken. Dies ist ein fantastisches Beispiel für Querdenken, das leicht eine Reihe von Boxen hätte sein können, in etwas wirklich Einprägsames verwandelt.

Die Dokumentation ist allzu oft eines der ersten Opfer des kilometerlangen Tempos des Internets. Das muss es nicht sein. Ich habe keine Bedenken, anzurufen Stripes Dokumentation wunderschön.

Die Anweisungen auf Stripe.com werden von einer vollständigen Codevorschau begleitet, wobei je nach Abschnitt, den Sie gerade lesen, unterschiedliche Zeilen hervorgehoben sind.

Ich bin mir sicher, dass die meisten von uns genug schlechte Unterlagen durchgemacht haben, um den Aufwand zu würdigen, der in diesen Ansatz gesteckt wurde. Klare, hierarchische Navigation für den Inhalt, kleine Step-by-Step-Kopie und natürlich die Codefragmente. Dynamische Vorschauen von Code auf mehreren Plattformen und Sprachen sind mehr als das, aber warum sollte sie es dann nicht sein?

Es gibt nur wenige Dinge, die wertvoller — und schwer fassbarer — sind als hochwertige Lernressourcen. Stripe zeigt, dass es online eine Welt von Möglichkeiten gibt, die über die Standardwörter auf einer Seite hinausgehen.

Quelle: https://www.smashingmagazine.com/