miami writer logo
February 22, 2020

How to Write for Flat Design Sites

Julie Ross Myers

Writers do more than produce website content. Copywriters also create site information architecture. And copywriters put a lot of effort into using words to drive action on a website. This may mean we want visitors to buy products or to complete a lead form. Either way, we hope to convert a visit into a behavior.

Web design impacts user experience. Ultimately, how users experience a website affects conversions.

How design affects conversions

Design can derail desired behavior. If buttons do not appear clickable or if a menu is difficult to navigate, even the best copywriter will not be able to produce conversions.

Since 2012, flat UI design has been a common design trend. It is also likely to hinder conversions because users do not receive the visual cues needed to take action. Usability researchers Nielsen Norman Group say flat design has created "an epidemic of click uncertainty."

What is flat website design?

Flat design is part of a larger movement toward minimalism and authentic digital design. It opposes the conventions of dimensional, skeuomorphic, and realistic design.

Dimensional design

Early web design used the illusion of depth to help users identify clickable buttons and fillable fields. Heavy shadows and aggressive highlights made this design approach unattractive. The Windows 95 interface is an example.

Aggressive 3D design of Windows 95 interface

Skeuomorphic design

Skeuomorphic design emerged in 2014. It uses realistic elements to help users know how to interact with an interface. For example, Bagigia's website uses a zipper as a navigation tool.

Zipper navigation is example of skeuomorphic design

Realistic design

Realistic web design uses realism for aesthetic purposes. Unlike skeuomorphism, realism does not reference the physical world to provide clues about how to interact with the site or app. It is purely decorative.

Flat design

In flat design, icons, buttons, and other elements do not have highlights, shadows, gradients, or other textures that give UI elements depth and realism.

A flat design interface is clean, modern, easy to read, and fast to load. Often, color palettes are saturated and include three or more colors. It works well in responsive layouts because flat elements can scale easily.

Released in 2013, Apple's iOS 7 moved away from skeuomorphic design to flat icons. Google released a flat logo two years later. The majority of websites today use flat design.

How flat design creates user uncertainty

On the downside, flat design discards many of the traditional indicators of clickability. These include:

  • Blue, underlined links
  • 3D or raised buttons
  • Fields with depth or shadows
  • Traditional placement such as menus at top

Nielsen Norman Group ran a test of flat UI elements. The study shows flat design does not provide the visual cues, or signifiers, that intuitively identify clickable elements such as links and buttons.

Users must work ~22% harder and longer to reach a goal on pages with flat design. In the real world, when people become frustrated with a site, they bounce away from it.

Sometimes, flat design is okay

Flat design can be used without a problem under the following conditions:

  • The site has 10 or less pages
  • The layout is simple and traditional
  • There is not a lot of information
  • The site requires low interactivity
  • The site's audience is mainly returning visitors or techies and developers

Using flat design 2.0

Flat design 2.0 retains the benefits of flat design while overcoming its pitfalls. It improves usability by eliminating visual clutter. But it restores signifiers that help users prioritize and mentally organize the elements on a page. This includes buttons with rounded corners, drop shadows, and high-contrast colors.

UX matters a lot when the stakes are high:

  • CTAs
  • Things for sale
  • Menus/navigation
  • Error and instruction messages
  • Forms and fillable documents
  • Customer support actions

Copywriting and usability

Copywriters are not web designers but writers need to know when bad design will hurt the client. This is a sticky wicket for sure. On large projects, there may be a UX team with a UX writer in addition to a copywriter. But most clients have only a web designer and writer.

Great writing cannot overcome bad usability. In this situation, the writer needs to work diplomatically with the designer to achieve greater usability. It comes down to how much responsibility you, as the writer, are willing to take for the client's success.

Learning usability

Writers can improve their value by becoming educated in usability design through the Interaction Design Foundation. Other usability design courses include:

UX writing

UX writing is a new field that focuses on how words and the presence or absence of information shapes a user's digital experience. UX writers help create the site or app from the outset.

  • They look for ways to make digital experiences more natural and fluid.
  • They write microcopy such as labels and short instructions.
  • They also help create the brand voice because they are the champions of the user experience.

A UX writer will make sure you get a human, even quirky statement instead of a cold, Microsoft-style error message. That human element is not just frosting on the cake. It contributes to conversions. As a result, UX writers are in demand by companies like Amazon, Spotify, Dropbox, Slack, and LinkedIn.

Digital writers need to be experience creators

Writers need to know search engine optimization (SEO) in order to bring traffic to a site. Without SEO, a site will not be ranked highly by Google for its subject matter. You may as well have no website.

Beyond that, copywriters need to think of themselves as masterminds who direct content strategy, brand tone of voice, and the on-page user experience. Storytelling has become a buzzword for a reason. People relate to and remember narratives more easily than listicles, how-to articles, case studies, infographics or other content types. The writer shapes an experience that is reinforced and supported by the website design. The relationship between words and design is synergistic.

© Copyright 2020 Miami Writer LLC