Design Foundations For Developers

Syntax - Tasty Web Development Treats

Wes Bos

Tech News, News, Technology

4.9 • 1.2K Ratings

🗓️ 13 November 2019

⏱️ 62 minutes

🔗️ Recording | iTunes | RSS

🧾️ Download transcript

Summary

In this episode of Syntax, Scott and Wes talk about design foundations for developers — tips to follow that will make your designs better! Sanity - Sponsor Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax. Freshbooks - Sponsor Get a 30 day free trial of Freshbooks at freshbooks.com/syntax and put SYNTAX in the “How did you hear about us?” section. Show Notes 6:35 - Our backgrounds in design 12:41 - Foundations Consistency makes a big difference Use “training wheel” tools until you are confident Always work within a system Less is more - subtle is better 19:39 - Color Color theory Complementary colors and shades Stick to color pallet generators until you are good enough 28:51 - Spacing More spacing than you think you need Vertical rhythm Letter spacing: -1px Consistent margin and padding 34:47 - Typography Sans vs serifs Finding fonts Use proven combinations until you know your way around 41:49 - Interaction Design for all states (e.g. standard, visited, active, hover, etc.) Animations should be quick Interactions should make sense 45:04 - Concerns beyond visuals Accessibility via color contrast Thin fonts and light grey are awful Think about the poor Windows users 48:47 - Inspiration + Resources Take inspiration from the best — you’ll find your own voice after enough work Go easy on trends - blobby characters with purple hair Take a trip around the world wide web Stripe Dribbble Site Inspire codrops Refactoring UI Links Designer Starter Pack - Andrea Crofts LastPass Colour Lovers Syntax 142: Travis Neilson on Skills Gap, Design, Focus and Working at Google Bloomberg Dropbox FontPair FontJoy Figma - Google Font Pairings Type Scale Creative Market Radnika Next Stripe Dribbble Syntax 72: Accessibility Firefox Site Inspire codrops Refactoring UI Adam Wathan Steve Schoger ××× SIIIIICK ××× PIIIICKS ××× Scott: Reelgood Wes: Magnesium Shameless Plugs Scott: FullStack React with NextJS - Sign up for the year and save 25%! Wes: Beginner Javascript Tweet us your tasty treats! Scott’s Instagram LevelUpTutorials Instagram Wes’ Instagram Wes’ Twitter Wes’ Facebook Scott’s Twitter Make sure to include @SyntaxFM in your tweets

Transcript

Click on a timestamp to play from that location

0:00.0	You're listening to Syntax, the podcast with the tastiest web development treats out there.
0:06.0	Strap yourself in and get ready.
0:08.0	Here is Scott Tolinsky and Wes Boss.
0:10.4	Welcome to Syntax, this is the podcast with the tastiest web design treats.
0:15.0	Today we're talking about what are the design foundations that you as a web developer need to know in order to make something look good. I think there's like probably
0:24.9	a handful of rules. You can probably listen to this podcast and if you apply those, your
0:28.9	design skills will get much better. Today we are sponsored by two awesome companies. First one is
0:33.8	sanity which is a structured content CMS and the second one is Fresh Books which is
0:39.4	a cloud accounting software. So with me as always is Mr. Scott Tolinsky. How you doing today Scott?
0:45.6	They doing good. We have grandma and grand pine town visiting so it's a lot of fun.
0:50.6	The kids are having a blast and everything's just a little bit easier for us.
0:55.0	It's not just us to hanging out with the kids.
0:58.0	So having a good week.
1:00.0	How about you? That's good.
1:01.0	Good. I'm doing pretty good as well.
1:02.0	I just sent off an email to my email list about my upcoming JavaScript course just detailing a little bit here and there and I hadn't sent an email and probably six or seven months. I don't tend to send email a lot which
1:14.6	goes against the grain of what a lot of people say to do but what I do is I just
1:19.8	put a huge unsubscribed button at the top of the email and like, hey, if you don't want to be here,
1:24.4	hit the unsubscribed button. And I was just like marveling at how the unsubscribed rates are not at all
1:30.3	higher when you do that versus when you hide it in a gray link in the
1:33.9	footer. Sure, yeah. And it's pretty good. Like I really, first of all I think that
1:39.3	probably speaks to people that are subscribed, but also like I don't know why all people don't do that right
	...

Please login to see the full transcript.

Previous episode | Next episode

Disclaimer: The podcast and artwork embedded on this page are from Wes Bos, and are the property of its owner and not affiliated with or endorsed by Tapesearch.

Generated transcripts are the property of Wes Bos and are distributed freely under the Fair Use doctrine. Transcripts generated by Tapesearch are not guaranteed to be accurate.