332: Creating layouts: Design vs Implementation
Design Details
The Pros and Cons of Auto Layout
The way you might lay things out without auto layout is not necessarily the same way that you would construct those same objects if you were to do using auto layout. Because it shows you every sub object that is available to be resized, especially in a component, you end up with a messier layer list. It's greater transparency, but it makes your layer list a lot more full and messy even when you have stuff in there that you don't want to show half the time.
This week, we get deep into the weeds on creating layouts with Sketch's Smart Layout and Figma's Auto Layout, and compare the experience with implementing layouts in CSS and SwiftUI. This is a detailed exploration at the pros and cons of each toolset, and we try to find takeaways that can help us reconcile the wildly different mental models for each. As always, we share our cool things of this week including a content-blocking Safari extension and a novel about a cyberpunk future in which a trailer park girl and her cat decide the fate of humankind.
Golden Ratio Patrons:
Sisu is looking for a thoughtful and data-savvy designer to help build the next generation of analytics software. You can find out more at sisu.ai. (You might recognize Sisu from our interview with Michie Cao)
Pathrise is an online mentorship program that you land a great UX job. Previous fellows have been placed at Google, IBM, Atlassian and other exciting companies.You can learn more at pathrise.com/details
Latest VIP Patrons:
Huge shoutouts to our latest Very Important Pixels!
- Kati Presley
- Jan Früchtl
- Ying Yao
- Ruby Chen
- Kevin Haag
- Austin Robinson
- Scott Foltz
- Elise Alix
- Danielle Shepherd
- Mike Jongbloet
- Joseph Flynn
- Priscilla Then
Follow-up:
- We reached our Patreon milestone of 128 supporters! This means we're kicking off the process of making Design Details merchandise. We need to figure out what we should make first, but we're leaning towards a torso-covering device of some kind, or perhaps a mug.
- Ya'll helped us discover a great solitaire app, Solitaere. It's about 95% of what Marshall needs, but still might not be enough to stop Marshall from building his own.
- Something seems to have happened recently where we suddenly feel inundated with tweets and DMs from everyone – it's so fun! We are reading everything, and will do our best to reply to as much as possible.
Tweets:
- Kayla Brianne mentioned that our intros and followup sections can drag on a bit. We're going to be splitting up our chapters so that Tweets and Followup are discrete chapters.
- Austin Robinson is baffled at how natural the show sounds, despite how much editing we do.
- Andrew Mason recommend that we use Descript for future editing – we've both given it a brief try, but will continue exploring if it can make our editing process better.
- Michael MacLeod also knows what an "um" looks like.
- Udie Chima agreed about the anxiety that can often come up when last minute changes come in while building a problem. It's not just you!
- Kevin Haag came in hot as our 128th Patreon supporter. Ruby Chen was 127! Jason Jun was number 100 – a round number for normal people, but not for us!
Industry Talk:
Sketch and Figma
- Sketch Smart Layout is powerful and flexible, but comes with tradeoffs of high setup time, and requires the use of symbols to add smart layout.
- Figma Auto Layout feels underpowered, but is a step in the right direction. The biggest miss is the lack of constraints support, but the flexibility of being able to add auto layout to any frame, not just components, makes it very fast to create lockups.
- Both tools are relatively new, and have come a long way. We're ultimately happy with the few sets of use cases where Smart Layout and Auto Layout can save a designer a lot of time creating mocks. But we're concerned that both tools are built with entirely different mental models than code, making it challenging to move between design and development.
CSS and SwiftUI
- CSS is ridiculously flexible. This flexibility, unfortunately, means that developers get very few things for free. It takes a lot of built-up knowledge to understand the many ways to wrangle CSS into making something that is visually pleasing, accessible, and fast.
- SwiftUI is brand new and unfinished, leaving a lot of gaps in the toolset and documentation. That said, the primitives and opinionated defaults are incredibly simple, but allow for the creation of wildly complex application layouts.
- Ultimately, both SwiftUI and CSS are designed to provide designers and developers with a structured set of primitives that will allow for the creation of complex and dynamic user interfaces. These primitives come with a mental model is is dramatically different from what is given to designers in Figma and Sketch.
Cool Things:
- Marshall shared Futuristic Violence and Fancy Suits by David Wong (who also wrote John Dies at the End), is a book about a girl who lives in a trailer park gets caught up in a whirlwind of trouble when her billionaire relative dies and leaves her with all of the money.
- Brian shared Better, a content blocker for Safari that works on both Mac and iOS. It's a browser extension that prevents ads and malicious tracking from being active on the websites you visit.
Design Details on the Web:
- 📻 We are @designdetailsfm
- 🎙 Brian is @brian_lovin and brian@designdetails.fm
- 🎙 Marshall is @marshallbock and marshall@designdetails.fm
- 🙌 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
BYE BYE.
The AI-powered Podcast Player
