Designing for Designers, Mucho Pressure

The Project:
To develop a new website for a Scottsdale-based company called The Plus Group.
The Good News:
Their project seemed right up my alley. We had a great meeting, their goals were clearly convened and I walked away with some potentially workable ideas for how I could accomplish what they were looking to do.
The Bad News:
The Plus Group is an advertising agency, with a team of creative graphic designers, art directors and branding professionals. They were the type of folks who could rip apart a design from the inside-out and then win a debate with you over the type of serif you used in the headline font.

I was tasked with designing a design for designers. Argh…

Not easy. But luckily one phrase stuck out from our meeting. The CEO said he needed a “web geek” who could bring their creativity to life and add some animation to their portfolio.

After stressing over this for a couple hours, I finally figured out how to approach the design. And the answer was Lazy Loading.

I know what you are thinking, lazy who? Let me explain…


Lazy Loading

In the old days of the web (like 2011) lazy loading was a technique developers used to speed up the time it takes for a page to load. It was particularly helpful for websites that had a lot of heavy graphics and were highly visual. Basically, lazy loading allowed you to not serve up an image to the browser until the point at which it was actually needed it. So the person who came to your site didn’t have to wait forever until their browser was done thinking until they could view the page.

Wikipedia probably explains it better.

Example of Lazy Loading an Image
Javascript lazy loading technique commonly used to highlight web images and call to action buttons.

See Actual Website

But nowadays lazy loading can be used for a much cooler effect. And yes, while it still helps page load speed, the trend is to apply lazy loading to full pieces of content and not just images. So as you are scrolling down the page, sections of content will fade in, but not until the reader has scrolled far enough and is ready to view it.

The End Result:
Websites will dynamically fade or ease in sections of page like “Our Mission” or “Our Portfolio” in an animated manner that in the past was reserved for the main slideshow of your home page. In the case of the Plus Group, it helped show case their portfolio in a fashion they loved and the site design was a hit.