Over the past decade, the Internet has undergone tremendous changes, but it has not changed at all. If we look at 10 years ago, we will find that a large number of Web sites have a common layout model. The page header, footer, sidebar, and content area make this straightforward layout. This is what people expect in the Web page layout. At the same time the rise of Macromedia Flash, leading other typesetting methods into a new era. Layout does not have to be rigidly stuck in a fixed format. Of course, with Flash's decline, this approach fades slightly ... I said a little, because it's coming back again now.
If you study a popular portfolio site, it shows the web design of today. There is no doubt that you will notice that the basic structure of the Web page is so changeable that there is no fixed form. It can be scaled to change into anything that is needed. I think this is the best by-product of the response-style web design. In fact, the new criterion is that there is no fixed criterion at all.
To sum up, we are able to observe several major typographic design trends that represent the unconventional layouts I understand. They are unconventional because they do not strictly follow certain criteria or established systems. But this trend, even if not hundreds of, I can find dozens of, grouped into these categories.
In this article, you'll see a hodgepodge of interesting unconventional typesetting trends that will inspire you and help you conceive the basic structure of web design. Let's take a closer look at ...
In this category, our featured sites use a vertical divider to split the screen. There are many reasons for this, and by studying a large number of such cases, I have found that there are mainly two points.
One reason is that there are sometimes two equally important body elements in a set of designs. The usual way to design a Web page is to sort the content by importance. Then the importance is embodied in the hierarchy and structure of the design. But what if you're trying to promote two things? This way, you can highlight both, and let the user quickly make a choice among them.
For two reasons, sometimes you have to show an important duality. Take the eight and four website for example. What they are trying to say is that their core competencies are rooted in the digital realm, and they have talented employees. These two points have achieved them. It's a delightful way to show this by screen segmentation.
One of the main elements in web design is container elements: squares, borders, shapes, and all types of containers that separate the content from the page. Imagine an old-fashioned page with elements that just fit in and separate from the content. A general trend today is to remove all of these additional interface elements.
It's a minimalist approach, but it goes further and brings some interesting changes.
In this example, they removed the concept of the page Head and footer. Instead, it's more like an interactive grocery stall. From left to right, it basically completes the arrangement of the content hierarchy, which helps to make the layout more intuitive. The interface used to separate navigation and content is not needed. Instead, it was a beautiful product that amazed the audience.
It can be found that by removing any sensory page headers and the end of the page, the content has been greatly emphasized. You'll see the name of the company first, and then it's a clear description of what they're doing (and where), not the first page. After that is the main navigation. Let users focus on the brand before browsing, this way is great! It creates a beautiful visual flow. Interestingly, when you scroll the page, the header and the interface appear. Beautiful and effective typesetting, the use of this model is quite enlightening.
Based on a module or grid
These layouts are then built on a modular or grid-like structure. In these designs, each module attempts to scale and adjust according to the screen size. It's not really a new way, but responsive web design makes it more useful. It implies an adaptive layout pattern that can be created from a variety of modular components, like building blocks.
The case is a perfect illustration of this. The whole design is responsive. As the screen size changes, each module changes its size to accommodate space. Evenly dividing the screen makes the design easier to adapt. They also (in large screen size) introduced some elements to break the bounds of the module, which is the finishing touch of the pen.
The case is more radical. Of course, it also includes a modular approach that allows them to easily add or subtract content as needed. But there is also an important design element in the works, the previous case is not. The module reflects its importance and position at all levels by changing the size. This modular layout has the risk of making everything the same size, meaning that nothing can be emphasized. Instead, the case clearly highlights the main elements.
Within a screen
Finally, there are a number of sites in this way, so that the design is fully displayed in a screen. This is a branch of the response design because it adapts to screen size. In this case, however, the entire design fits perfectly with the screen and does not produce a scroll bar. Without scrolling, it means that the content must be extremely focused and that a clear level of content be established. I find the focus and clarity of these sites refreshing.
Although I separate these trends, they all appear to be in the form of building blocks. These blocks can be combined in many different ways. In fact, many of the cases presented in this article can be placed in several other categories that we have discussed. The layout of modern web pages is so diverse and indeed in use that it creates such an exciting Internet media.