New Web Layout Ideas for 2015

Four emerging trends in web layout in 2015: split screen, container-free layout, block grid and single-screen websites

Key points:

• The article points out the four major web layout trends that emerged in 2015: split screen, container-free layout, block grid and single-screen websites.
• Split screen layout is used to highlight two equally important functions or express concepts of duality, while container-free layout focuses on content, using color and typography to create hierarchies rather than structures themselves.
• Block grid is a versatile tool for creating responsive websites, with modules that can be adjusted according to screen size. However, using this layout to distinguish content can be a challenge.
• Single-screen websites are mainly responsively adapted to the background image of the screen, usually with minimalist design and no scroll bars. Due to limited space, this layout requires a clear content hierarchy.

New web design concepts appear every year, while some old trends gradually disappear. Over the next few months, we will undoubtedly see a temporary increase in popularity of video backgrounds, tiles and animated storybooks, to name just a few.

On the other hand, it is almost certain that responsive web design that emerged as early as 2010 will remain at the heart of our design for quite some time to come.

Of course, this does not mean that all web pages must turn to a common standardized structure. On the contrary, there may be more room for differentiation, flexibility and experimentation than before.

We identified four trends or overall plans that we believe will dominate layout design in the coming year. You can get inspiration from these models, but the best design is usually produced when you use inspiration as the starting point for your creativity.

The following are these trends.

Split screen layout

When we call "split screen" is a website where screens are usually divided into two parts (usually the same size).

There are two main reasons for dividing the pages like this:

1. Show two important features.
2. Express the concept of duality.

The first situation usually occurs when a company must promote a product or service with two equally important characteristics or variants. Since websites often stack elements in order of importance, a more traditional layout may not be appropriate in this case.

On the other hand, dividing the screen into two columns may be the best way to showcase two different aspects of the same system (for example, a publishing system that is beneficial to both publishers and readers).

In this way, there is no need to distinguish between major and minor features, and readers will immediately pay attention to important content.

The second reason stems from the fact that sometimes designers need to convey the concept of duality. In this case, dividing the screen into two parts creates two spaces where you can focus on different topics, or even two different products. Furthermore, this style allows you to highlight the opposite characteristics of a certain reality.

Desktime https://www.php.cn/link/d45b6d92e35ff59d3f5a1861e431d581

The first example we will see is the homepage of Desktime, a company operating in the office sharing field. They divide the page into two parts to meet the needs of both those who already own the office and those who are looking for it.

Therefore, they use "vertical segmentation" to get the same time as two equally important features in their service. The style they adopt is effective and practical, and is very concise and clear. well done!

Note: Eight&Four has been redesigned since I took this screenshot.

Eight&Four https://www.php.cn/link/ad100897c6f809081d942836af421f86

The second example comes from Eight&Four, a digital marketing company. Their homepage is also divided into two parts, with the design based on the contrast between white and flat colors. The division here is used to express all the different functions the company has.

The "vertical segmentation" style also depends on the existence of "&", which weakens the segmentation effect.

Containerless layout

Almost since the beginning of design, designers have been using elements such as boxes, shapes and lines to divide and include content in the design. For example, consider how the title or footer is always designed to be visually separate from the rest of the content.

A new trend is emerging, with the core idea of ​​removing any graphic structure and turning to a more free and open style.

This trend has some commonality with minimalism, but it goes a step further. In fact, minimalism usually still uses simple, linear structures, and this new "containerless" style completely strips any visual packaging.

The content itself becomes the center of attention, and the hierarchy of information is determined by color selection, location and thoughtful typography, rather than by frames and structure.

Foreword https://www.php.cn/link/93bb49ede783ed9c09b650c9234be21a

As you can see from the homepage, Foreword is an interactive agency based in New York and Paris. Their website cancels any containing elements, and the user's attention is focused here by colors and fonts.

In particular, they skillfully use typography to provide the most important company information. Colors are mainly used to highlight other clickable sounds. It is obvious that this website is incredibly concise in addition to being responsive in every way.

Block grid

We don't need to point out here that grid structures can be a very effective way to create responsive websites. In this case, each module will contain specific content, such as a title, image, or text.

Modules are usually used on the home page of a website, but can be developed in other pages to meet the needs.

Each module is designed to be flexible and it will adapt to the screen size. This makes a powerful "grid layout" a very versatile tool that can be used equally efficiently on websites and mobile applications.

However, one of the challenges with this approach is that if you create many modules of the same size, it may be difficult to distinguish between the most interesting content from older, less important projects.

In fact, if many blocks are the same size, the user's attention may not be attracted to any particular item. To avoid this problem, a new approach is to create modules of different sizes based on what the module contains.

Note: Greats has also been redesigned since I took this screenshot.

Greats https://www.php.cn/link/2fe37bd25993870f5a38563dd25b1d05

Greats is a New York-based company that sells men's shoes primarily through its website. Their website is their display window, so every detail has been carefully studied and considered.

"Greats" chooses the practicality of the grid layout. They stack their home pages in module rows, each containing a pair of shoes. All modules are similar in size, and their shapes are implicit and not strictly marked. In fact, users are encouraged to ignore anything other than shoe displays.

Single-screen website

The last trend we have seen in the last 6 months are those sites that focus on responsive, always adapting to the background image of the screen. Often, these sites are very concise and certainly tend toward a minimalist design feel.

However, the iconic feature of this design trend is their lack of scrollbars: in other words, these sites almost always take a "single-page application" approach to their UI.

Due to the limited available content space, designers should keep in mind a very clear content hierarchy and should be particularly discerning when including less relevant information.

In most cases, images (or even videos) dominate the design, leaving very limited space for other design ideas. It can showcase products or simply be used to evoke an emotional, cinematic atmosphere.

Shamballa Jewels https://www.php.cn/link/885ca3d99fd35f509a2aa0130e8bf64f

"Shamballa Jewels" is a company that sells a range of jewelry. The website has a home page, consisting of a unique page that displays some of their work. There are no scroll bars, and the website's navigation is provided by the menu at the top of the screen.

What I really like about this site is that the background is changing all the time. In fact, images suitable for the entire space appear alternately with vertical split screens.

The above example shows that a great, effective design does not need to be bound to the 4 or 5 most common layout patterns we see. Each resists the urge to start with the familiarity and security of the popular grid/frames we see – and gets great results as a result.

Does this mean that more common web layouts don't work?

Of course not. But as Mark Twain said, “For the person holding the hammer, everything looks like a nail.”

Make sure you see nails.

(The following is a pseudo-original work in the original FAQ part, which maintains the original meaning, and has made statement adjustments and word replacements)

Frequently Asked Questions about Web Layout Design

Q: What are the trends in modern web layout design?

A: The trend of modern web layout design is constantly evolving and changing. Some popular trends include minimalist design, asymmetric layout, split-screen layout, and mobile-first design. These trends focus on creating user-friendly experiences that provide simple navigation and engaging content. They also emphasize visual appeal, using bold colors, unique typography, and high-quality images and videos.

Q: How to make my website layout more attractive?

A: To make your website layout more attractive, please pay attention to the user experience. This can be done by ensuring your website is easy to navigate and has clear menus and links. Use high-quality images and videos to attract users' attention. Also, make sure your content is relevant and fun to your target audience. Incorporating interactive elements such as quizzes or voting can also increase engagement.

Q: What is the importance of mobile-first design in web layout?

A: Mobile-first design is a design strategy that prioritizes design for mobile devices and then for desktop or other devices. This is important because more and more people are using their mobile devices to access the internet. Mobile-first design ensures that your website looks good and works well on all devices, providing a better user experience.

Q: How to use colors effectively in web layout design?

A: Color plays a crucial role in web layout design. It can set emotions, convey emotions, and even affect user behavior. To use colors effectively, consider your brand identity and target audience. Choose a palette that reflects your brand and engages your audience. Use contrasting colors as text and background to ensure readability. Additionally, use colors to highlight important elements or information on the website.

Q: What is the role of typesetting in web layout design?

A: Typesetting is an essential element in web layout design. It not only conveys information, but also sets the tone and personality of the website. Choose fonts that are easy to read and reflect your brand style. Use different font sizes and thicknesses to create hierarchies and guide users’ attention. Also, make sure there is enough contrast between the text and the background to ensure readability.

Q: How to add multimedia elements to web layout design?

A: Multimedia elements such as images, videos, and audio can enhance the user experience and make your website more attractive. Use quality images and videos related to your content. Consider using background videos or animations to increase visual interest. In addition, use audio with caution and provide users with control functions such as playback, pause or adjust volume.

Q: What are some common mistakes in web layout design that should be avoided?

A: Some common mistakes that should be avoided in web layout design include messy layouts, poor navigation, excessive fonts or colors, and not optimized for mobile devices. Also, avoid low-quality images or videos and make sure your interior is easy to read and understand.

Q: How to improve the usability of my website layout?

A: To improve the usability of your website layout, make sure your website is easy to navigate and has clear menus and links. Use consistent layout and design elements throughout the website. Additionally, make sure your website loads fast and is optimized for mobile devices. Provides accessibility features for users with disabilities, such as alternative text for images and subtitles for videos.

Q: What is the role of white space in web layout design?

A: White space or negative space is the space between elements in the design. It can be used to create balance, guide users' attention and improve readability. Leaving blank space can also make your design look simple and modern. However, be sure to use whitespace strategically and don't leave too much space to avoid making your design look incomplete.

Q: How to keep my web layout design novel and up-to-date?

A: To keep your web page layout design novel and up-to-date, stay informed of the latest design trends and technologies. Update your content regularly to make it relevant and fun to your audience. Also, consider redesigning your website every few years to keep it modern and attractive.

The above is the detailed content of New Web Layout Ideas for 2015. For more information, please follow other related articles on the PHP Chinese website!