Behind the Scenes of a Photo Heavy Case Study

January 28 2020

First things first: there's a new project in my portfolio. The client is Wycliffe College, a seminary on the University of Toronto campus who hired me to be their official photographer for the 2019-2020 school year.

The case study is a photo-heavy page with a fresh, magazine-inspired gallery design and loads of animations. When I say it's photo-heavy, I'm not joking: there are 36 images in the main body of the page, and nearly 40 images if you include the “Related Projects” footer, website logo, and favicons.

Here’s a sped-up, low-res .gif of what it looked like before the design update. As you can see, the images are static, perfectly centred, and mildly boring to scroll.

And here’s what it looks like today (again, as a low-resolution and sped-up .gif). This design is more fun to look at and more fun to scroll — although images are larger, and scrolling takes longer as a result.

(To check it out in its high-resolution glory, simply visit the case study on the biggest screen you have.)

I’m really pleased with how this case study has turned out.

Of course, you can't just throw three dozen high-resolution images on a website and call it a day. That was the first thing I tried, and it was immediately obvious that my new portfolio was ill-suited for displaying photos. I wanted photo grids, and instead I got a plain, vertical list of photo after photo.

I figured I had to make three things happen before I could share this in front of the world:

  1. A fresh design, especially on large screens. Scrolling through a long list of photos that perfectly line up with each other is kind of boring.
  2. Animations. Scrolling through a list of static images felt lifeless immediately. The obvious answer is to animate them, to keep them interesting.
  3. Finally, it takes a lot of bandwidth to quickly load that many images. So you need a way to cache them, and a way to load them only when they're needed — just before they're visible on screen. My website already does this, but there was obvious room for improvement.

I thought it fun to share how I solved all these problems.

A fresh design

The fresh design was the last thing to come together, even though it’s the first thing on the list. I started by adding different image sizes and galleries, but, when I started testing the case study, it became clear that wouldn’t be enough.

Eventually, the problem became clear to me. On large screens (like, 13” laptops and beyond), there was a lot of space to the left of the images. It felt like the margins were too large, and I’d missed an opportunity.

Fixing that was easy. I added a “left-aligned” CSS class to images and galleries that I wanted to hang to the left. (I added this to the backend of the site, so I could do it on the fly. This was easy in Craft, and would still be relatively simple in many other CMSes. But you could very easily just do it in raw HTML.)

The left-aligned code is pretty simple. Here’s my SCSS code, if you’re interested:

.image-grids.wide.left-aligned, figure.wide.left-aligned {
    @media screen and (min-width:1400px){
        margin-right:calc((100vw - 1200px) / 2);
	// This is the inverse of the margin-left calc applies for regular .image-grids and wide right-aligned figures
        margin-left:0;
    }

    @media screen and (min-width:2000px){
	margin-left:calc(((100vw - 1200px) / 2) - 367px);
	// line up the images on the grid. This looks messy, but it calculates math based on the padding of image grids with three images in them.
    }
}

It just tells the browser to push some images further left than others. (Also, I use “calc” a lot, because CSS is basically just math. I’m sure there’s room for improvement here.)

This layout should be obvious if you’re on any laptop or desktop that is more than 1400px wide (For content: 13” MacBook Pros and MacBook Airs have defaulted to a higher resolution than this for years, but most iPads are still not this high-resolution.)

Animating images and elements

The new design doesn’t solve everything on its own. Even though this is just a long list of static images, it needed some sort of motion to come to life. So it was time to animate the images.

I know a few people who say you should make all your own CSS animations. I think you should know how to write key frames, but for the most part, a decent animation library will get you there.

I really like Animate on Scroll (AOS). AOS is clever: it uses vanilla Javascript instead of jQuery (which I love), you have an enormous amount of control, and you can easily code your own animations if you need to. It's also pretty lightweight. Oh, and the animations trigger only once the animated element appears in the browser viewport.

Adding AOS to your site is as easy as you'd expect: add the script, init the library in the <footer> of your document, and add the CSS to your working files. But you can really optimize it for performance.

I load the library and initiate the script only on the pages that require it. I've also adjusted the script initiation, so animations only begin after my images have loaded (and not on page load). If you're curious, here's what my configuration looks like:

AOS.init({
    // Global settings:
    disable: false, // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function
    startEvent: 'lazybeforeunveil', // name of the event dispatched on the document, that AOS should initialize on init
    ClassName: 'aos-init', // class applied after initialization
    animatedClassName: 'aos-animate', // class applied on animation
    useClassNames: false, // if true, will add content of `data-aos` as classes on scroll
    disableMutationObserver: false, // disables automatic mutations' detections (advanced)
    debounceDelay: 50, // the delay on debounce used while resizing window (advanced)
    throttleDelay: 99, // the delay on throttle used while scrolling the page (advanced)
	  
    // Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
    offset: 120, // offset (in px) from the original trigger point
    delay: 0, // values from 0 to 3000, with step 50ms
    duration: 1000, // values from 0 to 3000, with step 50ms
    easing: 'ease', // default easing for AOS animations
    once: false, // whether animation should happen only once - while scrolling down
    mirror: false, // whether elements should animate out while scrolling past them
    anchorPlacement: 'top-bottom', // defines which position of the element regarding to window should trigger the animation
});

Most of these settings are default, but the key change I made was to the startEvent. Typically, the start event is DOMContentLoaded, which loads animations as soon as the page is done loading. That was too soon for me. lazybeforeunveil is the event that my lazy loading plugin declares just before loading images into the viewport. Not only did this speed up page load times, but using lazybeforeunveil instead of DOMContentLoaded made scrolling feel much more responsive.

I've added animations to most of the images on my portfolio. You can see them in action in the new case study. AOS is such a nice library that I plan to use it on every project that calls for animations in the future.

Optimizing and lazy loading images

My website has optimized images with <scrset> for years, but I ran into a bug with my particular setup. For whatever reason, browsers would load images before they should. (I verified this by using the Network tool in Chrome, Safari, and Firefox, so it wasn’t just a browser bug.) At page load, instead of loading just the hero image, small versions of every image would get loaded before the DOM was visible. I had to fix this bug before putting up a photographic case study.

My portfolio was the first site I built with Craft. One of the things I love about Craft is the way it handles images: you can declare a focal point, resize and crop images on the fly, and create vastly different looking templates based on media queries and <picture> tags.

To make all this happen, I use a plugin called Imager by André Elvan. Imager generally makes this easy to use and accessible within your Craft templates. If you’re like me, and you need to follow a guide to get started, Andrew Welch wrote one that I found incredibly handy.

Andrew guides you (no pun intended) through the basics, and also teaches you how to set up basic lazy loading (with lazysizes, which I’ve quite liked). The problem is that, as of late 2019/early 2020, the image source tag in that demo doesn’t work properly out of the box.

Here’s the sample code from Andrew Welch:

<img class="scale-with-grid lazyload"
    src="{{ craft.imager.base64Pixel(2,1) }}"
    data-sizes="100vw"
    data-srcset="{{ craft.imager.srcset(transformedImages) }}"
    alt="{{ image.title }}" ?>

Here’s are the things unique to my setup in this code:

  1. The lazyload class initiates lazysizes.js.
  2. craft.imageer.srcset(transformedImages) fetches an array of images I had transformed with Imager. This just means I can automate asset creation in Craft, which is handy for dynamic image sizes.
  3. craft.imager.base64Pixel(2,1) is creating an SVG that’s 2 pixels wide and 1 pixel tall.

Here was my problem: craft.imager.bas64Pixel(2,1) wasn’t creating an SVG. Which is why the browsers were (helpfully) grabbing images from srcset on page load.

After a lot of trial and error, I carefully read through the README file on Github for Imager.1 It turns out that base64(width,height) is deprecated. There was a new function that I needed to use in its place: placeholder(width,height). (Width and height can be whatever values you want, but as you’ll see, you can get clever with it.)

Using the same example variables as above, the new code looks something like this:

<img class="lazyload"
    src="{{ craft.imager.placeholder({ 
	    width: transformedImages[1].width, 
	    height: transformedImages[1].height 
    }) }}"
    data-sizes="100vw"
    data-srcset="{{ craft.imager.srcset(transformedImages) }}" />

That placeholder line is actually doing some very cool stuff. The transparent SVG it generates is the same height and width as the image it’s lazy loading. This prevents any scroll jankiness that might occur as the reader scrolls up and down, since image placeholders are the same size as the images themselves.

This, combined with the caching I have set up on Craft, makes the website blazingly fast — even faster than it already was (and it was pretty quick). The new case study, which has over 10mb of images on it, loads in less than a second.2

(As an aside: this new code helped me optimize the website and remove three other template files for galleries and images. I love this. There’s nothing better than deleting files.)

If any of this piqued your interest, I’d love it if you checked out the photos or visited my portfolio.

  1. I am aware I should have done this first. We all make mistakes. Please forgive me for this one.
  2. There is one point of failure still, but it seems like that’s a bug with Flickity, my image slider of choice. I’m still sorting through that bug. After a series of Flickity bugs related to iOS 13 and Firefox, I don’t think I’ll be using it as much in the future.
Design Development

Redesigns in the open

January 24 2020

Two of my favourite designers on the web are writing about the redesign process of their websites, as they’re designing them. The first to do this was Johnnie Hallman, who introduced the concept here. His posts have been enlightening, as always (he’s got me interested in Contentful, which is saying something).1

The second designer to take this on is Frank Chimero. I’ve been reading Frank’s writing religiously since 2013, when he was interviewed in The Great Discontent. It was obvious right away that he had a unique perspective on design, writing, and web development. I’ve read his blog multiple times over, studied every iteration of his website, and read his book several times. Needless to say, I’m a huge fan.

With all that being said, it’s been a delight to read through his thought process as he redesigns his blog. Many of his concerns regard typography, which is something I’m also obsessive about. Frank is sharing images of his process as he designs his website in the browser, and sharing how he approaches his work “from the outside in,” as he often says.

Some of my favourite posts from Frank so far:

  • Perfect Trifecta: an examination of the moods and aesthetic Frank considers for his website.
  • Looking at Letters: in which Frank blows up typeface sizes and dissects, at great length, the way he compares the differences between similar typefaces (like Source Sans and National 2, or Scto and Untitled Sans). If you’re into type, or you’re a designer, this is the sort of writing from which we all benefit.
  • Scales and Hierarchy: Frank demonstrates the way he sets font sizes and line heights, and then talks about creating hierarchy with spacing, weight, colour, size, differing typefaces, and design accents.

Frank and Johnnie’s posts have illustrated what’s been missing in contemporary design writing, at least for me: none of us are writing about how we do the work. We’re sharing finished products and listicles. There is a dearth of education design writing that exists to do something other than market ourselves.

I’m not redesigning my blog (yet), and I just launched a new version of my portfolio, but I’d like to start writing material like this myself.

  1. For those of you who don’t know, Johnnie also makes Cushion, a delightful web app for freelancers that helps them invoice clients and plan their projects. I have been a paying customer for years, and it’s very excellent at what it does.
Design

How to Design a Better Portfolio

September 11 2018

About a week ago on Twitter, I asked a poorly phrased question, which I’ll re-phrase here for clarity’s sake:

Why do designers focus on images in their portfolio’s archive, instead of properly describing their work?

This is something I’m just as guilty of as the next designer. Here’s an image of what my portfolio looked like at the time of the tweet. You can find countless other design portfolios that riff on a theme just like this.

My old portfolio, before the design changes.

My favourite portfolios are really image-heavy, and I suspect that’s true for most people. Those portfolios are so funto look at and make. But I often find myself wondering if those portfolios are effective.

If you’re a potential client, why would you click on a thumbnail image? Some designers might hope that the thumbnail tells the story of their project, but the thumbnail is inconclusive at best and misleading at its worst. It often shows off what the final result looks like, but it doesn’t share the thinking behind that visual approach.

But that’s what designers should sell. We need to sell the thought process that gets clients results, because that’s what a good designer gets paid for.

Design pricing is in a race to the bottom. Or maybe it’s already bottomed out. But I think a lot of that is because we’re showing off visuals, instead of explaining our process or discussing our results.

So I’ve made some changes to my portfolio. Now, when you visit the home page, you’ll see a list of every project I was proud to be a part of. Instead of images, each project gets a description. Some of those descriptions link to case studies, and some don’t — but the work is all present and explained.

I had a lot of fun making this. My portfolio isn’t as flashy as it was before, but I hope my portfolio will now be more effective.

Design

Be Different

February 8 2018

Last summer, I was in a realtor’s house for a dinner party. She showed me around, explaining all the different renovations the house underwent to get to its current condition.

What struck me was how many walls in the house this realtor knocked down over the years. When I asked her about this, she explained that for decades, architects built homes with walls in between each room. The idea of an “open concept kitchen” or “open concept living areas” hadn’t occurred to anybody.

It wasn’t until the late twentieth century that some architects decided to try something different. Now, we call rooms without walls “spacious” and “open concept.”

For a while, people said these architects were cheap. They were “too lazy” to include the walls in their designs. Over time, though, the old walls started to make us all feel claustrophobic. Now, it’s rare to find a new home with walls in between every room.

Old ideas often hold us back. We need to tear them down to move forward. And over time, new ideas become the norm. But every new idea gets pushback. Don’t be discouraged.

Design

Good Design is a Fight

January 4 2017

If you're a designer who works with clients on a regular basis, it's easy to be exhausted. Working with clients is hard! I've seen many designers, myself included, shake their heads in despair at client requests. I've also seen a lot of designers give up fighting them.

But you can't. The fight is what leads to good design. Good design is a fight.

I've known one of my current clients for years now — probably getting close to half a decade. They're a great crew, and the boss is a fantastic guy to work for. But we got into a few arguments on the most recent project that ended with me apologizing for the ruckus once the whole thing was over.

The client simply said this: "it's okay. Arguing is part of good work."

If you want to design something of value, you're inevitably going to upset people. Design is saying no to a thousand ideas so you can say yes to one good one. That naturally leads to arguments.

But don't be disheartened. The best designers, in the world's most desirable companies, fight every day. It's a fight to make something worthwhile. But it's a fight you can win.

Design

Awesome Design Alert: The Helsinki Philharmonic Orchestra

November 4 2016

I’ve been meaning to talk about the new brand identity of the Helsinki Philharmonic Orchestra for a while. This is absolutely wicked stuff from Bond Agency, a top-notch graphic design studio.

A few years ago, I did the design work for a music magazine called The Modern Producer. (I should really put that case study back up on the website; it was great.) One of the things I had fun with was the idea of using a waveform in the logo. The branding for the Helsinki Philharmonic Orchestra takes that idea so much further. I absolutely adore it.

I also love the motion that they bring into this identity. It all comes together beautifully, with clean typography and a real sense of energy. I get the feeling convincing people that seeing an orchestra is energetic is a tough sell, and this branding absolute nails it. I love every bit of it.

The branding for the Helsinki Philharmonic Orchestra is one of the year’s bests, folks. Check it out in all its glorious detail over at Bond Agency’s website. And Bond, if you’re reading this, much respect to you for this incredibly inspiring work.

Design

Cooper Hewitt

September 26 2016

One of the projects I’m currently working on is an identity project for a new Canadian charity. I’ve been trying to find a typeface that’s legible and distinctive, because the charity will be sending people in areas of the world that may not speak or read English. I’ve found myself entranced by Cooper Hewitt’s typeface, which is open source and available for unrestricted public use.

In researching the typeface, I stumbled onto Pentagram’s new-ish case study about the project. It’s a very long read, but so incredibly insightful. In truth, I haven’t finished reading it yet. But the case study’s awesome, and I couldn’t wait to share it.

Check out Pentagram’s case study here.

Design

Minimalism

September 13 2016

Most of my clients start talking about the sort of design work they’re looking for and use the word “minimalism”. Almost every time, they mean simplicity. But they’ve heard a lot of designers talk about minimalism in the past few years and think it’s going to unlock some hidden green valley of successful business heretofore unwitnessed by mankind.

Great designers talk about minimalism all the time. Dieter Rams, of Braun fame, spoke frequently about using minimalism to remove layers of abstraction from his industrial design. Jony Ive speaks eloquently about minimalism whenever he narrates a new iPhone video for Apple. Recent Microsoft hire Andrew Kim used the term in a (now missing) blog post on his website to discuss his affection for the Xbox One S’s new design language.

I think minimalism has a bad end game, though.

Minimalism leads us to the sort of “invisible” hardware and difficult software in films like Minority Report. I’ll be the first to say that Minority Report has some of the cooled computers ever. But every computer in the film looks completely unusable — like trying to open a coconut with a fingernail.

Minimalism is all about the removal of features in an effort to achieve a zen-like product. It’s a philosophy more than a design mandate. And almost every hardware feature removed from a product gets added back into its software, which is why your phone feels increasingly complicated every year.

I get it. I get that it’s the way things are going. But as designers, we should be aiming higher.

Our goal should be to make usable products. If we want to delight people, we should be serving them with design. This applies to client services too. Clients come to us for our expertise, and our rationale — particularly the rationale of UX/digital designers — should lean towards anti-minimalism. Human-centred design is decidedly anti-minimalist.

Most of us aren’t minimalists. We like our creature comforts.

Minimalism is about clarity and simplicity. I believe in clear, purposeful design. But I don’t think minimalism is the only way, or even the most responsible way, to get there.

Design

The Art Design of The Witcher 3

August 7 2016

Recently, I've been playing a lot of The Witcher 3, and have come away nothing less than inspired. Its art design is truly compelling. The world is immersive and the design work is second-to-none, making it one of the most satisfying video game worlds I've played in years.

I was looking for a great book on the game's art when I stumbled on this blog post, which has some of the best concept images from the game I can find. It's incredible the work that's gone into this. What I was hoping for was a book in the Design Works series, which are known for their conceptual drawings, renderings, and detailed hand-written notes, but this might do in its stead. (That being said, this peek at what a book like that might have been filled with me makes me what it all the more.)

A number of things stand out to me with these images. Firstly, I love how detailed the art is — most of it is painted! It's also fascinating to see how much, or how little, the game changed between these images and its final state. And of course, the monster designs are truly fabulous.

The other great thing about The Witcher 3 is that it was made in the era of the internet, so freelancers who worked on the project are sharing their in-progress material in their portfolios (often alongside images from the finished product). A quick Google search makes more material like this easy to find.

All of this has gotten me thinking: as UI and UX designers, I think we have a lot to learn from video games (and the people who make them). They've got a lot to tell us about experience design. It's one of the reasons I admire UsTwo (the folks behind Monument Valley) as much as I do: they're both digital designers and video game designers, and see the challenges and constraints in both as creative tools. Their work is fascinating, and they have a unique outlook on what games and design can do for us.

All that to say: a lot of ink has been spilled about how video games are destroying minds of generations, but I doubt that's the case. If anything, video games have a lot to teach us yet — and they're still in their creative infancy. Designers should watch this space closely.

Check out the original blog post about Witcher 3 here to see more images from this collection.

Design Gaming