Date: Thu, 12 Oct 2017 20:21:00 +0000
<p>Topics include:</p><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><p>Sponsors:</p><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><p>Links:</p><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 <em>(great resource on HSL)</em> </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>
