Blog

Happy Vishu

18 August
2015
New Trends in Web Designing By, Appeonix


2014 is turning out to be an iconic year for web design, as the trends which have come to light so far are likely to evolve into standard practices. We bring you the top 6 web design trends of 2014, which we believe will linger on long after the year has passed.

1. Smarter responsive design


The year 2013 saw widespread adoption of responsive design by enterprise websites and web publications. 88.5% of high traffic websites have adopted responsive design to cater to the large audience of mobile and tablet users. Responsive design remains the #1 trend in 2014, and designers are attempting to make responsive websites viewable on screens as small as smart watches and as large as smart TVs.


The current trend in responsive design is focused on creating intelligent responsive websites. Previous generation of responsive websites were built with the objective of making content readable and navigable on small screens. However, current generation responsive websites are characterized by clean content centric design, smart side bars, and intelligent content filtering which hides ancillary content when viewed on small screens. Responsive websites have also become faster and optimized to work seamlessly on HD/non-HD displays.




old responsive vs new responsive




2. Flat design


What’s happening in the field of web design right now is reminiscent of what happened in the field of architecture more than 100 years ago. At the turn of 20th century, architects started embracing the principals of modernist design which decreed against the prevailing practice of making modern structures look like ancient monuments. It was felt that unnecessary ornamentation of structures led to compromise of purpose and functionality. As modernist architecture became mainstream, buildings became taller, stronger, spacious and better suited for modern living.


Until recently, websites were sporting 3D like buttons created using bevel and gradient effects. Drop shadows and gradients were applied to side bars, menus and images to create a perception of depth. The practice of creating designs with 3D perspective served no practical purpose, but led to browser compatibility issues and rendering errors especially on small screens.


Towards the end of 2013, websites with flat design started appearing on the internet and the trend gained momentum in early 2014. Flat design refers to the concept of creating websites without unnecessary 3D styling. It helps in providing a great user experience across all screen sizes and eliminates rendering issues which are frequent found in non-flat design.


Example of flat design



3. Fixed navigation


Fixed navigation has already become a standard practice in web design. It makes navigation links accessible even when the page is scrolled beyond the fold.


The navigation bar remains fixed at the top of the screen, so users can switch to another page without having to scroll back to the top. Fixed navigation enhances user experience especially on small screens where pages tend to be longer.


Earlier implementation of fixed navigation required diminutive headers to compensate for loss of screen real-estate. However, designers quickly managed to out-step this limitation by building rolling style navigation. This approach allows designers to create standard sized headers with an integrated navigation bar which automatically detaches from the header and sticks to the upper edge of the screen when the page is scrolled beyond a certain point.


Example of rolling style fixed navigation




4. Custom typography


The move from skeuomorphism to flat design has put typography on the center stage. And, designers are increasingly using custom typography to lend class and personality to websites. Use of custom typography is also seen as a branding exercise.


Custom typography has been in trend from the start of 2014, and designers are experimenting with different typography styles to create unique typography fonts.


Following typography styles have become popular in 2014:


Handwritten typography


Handwritten typography is composed of letters of irregular size and weight. This form of typography provides an open ground for creativity – enabling designers to produce attention grabbing text elements for headers and logos.


Flat design typography


Typography created using letters with clean lines and even strokes is highly compatible with flat design because of its simplicity and minimalism. Heavy and geometric fonts are used extensively for flat design typography because they create high impact despite their inherent simplicity.


Mix and match typography


This form of typography is created by combining a bunch of fonts that go well together. Mix and match style typography is becoming popular in 2014, because it allows designers to create a highly artistic look.


Typography styles popular in 2014




5. SVG Images


Scalable vector graphics (SVG images) have been around for a very long time, but only recently have they started appearing on websites. SVGs are image files which can be scaled to any size without causing loss of quality. The prominent reason for growing popularity of SVGs is that they are naturally compatible with responsive design, and render perfectly on small as well as large screens.


Designers are also using CSS to create interactive vector infographics and illustrations. The potential of SVGs has just been tapped, and vector imagery will continue to be

in demand in the foreseeable future.


JavaScript SVG libraries




6. Parallax scrolling


A decade ago, web designers were creating Flash intros to wow users. Although pure gimmick, Flash intros did enjoy their share of limelight, and in 2014 we see an upsurge in parallax scrolling websites which means that wow factor is back in trend.


Parallax scrolling websites create a visual perception of motion as the user scrolls through the page - making the journey through the page a delightful one. Unlike Flash intros, parallax scrolling is not pure gimmick. A well planned parallax website tells a story by presenting powerful imagery and typography amidst mesmerizing parallax motion.


Example of parallax design



In near future, we will surely see more of parallax scrolling as it provides a great way for established brands to tell their story.





Author,
Appeonix Creative Lab