386: Designing with Grid Systems

386: Designing with Grid Systems

Author: Brian Lovin, Marshall Bock February 24, 2021 Duration: 24:52

This week, we talk about designing with grid systems. In particular: when grid systems break, and what to do when they don’t align with our hardware screens perfectly. In The Sidebar, we talk all about design debt: how to work with it, pay it down, and eventually learn to accept it.


Golden Ratio Supporter:

A huge shoutout to Copilot, the best app for budgeting and tracking your personal finances. It’s our favorite tool for categorizing our spending, having our net worth available at a glance, and getting monthly (and yearly!) digests of all your spending.

Get the app at copilot.money.

Latest VIP Patrons:

  • Leigh LaMon
  • Edyta Niemyjska
  • Jaime
  • Brandon Hills
  • Jonathan De Wet
  • Guilherme Kaiser
  • Lillian Lin
  • Aris Acoba
  • Kyle Stuart
  • Hugo Tunius
  • Kish Patel
  • Michael Otto
  • Denis Zastanceanu
  • Kelvin O'Shea
  • Scott Underwood
  • Lachlan Campbell
  • Lucas VanGombos
  • Sam xia
  • Ravi Aujla
  • Brian Nelson

The Sidebar:

The Sidebar is an exclusive weekly segment for our Patreon supporters. You can subscribe starting at $1 per month for access to full episodes going forward! Sign up at https://patreon.com/designdetails.

In this week's Sidebar, we answer a listener question that can be ultimately paraphrased as: How do you deal with design debt?


Main Topic:

Joey Jungle asks on GitHub: Designing with grid systems? – and continues with many words asking why grid systems are often unintuitive, and don’t align neatly with our hardware screens. Great question!


Cool Things:

  • Brian shared the iA Quattro typeface, one of three beautiful (and free, open source!) typefaces from the iA team. It seems to be striking a happy middle ground between a sans and a mono, making it useful for adding a computer-y tone to an interface while staying readable.
  • Marshall shared Little Nightmares II, a beautiful (and scary) indie side-scroller. It looks gorgeous, and the sound design is incredible.

Design Details on the Web:


Byeee!


Every week, Brian Lovin and Marshall Bock settle in for a thoughtful, often meandering chat that pulls back the curtain on how things are made. Their Design Details podcast lives in the rich space where technology and the arts intersect, focusing less on polished case studies and more on the real, sometimes messy, work of design. You’ll hear them dissect the nuances of product decisions, debate the evolving culture of creative teams, and share personal stories from their own experiences in the industry. It feels less like a lecture and more like eavesdropping on a conversation between two deeply knowledgeable friends. The discussions regularly venture into the philosophical side of craft, examining why certain choices resonate and how design shapes our daily interactions with the world. For anyone curious about the thinking behind the pixels and interfaces, this show offers a consistent, grounded perspective. Tuning in provides a sense of community and a candid look at the process, making it a staple for designers and creators who appreciate substance over flash.
Author: Language: English Episodes: 100

Design Details
Podcast Episodes
424: The Art of Unsolicited Redesigns [not-audio_url] [/not-audio_url]

Duration: 35:39
This week, we talk about the art of creating unsolicited redesigns at work — how to approach them, how to wrangle complexity and rabbit holes, and what to do when you have something worth sharing. In the Sidebar, we shar…
423: What We Learned in 2021 [not-audio_url] [/not-audio_url]

Duration: 48:33
This week, we recap how we grew, and the things we learned, in 2021. In The Sidebar, we look forward to 2022 and talk about some of our personal and professional goals for the new year.Sponsor:Patreon is hiring product d…
422: The Complainisode [not-audio_url] [/not-audio_url]

Duration: 52:04
This week, we were invited to have a rant session about the little things in modern software that drive us nuts. A complainisode! In the Sidebar, we share our strategies for having a successful design challenge interview…
421: The Future of Remote Design Teams [not-audio_url] [/not-audio_url]

Duration: 38:34
This week, we talk about the pros and cons of working on a remote design team, and what we think the future of design organizations will look like in a post-pandemic world. In The Sidebar, we talk about how to weigh comp…
420: The Pointer Cursor Debate [not-audio_url] [/not-audio_url]

Duration: 30:49
This week, we discuss the humble cursor and its role in affording interactivity in software design. In The Sidebar, we talk about the long term impact of the features we build, the importance of smart defaults, and the v…
419: Teaching Design at Work [not-audio_url] [/not-audio_url]

Duration: 30:48
This week, we share our strategies and motivations for teaching design at work. In The Sidebar, we talk about the shape of software, how we visualize the tools we build, and what it means for software to feel like someth…
418: Fictional User Interfaces [not-audio_url] [/not-audio_url]

Duration: 30:59
This week, we talk about the weird and beautiful world of fictional user interfaces: why do futuristic UIs look so cool? And why aren't they usable? Is the future really going to look like this? In The Sidebar, we share…
417: The Side Project Prophecy [not-audio_url] [/not-audio_url]

Duration: 37:09
This week, we reflect on why it is that talking about building a side project can often reduce your motivation to actually finish the project. We dig into our latest side project progress and share tips for maintaining m…
416: UI Reviews and QA [not-audio_url] [/not-audio_url]

Duration: 22:33
This week, we talk about our processes for reviewing UI and making sure that things are shipping as close to spec as possible. In The Sidebar, we recap Apple’s Unleashed event, sharing our favorite moments and spicy take…
415: News Desk, Vol. 3 [not-audio_url] [/not-audio_url]

Duration: 36:18
This week, we talk about the new Stripe Press website, pasting behavior in Figma, the latest tvOS UI, and the importance of using fake data in placeholder copy. In The Sidebar, we share our tools and strategies for remem…