THE WORLD'S LARGEST WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

W3.CSS Trends


Web Design Trends 2016

Every year you will see new web techniques and trends.

On this page we bring you some of the most relevant web design trends.


Large Hero Images

"Hero image" is a term used for a specific type of web banner.

A hero image is a large image, placed in the front of a web page. It often consists of both an image and some text, and it can be static or a rotating list of images.

The purpose of an hero image is to present the web site's most important content.

boat
Sailing

Brought to you by Captain Hook

Welcome to Sailing

Sailing comprises wind propulsion of a craft by means of sails and steering it over water, ice or land, depending on the type of craft. A sailor manages the force of the wind on the sails by adjusting their angle with respect to the moving sailing craft and sometimes by adjusting the sail area. The force transmitted from the sails is resisted by forces from the hull, keel, and rudder of a sailing craft, by forces from skate runners for an iceboat, and by forces from wheels for a land sailing craft to allow steering a course on a point of sail with respect to the true wind. (Wikipedia)

Try It Yourself »


Flat Design

The flat design trend started with the flat design of Windows Phone 7 and Windows 8:

Windows

One problem with flat design is interactivity: To understand which areas are clickable.


Almost Flat Design

Almost flat is a newer alternative to the original flat design.

Almost flat acquires more depth, complex shadows, and dimension.

Almost flat design often looks attractive both on desktop and mobile versions:

Icons

Material Design

Material Design uses elements that remind us of paper and ink.

The elements have realistic shadows and hover effects.

Google released Material Design in 2014. Today it is more mature (with better documentation), and since we might have reached the peak of flat design (with almost flat), many designers are expected to go for Material Design.


Full Screen Input

More and more sites are using full screen for inputs like signups and logins, instead of using only a small part of the page.

Full screen often uses a screen overlay or modal instead of redirecting to a new page.

X

Class Registration

Try It Yourself »


Cleaner Logos

Cleaner logos is a result of the popularity of flat design:

Google
Google

Cards

Cards are everywhere on the web today.

Most typical cards are rectangles with an images and some text.

For organizing headlines, images, and text on an equal plane, cards are the most common structure in web design.

Cards can be small or large, with or without pictures, and with or without shadows:

Avatar

John

Architect and engineer


John Doe

1 new friend request


Avatar

CEO at Mighty Schools. Marketing and Advertising. Seeking a new job and new opportunities.

+

Header

Some text.. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Footer

Fjords

Trolltunga

The Troll's tongue in Hardanger, Norway


Mobile First

Historically, web designers have developed web applications for computers first (desktops and laptops), and then added responsive web design to make sure the web looks good when viewed on a mobile (tablet or phone) .

This trend is now shifting towards designing for mobiles first, and then add responsive design to make a site work on desktops and laptops.


Single Page

The web design trend shifts from regular clicking to vertical scrolling.

Scrolling allows users to see all the web content on the one page.

This single page technique has been used by social networks a long time, until somebody saw that it would suit other kinds of pages as well.