Website design trends that have emerged during 2016 and expected to be refined during 2017
Website design trends today follow very different trends than they did just a year ago. However, a “trend” doesn’t necessarily mean “new.” Many new design trends come from the tastes and preferences of designers and users in design and usability. What makes those changes possible is improvements in technology. Technology is the driving force and keeps design moving forward. Here are the trends that have emerged during the last year and look set to be further refined during the year ahead. The web landscape for 2017 will continue to embody the latest web design trends.
Parallax
This is a scrolling effect whereby background images pass through the viewport slower than foreground images, creating a sense of depth with the feeling of being immersed in the site. The graphics on the screen look much more realistic and compelling.
Flat design
A wave of design emphasising the use of stylistic elements that give the illusion of three dimensions. These include effects such as drop shadows, gradients, textures and so on. The flat interface is centred on a minimalist use of elements; typography, and solid colours. Flat design allows the creation of optimised, streamlined and thus more efficient interfaces. It lets you communicate faster while making it visually appealing and digestible. It makes it easier to design responsive interfaces. With flat design, elements, websites can load quicker and rescale easily. Flat design looks slick and sharp on high-definition screens.
Narrative
Storytelling is the conveying of information using words, sound, and images, often by improvisation or embellishment. Essential components of stories and storytelling include plot, characters and narrative point of view. Social Media’s Snapchat is a perfect example; it lets you easily talk with friends, view live stories from around the world, and explore/discover. Life’s more fun when you’re narrating in the moment!
Animated effects
Hover / animated effects are achieved using jQuery or CSS (coding languages). You encounter them when you place your cursor over a button or an image. The effects can vary, everything depends on the coder’s skill-set and imagination. Animated effects breathe life into the static layout, they interact with the user and reinforce site navigation.
Typography
Typography is essential in setting the tone, theme, and message of a website. It is the art-form and art of organising type. It involves the considered and deliberate selection of typefaces, point size, line length, leading, tracking, kerning, colour and any other factor that can impact a design. Legibility should be the primary concern of the designer. Consistency is key in the use of typography in web design. Only a few type fonts can be used safely in websites, assuring that every viewer will see them as the designer intended. Cloud services, @font-face and Type-kit, have been developed to allow designers a wider library of assured fonts.
Card layout
Cards displaying content are invariably composed of a photo, text, and a link about a single subject. They may display content containing media of varying sizes, such as photos with captions of variable length. Card or grid layouts are an excellent means of content presentation. Pinterest is the best example of this growing layout trend.
Hidden main menu
With a growing number of designers favouring a minimalist layout, hidden menus save space on the page and help to keep it clean and clinical. Designers use a ‘hamburger’ icon which helps the user understand where to click to view the menu items. The main menu may fly out on the icon click or even open full width of the viewport. Designers are demonstrating their creativity with the seemingly endless possibilities.
White space
The marks we don’t make are as crucial as the ones we do make. White or “negative” space is the portion of a page left unfilled: margins, gutters, and space between columns, lines of type, graphics, figures, or objects drawn or depicted. White space should not be considered merely “blank” space. It is a critical factor, enabling the objects in it to exist; the balance between positive (or occupied) and the use of negative space is paramount to aesthetic composition. A page congested with text and images with little white space will appear cluttered, and the impetus of the design message is lost. A generous proportion of white space can give the page a classic, elegant, or rich appearance.
Big background images
Large high definition (retina ready) images are one of the best ways to grab a user’s attention. With advances in bandwidth and data compression, users won’t be deterred by slow load times.
Lazy loading
This is certainly a very welcome trend. It is an efficient way of loading elements on to a web page. Text and images are only loaded as the user scrolls down the page. Users enjoy this method too as they are not made to wait until all the content has loaded and the objects fit into their viewports almost immediately. With the growing popularity of long pages, with parallax scrolling, this is an extremely useful option.
Background video
A simple animated background can add greater visibility to a site but should be used in moderation, or it can be very distracting to the user. Background images must be meaningful and enhance the design message of the page. The post-production treatment of the video must also be considered. Subtle and straightforward is almost always the most desirable way to go.
Social engagement
There is no question now that social media is huge and with more platforms emerging every year, it is here to stay. Community-based tools such as WordPress’ Comment feature was previously heavily used, but now users are living their thoughts and feelings on the social media portals themselves. The facilities are designed in a way where content can be composed quickly and shared in an instance.
Ad abandonment
Website owners realise that quality content is king. There has been a noticeable shift away from ads that otherwise take up valuable real estate on the page. Over the past few years, readers have become blind to ads within sidebars. Homepages have moved from being a banner for the content and ads to being eye-catching landing pages with whizzy visuals. The ratio of visual-text has increased. This requires a versatile, fluid layout to accommodate them.
Final comment
These are just a few of the web design trends that will continue to be refined, and more prominent throughout 2017. The popular choice is not always the best, but they are useful tools to have up your sleeve. Furthermore, the process of inventing new ways to stand out from the crowd can only help pedal a stylistic concept, and if favoured and used enough, can spark a trend.
