kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Visual Design & UX


Listen- oder Raster-Ansicht? Wie diese UI-Pattern Benutzer-Entscheidungen beeinflussen

Gruppen von Elementen, aus denen ausgewählt werden soll, tauchen auf fast jeder Website auf, sei es eine Liste von Beiträgen oder eine Gruppe von Produkten. Wie ordnet man diese »Teaser« an und wie gestaltet man sie am besten?

Es haben sich zwei populäre Lösungen entwickelt: Die Listen- und die Raster-Ansicht. Diese bedienen verschiedene Benutzerverhalten jeweils besser: das gezielte Suchen geht besser mit der Listenansicht, die Raster-Ansicht unterstützt das eher ungerichtete Erforschen besser. Der Artikel von Mei bietet dazu Argumente und Gestaltungsvorschläge.

Direkter Link zum Artikel

Textausrichtung mit CSS: Text von oben nach unten bzw. von rechts nach links schreiben

Die Ausrichtung von Text auf einer Website kann kompliziert werden, beispielsweise wenn rechtslaufende Sprachen wie Arabisch abgebildet werden sollen oder wenn aus gestalterischer Sicht Text von oben nach unten laufen soll. Wir geben euch in diesem Beitrag eine Übersicht über die verschiedenen CSS-Techniken zum Ausrichten und zum Positionieren von Text.

Beitrag zu Ende lesen

Variable Fonts

Bei sog. »Variable Fonts« handelt es sich um ein neues OpenType Feature, dass zunehmend an Bekanntheit gewinnt und darüber hinaus im neuesten Update der Adobe Creative Cloud verfügbar ist. Variable Fonts bieten eine Reihe neuer Möglichkeiten über die sich vor allem Webdesigner (aber nicht nur) freuen dürften. Im Typekit-Blog wurde bereits 2016 darüber berichtet und die neuen Features zusammengefasst.

Direkter Link zum Artikel

Webdesign-Trends 2018

In den letzten Jahren haben sich die Entwicklungen im Webdesign rasant beschleunigt. Jeder Webdesigner sollte daher sehr daran interessiert sein, stets die neuesten Webdesign- und -development-Trends zu verfolgen. John Moore Williams führt aus, welche neuen Entwicklungen es zu berücksichtigen gilt, worauf man nicht mehr verzichten sollte und was heutzutage bei der Gestaltung und dem technischen Aufbau einer Webseite beachtet werden sollte.

Direkter Link zum Artikel

CSS Text Decoration Styling – Farbig unterstrichene Texte, Unterbrechungen bei Unterlängen, Effekte für Linien usw.

Links werden in HTML automatisch unterstrichen dargestellt. Ein unterstrichenes Wort auf einer Website wird daher vom Anwender intuitiv als Hyperlink interpretiert – weshalb man das Gestaltungsmittel der Unterstreichung bewusst einsetzen sollte. Der CSS-Befehl text-decoration:underline; sorgt dafür, dass ein Text unterstrichen wird. Wenn mehr gestalterische Freiheit gewünscht war, haben Designer häufig border-bottom eingesetzt. Das CSS Text Decoration Module Level 3 erweitert die Möglichkeiten von text-decoration um Farben, Abstände und Effekte.

Beitrag zu Ende lesen

Automatische CSS Initialen (Drop Caps)

Eine Initiale dient im Print- und Webdesign nicht nur als Zierelement – sie kann auch die Lesbarkeit von Texten erheblich verbessern, da sie den Blick des Lesers führt. Wir zeigen euch in diesem Beitrag wie ihr mit dem CSS Pseudoelement :first-letter eine automatische Initiale für eure Website gestalten könnt.

Beitrag zu Ende lesen