In this overview, you’ll be taken through each trend and beautiful examples that will inspire you for your next project.
1. Extraordinary layout
Figure 1
2. Single page layout
Figure 2
3. Multi-column layout
Figure 3
4. Giant illustrations and vibrant graphics
Figure 4
5. More white space than before
Figure 5
6. Social design elements
Figure 6
7. Conversational navigation
Figure 7
8. Dynamic tab
Figure 8
9. Large search box
Figure 9
10. Add visual effects to classification
Figure 10
11. Author’s avatar
Figure 11
12. Icons and visual cues
Figure 12
13. tag index (replacing tag cloud)
Figure 13
14. Use illustrations in blogs
Figure 14
15. Watercolor painting
Figure 15
16. Handwriting
Figure 16
17. Retro
Figure 17
18. Use organic materials, bricks and photography as background
Figure 18
19. Marking seal
Figure 19
20. Price tag
Figure 20
21. Ribbon
Figure 21
Extraordinary Layout
As demonstrated in 40 Innovative Design Layouts: Extraordinary Layout a few months ago, we are observing a strong trend towards more personalized and innovative layouts. Instead of using traditional boxy box-like layouts, designers are experimenting with new ways of structuring, presenting and expressing information.
In these extraordinary layout designs, the overall creativity is often more important and memorable than the specific content. Still, usability, typography, and visual design are rarely overlooked and executed with care. Innovative layout is particularly popular in large projects, website design agencies and promotional websites (such as commercial activities of large companies), but it is also popular in blogs.
Figure 22
When it comes to creativity, the line between usable and unusable design is very blurred; therefore, usability testing is particularly important, because a new idea can break the existing things on the website. Often it's a good idea to have a balance of creative, classic, and traditional designs, which means trying to find a balance between an "indestructible" (or even ultimately boring) usable design and a creative but unusable design. Remember, ideas take time to grow: rethought, revised, tweaked, refined, and ultimately integrated into your design.
Designers are strongly encouraged to break away from the conventions of traditional box layouts and try new approaches and your own bold and crazy ideas. Showcase your talents!
Figure 23
Figure 24
Figure 25
Figure 26
Figure 27
Figure 28
Single-page layout
Another way that designers often use to impress visitors is the so-called single-page layout: This layout uses a single page to present the content of the website. It does not necessarily mean that these designs are minimalist (following the "less is more" principle). On the contrary, this kind of design is often very complex, contains rich images and vivid animation effects, and therefore takes a while to load.
Figure 32
When the user clicks on a navigation option, the page changes (partially changes), and the new content of http://www.knowsky.com appears in the area where the previous content is displayed. The navigation sliding and scrolling effects in this layout are supported by public JavaScript libraries.
The main advantage for users comes from the simple fact that fewer mouse movements and clicks are needed to get the information they want. Since this approach is so new, it’s a great opportunity for users who may be confused using non-traditional navigation. There are some situations where a "static" version may come in handy or even be necessary; for example you will have to provide another version for search engines and users who have disabled JavaScript.
Figure 33
Figure 34
Figure 35
Multi-column layout
Multiple columns (more than 3 columns) do not necessarily mean a complex design. On the flip side, if designed correctly, multiple columns can be very helpful to visitors because they provide a better overview of the visible navigation options, allowing users to quickly find the information they are looking for.
Over the past few years, we have witnessed an explosion of website content, which has reduced the attention and time users invest on the website (see ReadWriteWeb for details). So, it’s no wonder that designers are trying to find more concise ways to present information, so that visitors can stay on the website as long as possible and find the content more easily.
Figure 36
One way to achieve this is to use a layout with multiple adjacent columns. This idea makes perfect sense. Screen resolutions have increased in recent years (however, this may change if netbooks like the Asus Eee PC become widely available), giving users more horizontal space and giving designers additional space. space to fill in content.
The results show that more and more designers are using more and more columns in their designs. Our research found a strong trend towards these so-called multi-column layouts, typically with a fixed width of 850 pixels on a 1000 pixel screen. Multiple columns are often used in magazine layouts and large projects. In these layouts, grids are often used to ensure structural balance, hierarchy, and order.
When using a multi-column layout, the importance of active white space and between individual columns cannot be overstated. (Active white space is intentionally left blank to better represent the structure of the page and emphasize different areas of content.)
To this end, designers often utilize the "Shneiderman mantra" ("Show the big picture first, show the details later"), by first Give the user an overview of functionality and then provide details on demand - later, when a link is clicked (Mozilla Labs is a prime example).
Figure 37
Figure 38
Figure 39
Figure 29
Figure 30
Figure 31