A look at the popular web design trends of 2013

Original author: Jake Rocheleau
  • Transfer
This year brought new important concepts for user interfaces, open source projects, new hacks and tricks for web designers and developers. Those who are interested in what makes a good design like that have probably noticed sustained improvements. Looking back at least one decade in 2003, you will realize that the Internet and WWW have come a long way.
In this article I want to reflect on 2013 from the most popular web design trends. Some are repeated from year to year, but this year I noticed a peak in designer interest in them and even improvements in these techniques.

Dynamic forms


This was one of my favorite discussion topics due to the amazing progress made with jQuery plugins. I like the demos of many other JS libraries, although jQuery is still my personal choice for any new project.



I recently found a very useful resource that collects jQuery form plugins to improve the experience of interaction. There are other plugins there too, but this actively growing category makes me dizzy with every visit. You will find floating labels , input validation, custom radio buttons, switches, even drop-down menus there. There was never a better opportunity to throw away the usual input fields and create your own, beautiful, interactive form.

Single Page Layouts


Sites that do not have much information are often a single page. This trend has been going on for several years, but it has also developed and incorporated new design trends.

Fixed navigation menus that do not disappear when scrolling through a page have become commonplace. This allows the designer to divide the content of the page into sections, for which the menu is more like a scroll bar for a quick transition between these sections. One-page sites with parallax effect use the same feature plus dynamic elements as a background.

Designers and creative artists with an online portfolio sometimes pull on such layouts. You can show your work and tell something about yourself, significantly reducing the number of HTTP requests. Just look at all the ideas for one-page websites, and you will come up with many other potential ways to create a good interface.

Animated Page Elements


I argue that this is still a growing trend with inquisitive developers at the head. Remarkably, I find on ThemeForest animated pages in many WordPress portfolio site templates. Take a look at Bluap to see what I'm talking about.



Such page animations can be created using CSS3 keyframes and JavaScript, which is used to detect elements in a browser window. This is an entirely aesthetic trend, since it does not create new content and does not improve the experience of interaction, in addition to adding neat visual effects. Plus, not everyone will be able to see this functionality on older computers and mobile devices.

More detailed page animations can often be found on application sites for Android and iOS, since they usually have a one-page layout, the purpose of which is to persuade the user to download the application. I have a hunch that in the future we will see even more such animated effects.

Endless scrolling


When I first encountered him, it was a tough nut. There are several free open source plugins that you can get started with even in content management systems like WordPress. But setting up the bootloader, animation, how many elements will be loaded, and individual ways of interacting with JavaScript disabled will take some time.

However, I believe that users are used to endless scrolling. The Reddit Enhancement Suite has the option to automatically use endless scrolling at the bottom of each page. This is also true for Tumblr and some commercial sites . Using Ajax to split content into pages is better than waiting for each new page to load.



It should be noted that you will need a spare mechanism in case not everything boots up properly. A navigation div with links to each new page helps here, and as soon as this div gets into scope, an Ajax call is triggered (if possible). Endless pagination can extend to more familiar blogs, and even other social networks and social media projects.

Quality typography


Although this trend has been developing for several years, I am still amazed at the sight of all these sites using custom font families. The CSS3 declaration @font-facecan provide access to any secure font stored on the server.

Google provides an excellent Google Web Fonts service . They rarely add new fonts, but at the same time keep all the old ones. The main charm of using Google is that this hosting, regardless of the traffic you generate, does not cost you a dime ( approx. Translator - a coin of 10 cents ). Premium font hosts such as Typekit contain much more extensive collections, but they also have a price tag.



Modern laptops and PCs are pre-equipped with a load of wonderful fonts, throwing custom fonts to the side. We can expect this trend to develop, as more and more users are switching to more advanced systems. Try playing around with a web application like CSS Font Stack to plan different styles for your site based on standard operating system settings.

Vector icons


The first thing that comes to my mind regarding icons is CSS3 web fonts. Font Awesome is an extremely popular library that contains hundreds of unique icons. They can be used as icons or even as glyphs on user interface buttons. You may also like the selection on the Flaticon website .



But the scope of vector icons goes far beyond this ubiquitous, font-based approach. Take a look at this photo icon and this currency icon, both are stylized as the icon of the iOS 7 application. They are created using pure CSS code, and you can change their size if desired. There are many other examples that are very similar to these buttons, and I can only guess how quickly this trend will grow.

Another point regarding vector icons that is worth noting is the use of SVG files. These are the most natural vectors that contain not pixels, but mathematical coordinates that explain how to draw an image at any resolution. You can read more in this article , which digs a little further towards scalable SVG images. Many of these ideas are still new, but are definitely gaining support.

We are going to the year 2014


Every year I reflect on all the emerging trends that I have seen on regular sites. I see in these trends not predictions, but rather patterns that I have noticed over a long time. Web designers are very creative, and the most talented masters of their craft pushed the boundaries to see what can be achieved. Here are a few alternative trends that have captured our attention in 2014.

Custom multimedia


When I first started creating sites, MP3 players were created using Adobe Flash. JavaScript was actually less supported because many browsers left it turned off and there were no powerful open source libraries (like MediaElement.js ).

Video players, such as the one you can find on YouTube, were also created on Adobe Flash + ActionScript. Fortunately, over the years of progress, a better solution has been found combining HTML5 video with fallback options in JavaScript or Flash. The script MediaElement.js, among other options, can be stylized as a classic YouTube video player.



In supported browsers, this player will be built using HTML5, CSS3, JS. Since HTML5 is not supported everywhere, older browsers will switch to an alternative Flash or Silverlight version, which can also be styled in this style. The overall level of support varies, but I hope that over time, new media solutions will become the standard for audio and video playback.

Interactive web applications


Web 2.0 has set the trend for mass user data collection. Databases and server farms have handled the load, so we can see how these sites are becoming more and more famous. I can well imagine the near future, in which simple HTML5 / CSS3 / JS web applications are created to help in various kinds of activities.

Web enthusiasts are often the first to experience these mini web applications. I mean projects like InstantName or GenerateWP . But imagine that these applications spread to real estate, stocks and bonds, cooking, industry, etc. If these ideas become fashionable, we can see an increase in the number of designers creating HTML5 sites that will look like native Android and iOS applications.

Live page backgrounds


Would it be nice to generate CSS3 templates on the fly for a repeating background? What about parallax style elements built using dynamic vectors or PNG images? We can already find many sites using full-screen images or videos - and this may only be the beginning of something much larger.

If developers are truly curious about the unique experience, we can stumble upon a new, vast scope of possibilities. Universal support is always a problem, but the more centralized the W3C standards become, the easier it will be to experiment.

Conclusion


Be constantly busy honing your ideas and getting to know new ones. If you just practice constantly, you will inevitably encounter difficulties, solve them and grow up as a designer. The year 2013 was shocking and joyful for design enthusiasts. I hope to see even more creative energy that we will throw out in 2014.

Also popular now: