Blogweb design trendsuser experience design

For Better or Worse: 5 Web Design Trends That Defined 2016

flat designmaterial designsemi-flat designghost buttonsresponsive designgrid layoutshand-drawn illustrationsvanishing form fieldsskeuomorphismcolor contrastaccessibilityform designaffordance

The start of a new year is as good a time as any to take stock of where web design is headed. Here's a look at five trends that were shaping the industry going into 2016 — the good, the bad, and the occasionally frustrating.

Flat Design Gone… Flat

Flat design had been riding high for years, and 2015 was no exception. The minimalist aesthetic — sharp lines, clean visuals, generous whitespace — earned its popularity honestly. But it carries real drawbacks that the industry was beginning to acknowledge.

The core problem: in the absence of skeuomorphic features at key touchpoints like call-to-action buttons, flat design leans heavily on colour contrast to build hierarchy. On a page packed with actionable elements, that produces a dizzying spectrum of colour that fatigues the eye — and worse, excludes a meaningful segment of users. Approximately 8% of men worldwide are colourblind, compared to only 0.5% of women. Designs that rely purely on colour differentiation to signal what's clickable effectively shut those users out.

Without gradients or depth cues to guide the eye, users are left guessing where to click. That's not a minor UX inconvenience — it's a fundamental affordance failure.

The response to these problems was semi-flat (or "almost-flat") design — best exemplified by Google's Material Design. By reintroducing subtle gradients, layering, and light animation, it preserves the visual discipline of flat design while restoring practical usability. The ongoing shift from retina to 4K displays reinforces this direction, reducing dependence on colour and linear shapes and opening space for designs with more genuine affordance.

Almost flat design example

Funky Flat: Ghost Buttons

Given the pressures on flat design, the rise of ghost buttons makes complete sense.

Ghost buttons are dynamic, usually empty or semi-transparent buttons that change colour, illuminate, or animate on hover. They blend naturally into single-colour schemes — itself an emerging trend — allowing designers to sidestep the flat-design trap of colour overload while keeping interface elements clearly actionable.

The catch: placement matters enormously. A ghost button set against a large, busy background image can disappear entirely, which defeats the purpose.

Ghost button example

Where ghost buttons genuinely shine is in steering users toward a preferred choice when two or more options are presented. On Sketch's download page, for example, the Free Trial button is deliberately ghosted — drawing the eye toward the Buy option through contrast rather than colour dominance.

Ghost buttons on the Sketch download page

Expect ghost buttons to continue gaining ground as designers get more sophisticated about pairing them with deliberate layout choices.

Grid-Based Layouts and the Responsive Imperative

Responsive design — optimizing sites for fluid display across laptops, tablets, and smartphones — showed no signs of plateauing heading into 2016. If anything, the pressure was accelerating.

One practical solution for handling content-heavy pages is the grid layout. Used well, it puts the maximum amount of content within immediate reach and lets users quickly scan and select what interests them. It's particularly effective for text- or photo-heavy social media pages, where browsing behaviour is exploratory rather than linear.

Pinterest is a textbook case: its grid avoids feeling rigid by offsetting elements and creating an organic, browsable feel.

Pinterest grid layout

The downside is real, though. Grid layouts treat most content as equal priority, which works well for discovery but poorly for conversion. If the goal is to move a user through a specific funnel or toward a single action, an undifferentiated grid can leave them directionless. It's generally the wrong choice for landing pages or any page with a clear conversion objective.

The Organic Look: Sketches and Hand-Drawn Illustrations

Hand-drawn illustrations and lettering had been building momentum through 2015, and that growth continued. Designers embraced the organic, imperfect quality of sketched elements as an antidote to the cold precision of flat UI.

The psychological effect is deliberate: hand-drawn graphics make users feel more at ease, more like they're interacting with a human being than navigating an automated system. The personality and warmth are hard to replicate with polished vector work.

Hand-drawn web design example

Sketch-style site example

The obvious limitation is context. The playful, spontaneous character of hand-drawn work is a feature in some contexts and a liability in others. Banks, government agencies, and any organization that depends on projecting authority and seriousness would be poorly served by this aesthetic. Organic and whimsical reads differently when you're trying to communicate institutional trust.

A Bad Disappearing Act: Vanishing Form Fields

Vanishing form fields became fashionable enough to warrant scrutiny. The mechanic is simple: instead of placing labels above or beside fields, the label text is written inside the field and disappears the moment a user starts typing.

The visual result is undeniably clean. On longer forms — the kind typical of government services or medical intake — the reduction in visual clutter is genuinely appealing.

The problem surfaces the moment something goes wrong. Enter information in the wrong field, get distracted mid-form, or need to review your work — and you're stuck. The field labels are gone, and there's no way to verify what goes where.

Vanishing form fields example

Vanishing fields were unlikely to disappear entirely given their aesthetic appeal, but the more responsible path forward involves pairing them with inline verification — flagging errors immediately as users type, before the context of what was expected is completely lost. That combination preserves the clean look while restoring the error-recovery experience that pure vanishing fields sacrifice.