3 wesentliche Designtrends, Dezember 2017
Alle drei wesentlichen Designtrends des Monats haben mit Typografie zu tun. Und die Trends zeigen einige sehr gute Möglichkeiten, um mit schönen Schriften Benutzerinteraktionen zu erzeugen und einen guten ersten Eindruck zu hinterlassen.
Ein gemeinsames Thema unter diesen Designs ist, dass alle typografischen Stile gut lesbar sind. Wenn Sie mit einem trendigeren oder funkigeren Textelement arbeiten möchten, wählen Sie eine Schriftart, die den Benutzern nicht schwer fällt, sie zu lesen. Die trendige Technik ist der Trick bei diesen Designs, nicht die Schrift selbst.
Hier ist, was in diesem Monat im Design Trend ist:
1. Geben Sie einfach oberhalb der Schriftrolle ein
Während ein großartiges Bild helfen kann, Benutzer in ein Design zu bringen, sind manchmal die richtigen Worte und der richtige Platz das Ticket.
Der Schlüssel zu diesem Designtrend ist es, Ihre Botschaft zu verfeinern. Die Wörter müssen einfach sein, etwas Sinnvolles sagen und für den Benutzer einen Mehrwert schaffen.
Also, wie machst du das?
- Beginnen Sie mit einem Schlüsselsatz. Es kann Ihre Mission oder ein Wertversprechen für Benutzer sein. Teilen Sie den Nutzern mit, was Sie an den Tisch bringen und warum Ihre Website für sie wichtig ist.
- Wählen Sie eine einfache Schriftart, die die gleiche Stimmung wie die Nachrichtenübertragung für längere Kopierblöcke hat.
- Wenn der Textblock kurz ist, z. B. mit Arten von Typ Sehen Sie sich eine Option vom Typ "falkier" an, um Benutzer einzuzeichnen.
- Holen Sie das Beste aus dem Raum heraus. Beachten Sie, dass Text in jedem der folgenden Beispiele viel Platz zum Atmen bietet, was das Lesen auf einen Blick erleichtert. Space kann auch dazu beitragen, den Blick auf Text zu lenken, und Textelemente ausgleichen, wenn Sie sie nicht auf dem Bildschirm zentrieren möchten, z Design-Ups .
- Verwenden Sie Farbe, um visuelles Interesse hinzuzufügen. Helle, trendige Farbtöne können dazu beitragen, Benutzer in das Design einzubeziehen. Farbe kann auch dazu beitragen, eine Stimmung zu erzeugen, die mit der Nachrichtenübermittlung korreliert.
Wenn Sie mit einem typlastigen Design arbeiten, zwingen Sie es nicht. Manchmal haben Sie nicht genug Text, um einen vollständigen "Bildschirm" zu füllen. Weniger + mehr Typ und Typ verwenden die Farbblockierung, um mehrere Bereiche zu erstellen, die perfekt auf den darin enthaltenen Text abgestimmt sind.
2. Text in weißen Kästchen
Mit so vielen kühnen visuellen Elementen in Website-Design-Projekten - und so vielen reaktionsfreudigen Breakpoints, um damit fertig zu werden - tauchen weiße Boxen als Containerelement für Text wieder auf. Weiße Kästchen mit dunklem Text im Inneren können die Lesbarkeit von Nachrichten auf Fotos, Videos oder Illustrationen mit Farbabweichungen gewährleisten.
Und während dieser Trend ein wenig klingt, gut ... schlampig oder faul, sieht es wirklich gut aus, wenn es gut gemacht ist.
Sie können nicht einfach irgendwo auf ein Bild eine Box schlagen und auf das Beste hoffen. Weiße Kästchen müssen strategisch platziert werden, so dass sie wichtige Teile des Bildes nicht abdecken und sich die Benutzer im Verlauf des Entwurfs zu ihnen bewegen.
Weiße Felder müssen groß genug sein, um eine angemessene Menge an Text zu enthalten, und Sie sollten einen Plan für dieses Element auf kleineren Bildschirmen haben, z. B. damit alles im Textfeld unter das Hauptbild fällt. Versuchen Sie nicht, ein Textfeld über ein Bild auf kleineren Bildschirmen zu setzen, weil Sie am Ende eine Textbox haben, die zu klein zum Lesen ist, oder die Box wird den größten Teil des Bildes selbst abdecken.
Wenn Sie für die White-Box-Behandlung Topf, viel Spaß. Jedes der folgenden Beispiele verwendet weiße Kästchen auf völlig unterschiedliche Weise.
Mach Platz schneidet eine weiße Box in die untere Ecke des Bildes, so dass der größte Teil des Bildes sichtbar ist. Der weiße Kasten blutet in den darunter liegenden weißen Raum, so dass er fast so aussieht, als ob er aus dem darunter liegenden Paneel herauskommt. Mit dieser Technik können Sie den Hauptschieberegler mit dem darunter liegenden Inhalt verbinden (und sogar das Scrollen unterstützen).
Wie es verwendet kreisförmige Blobs, so dass die weißen Textfelder besser zum Ton der Hintergrundillustration passen. Diese subtile Verschiebung in der Form, so dass die Boxen flüssiger wirken, hilft dabei, die Elemente so zu verbinden, dass die Boxen und der Hintergrund ein einheitliches Gefühl haben. Sie möchten nicht, dass sich weiße Felder für Text so anfühlen, als wären sie willkürlich auf dem Hintergrund platziert. (Das funktioniert nicht und wird nicht dazu beitragen, ein einheitliches Gefühl für Benutzer zu schaffen.)
Macaulay Sinclair hat mehr Text als die anderen Beispiele, die einen Teil eines Bildbereichrasters verwenden, um das Textelement zu halten. Hier dient das Bild hinter der weißen Box keinem Informationswert. Es hat ein Farb- und Bewegungsschema, das anderen Bildern ähnlich sieht und hauptsächlich dazu dient, den Zusammenhalt zwischen dem Textelement und dem Rest des Designs zu schaffen.
3. Typografische Ausschnitte
Niemand hat jemals gesagt, dass Text eine Reihe von voll gefüllten Buchstaben sein muss. Immer mehr Designer entscheiden sich für Typografie-Ausschnitte, die einen Farbblock über einem Bild haben, so dass das Bild durch eine klare Beschriftung kommt.
Diese Technik kann mit Standbildern oder bewegten Bildern und mit Vollbild-Überlagerungen arbeiten, so dass nur eine kleine Menge von Informationen durch Buchstaben kommt (fast um eine Textur zu erzeugen) oder mehr von einem Block-über-Bild-Stil mit mehr von dem Hintergrundbild sichtbar.
Der Trick, um diese Arbeit zu machen, ist die richtige Schrift. Buchstaben müssen dick genug sein, um das Bild oder die Textur im Hintergrund sichtbar zu machen. Sie können dies nicht mit einer dünnen oder komprimierten Schriftart mit konsistentem Erfolg tun.
Diese Technik funktioniert auch am besten, wenn die Anzahl der Wörter und Buchstaben ziemlich begrenzt ist. Bleiben Sie bei ein bis drei Wörtern mit 10 oder weniger Buchstaben oder verwenden Sie sehr häufige Wörter, die Benutzer auf einen Blick wissen.
Danbury verwendet einen hellen Textausschnitt, um die Benutzer zu animieren, sich mit dem Videoanruf zum Handeln zu beschäftigen. Die gesamte orange Box ist nur ein riesiger Knopf.
Fusion Weingut verwendet ein Hintergrundvideo eines Weinbergs im Schriftzug. Das Tolle an diesem Design ist der Triple-Layer-Effekt: Videohintergrund unterhalb des weißen Textausschnitts unter einem Produktbild.
Der Kaneko verwendet ein nicht identifizierbares Bild als Füllung für Buchstaben. Wenn Sie sich für diesen Stil entscheiden, behalten Sie diesen Hintergrund einfach, wie mit diesem Entwurf getan. Es gibt nur einen Hauch von Farbe und Textur, die den Blick auf den Text auf der Leinwand lenken.
Fazit
Die Sammlung bietet Anregungen für Projekte, die möglicherweise kein gutes Bild oder Video haben, sodass Sie immer noch eine Möglichkeit finden, etwas zu erstellen, auf das Nutzer reagieren. Haben Sie keine Angst, Text als visuelles und informatives Element in diesem Design zu verwenden.
Welche Trends liebst du gerade (oder hasst)? Ich würde gerne einige der Websites sehen, die Sie fasziniert sind. Schreibe mir einen Link auf Twitter ; Ich würde gerne von dir hören.