Welcome to the Modern Web – Subtractive Design

Mike Erlindson

“Make everything as simple as possible, but not simpler” – Albert Einstein

Subtractive design isn’t a new principle. It’s used in mathematics, physics, copywriting and a number of other areas. Historically, it’s related to Occam’s razor which is the principles of economy and clarity in logic and problem-solving.

So how does this relate to Web design?

For starters, it’s the concept that less is more. It’s better to keep you customers focused and engaged rather than overwhelming them with information. Give them enough information to make an informed choice to buy your products and services then make the buying process easy.

Your site doesn't have to look like a dollar store.
Your site doesn’t have to look like a dollar store.

You see examples of this in other areas of design. In logo design, it’s the idea that the white space around a logo can be just as important as the colored elements. One of the most iconic logos that use this principle is FedEx. Did you ever notice the arrow in the logo design?

The white space in the logo creates an “aha” moment with the user which is more engaging and memorable than if the arrow was obvious.

There are a number of trends that impact how we are designing Web sites where subtractive design fits in:

  1. Responsive Design I – Users interact with mobile devices differently from how they interact with their notebook computers. The screen is smaller so the amount of information you can present is less. In addition, navigation buttons need to be legible on the smaller screen and buttons need enough white space around them so users can interact with by touch.
  2. Responsive Design II – Subtractive design reduces page weight, download time and bandwidth usage rates for your visitor.
  3. Accessibility Considerations – Site interaction needs to be simplified for users with assistive devices such as screen readers. This is important if the site needs to be WCAG compliant.
  4. Usability – A prioritized, task-oriented site is better for usability. Give your users the ability to accomplish tasks as simply as possible. A second point to this is the way people process Web sites. Visitors scan – they don’t read in depth.
  5. Search Engine Optimization – Well-structured, relative content is more effective than a laundry list of items that aren’t related to your key goals. Sure, your traffic may go up but so will your bounce rate. You may increase page views but you aren’t increasing the number of actual customers.
  6. Task-Oriented Sites – There is a difference between how users interact with an informational siteand a task-oriented site.  If you have a task-oriented site then anything that gets in the way of a user performing their tasks is a distraction.

Another major school of thought related to subtractive design is called flat design. This bucks against the concept of metaphor design called skeumorphism. According to Connor Turnbull, “Skeuomorphism has been used to help those new to a platform learn the ropes and get around with minimal instruction. Flat design is a trend towards a philosophy free of superfluous elements and the emergence of subtler design true to the platform itself.”

In the flat school functionality trumps style which mostly means getting rid of 3-D elements such as shadows, reflections and gradients. The new iOS7 for the iPhone and iPad has gone through a complete makeover incorporating flat design. The idea is to increase “visual clarity” to communicate. You’ve seen this historically with almost any app from Google. You also see it in the new Windows 8 tiled screen.

The relationship between flat and subtractive design is the reduction of design elements on the screen. This is especially important for mobile devices with small screens. By removing everything extraneous — texture, borders and shading — it’s also possible to add more functional elements to a smaller space.

About The Author

Mike Erlindson is the President & CEO of Soulfx Technologies. He manages the design and development teams and has worked on hundreds of projects for clients in a wide range of industries. He previously worked at the Southam Infolab, Cyberplex and was Senior Producer of The Toronto Star Online.

He’s been both an Adjunct Professor at the University of Western Ontario and an Associate Professor at Centennial College teaching classes on User Experience Design and Client Service for Technology Consultants.

His entire career intersects content and technology. Always on the cutting edge, his masters degree research paper about online newspapers won the top award of his graduate school class.

Mike can be found at:

About Soulfx

Soulfx specializes in digital strategy, user experience design and cloud software development. Our software applications help clients become more efficient which increases revenue and decreases costs. Client industries include health sciences, pharmaceuticals, financial services, insurance, government and education. Contact Soulfx or call 1-877-827-4555 xt. 228