Philip VanDusen on Web Design Trends – Part I

• PhilChav
• 5 years ago

A design voice to listen to…

Philip VanDusen is a well-known graphic artist and branding expert, as well as a seasoned YouTuber (200K+ subs) whose channel features in-depth videos about graphic and web design, branding, and related business endeavors.

I stumbled upon his channel about 2 years ago as I was looking for innovative ideas to nurture into my own web design, and I have stayed tuned since.

Philip’s take on what works in visual design and branding is both insightful and tasteful. Every year, he puts out a video on the upcoming trends in visual arts. Though history does not always agree with his voice as some early trends morph into fads, his commentary is always highly interesting.

Web design: what’s up with 2016 trends in 2020?

That sounds a bit off… Why go back to antedeluvian times for clues on web design today? Simple: Philip’s video focuses on basics that have no expiration date. And though he clearly contextualizes them, his comments were as valid yesterday as they are today, and as they will be tomorrow. Let’s dive into them.

1. Cards

Mentioning Pinterest as one of the original platforms developed on the cards layout, Philip highlights these characteristics:

• • • • • • • • • Intuitive user interface
                • Convenient to organize large amounts of content into easily viewable pieces
                • Perfect layout for responsive design

My 2 cents:

The positives:

Pinterest popularized the format, Tumblr put it in the hands of bloggers. In web design, we often refer to them as “masonry layout”, and yes, the format is still popular today for highly visual websites (photography, ecom, news and people, blogs). Our own website uses the masonry/card format in the TecTalk blog section. This layout enables viewers to browse through a heap of content very quickly.

The format is highly responsive, perfect for thumbscrolling on a smartphone. The “infinity scrolling” feature used by Pinterest (you don’t need to change page to view the entire content of a category of information: you just scroll through) is convenient for designers as we don’t have to paginate a site. Just use lazyload to avoid cumbersome loading delays.

The negatives:

• It’s not so friendly for sales funnels as it scatters the viewer’s attention to the “next shiny object” by favoring the quick scroll-down gesture. No possibility to feature a prominent call-to-action.
• A card only features a pic and a very short caption. If your ecom store has a small inventory of spectacular items, your visitors won’t stay long on your site as they will only see the tip of the iceberg.
• Cards favor quick and shallow views, and tend to prevent users from having a deeper look at what’s on offer.
• The thumbnail featured on each card may be too small to reveal an interesting feature that would otherwise show better on a bigger photo.
• Crafting good captions/excerpts takes a bit of time: space is limited, your excerpt has to catch your visitors’ fleeting attention to get the stop and click.

All told, Philip Van Dusen is spot-on in highlighting cards/masonry as a perennial trend in web design.

A couple of pointers for web designers:

• • Where to use cards or the masonry layout: On a regular website, limit this layout to galleries and blog posts. In an ecom, use the masonry design as a redundant way to access products. Not as the main way to categorize them and look at them.
  • Keep captions short with “…”: Your goal is to lead visitors into the full article or product page. Minimize your caption/excerpt, and create a mystery by cutting it mid-sentence.
  • Don’t bet the farm of cards:  The design format is popular, but it is best used with parcimony. Even masonry-based galleries are not always the best way to display products and scenes. Oftentimes, a simple gallery with larger thumbs will tell a better story to the casual reader.

2. Low contrast

Philip highlights the GUI problem of illegibility associated with web designers’ tendency to favor low contrast between text and background. He mentions that low contrast is a critical design issue considering the population is aging, and viewership on the web migrates from desktop/laptop screens to smartphone screens.

My 2 cents:

He is absolutely right. Web design has been moving for years in the direction of lighter, more subtle pastel and grey palettes.

As color shades became subtler, text color became less differentiated from its background. Since our brains look at the outline of a letter to identify the letter, the less the outline is popping out of the background, the harder it is to read.

Although smartphone and tablet screens use LED technology that boosts the luminosity of the screen beyond the average luminosity of an LCD screen, color contrast is more accentuated on the former than on the later. However, smaller screen surface reduces the size of the letters, straining the eyes.

Moreover, smartphone brightness and blue light fatigue the eye. There are wide-scale studies in the making on the negative effects of blue light on vision acuity, and we already see smartphone makers implement blue-light reduction technology in preparation for the consumer backlash that will materialize when these studies come out. Think class action.

For web designers, a couple of pointers:

• • Do some user-testing on your design: ask people on their 40s-60s to read your site, observe how easy or difficult it is for them to do so, and ask them about the quality of their experience.
  • Don’t design mobile site the same as desktop sites. Mobile sites ought to be different from desktop for a number of reasons, anyways (more on mobile site design in this article). But just for the sale of legibility, design with a mobile-specific color palette.
  • Design also for color-impaired people: If you are not designing for color-impaired (and vision-impaired people), you are forsaking a good segment of your client’s market. You may even get your client sued for it. I’ll write a specific post about the topic of “accessibility” in the near future.

3. Minimalism in design

If you watch Philip VanDusen’s videos on graphic design, you will see a clear inclination for minimalist design. That’s a taste he shares with a number of high-profile brands and designers.

Entire schools of design have been built upon off-white negative space, reduction of text, analogous color palettes, etc. Scandinavian and Japanese Zen design, Apple, Tesla, Philippe Starck, the Bauhaus architecture, sans-serif typefaces… All share the same love for simplicity of form and isolation of shapes in the visual space, whether in print, on the screen, or in the real world.

In this section of his video, Philip VanDusen also recommends simplifying navigation.

My 2 cents:

Web design gets his genetic lineage from architecture and print. It organized shapes in space and time, and the space between shapes is their symbolic microphone. Space enables shape to express themselves.

Minimalist design has been there for a long time, and because it enables a message to be transmitted more clearly to the audience by a de-cluttering of the space in which it is expressed, it is likely to remain a staple of design in a world of white noise. “Say less to say more”.

For web designers, a couple of pointers:

• Isolate shapes using negative space, but follow the eye trail: The message is better conveyed when the organization of shapes in the space allocated follows the “natural” path of the eye. More “acquired” than natural actually, since the eye trail will be reversed depending on the direction of reading.
• Minimalist navigation schemes must remain obvious: There is a fine fault-line between simple navigation and confusing navigation. The GUI rule I apply across the board is: “If the user has to look for it, this is a fail.” Navigation must remain simple but always obvious. In French, we say “tomber sous le sens” (it must make sense without having to figure it out).

To be continued – Part II