Although sometimes going against the flow is the only way to achieve success, in web design following the trends is a ‘must’ if you want to be paid.
If you look at the history of web design trends that we reviewed in one of our articles, you will see that most of them are not being used anymore. New trends appear every year, replacing old ones or merging with them to create something completely new – just like in fashion. Some of the changes are catalyzed by technical progress; some are influenced by real life trends. It is extremely important for web designers to trim their sails to the wind in this quickly changing business.
We gathered 20 of the most popular modern trends and examples of their application in WordPress themes to present to you a concept of the web design world of today.
1. Multipurposeness
Today, being a Jack of all trades is a desired feature for any product to sell well. It’s always easier and cheaper to target several categories of buyers at once, than to develop and promote several products. Need proof? Simply take a look at the market for mobile phones. How long has it been since you’ve seen a single-purpose mobile device? The same situation relates to the market of WordPress themes. Multipurpose ones are able to satisfy a wider range of users, requiring less effort.
Example: Monstroid
View Live Demo or Get More Info
2. Minimalism
“Content precedes design. Design in the absence of content is not design, it’s decoration.” — Jeffrey Zeldman, famous web designer.
If you delve into the web, you’ll find plenty of quotes about importance of the content-first approach. Minimalism pushes this approach to the extreme, making content the only visible part of the layout. Is it wise at all? Quite often – yes. There are many examples of successful minimalist designs all over the web. Perhaps you just haven’t noticed this feature, because it is literally invisible.
Example: Glider
3. Flat design
Flat design is an extremely popular minimalist UI genre based on simple geometric forms. Flat design is devoid of drop shadows, gradients, textures or other elements from the world of things – it delivers pure functionality. That’s why some call it sterile and lifeless. But the fact remains that everything tends towards simplification, and the only trend that can outrun flat design is absolute minimalism.
Example: Farben
View Live Demo or Get More Info
4. Large images
Large images can be used in different ways. For instance, they can be a foundation for hero images – oversized headers consisting of one large image and a minimum amount of text and menu elements. Such hero areas can fill the entire above-the-fold expanse of a website, similar to magazine covers. You can place large images between pieces of content as separators, or as post previews.
Example: Paggani
View Live Demo or Get More Info
5. Parallax effect
When you scroll a web page, some of the background images move at different speeds, creating the illusion of depth. It is called ‘parallax scrolling effect’. It appeared in 2D side-scrolling video games in the 80’s. Nowadays this effect is combined with full-size photography and videos to add motion to the design. Despite its being a minor trend, it can be seen more and more often, even in minimalist designs.
Example: ProIndustry
View Live Demo or Get More Info
6. Mega menus
Constant increase in website complexity necessitates improving the navigation. If your website consists of 5 pages, and one of them is a homepage, it’s OK to have a simple dropdown menu with several items. But large corporate websites and online stores should use every opportunity for increasing conversion and user engagement. Luckily, there are plenty of solutions that allow designers to build and modify Mega menus. For example, Cherry Mega Menu plugin for WordPress.
Example: 3D Side
View Live Demo or Get More Info
7. Card design
Like many other trends in this article, this one has been introduced by a large company spending a lot of money on testing and usability research – Twitter. Card-based design is a convenient way of presenting polytypic information together – images, text, and supplementary buttons.
Example: Pronto
View Live Demo or Get More Info
8. Mobile-first
Since Google introduced its Mobile Algorithm, it has become much more difficult for non-responsive websites to stay afloat. The main difference between responsive and mobile-first approaches is that mobile-first websites not only fit mobile devices, but also provide perfect mobile usability. This applies to button sizes, spacing and font sizes. Since it is almost impossible to estimate mobile-friendliness objectively, Google launched a specific online service for this purpose.
Example: Optimizer
View Live Demo or Get More Info
9. Vintage stylization
Some websites use nature-inspired and handmade-looking elements to add a touch of homeliness to their design. Such elements as hipster X-logos, embroidered buttons, and floral patterns, are still viable, regardless of their roots in skeuomorphism.
Example: VRYN
View Live Demo or Get More Info
10. Video backgrounds and areas
In the age of broadband Internet connections and lightning-fast download speeds, real-time video streaming is not a problem anymore. That’s why many companies incorporate video ads directly into their designs, without using external video hosting services, like YouTube. Of course, you can’t just upload a movie in HD to be shown on your homepage – only pre-compressed videos are used.
Example: Fishing Club
View Live Demo or Get More Info
11. Monochromatic palettes
‘Monochromatic’ doesn’t mean just shades of gray. Today, by this word, designers mean usage of only one color family for the entire design. For example, a design using only colors in a range from beige to chestnut would be considered monochromatic. If your company has a branded color, implementing a monochromatic design will be a smart way to highlight your identity.
Example: Farm Fresh Meats
View Live Demo or Get More Info
12. Material design
And here comes the latest web design trend – material design. Implemented by Google, it quickly became a core trend of 2015. You can see it just about everywhere: in website designs, logos of Google services and in app icons. Material style is the next stage of flat design evolution. We don’t believe that it will replace its predecessor. Most likely, it will just develop into a separate style and live its own life.
Example: Polymer
View Live Demo or Get More Info
13. Inclined lines
In modern web design, areas with shapes other than rectangular are popular. Besides circular images you can encounter design elements based on page-wide inclined lines. Areas designed like that visually ‘slice’ the page. Such shapes look as though they are always in motion. That’s why such choice of design is perfect for websites dealing with sports equipment, design and photography. Another peculiarity of this trend is that it can be combined with other trends – for example, with parallax or video background, providing unlimited variations of unique looks.
Example: Perth
View Live Demo or Get More Info
14. CSS-based effects
CSS3 opened a whole New World of visual effects that do not require usage of animated GIFs and, therefore, provides no negative Impact on website performance. Most of these effects are animations activated on mouse hover or click. It is not recommended to overuse such effects as oversaturation with animations can scare off your visitors.
Example: Quartex
View Live Demo or Get More Info
15. Unusual typography
With thousands of free and paid fonts available on the web it has never been so easy to create a unique image of your website. When it comes to body text, it is better to use regular typefaces for readability reasons. But titles and logos can be made using the most creative fonts you can find – provided that they fit your style. Here is a WordPress theme that relies greatly on its typography.
Example: Wedding Planner
View Live Demo or Get More Info
16. Image clusters
If you attach many smaller photos of different sizes and shapes together, you will get an area completely covered with photos. The most amusing thing about such clusters is that they can be of any size. There are website designs with no visible background at all, with the entire layout covered with photos. Some images can be additionally enhanced with such effects as parallax, on-hover text overlays, fading or fogging. Check out this example of one such design:
Example: Gulliver
View Live Demo or Get More Info
17. Mosaic patterns
Multiple polygons put together create stylish mosaic patterns that can be used for backgrounds or separate website areas. They visually imitate gradient textures, remaining absolutely flat. By combining polygons of different colors you can visually highlight particular areas of your website.
Example: NightClub
View Live Demo or Get More Info
18. Ghost buttons
Transparent buttons with a thin outline are usually called ‘Ghost buttons’. This design feature is widespread in photography-oriented and minimalist designs. Being inert, they don’t interfere with the general design and don’t violate its integrity in layouts with large photos. Ghost buttons can be applied to any modern style, but they will look a bit alien if incorporated into a grunge or similar design.
Example: Himalayas
View Live Demo or Get More Info
19. Contrasting elements
Another design trick aimed at increasing conversion is usage of contrasting elements. Not only do eCommerce stores require it – you can’t even run a successful email marketing campaign on your blog without good conversion. Highly contrasting call-to-action buttons have proven their effectiveness in dozens of A/B tests. But it’s up to you to detect the most effective color for your conversion-oriented elements: there is no universal solution for every occasion.
Example: Zerif
View Live Demo or Get More Info
20. Mixed wide and boxed layouts
Several years ago you would have been offered a choice between two types of layouts – boxed and wide. Now you can encounter designs that combine both of them. Such an approach helps direct visitors’ attention to specific areas of your website. For example, you have a page-wide slider and a boxed product listing below. This part of the layout will serve as a ‘bottleneck’, so a visitor will involuntarily narrow his field of view to this particular content block. If you were to place some important information here, it would be much more visible than in uniform layouts.
Example: Natural Foods
View Live Demo or Get More Info
***
Not all of the trends mentioned above are equally popular. Flat design is a global trend and is much more common than, say, creative typography that is not as widely applicable. But if you want to be a true expert in design, you should be aware of all of them.
How do you see the future of web design? Share your thoughts with us in the comments below.
Note: That’s great if you know how to build a WordPress website with a WordPress theme. If not, you can always check a free guide for WordPress beginners. Such guides are perfect sources of information for people wishing to set up WordPress sites.
The post 20 Modern Web Design Trends Embodied In WordPress Themes appeared first on Web Design Blog | Magazine for Designers.
via http://ift.tt/1P002TP
No comments:
Post a Comment