tl;dr 021
The one where we found in time what was lost in space.
Come with us now on a journey through time and space.
After two years of essentially being locked in our rooms, we’ve finally been able to push our decentralised model into some properly different timezones. The past couple of months have seen members of our team fly to and from Sydney, Oslo, Stockholm, London, New York, Nashville, Chicago and…Tropea?
Having a team on a 24-hour timezone has been massively rewarding… when we can make it work. Like in our latest Master Brand sprints for CMC in London. It’s also been super exhausting when we’ve had to present those sprints at 3am Chicago time. It’s allowed us to be out of time altogether, sharing Memetic Branding with Iterate in Oslo and concurrently running four brand workshops at the same time, all the while Australia sleeps.
To do all of this, we need to be able to work asynchronously, which is a word you’re going to read an awful lot in this edition.
Asynchronous (“Async”); not existing or occurring at the same time. Get it in ya!
As ever, it’s a process that’s in beta; we’re learning as we go.
#graphic-design-is-my-passion
Though we sometimes find ourselves too busy even for punctuation — and the sweet relief it provides — we always make time for our shared passion™:
graphic(s) design(s).
This month saw the return of “Hot” Patrick, so-called due to his mammalian circulatory system. When he came back, he brought grids.
Grids have an interesting history in The Matrix™. Designers have long understood the benefits of grid systems in the analogue, notably for typesetting in layouts used in books and magazines, but CSS — the technology that underpins layout in HTML — was not created with this in mind. When HTML was in its infancy, developers had to resort to such despicable tactics as invisible image tags for left/right spacing and arrangement.
Disgusting.
CSS has since gone through a long journey playing catch up, through three main approaches: float, flex, and grid.
Float
By default, a block displayed HTML element will consume one horizontal 'row', making it difficult to have multiple pieces of content occupy a similar space. HTML does have a built-in table, and has done for a long time, but this was typically only useful for organising data in cells and rows. Float allowed us to position pieces of content to the left and right of one another; if we had one half-width element floated left, we could also float another half-width element right. Using this system we can group faux "columns" of content in a horizontal line, and we have a "grid". This formed the foundation of how the Bootstrap library configured their grids, and for a time, was an incredibly useful and fast way of building systems that matched what we were receiving. The problem with float is that making changes feels like dragging images around in Microsoft Word (FIX IT, BILL).
Flex
While float required that we act on the behaviour of the children, or columns, flex instead allows us to adjust the behaviour of a container. For designers, this is akin to assigning an Auto Layout to a Figma frame: you determine the space for your container, and tell the container how it should stretch, pad, and flow content within. This was a key milestone in changing how developers think about grids, because rather than applying manual changes to groups of content, we were encouraged instead to think in different terms, as we have to code flex layouts with words like flow, align, and justify.
Grid
The final boss of grids is called... grid. This is what we use most, and shares the most properties and principles with grids as designers understand them. We have grid tracks, inner gaps, and the same alignment options flex offers. Best of all, CSS Grid allows developers and designers to meet in the middle with some shared language:
”This content takes up 8 columns in our 12 column grid system, a gap of 8px, an auto layout, with fixed width text and an image that grows to fit.”
More reading
#code-city
We love a content management system, it puts our design system in the hands of teams much larger than our own and gives them the access to create their own expressions of the brand. Sanity is one we work with really often, and there’s an update coming - Sanity v3!!
Some highlights:
Roles and Permissions have been introduced to manage access to different content across different content producers;
A new development server, based on Vite making things far faster;
New APIs for configuration, plugins and form customisation;
Dark mode #vibe.
We’ve also been working on our dispatch process (as always), so that we can make sure our hand off between design and development is seamless and less emotionally charged. One way we like to think about it is rather than handing things off, a dispatch should be a contractual agreement between design and development that a file accurate shows a design that will not change until a new contract is signed. Seems to be something that’s a constant negotiation, but between what we’ve been hearing, reading and playing with, there might yet be a perfect way to see this philosophy cash out.
#vibe
Remember the key word for this edition? Asynchronous? Great. Because our recent vibe has been worldwide, not you Pitbull.
With everyone moving around all of the time, we’ve still had to make moments to like, hang out and collaborate. Whether it’s been Stockholm to Sydney stand ups or Milan to Melbourne Packdowns, we’ve all been even more excited to see each other’s new video call backdrops. Here’s a selection:
Movements this Week
Charl: London > Oslo > Stockholm > London
Brig: Melbourne > Milan > Tropea
Sam: Sydney > Bali
Jess: Tauranga > Sydney
Joe: Warkworth > Sydney > Auckland
Mona: Sydney > Sydney
Adnaan: Melbourne > Oslo > Stockholm > Copenhagen
Em: Melbourne > Sydney
Tom: Canberra > Melbourne
Sam: Perth > Melbourne
Jessie: Melbourne > Auckland
Dog: Beppu > Kyoto
Newt: Tokyo > Kyoto
Crazy how you can literally move to the other side of the world, and still have your cup filled by some bozos online
#processes-and-platforms
A lot changes when you take a 12 month hiatus, I guess having opinions doesn’t, and that’s why we love Hot Patrick - when it comes to the system, he is the master, the big man, the maestro, the marvel, the magician, the exhausting other word beginning with m.
Though our work is iterative, we need to follow a project structure that our both makes sense to us and our clients. We use alliteration do describe the steps, and a combination of Figma and Coda templates to follow them.
Engagement & Essence: Or rather, brand. This is where we hold workshops, record our findings, provide examples, and do the thing we do.
Explanation: Or rather, the ark of the covenant, because as Patrick says “this is a sacred file. I want y’all to treat this as the heart and soul of the brand and the website”. This is where we put BBGs (Beta Brand Guidelines) and ASG (Atomic Style Guide). Again, Patrick, “THIS IS NOT A WORKING FILE”. This is not a working file. It’s a file we use to work from.
This is where “things like header components, buttons, cards, footers, etc. The goal here is that the designers will rarely have to design a component from scratch, rather just update templates that already exist to match the brand and output.”
Expression: The designers playground. No devs allowed. Where you can mash components together until you get something cool. Just remember that any new component you make needs to be put back in the ASG. Cleanliness is next to godliness.
Dispatch: This is where signed off designs live, before we ship them off to their forever homes.
And that’s it. That’s how we use the tools to build the system that makes the work, or it is how it is right now, #alwaysbeta, this is what it used to look like 12 months ago .
Like what you read? Tell your friends.
Hated it? Let us know.
That’s what being iterative is all about. #alwaysbeta.
tl;dr
A monthly newsletter by Love + Money.
Copyright © 2022
All Rights Reserved
Love + Money Agency
”Melbourne, VIC”
-
Love + Money acknowledges the Traditional Owners of the land in which we work and pay our respects to Elders past, present, and emerging.