With the release of iOS 7 and Windows 8, flat minimalist design has become the normal and websites will increasingly follow this design trend towards simplicity. Flat designs are minimalistic and spacious by design and refrain from overt embellishments such as the recent ribbon and fabric trend and polymorphism where an interface is made to look like a physical objects interface with buttons, knobs and dials.
Typography and Vector Graphics
Icons are now increasingly being displayed using a font rather than individual graphics saving on downloads and allowing them to be scalable and animated.
The Scalable Vector Graphics (SVG) can also be used for fonts, and is the format of choice when creating icon fonts with custom glyphs. This format has been around for many years but only recently has been supported by the majority of browser versions in use. Being a vector file format it can be easily scaled with no loss of resolution which makes it the ideal format for use with responsive design.
No longer tied to Flash players, web video is making a comeback with full screen video backgrounds and native browser support. While cross browser support is still problematic, browsers can be presented a choice of videos to display encoded in the browsers preferred codec. The free WebM standard is gradually gaining support, however Microsoft and Apple who hold parents in the rival H.264 standard do not as yet support it directly.
Parallax and Lazy Loading Effects
Parallax is the effect that when used properly gives a sense of depth to a website. It works by scrolling multiple layers of content at different speeds with the foreground scrolling faster than the background. While not a new concept, (it was used in the early 80’s arcade game Moon Patrol) it is a recent phenomena in web design.
Lazy loading effects are where content appears to fade or slide in from the left or right as the page is scrolled giving the effect that they are being dynamically being added. This animation can make a page seem very active with content sliding into place.
Fixed navigation bars are the latest design trend. For a long time they have been avoided as they limit the viewable area when scrolling. However enhancements to CSS allow minimising the height of the navigation bar as the page scrolls. Techniques to automatically expand the navigation on a click, touch, hover or when scrolling to the top of the page make this layout an effective way to keep the main navigation always on the screen.