The Overlap Elle Trost & Alex Trost

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
theoverlappodcast@gmail.com

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

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
theoverlappodcast@gmail.com

Tweet us @lovelettersco or @mistertrost
Follow the show @overlappod

For more episodes + show notes, visit
overlappodcast.com

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
theoverlappodcast@gmail.com
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/

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
theoverlappodcast@gmail.com
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/

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
theoverlappodcast@gmail.com
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

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/