Adam Wathan

Technika

74: Steve Schoger - Tactical Design Advice for Developers

Full Stack Radio

A podcast for developers interested in building great software products. Every episode, Adam Wathan is joined by a guest to talk about everything from product design and user experience to unit testing and system administration.

Topics include:<ul>
<li>How to pick great fonts</li>
<li>Choosing a color scheme for your project</li>
<li>Designing in greyscale</li>
<li>Recreating existing interfaces from scratch</li>
<li>Recommended design tools</li>
<li>What you should design first on a new page</li>
<li>Strategies for making things look professional without graphic design skills</li>
</ul>Sponsors:<ul><li>
<a href="https://rollbar.com/fullstackradio">Rollbar</a>, sign up at https://rollbar.com/fullstackradio to try their Bootstrap Plan free for 90 days</li></ul>Links:<ul>
<li><a href="http://www.steveschoger.com/">Steve's Blog</a></li>
<li>
<a href="https://twitter.com/i/moments/880688233641848832">Little UI Details</a>, a collection of Steve's hot design tips</li>
<li><a href="https://fonts.google.com/?category=Sans+Serif&sort=popularity&stylecount=10">Google Fonts, prefiltered</a></li>
<li>
<a href="http://www.steveschoger.com/2017/04/26/12-google-fonts-you-cant-go-wrong-with/">"12 Google Fonts You Can't Go Wrong With"</a>, by Steve</li>
<li>
<a href="https://css-tricks.com/snippets/css/system-font-stack/">System Font Stack</a> courtesy of CSS-Tricks</li>
<li>
<a href="https://github.com/rsms/inter">Inter UI</a> font family (formerly "Interface")</li>
<li><a href="https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=en">WhatFont Chrome Extension</a></li>
<li><a href="https://fontsinuse.com/">Fonts In Use</a></li>
<li><a href="https://dribbble.com/colors/">Dribbble color picker</a></li>
<li>
<a href="https://medium.com/@erikdkennedy/color-in-ui-design-a-practical-framework-e18cacd97f9e">"Color in UI Design"</a> by Erik Kennedy (great resource on HSL)
</li>
<li>
<a href="https://www.sketchapp.com/">Sketch</a>, design tool for macOS</li>
<li>
<a href="https://www.figma.com/">Figma</a>, cross-platform design tool</li>
<li>
<a href="https://blog.figma.com/building-a-professional-design-tool-on-the-web-6332ed4f1fcc">"Building a professional design tool for the web"</a>, on how Figma is written in C++ and compiled to asm.js</li>
<li>
<a href="https://gettingreal.37signals.com/ch09_Epicenter_Design.php">"Epicenter Design"</a> by 37signals</li>
<li>
<a href="http://doodle.com/">Doodle</a>, example of a small UI</li>
<li>
<a href="https://goshippo.com/login/">Example login page</a>, from Shippo</li>
<li><a href="https://medium.com/refactoring-ui/redesigning-laravel-io-c47ac495dff0">Refactoring UI "Redesigning Laravel.io" case study</a></li>
<li>
<a href="http://www.zondicons.com/">Zondicons</a>, Steve's free SVG icon set</li>
<li>
<a href="http://www.heropatterns.com/">Hero Patterns</a>, Steve's free SVG background pattern gallery</li>
<li>
<a href="https://pushsilver.com/">Pushsilver</a>, example of Hero Patterns in use</li>
<li>
<a href="http://www.heroicons.com/">Heroicons</a>, Steve's premium marketing icon kit</li>
</ul>

Topics include:<ul><li>How to pick great fonts</li><li>Choosing a color scheme for your project</li><li>Designing in greyscale</li><li>Recreating existing interfaces from scratch</li><li>Recommended design tools</li><li>What you should design first on a new page</li><li>Strategies for making things look professional without graphic design skills</li></ul>Sponsors:<ul><li><a href="https://rollbar.com/fullstackradio">Rollbar</a>, sign up at https://rollbar.com/fullstackradio to try their Bootstrap Plan free for 90 days</li></ul>Links:<ul><li><a href="http://www.steveschoger.com/">Steve's Blog</a></li><li><a href="https://twitter.com/i/moments/880688233641848832">Little UI Details</a>, a collection of Steve's hot design tips</li><li><a href="https://fonts.google.com/?category=Sans+Serif&sort=popularity&stylecount=10">Google Fonts, prefiltered</a></li><li><a href="http://www.steveschoger.com/2017/04/26/12-google-fonts-you-cant-go-wrong-with/">"12 Google Fonts You Can't Go Wrong With"</a>, by Steve</li><li><a href="https://css-tricks.com/snippets/css/system-font-stack/">System Font Stack</a> courtesy of CSS-Tricks</li><li><a href="https://github.com/rsms/inter">Inter UI</a> font family (formerly "Interface")</li><li><a href="https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=en">WhatFont Chrome Extension</a></li><li><a href="https://fontsinuse.com/">Fonts In Use</a></li><li><a href="https://dribbble.com/colors/">Dribbble color picker</a></li><li><a href="https://medium.com/@erikdkennedy/color-in-ui-design-a-practical-framework-e18cacd97f9e">"Color in UI Design"</a> by Erik Kennedy (great resource on HSL)</li><li><a href="https://www.sketchapp.com/">Sketch</a>, design tool for macOS</li><li><a href="https://www.figma.com/">Figma</a>, cross-platform design tool</li><li><a href="https://blog.figma.com/building-a-professional-design-tool-on-the-web-6332ed4f1fcc">"Building a professional design tool for the web"</a>, on how Figma is written in C++ and compiled to asm.js</li><li><a href="https://gettingreal.37signals.com/ch09_Epicenter_Design.php">"Epicenter Design"</a> by 37signals</li><li><a href="http://doodle.com/">Doodle</a>, example of a small UI</li><li><a href="https://goshippo.com/login/">Example login page</a>, from Shippo</li><li><a href="https://medium.com/refactoring-ui/redesigning-laravel-io-c47ac495dff0">Refactoring UI "Redesigning Laravel.io" case study</a></li><li><a href="http://www.zondicons.com/">Zondicons</a>, Steve's free SVG icon set</li><li><a href="http://www.heropatterns.com/">Hero Patterns</a>, Steve's free SVG background pattern gallery</li><li><a href="https://pushsilver.com/">Pushsilver</a>, example of Hero Patterns in use</li><li><a href="http://www.heroicons.com/">Heroicons</a>, Steve's premium marketing icon kit</li></ul>

Aplikace Youradio Talk

74: Steve Schoger - Tactical Design Advice for Developers

Poslechněte si podcast