Design Details

388: Design Tips and Tricks, Part 2


Listen Later

This week, we cover part two of our design tips and tricks series. We talk about naming conventions, thinking in divs, structuring frames, and share a few Figma pro-tips. In The Sidebar, we talk about design content overload.

Golden Ratio Supporter:

A huge shoutout to Mailbrew for supporting the show this week! Mailbrew is a personal daily digest for all the stuff you care about on the internet. We love it for delivering the top links and top tweets shared by the people we follow on Twitter, reducing FOMO and cutting down on social media time.

Get started with a free trial, no credit card required, at https://mailbrew.com/dd. If you subscribe after the trial, you’ll save 30% on your first year’s subscription.

Latest VIP Patrons:
  • Thuy Luong
  • Eileen Wong
  • Shumin Wang
  • Ethelia Lung
  • Flora
  • Gina Lin
  • Giulio Fagiolini
  • Grant M Hansen
  • Hidden Rayn
  • Scuba Steve
  • Dylan Riessen
  • Christoph
  • Lucas Lemonnier
  • Ulli Strozynski
  • Pg Gonni
  • Yasmin Shibib
  • Heidi Peng
  • Seth Daggett
  • Ho Uyen Thao
  • Liu Ting Yú
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 talk about how to deal with design content overload. If you live and breath design, this might be for you.

Follow up:
  • David Luft tweeted: It would be so helpful if you made a video companion to episode 386 that shows how you set up and use your grid systems in Figma.
    • Keep an eye out, we’ll try to do something here!
  • Camden Gaba tweeted: Should the vertical spacing between text elements be set by their line height or multiples of your grid interval? And thanks for another episode!
    • Generally by line height, unless you just have a text-heavy site with many columns, in which case just let the text flow and then pick up the grid in between your content blocks.
    • leading-trim: the future of digital typesetting
    • NYT on how they implemented a baseline grid using CSS
  • Richard Picot tweeted: Follow up question, do you conform to a grid for padding inside a button for example or is the overall size of the component more important?
    • Vertical padding just ends up being whatever is required to make your button height a certain size (e.g. minimum tap target size). Leading and trailing padding can be some step on your grid (like 16pt or 12pt).
Main Topic:

This week Marshall continues with part 2 of design tips and tricks! We dig into naming conventions, thinking in divs, how to structure your frames, and some Figma-only pro-tips.

  • Margin considered harmful
Cool Things:
  • Brian shared Mouseless, an indie app to help you build muscle memory for keyboard shortcuts in your most-used apps.
  • Marshall shared The World’s a Little Blurry, the new Apple TV+ documentary about Billie Eilish.
Design Details on the Web:
  • 📻 We are @designdetailsfm
    • 🎙 Brian is @brian_lovin
    • 🎙 Marshall is @marshallbock
    • 📬 Don't have Twitter? Email us at [email protected]
  • 🙌 Support us on Patreon - your support literally makes this show possible. Thank you ❤️
  • ❓ Got a question? Ask it on our Listener Questions Hub, and we'll do our best to answer it on the show :)
  • ⭐️ Enjoying the show? Leave us a review on iTunes

Byeee!

...more
View all episodesView all episodes
Download on the App Store

Design DetailsBy Brian Lovin, Marshall Bock

  • 4.7
  • 4.7
  • 4.7
  • 4.7
  • 4.7

4.7

360 ratings


More shows like Design Details

View all
99% Invisible by Roman Mars

99% Invisible

26,222 Listeners

Fragmented - Android Developer Podcast by Donn Felker, Kaushik Gopal

Fragmented - Android Developer Podcast

69 Listeners

The Knowledge Project by Shane Parrish

The Knowledge Project

2,691 Listeners

Design Matters with Debbie Millman by Design Matters Media

Design Matters with Debbie Millman

1,226 Listeners

Developer Tea by Jonathan Cutrell

Developer Tea

402 Listeners

The Changelog: Software Development, Open Source by Changelog Media

The Changelog: Software Development, Open Source

289 Listeners

The a16z Show by Andreessen Horowitz

The a16z Show

1,087 Listeners

The Talk Show With John Gruber by Daring Fireball / John Gruber

The Talk Show With John Gruber

3,145 Listeners

Decoder with Nilay Patel by The Verge

Decoder with Nilay Patel

3,154 Listeners

Does Not Compute by Sean Washington, Rockwell Schrock

Does Not Compute

53 Listeners

How I Built This with Guy Raz by Guy Raz | Wondery

How I Built This with Guy Raz

30,203 Listeners

Toolsday by Una Kravets, Chris Dhanaraj

Toolsday

48 Listeners

Swift Unwrapped by JP Simard, Jesse Squires, Spec Network, Inc.

Swift Unwrapped

90 Listeners

Creative Confidence Podcast by IDEO U

Creative Confidence Podcast

128 Listeners

Y Combinator Startup Podcast by Y Combinator

Y Combinator Startup Podcast

226 Listeners

Syntax - Tasty Web Development Treats by Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Syntax - Tasty Web Development Treats

988 Listeners

Design Better by The Curiosity Department, sponsored by Wix Studio

Design Better

320 Listeners

The Futur with Chris Do by The Futur

The Futur with Chris Do

859 Listeners

Hard Fork by The New York Times

Hard Fork

5,518 Listeners

The Startup Ideas Podcast by Greg Isenberg

The Startup Ideas Podcast

205 Listeners