Elements Sharing Space with Typography: New Web Design Trend Examples

Posted by Eyden Haze . on September 26, 2018

Almost everyone must have possibly come across typography of some kind or the other in visiting different websites. But, did you really pay attention? Most of the web designs of modern fashion contain large typographic text in a shared space with either a video, or an image, or other elements.

It is certainly not a piece of cake to achieve such a design, though it is not rocket science and can make your design all the more appealing.

One of the major concerns associated with designing a website with shared spaces is the readability factor, however; you have also other things to pay attention to, including animating one element and not the other or animating two different elements differently.

We have a list of top 10 examples of typography in a shared space.



Benjamin Geudj

As you scroll horizontally on the site, you are able to see text and images on the projects already handled by the designer. The headline appears in a shared space with a solid colored panel, which contains a descriptive text at times.

1.overserocs

Dufresne Hebert Comeau

Dufresne Hebert Comeau is a Canadian website using a slideshow, which shows different staff members and their short bio with each slide. The left-hand panel showing the name of the company remains static while sharing a little space with the sliding images.

3.dhc

My Digital Luxury Galaxy

The website seems extremely simple in design, and yet, surprisingly, remains extremely crowded. The attractive feature in its design is its landing, which has a slideshow. The image that is in sharing space with the headline tends to slide in with the circle lying behind each image containing a loading bar, which runs about its circumference.

9.dlg

Kekselias

With the pastel color scheme making the site design eye-catching, each text piece slides up the screen as you scroll your cursor down the page. Accordingly, the headline comes into sharing space with the complementing image.

10.kekselias

Authentic Form & Function

This is a different sort of a design where typography shares space with an image in such a way that the image has a dominating place over the type. Typography is almost secondary in this design.

5.authentic

Giovanni Xu

At the very first look, this kind of typography may seem very customary but as you hover over the same, the smaller image, with which the headline is in a sharing space, animates a little.

4.giovanni xu

Ginventory

Scrolling animations on this site make the solid yellow panel keep rotating to either reach the top or the bottom of the web page. Also, it always covers half the name of the company.

6.giventory

Doxa

Doxa – the Swiss watch manufacturer uses white typography labels which take the form of images when you start scrolling in the downward direction.

7.doxa

Adloids

Unlike any other design, this design has a typography that takes a leap out of the boundaries. Strange enough?

8.adloids

Little Flyers Learning Centres

This is a simple design with the large headline text and the colorful image sharing space with one another.

2.little flyer




A Final Take

With time, it might come out as all the possible techniques and ideas for web design have already been implemented. But, no worries! The designers and developers are very well aware of how to best put forward an illustration of their creative bent and add a surprise element to the existing trends. Large headlines sharing space with other elements is just one example.

Comments
  1. Benjamin Lehrer
  2. Dieter Schwarz
  3. Dieter Schwarz

Leave a Comment

Your email address will not be published. Required fields are marked *