Log in

goodpods headphones icon

To access all our features

Open the Goodpods app
Close icon
headphones
The Overlap

The Overlap

Elle Trost & Alex Trost

The Overlap is a podcast that explores the intersection of Design and Front End Development. On the show, we discuss all things design and development in a fun and easy-to-listen-to way. Some topics we cover are typography, React, productivity, focus, designing for print, freelancing tips, and much more.
bookmark
Share icon

All episodes

Best episodes

Seasons

Top 10 The Overlap Episodes

Goodpods has curated a list of the 10 best The Overlap episodes, ranked by the number of listens and likes each episode have garnered from our listeners. If you are listening to The Overlap for the first time, there's no better place to start than with one of these standout episodes. If you are a fan of the show, vote for your favorite The Overlap episode by adding your comments to the episode page.

Design and development can get messy. Real messy. Downloads folder messy. On this episode, we talk about how to manage the mess and make it easier to collaborate with other people. Elle also realizes just how far-reaching her obsessive compulsive tendencies can go. Whether you work alone or with a team, keeping your files tidy and logically organized can save you a LOT of headaches.
Questions? Email us
[email protected]
Tweet us @lovelettersco or @mistertrost
Follow the show @overlappod
For more episodes + show notes, visit
overlappodcast.com

bookmark
plus icon
share episode
The Overlap - CSS Grid: The newest layout tool for the web
play

08/07/19 • 82 min

In this episode we cover CSS Grid, a new layout tool for the web. When it comes to positioning elements on the web, CSS Grid marks a huge step forward for developers. It's easy to learn, with lots of parallels with the grid in other design practices so designers will love it too.

And hey, quit using table elements to create your layouts!
Questions? Email us
[email protected]
Tweet us @lovelettersco or @mistertrost
Follow the show @overlappod
For more episodes + show notes, visit
overlappodcast.com
Resources

Rachel Andrew's Grid by Example: https://gridbyexample.com/patterns/ on twitter @rachelandrew

https://css-tricks.com/snippets/css/css-grid-starter-layouts/

https://css-tricks.com/snippets/css/complete-guide-grid/

https://twitter.com/jensimmons

https://alistapart.com/article/the-story-of-css-grid-from-its-creators/

Webflow's Grid Tool: https://webflow.com/grid

Sarah Drasner's CSS Grid Generator: https://cssgrid-generator.netlify.com/

CSS Grid Courses

Wes Bos' free course https://cssgrid.io/

Free Code Camp's Video course https://www.youtube.com/watch?v=t6CBKf8K_Ac

bookmark
plus icon
share episode
The Overlap - What is UX? An Intro to User Experience Design
play

07/09/19 • 49 min

What is UX? An intro to User Experience (No, UX is not UI)

What is User Experience? How is it different from User Interface design? What if all buttons were now alpacas?
In this episode, we introduce the field of UX design and some of the basic principles you should know to design and develop great experiences.
We discuss the fundamentals of good UX: Usability, accessibility, desirability, findability, credibility, the importance of following established patterns...and when to break the rules.

Questions? Email us

[email protected]

Tweet us @lovelettersco or @mistertrost

For more episodes + show notes, visit

overlappodcast.com

Resources

https://lawsofux.com/

https://theblog.adobe.com/15-rules-every-ux-designer-know/

https://uxplanet.org/golden-rules-of-user-interface-design-19282aeb06b

https://www.usability.gov/what-and-why/user-experience.html

https://www.interaction-design.org/literature

Aesthetic usability effect: https://www.nngroup.com/articles/aesthetic-usability-effect/

Design thinking: https://www.atlassian.com/team-playbook/plays

Don't Make Me Think by Steve Krug https://www.amazon.com/Dont-Make-Think-Revisited-Usability/dp/0321965515/

bookmark
plus icon
share episode

Static Site Generators are way cooler than they sound! Learn about the coolest way to build a fast website and save your money. Plus, we talk about Alex's new rug in everyone's favorite podcast game: Guess The Rug.
Questions? Email us

[email protected]

Tweet us @lovelettersco or @mistertrost

For more episodes + show notes, visit

overlappodcast.com

Resources:

Gatsby: https://www.gatsbyjs.org/

Hugo: https://gohugo.io/

Jekyll: https://jekyllrb.com/

StaticGen: https://www.staticgen.com/

Gatsby with Airtable (Not the best, most effective CMS for blogs, but still cool: https://www.gatsbyjs.org/packages/gatsby-source-airtable/

bookmark
plus icon
share episode

Show notes:

Typography: so hip right now, but what is it? This week, we are talking type. It's more than just clickity clackity typey typey onto your keyboard. It's part science, part art, part dumb jokes about fonts. Join us for our spooky typography party!

Questions? Email us

[email protected]

Tweet us @lovelettersco or @mistertrost

For more episodes + show notes, visit

overlappodcast.com

Resources:

Font pairing:

https://fonts.google.com/featured/Five+Fresh+Headline+and+Body+Text+Pairings

https://www.typewolf.com/

Chiller: https://fontzone.net/font-details/chiller

Criteria: https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html

Tool: https://webaim.org/resources/contrastchecker/https://material.io/design/typography/understanding-typography.html

Vertical Rhythm:

http://typecast.com/blog/4-simple-steps-to-vertical-rhythm

Framer: https://www.framer.com

bookmark
plus icon
share episode

Creative briefs, design briefs, brand briefs, project briefs...whatever you want to call it, the goal is always the same: Successful design + development projects. On this episode, we talk about the creative brief, an essential document that can position you as an expert and help you get buy-in from your client at the beginning of a project. Kicking off a new project? Try using a creative brief to guide your conversation and ask your client the right questions. Creative briefs can be used for any collaborative creative work and are a great project management tool.

Resources

Building an Effective Creative Brief Template: https://www.wrike.com/blog/creative-brief-template-elements-effective-brief/

How to write an effective design brief: examples and a free template to get you started:
https://www.canva.com/learn/effective-design-brief/

bookmark
plus icon
share episode

Jason Lengstorf is an advocate, engineer, and sometimes designer. As "Human Duct Tape", Jason tells us about the little-bit-of-everything he does at Gatsby. On this episode, we talk to Jason about what's new with Gatsby (Themes! Preview beta!), building a positive open-source community, how to connect technology to build awesome stuff, and how important it is to fully disconnect from the day job to stay creative.

Want to hear more from Jason? You can catch him on May 6th at Gatsby Days in NYC.

https://www.eventbrite.com/e/gatsby-days-nyc-tickets-59556433897

You can find him on Twitter @jlengstorf or catch on Thursday mornings on Learn with Jason at 9AM PST on https://twitch.tv/jlengstorf

https://github.com/jlengstorf

Questions? Email us

[email protected]

Tweet us @lovelettersco or @mistertrost

For more episodes + show notes, visit

overlappodcast.com

bookmark
plus icon
share episode

Show Notes

On this episode Alex teaches Elle about the JavaScript library React. Developers use React to create apps and websites, and it’s great for designers to be familiar with. We introduce the big concepts of React along with its purpose and guiding principles. We talk about how easy it is to pick up, and give you some great places to go next to learn React.

  • What is React
  • You tell React what you want to show on the UI and React figures out the fastest way to achieve it
  • React is Super Fast
  • React can be whole site or one part
  • JSX
  • Components
    • Sections of reusable code
    • Either a piece of the UI, a piece that adds functionality, or both
    • Less code written, easier to maintain
    • When to create a component
    • Nesting Components
  • Props and State (Data)
  • Event Handling
  • Routing
  • Lifecycle Methods
  • Setup Options
  • How To Learn
  • React Native (Mobile)
  • Who uses React?
    • Facebook
    • Instagram
    • Netflix
    • Reddit
    • New York Times
    • Khan Academy
    • Dropbox
    • AirBnB
    • Trello
    • Fiverr
    • Asana
    • ATrost.com (Shameless Plug)
    • And many more

Questions? Email us

[email protected]

Tweet us @lovelettersco or @mistertrost

For more episodes + show notes, visit

overlappodcast.com

bookmark
plus icon
share episode

Print's not dead! On this episode, we talk about why color looks different on screen and on paper, how best to handle a document for print, tips on handling fonts, and the difference between Adobe Illustrator and Indesign.

If you're a developer, being able to order print can help you deepen existing client partnerships and land new projects. If you're new to print design, we've got some helpful hints on how to navigate the jargon-filled world of print.

Questions? Email us

[email protected]

Tweet us @lovelettersco or @mistertrost

For more episodes + show notes, visit

overlappodcast.com

Resources:

Online print vendors: smartpress.com + stationeryhq.com

Local Philadelphia Printers: http://www.expresswayprinting.com/ + https://perfectcommunications.com/

Online InDesign classes: @paperandoats

bookmark
plus icon
share episode

Have you ever wondered what to charge a client for design or development work? On our first episode, we discuss different pricing structures, why it's important not to undermine others in the creative industry, and how to articulate the value of design to your clients.
Questions?
Email us [email protected]
Tweet us @lovelettersco or @mistertrost
For more episodes + show notes, visit overlappodcast.com
Resources:
https://careerfoundry.com/en/blog/career-change/pricing-freelancer/

The Designer's Guide to Marketing and Pricing https://www.amazon.com/dp/B007S2UQAW/ref=dp-kindle-redirect?_encoding=UTF8&btkr=1

Freelance Design in Practice https://www.amazon.com/Freelance-Design-Practice-Cathy-Fishel/dp/1600613020/ref=sr_1_1?keywords=freelance+design+in+practice&qid=1552959045&s=digital-text&sr=8-1

Elle's accounting app: www.waveapps.com

bookmark
plus icon
share episode

Show more best episodes

Toggle view more icon

FAQ

How many episodes does The Overlap have?

The Overlap currently has 12 episodes available.

What topics does The Overlap cover?

The podcast is about Graphic Design, Design, Development, Freelance, Podcasts, Education, Arts and Programming.

What is the most popular episode on The Overlap?

The episode title 'CSS Grid: The newest layout tool for the web' is the most popular.

What is the average episode length on The Overlap?

The average episode length on The Overlap is 49 minutes.

How often are episodes of The Overlap released?

Episodes of The Overlap are typically released every 14 days.

When was the first episode of The Overlap?

The first episode of The Overlap was released on Mar 10, 2019.

Show more FAQ

Toggle view more icon

Comments