Design Trend verdeckter Text

Einige Websites sehen großartig aus, auch wenn sie sich der herkömmlichen Weisheit oder den Grundsätzen der Designtheorie widersetzen. Ein neuer Designtrend zeigt genau diese Idee mit Elementen, die oder bedecken behindern ein Teil des Textes im Design.

Es ist ein interessanter Trend, weil er allem widerspricht, was wir normalerweise mit Design meinen - dass es lesbar sein muss, um schnell mit den Benutzern Kontakt aufzunehmen.

Es ist unnötig zu erwähnen, dass dies eine schwierige Technik sein kann, um effektiv durchzukommen, aber die Designs sind auffallend und wirkungsvoll, wenn sie gut ausgeführt werden. Hier ist eine Zusammenfassung des Trends und einige Ideen, wie Sie ihn selbst ausprobieren können.

Einfaches Hindernis

Wenn Text in einem Design enthalten ist, muss alles andere visuell sehr einfach sein, damit der Benutzer nicht durch zu viele Effekte verloren geht.

An jedem ansprechbaren Haltepunkt ist der Text nicht mehr verdeckt als jeder andere.

Root Studio leistet einen tollen Job mit einem ersten Eindruck, der mit Farbe auffällt, und der einfachen animierten Giraffe, die einen Teil der übergroßen Beschriftung abdeckt. Der Trick dabei ist, dass, obwohl einige Buchstaben versperrt sind, keine Frage das Wort auf dem Bildschirm ist. Die Buchstaben sind aufgrund der Größe, der Einfachheit der Schrift und der Platzierung des Hindernisses immer noch lesbar.

Das Designteam achtete besonders auf die Textverhinderung, um die Integrität von ROOT aufrechtzuerhalten. Welches ist die Marke dieser Website? An jedem ansprechbaren Haltepunkt ist der Text nicht mehr verdeckt als jeder andere. (Dies ist der Punkt, an dem viele dieser Designs zu kurz kommen. Sie sehen bei Desktop-Auflösungen gut aus, aber der Text ist zu blockiert, um auf kleineren Bildschirmen lesbar zu sein.)

Dreidimensionale Schichten

Durch das Hinzufügen eines dreidimensionalen Ebeneneffekts können Elemente vom Bildschirm springen, sodass der Benutzer fast das Gefühl hat, dass er sie berühren kann. In einigen Fällen kann Text als Hintergrundelement dienen.

Stellen Sie nur sicher, dass die Ebene über dem Text nicht zu viel von dem Wort (oder den Wörtern) abdeckt. Es ist immer wichtig sicherzustellen, dass Textblockierungen aufgrund der Platzierung anderer Elemente nicht zu unerwünschten Wörtern führen.

Simply Chocolate nutzt diesen Schichtungseffekt gut. Es funktioniert hauptsächlich aufgrund der Kombination aus übergroßen Buchstaben, die gebräuchliche Wörter in einer fetten Schrift verwenden, und einem obersten Element, das nicht wirklich groß ist und genau die gleichen Wörter enthält, die durch das Süßigkeiten-Element verdeckt werden.

Durch diese Behandlung werden die großen Buchstaben im Hintergrund eher zu einem grafischen Element als zu einem lesbaren, wodurch ein neuer Kontrast und ein hervorragender Schichtungseffekt erzeugt werden. (Möglicherweise scrollen Sie durch die verschiedenen Bonbon-Geschmacksrichtungen, um zu sehen, wie sie den Effekt auf unterschiedliche Weise erzeugen.)

Vergiss die Regeln des Raumes

Textabdeckungen verdecken manchmal nicht wirklich die Buchstaben, sondern greifen in ihren Raum ein.

Es ist eine dieser Regeln, die North Street bricht, ohne dass das Design überladen oder unzusammenhängend ist. Die Beschreibung des Unternehmens stößt direkt gegen die mittlere vertikale Linie auf dem Bildschirm (der Rest des Entwurfs verwendet diesen Teiler für eine Split-Screen-Ästhetik.)

Wenn jemand sagte, dass er diese Behandlung anwenden würde, würden Sie wahrscheinlich versuchen, sie anders zu überzeugen, aber hier funktioniert es. Die visuelle Komposition ist dank des großen weißen Bereichs so leicht und die Auswahl an Schriftarten ist mutig genug, dass die leichte graue Linie fast nur in den Hintergrund fällt, obwohl sie in den Raum gerät, der für Text reserviert werden sollte.

Eine zweite graue Linie teilt den Text in der Navigation weiter auf, aber die meisten Benutzer werden das Hindernis wahrscheinlich nicht einmal bemerken.

Nur für große Beschriftung

Wenn Sie alle Beispiele hier betrachten, werden Sie wahrscheinlich ein gemeinsames Thema bemerken. Alle versperrten Schriftzüge sind recht groß und verwenden einfache Schriftarten.

Kleine Beschriftungen geben Ihnen normalerweise nicht genügend Platz, um einen Teil des Textes so zu bedecken, dass er zweckmäßig erscheint. Wenn Sie planen, mit einem Texthindernis zu entwerfen, sollte dies beabsichtigt sein und Bedeutung haben.

Komplizierte Skripte von Neuheitenstilen sind mit einem darüber liegenden Element zu schwer zu lesen.

Das Beschriften kleiner Beschriftungen ist im Hinblick auf zweckmäßiges Design und Lesbarkeit unglaublich schwierig. Deshalb ist die Technik mit übergroßer Typografie gekoppelt.

Diese großen, oft serifenlosen Schriften sind auf einen Blick gut lesbar und haben oft mittlere Hubbreiten sowie große Schalen und Zähler, die die Schichtung von Elementen erleichtern. Damit dieses Konzept funktioniert, benötigen Sie Buchstaben mit Formen, die sich für dieses Konzept eignen. Dünne oder komprimierte Schriftstile funktionieren oft nicht, und komplizierte Skripts für Neuheitsstile sind mit einem darüber liegenden Element zu schwer zu lesen.

Elemente mit wenig Kontrast

Manchmal ist das Hindernis für Text kein Element, das über dem Text steht. es ist die Beziehung zwischen dem Textelement und dem, was es umgibt. Ein mangelnder Kontrast zwischen Text- und Hintergrundelementen kann ebenfalls zu einer Textverhinderung führen.

Dies kann wiederum ein schwieriges Konzept sein, das effektiv durchgezogen werden kann. Text ist von Haus aus zu lesen. Ein Kontrastmangel kann das schwierig machen.

In Verbindung mit gut lesbarem Text sind kontrastarme Textelemente subtile Erinnerungen auf dem Bildschirm. Diese Elemente werden nach anderen Elementen mit höherem Kontrast gelesen.

In dem oben genannten Entwurf für Anew ist die Beschreibung des Geschäfts wichtiger als die Namensmarke. Das sagt das Design den Benutzern wegen der Typbehandlung. Sie Schlüsselwörter? Dach + Testküche? sind leicht zu sehen und zu lesen. Der Name? Neu? erscheint an einem Ort mit niedrigem Kontrast unter der Marke. Aufgrund des großen Logos zieht es das Auge immer noch an, aber es ist nicht der primäre Fokus beim Lesen und beim Sammeln von Informationen.

Ein Grund dafür, dass diese Behandlung in diesem Bereich funktioniert, ist auf den Inhalt des Designs zurückzuführen.Denken Sie an die Symbiose zwischen dem Wort? Neu? und die hellen weißen Teller. Es fühlt sich frisch, anders und verlockend an.

Fazit

Verstopfte Textdesigns werden immer beliebter. Vor nicht allzu langer Zeit wäre es Ihnen schwer gefallen, mit diesem Stil online etwas zu finden. (Druckdesigns haben es konsequenter eingesetzt, da sich die Designer nicht um reagierende Haltepunkte kümmern mussten.)

Achten Sie einfach darauf, etwas mit Text zu erstellen, der nicht vollständig sichtbar ist. Stellen Sie sicher, dass die Wörter immer noch sagen (und bedeuten), was Sie beabsichtigen. Wenn Sie Zweifel haben, wie ein Entwurf bei Verwendung von blockiertem Text wahrgenommen oder gelesen wird, sollten Sie eine andere Option in Betracht ziehen. Sie möchten Ihr Design nie für Benutzer schwer verständlich machen.