Web design trends. Experimental Layout Lab Jen Simmons. Benefits of custom navigation
Ryan McCready, content editor for infographic design service Venngage, talks about what's popular in graphic design right now and what techniques have been ditched this year.
Bold and vibrant colors
Over the past few years, many technology leaders have used muted and easy-to-read colors. So they tried to create a very clear design scheme and show that the elegant and functional future that is usually shown in science fiction films has already arrived.
This method helped the company move to a new stage of development and unify all its applications under one color. As with Spotify, this bold use of bright colors made the brand stand out.
The fashion for bold and bright colors in design comes from Google's Material Design principles. The company chose a flat, streamlined and intuitive design with the addition of "unexpected and energetic colors, as well as functional and eye-pleasing fonts and images."
In general, many current trends in 2017 arose under the influence of Google’s Material Design principles.
We also used them to make this e-book promotional image. As a result, the image became incredibly popular.
If you're having trouble choosing the best colors for your design, read on for some great examples of color palettes. And don't be afraid to use colors that contrast with each other.
Bold font
Bold font attracts readers' attention. You involuntarily pay attention to the large and eye-catching inscriptions.
My favorite example is Wired. It uses different fonts to highlight specific headings and maintain a hierarchical order of information on the page.
Just take a look:
Another good example of using catchy fonts is HubSpot. The text is in the foreground and supported by graphics:
HubSpot understands that every year the amount of time it takes to absorb information from a tweet tends to zero. Therefore, to attract the reader’s attention, they use short and succinct inscriptions in bold letters.
In addition, now more and more people surf the Internet from mobile phones. Due to high-definition screens, there is an increasing need to use bold fonts. So, to retain readers, you need to deliver your content in the right way.
Buffer highlights headlines throughout the entire article, not just at the beginning - making articles easier to read on all devices. I recommend using this approach for long articles - this way you will help readers navigate them.
We applied this method when creating this infographic. The combination of bold font and interesting colors attracts attention:
Fonts from Google Fonts
I've been using Google Fonts for a long time because they're so versatile. If I need to come up with a design for an online publication and then add it to a presentation, I'm confident that all the fonts will work well together. They all look great on any blogging platform or website.
By the way, all 810 fonts are absolutely free! Oh yes, people like free things. They also like things that are very easy to use. Here is one example of combining several popular fonts from Google:
On our website we use Roboto and Open Sans fonts.
Original photos
Every year the amount of content grows, as does the need for high-quality images. To ensure that photographs can last a long time, the authors try to make them as versatile as possible.
There's just one problem: the best generic images tend to become stale over time. If you follow news in the field of technology and marketing, then you are probably familiar with this photo:
It is used in landing pages, blogs, and even in Instagram posts. To be honest, I took it myself for a site I worked on a few years ago. Due to the popularity of such stock images, the originality of graphic content has dropped sharply.
And the need to use clear and perfect photos only made the situation worse.
When a reader sees the same picture for the hundredth time, he thinks that the author of the article did not try to be at least a little original. So why even read such an article?
This is why you should use original images. Stop taking popular pictures, start making your own.
I'm sure everyone on your team has a camera phone. Why don't you use them? Take photos of your office or logo and use those photos.
Find out if there is an aspiring photographer among your colleagues. Give him a couple of days to rent an office - and you will have enough photos for a whole year!
When we created our new website, we took photographs of our employees, and we were very pleased with the result.
Hand-drawn images and icons
Not only the photographs must be original, but also the icons and drawings. Some brands have already realized this and are trying to stand out from the crowd in this way. This approach adds an element of personal and fun to the design.
Some say the trend looks unprofessional and childish, but it's still definitely eye-catching. Like most trends of 2017, it acts as an alternative to the sterile clean design of recent years.
Dropbox uses hand-drawn illustrations throughout. They became part of the company's brand and made it recognizable.
Such illustrations create a relaxed mood and delight the child who lives in the soul of each of us. They make the product look more affordable. They're especially effective at large tech companies like Dropbox.
Another successful example of this approach is the mattress company Casper. Almost her entire site consists of hand-drawn drawings. Here is one of them:
The trend was also picked up by the MailChimp service. In the 2016 report, he also shows similar drawings.
Moz, a company that develops marketing software, inserts illustrations into the header of articles:
Sometimes our love for drawings manifests itself in other projects:
Return to the roots of minimalism
If you were asked to explain to a stranger what minimalism is, you would probably answer that it is when you have to abandon decorativeness in favor of functionality. You'll most likely immediately think of a neutral color palette consisting of shades of black, gray and white.
It seems that the true spirit of minimalism has been supplanted by the use of boring black and white color schemes. It seems to me that this was done on purpose to compensate for the small screen size and low power of mobile devices.
But in 2017 everything will change. Minimalism will return in its true form. Which means there will be more color. Nowadays, mobile devices are as powerful as computers, and some even have better screens.
My favorite example of minimalist design is the Medium platform logo. Its creators were able to combine several different colors and still maintain a minimalist style.
Google made another logo redesign in favor of minimalism and a combination of bright colors. It is noteworthy that it was this company that served as a catalyst for the emergence of many new trends. The designers trimmed the font slightly and introduced a new G-shaped logo look that I really like.
The spirit of minimalism is felt in all this, but the press did not write about it. People have forgotten what true minimalism is. The logo was not colorless and made in a single form, so no one thought that it was made in a minimalist style.
The new logo was bright and eye-catching - while maintaining a minimalist look. After the redesign, people around them began to imitate Google, as they had done before in other aspects.
We ourselves began to use a more minimalist style for the design of our blogs.
The simple image design easily conveys the necessary information.
Using GIFs
Everyone (well, almost everyone) loves GIFs. They help us in conversation because sometimes they can convey emotions better than text.
In addition, no special programs are needed to play them. GIFs are usually small in size and can be embedded almost anywhere.
They are better than videos and images, especially when you want to reduce page load time and traffic. I believe that their versatility makes GIFs an even more useful design element.
I really like putting gifs in the header of an article. Instead of putting a boring stock image there, take a couple of minutes and make a GIF like this one.
You don’t have to make any special creative efforts to do this, but it will definitely attract attention to your post on social networks. Here is another good example of using GIFs in the header of an article.
Two-color images
This is a combination of two, usually very bright or contrasting colors in one image. To create such images you will have to turn on your design skills, but it is worth it.
Only a very skilled designer can make such beautiful two-color pictures. I'm sure I can't create something like this, but that doesn't mean you should cut this technique out of your design plans.
In the era of developing IT technologies, you simply cannot stand aside and watch what is happening. You need to be this happening. In order not to be an outsider, you need to draw knowledge from all possible and impossible sources and keep abreast of all events. 2016 is coming to an end, which means that 2017 is already around the corner and will bring something new to the field of web development. And what exactly, you will read in this article!
Don't be an outsider, keep up with the times.
Bots
Simple web pages are no longer so popular, they are becoming more and more interactive, moreover, after a while our online life will be so simplified by various interactive prompts that we will not have to strain our brains at all. Bots are now widely used and this is just the beginning. Everyone knows the Slack application for corporate communication, and there you can also find a bot that greets you, asks for your name and immediately inserts it into your profile. Bots are popping up in many other tools and applications, ushering in the era of online assistants.
Motion UI
Animation, video, GIFs have long become our everyday life, everything is so lively and attractive, what else does the user need? They are widely used to quickly create CSS transitions and animations to ensure ease of use. The latest version of Motion UI is equipped with an animation batch system, flexible CSS templates with advanced capabilities for full transition and is able to work with all kinds of JavaScript animation libraries. We are more than confident that mobility will completely replace the use of static images.
Adaptability
Mobile first is the slogan of our time, every day every person, at least once (not to mention those addicts who actually live in their hands with a phone) search for information on the Internet, send messages or make calls, so their use should be as convenient as possible. If you are a website owner and still haven’t heard about responsiveness, it’s time to grab your feet and implement it , in order to provide your potential client with comfort in using your website. As you may have already noticed, this is a real must-have in the world of web design and development; in addition, it will help you save on mobile application development.
One page site
Are you confused by sites with a bunch of pages, where there is so much of everything and everything is so incomprehensible? Don't worry, the era of one-page websites is just around the corner. This type of site is very popular among large companies, they are more convenient to use, and it is easier to find the information needed by a user who has visited the site for a specific purpose.
Javascript is on the rise now
Javascript is the future, despite rumors that it has shortcomings and weaknesses. No one disputes that they are indeed present, but what is ideal in this world? Even Mac OS uses JS in its hardware. Moreover, its front-end libraries such as Angular, Node, React are quickly gaining popularity, as well as other smaller libraries.
It's no surprise that Javascript has become an integral part of the standard web development stack, along with HTML and CSS. And this fact speaks for itself.
Parallax effect
This effect is most often used, but not many people know for sure exactly what it is called. To clarify: this is the best way to add 3D layers to your website , it can also be used to add stunning 3D effect.
Trends that will change the world
In this article, we have collected all the promising web development trends that will immediately change the world. But we don’t yet know what trends 2017 has in store for us. Stay up to date with modern technologies and maybe one day you will be so inspired by what is happening that you will come up with something revolutionary yourself?
Every year we learn something new about design and 2016 is no exception. The article we wrote last year was such a success that we decided to make some predictions for 2017, so let's get started!
New article published →← Read and get inspired!Design trends are influenced by media, technology, the fashion industry and, more recently, usability. The trend appears slowly, gradually, penetrating all areas of design, and then disappears in exactly the same way. Most design trends last no more than one or two years. Design in 2017 will continue the trends that started in 2016 with some new changes added, this feeling is well known and familiar and you may have noticed it in the last couple of years. The main influence remains Google's Material Design, with minor changes.
What web design trends await us in 2017
01. Semi Flat Design
For the past few years, flat design has been the most popular in the web design market, but now, under the influence of Material Design, it is becoming more and more one-dimensional. This transition starts with some light shadows, making it a semi-flat design. The evolution of flat design from the minimalist style is moving into new developing technologies. The flat design is still there, but it has undergone some improvements.
Smooth shading adds depth and complexity without ruining the feel of the flat design. This is a new feature added to the flat trend and will continue to develop in 2017.
Project: Resource | UI/UX Tool for Web Services
Authors: Ruslan Latypov; LS Graphics; Anton Mishin; Valery Gurkov
Project: Listener's Playlist
02. Moving photographs (Cinemagraphs)
Cinemagraphs are not those GIF animations that we see everywhere on the Internet. Cinemagraphs are still images with minor elements of movement. This technique makes a simple photo more realistic.
03. More 3D
3D is definitely moving in our direction and we will see this influence in all areas of design. With VR/AR technologies picking up pace quickly, this field is developing quite quickly. 
Project: LUV.IT
Project: Open Annual Awards
Project: Air Max '17
Project: NIKE F.C. | 3D Golden balls in the real world
Project: Better You Brand
04. Animations
Animation is more and more present in web design, the format can be any - WebGL CSS, GIFs, SVG or video. Animation has been one of the most important web design trends of the past year, don't be shy about using it.
Project: Nickelodeon Kids Pick The President
Project: AR Virtual Fitness Coach App
Project: ZH OURO- Rio 2016
05. One-page sites/landing pages
In 2017, we will see the growth of one-page sites due to their potential for marketing purposes and their ability to better target visitors.
If you need a landing page, you can order it from me →
06. Geometric Shapes, Patterns, Lines and Circles
This trend started in 2016 and will definitely continue in 2017. You can personalize your site by simply adding some modern shapes, either flat or with a soft shadow.
Project:
Project: DRAP.agency Branding
Project: Pfizer - Active and 50+ for The New York Times
07. Courageous Colors
Use bright colors to stand out. Material and flat design go well with bright colors. You can use the color palette provided by Google to select and combine the colors you want.
Project: Edris — Logo Designed by MiLo
Project: Rendered - Responsive Demo Website for Adobe
Project: b2mach
08. Innovative Scrolling and Parallax
This is a great visual idea that will add uniqueness to any website. From multi-layer parallax to video parallax, everything is possible with the D.ex Multilayer Parallax plugin. This product was developed entirely by the Milothemes studio under the direction of Loredana Papp and Mihai Baldean. It is available for purchase on Envato Market / codecanyon.net
This is a WordPress plugin that allows you to make beautiful Parallax blocks with more than one layer. Be creative and combine layers in any style you want. We've made 12 different examples in the plugin guide to make your first introduction to the wonderful world of parallax easier. Play with layers!
09. Color Transitions
Gradients are one of the biggest trends right now. The trend began to gain popularity in 2016 and continues to grow rapidly after large brands, such as Instagram, decided to change their logo and images from one color to a multi-color transition (gradient). From logos to buttons or picture overlays, this trend is everywhere.
10. Mobile Browsing (Responsive Design)
2015 and 2016 saw a significant increase in views from mobile devices. Tablets and smartphones are now the preferred choice for browsing the web, surpassing desktops and laptops - and the trend continues. Any website that does not have a responsive web design needs to be updated ASAP!
Project: Responsive Website Animation
11. Custom Graphics and Illustrations
Stock photography is still quite popular, but a new trend has emerged in 2016 and will continue to grow in 2017: the use of custom graphics and illustrations. If you want a unique, beautiful website that any visitor will remember you, collaborate with digital designers. This means fewer stock photos and more original, unique images.
12. Creative Use of Neutral Space and Grid
In recent years, web design has been more inclined towards orderly, organized columns and grids, but in 2016 we could see a significant shift towards irregular layers and ultra-modern designs.
13. Tell stories (Storytelling)
Websites are now starting to tell stories to win over the customer. People tend to remember stories more than reading simple (dry) information.
More video about storytelling from Business of Youth:
14. Gradual loading of content (Lazy Loading)
Lazy Loading delays the loading of images on long web pages, this allows information to appear at a specific point while scrolling down, which reduces page load time.
15. Split Content
Split content is now popular in responsive web design; it is splitting the screen into 2 or more parts. Such a site split screen will show the viewer several equally important messages in one site block. This trend appeared in 2015, but in 2017 it will continue to grow and, most likely, you will see it on many sites.
16. Full-Screen Forms
There's no need to navigate to another page to fill out a form because new sites use full-width forms that adapt to responsive design.
17. Videos Everywhere
Video content has increased over the past year, and people have become more demanding of high-quality videos. A video on a website can be short and auto-repeat, showing a product or a large-scale cinematic project that will keep the viewer involved in the story.
Project: Hillsong
18. SEO is important! (SEO is Important)
SEO is very important for a website, so a beautiful website without good SEO will remain an outsider.
19. Hidden Navigation
Hamburger menus create a lot of debate for and against how difficult it is for users to find the menu, but one thing is for sure - this trend is here to stay and people will eventually get used to such menus.
20. Tiny Design Details
Focus on details is very important this year. Small details such as navigation points, etc. Focusing on the small details will make the work complete.
Project: Barometa - Next-generation Job Platform
21. Logo Design Trends
21.1. Minimalism
All the big brands are moving towards simpler, minimal designs and this trend is here to stay.
21.2. Hand drawn
This trend has been in the spotlight for the past few years and this style is great for hipster businesses. It is used for hair salons (barbers), cafes, restaurants, art and craft items.
21.3. Negative space
This is an old trend, but we've seen it pick up steam over the past few years and will continue to grow in 2017, so it's definitely worth taking a closer look at.
21.4. Cropping
It doesn’t get more minimalist than this trend. It shows only what is enough to indicate in the logo to recognize the company, and nothing more.
21.5. Geometry
This trend is old school, but it's one of those styles that will never die.
21.6. Line art
This trend is popular among new generation businesses
Authors: Sam Healy; Andrea Schlaffer; Jacek Janiczak
21.7. Patterns
Patterns are the new trend, and this repetition is an unusual way to make a business memorable and differentiate it from its competitors. This original direction can also be used in the presentation of logos.
Authors: Nick Edlin; Stanislav Aleynikov; Lucas Gil-Turner
21.8. Animated logos
Motion design is a popular trend today, and we can see it in all areas of design.
Authors: Javier Miranda Nieto; The Woork Co
21.9. Vintage
Vintage style is still in the game. Even if this trend has been popular for a long time, it still has something to say.
Authors: Roman Dodonov; Mingo Ideas Up; Will Try Further
21.10. Color Transitions
Gradients are everywhere this year—and logos are no exception.
21.11. Illustrations in logos
Illustrations are a good way to create a unique and personalized logo for your business. They are becoming increasingly popular this year.
Authors: Bodea Daniel; Jacek Janiczak
21.12. Photography in logos
The combination of pictures and typography is very popular now. They work very well together and it creates a contrast between them.
22. Typography Trends
22.1. Big, bold & beautiful typography
Typography may be the most important element in creating stunning design. This year the typography will be bold (bold) and large with prominent headings.
Authors: Alexander Laguta
Authors: Quim Marin
Project: Baugasm Series - Pack 4
22.2. Gradients/color transitions in typography
Gradients are without a doubt a trend today, and you will find it in typography as well.
22.3. Visual hierarchy
Hierarchy in typography is important in any design direction. Font size and width can easily indicate which words or headings are prioritized, so use this factor when creating your texts. You should also remember that you can achieve a clear visual hierarchy through text placement and color.
22.4. Tiny Typography
Very small text is usually surrounded by an opposing color space, but you can create a visual difference between the color or image to make the text stand out. You can also use animation to help your text stand out.
Authors: Slava Oleinik; Bahaa Samir; Witty Digital
Project: Baugasm Series - Pack 4
22.5. Animated Typography
Animation is used everywhere now, and typography is no exception. If you use motion software, you can't go wrong this year.
Project: Gotham Pro Animated Typeface Free
22.6. Typography meets photography
The combination between text and photography can produce excellent results. Check out these great examples.
22.7. Geometric shapes and typography
Geometric shapes can work well with typography to create a beautiful design.
22.8. Font pairing
Use two or more fonts together. This is still trending in 2017.
———————————
It's no secret that the IT industry is developing by leaps and bounds. New technologies, new hardware, new projects. All this has not spared web development either. Nowadays the sites are far from being the same as they were at least a couple of years ago. Quite a lot of things have changed, and now a little more detail.
Using a video background
It would seem that the background has been in use for a long time. But it became a truly significant fragment of the site’s interior only this year. For many users it creates a real “wow” effect.
An example of a good implementation of a video background - http://globalmonitoring.ru/
Parallax effect
Another seemingly prosperous concept, but it has only recently begun to be applied everywhere. If anyone doesn’t know, this is a way to add volumetric layers to a website and make them move as you need. In other words, add more interactivity.
Example - https://www.grabandgo.pt/
JavaScript and libraries
Speaking of interactivity. Have you seen at least one website without js in 2017? me not. And it’s not even about js itself, but about its libraries. Yes, jQuery is a cool thing, but all the top front-end developers have already switched to react.js, angular.js, vue.js and other libraries. I'm going to learn one of them myself in the future (probably vue.js).
Where did you want to go without js? All these jumping elements, darkening, smooth transitions, etc. - all this is conveniently implemented through scripts.
Adaptability
Something that is worth talking about separately, and we will definitely talk about it. Adaptive website design is not even a 2017 trend. This is a general trend in recent years. As a user of one of the Runet freelance exchanges, I see requests every day like: “Create an adaptive website” or “We already have a website, we need an adaptive one” and so on. People understand that now humanity spends much more time on smartphones than on a computer, so creating an adaptive website (with the Mobile First principle) is a very important component of creating a website in principle.
Bots
Probably the most interesting point in this article is bots. Nowadays, few people need simple pages. Give everyone interactivity and liveliness to the site. A bot is a kind of assistant that is already being actively used. The simplest examples are VKontakte and Telegram bots, which themselves send you any information upon request or without it. This is very convenient for administrators of the community where the bot operates. Everything is fast, beautiful and automated.
Every year the pace of life increases, and with it the amount of information grows. Users are spending less and less time studying websites, while the number of demands placed on them is increasing. Tools for attracting attention that were at the top a year ago are losing their effectiveness. To stay on trend and create turnkey websites that attract customers, web designers should take into account the main trends of 2017 while working. What will they be like? Let's look at it in this article.
Website design trends 2017:
- Single page sites
This trend is becoming more common thanks to mobile devices. All information is placed on one page, which is convenient to scroll through on your phone or tablet without using clicks.
- Scrolling
Still an excellent solution for sites with the same type of content. But do not forget that it adds weight to the page and complicates the search among already covered material, so it is not recommended for creating online stores. To optimize work, you can use a combination of classic navigation and scrolling.
- Minimalist design
- Bright colors
The popularity of bright colors is growing. Use more palettes and shades if you want to keep up with fashion. To create freedom of space and a feeling of air, you can use contrasting shades. Different shades and gradients of colors will help you better differentiate the content they highlight.
- Typography
Fonts are still a strong graphic element and play one of the main roles in creating the aesthetics of a web page, displacing other elements. A good, colorful headline also looks great on tablets and smartphones and helps convey an informational message to the user.
- Animation
Small animation elements and interactive design attract attention, make the site more interesting and improve the user interaction with it. And the development of JavaScript libraries makes it easier to create such pages.
- Video
Widescreen background photographs are being replaced by widescreen videos. Like animation, it not only creates interest on the part of the user, but also allows you to bring the page to life. The main thing here is to use a high-quality image that matches the overall style of the site. Video helps not only to attract the viewer’s attention, but also makes it possible to convey an informational message to him, for example, talk about the company.
