Die Geschichte ist so alt wie das Grafikdesign selbst: Sie haben zwei verschiedene Bereiche, und Sie brauchen eine Möglichkeit, sie visuell voneinander zu trennen. Als Designer stelle ich häufig fest, dass ich auf dieselben ein oder zwei Tricks zurückgreifen muss, um dies zu erreichen. Warum nicht ein bisschen mischen?
Heute zeigen wir Ihnen zehn großartige Möglichkeiten, zwei unterschiedliche Inhaltsbereiche zu erstellen. Jedes Beispiel stammt von einer echten Website, sodass Sie durchklicken können, um es in Aktion zu sehen.
Der Kontrastkönig
Dies ist eine der einfachsten und gebräuchlichsten Methoden, um zwei Abschnitte voneinander zu trennen. Alles, was Sie tun, ist, zwei Farben zu finden, die wirklich gut kontrastieren.
Dies geschieht meistens mit Weiß oder einem ähnlichen Äquivalent, zusätzlich zu etwas wirklich Dunkelem wie Schwarz oder wirklich Hell wie Rot. Der Farbkontrast ist eines Ihrer leistungsfähigsten Konstruktionswerkzeuge, das Sie geschickt einsetzen und jedes Mal ein auffälliges Design haben.
Die schnelle Überblendung
Die schnelle Überblendung ähnelt dem vorherigen Beispiel. Anstelle von viel Kontrast und einer harten Linie haben wir sehr wenig Kontrast und eine weiche Trennung.
Dies ist ideal für Situationen, in denen Sie einen kleinen visuellen Unterschied zwischen zwei Abschnitten hinzufügen möchten, die aus konzeptioneller Sicht noch sehr eng miteinander verbunden sind.
Das obige Beispiel verwendet die schnelle Überblendung, um Symbole von ihrem Deskriptionstext zu trennen. Wieder gehören die beiden zusammen und funktionieren dennoch gut mit einer leichten Unterscheidung.
Die Kerbe
Die Kerbe kann mit mehreren anderen Techniken kombiniert werden, wird jedoch normalerweise mit einer harten Linie verwendet, wie Sie im Beispiel unten sehen. Dies ist mehr ein Punkt als eine Kerbe, aber eine beliebte Variante besteht darin, das Dreieck so umzukehren, dass es in die untere Ebene schneidet.
Die Kerbe ist perfekt, wenn Sie auf etwas aufmerksam machen wollen. Dies erfolgt normalerweise in Form einer horizontalen Sammlung von Elementen mit einer aktiven Auswahl. Das Dreieck bewegt sich natürlich, wenn Sie verschiedene Elemente auswählen.
Das Sammelalbum
Ich bin nicht sicher, wer damit angefangen hat, aber gezackte Trennzeichen wie die unten sind in den letzten ein oder zwei Jahren sehr populär geworden. Es ist eine elegante Lösung, die definitiv mehr visuelles Interesse erzeugt als eine typische durchgezogene Linie.
Die Technik deutet nicht unbedingt auf ein Sammelalbum-Thema hin, darüber denke ich jedes Mal, wenn ich es sehe. Versuchen Sie zur Variation mit der Punkthöhe, dem Abstand und der Rundheit. Sie können auch ein weniger regelmäßiges Muster verwenden, z. B. eine abgerissene Kante.
Der Cutoff
Dieses Beispiel stammt eigentlich von der gleichen Site wie die letzte, ein großes Lob an Colin Grist für eine großartige Site. Finden Sie heraus, wie er diese beiden Abschnitte trennt:
Hier benutzt er eine harte Linie, aber statt Farbkontrast schneidet er einfach eine Grafik. Die Lösung ist wunderbar einfach und funktioniert sehr gut. Wenn Sie weiter nach unten scrollen, nimmt er die Szene wieder auf. Dies ist eher ein Streifen, aber Sie können sie auf jeden Fall verwenden.
Die Silhouette
Dies ist konzeptionell das gleiche wie beim Scrapbook-Look. Sie zerreißen im Wesentlichen nur die Zeile, sodass es nicht gerade und langweilig ist. Allerdings kommt eine Grafik ins Spiel, die das visuelle Interesse erhöht.
Ich finde es sehr gut, wie dieser Designer einen Schritt weiter ging und die Gebäude in den Hintergrund stellte. Dadurch wird die Trennung wesentlich komplexer und eindrucksvoller. Zerreißen Sie diese Idee nicht einfach und gehen Sie zu Gebäuden. Einige andere Formen, die Sie ausprobieren könnten: Berge, Wasser, Bäume usw.
Die Überlagerung
Die Überlagerung ist eine weitere Möglichkeit, zwei Abschnitte auf sehr subtile Weise zu trennen. Es ist etwas stilvoller und üblicher als das schnelle Verblassen.
In Photoshop kann dies leicht mit einer Ebenen-Deckkraft erreicht werden. Die Verwendung von CSS ist jedoch ebenfalls einfach. Stellen Sie einfach sicher, dass Sie Ihre Farbe mit RGBa deklarieren und den Alpha-Wert auf einen Wert setzen, der der gewünschten Transparenz entspricht.
Der Overlay-Trick wird häufig in der Navigation und in anderen Menüleisten verwendet, sowohl beim App-Design als auch beim Design der Website. Es ist wirklich eine solide Technik für fast jeden Zweck und sollte auf jeden Fall in Ihren "Gebrauch oft" gehen. Tasche mit Tricks.
Der Herrscher (a.k.a. die Zeitleiste)
Ich mag das Aussehen dieses Modells wirklich und werde es definitiv für zukünftige Projekte berücksichtigen. Das Beispiel unten verwendet es vertikal, kann aber auch horizontal ausgerichtet sein.
Sie können diese Technik als einfaches statisches Element verwenden, aber dieser Designer hat es noch einen Schritt weiter gebracht. Stoppen Sie bei der Site und scrollen Sie nach unten, um zu sehen, wie sie zu einem dynamischen Navigationswerkzeug wird. Sehr glatt
Dieses Beispiel hat auch eine Bonus-Technik. Beachten Sie die einfache horizontale Linie mit einem Pixel. Wenn Sie sich für ein minimales Design entscheiden, besteht der beste Weg, um zwei Dinge zu trennen, einfach darin, eine Linie zu zeichnen! Wie viel einfacher kann es werden?
Die Scheibe
Ich habe lange darüber debattiert, wie ich das nennen soll. Ist es ein Kissen, ein Damm, ein Puff, eine Scheibe, eine Linie oder eine Falte? Ich weiß nicht, wie Sie es nennen, aber es sieht ziemlich cool aus.
Es gibt verschiedene Variationen dieser Idee. Grundsätzlich zielen sie alle darauf ab, dem Inhaltsbruch ein wenig Dimensionalität zu verleihen und umfassen normalerweise etwas mehr als nur eine clevere Schattenpositionierung. Dies ist perfekt, wenn Sie sich für ein realistisches Design interessieren.
Die Küchenspüle
Wenn sich in diesem Beitrag der Kopf dreht und Sie sich fragen, welche Methode Sie für Ihr aktuelles Entwurfsprojekt verwenden sollten, denken Sie daran, dass Sie mehrere davon verwenden können!
Wie bei allem ist es einfach, zu weit zu gehen, aber ich denke, dass das obige Design ein gutes Beispiel für die Verwendung mehrerer Methoden ist, aber trotzdem attraktiv bleibt und nicht allzu beschäftigt ist. Wir können Farbkontrast, Überlagerungen, einfache Linien und die Scrapbook-Methode in einem Abstand von wenigen hundert Pixeln erkennen!
Es ist definitiv etwas für Konsistenz und Wiederholung zu sagen, stellen Sie also sicher, dass Sie nicht für jeden Abschnitt etwas anderes verwenden. Wählen Sie verschiedene Methoden aus und wiederholen Sie sie mehrmals im gesamten Entwurf.
Fazit
Nun, das fasst unsere zehn Beispiele für das Entwerfen von Inhaltsseparatoren zusammen. Das mag jetzt etwas trivial erscheinen, aber glauben Sie mir, wenn Sie das nächste Mal etwas entwerfen, werden Sie über diesen Beitrag nachdenken und über Ihre verschiedenen Möglichkeiten, visuelle Unterschiede zu schaffen!
Hinterlassen Sie einen Kommentar und teilen Sie uns mit, welche Techniken Sie regelmäßig in Ihren Entwürfen anwenden.