Erica Heinz's guest appearances

Erica Heinz

The Busy Creator Podcast with Prescott Perez-Fox

Michael Bierut

Gabby Wallace

Cal Newport

Cathryn Lavery

Laura Roeder

Jim Hopkinson

Eric Kass

Douglas Davis

Betsy Helmuth

Debbie Millman

Steve Dotto

Todd Henry

Laura Thomas

Lisa Cummings

John Hargrave

OwlTail

The Busy Creator Podcast episode 10, with guest Web Designer Erica Heinz Erica Heinz (@ericaheinz) is a web designer in Brooklyn, NY. As a veteran freelancer, she’s work for a variety of clients and sectors, lately focusing on fast development around humanitarian and public sector projects. She’s also a teacher of web design, and of yoga. Together, Prescott and Erica discuss tools of the trade, best practices for web designers, how to continue to learn, and how to avoid becoming overwhelmed by systems. This episode features the most in-depth show notes to date, with a ton of links to websites, tools, and tips.Show Notes &amp; Links Previous web designers on The Busy Creator Podcast, Niki Brown Erica does Humanitarian Work and Rapid-Responce work Occupy Sandy, built in 6 Days Peace Talks in Ireland for the Council on Foreign Relations A microsite for Richard Branson’s B Team, done in 3 weeks Prototyping Prescott hates the term “Product Designer” in the realm of Web Design “Visual Designer” is a term that was fast outdated Description vs. Rank in terms of job titles Erica started in illustration, switched to design for the problem-solving Terms like “New Media” for early Internet instruction From fashion to packaging to software, Erica’s freelance career Erica is an early adopter, but not bleeding edge Studiomates, bunch of smart people Using SASS to streamline a web workflow BusyCreator.com is really just the basics A Book Apart‘s books Parsons, The New School for Design ADOCHD (ADHD with OCD thrown in there) “I have CDO …” Blister pack of pills … for OCD “The Self-Licking Ice Cream Cone“ Not everything is a checkbox (I’m looking at you, Basecamp.) Getting Things Done philosophy “GitHub is the new View Source.” “HTML elements are like the alphabet.” Jen Simmons on Drupal.org Jonnie Hallman on Ruby on Rails “Do things the long, hard, stupid way.“ So-called “Hacker/Garage Culture” “A really good website lasts two years, and then it’s gone.” Agile development EricaHeinz.comTools SASS Digital Typography on the web: Adobe Typekit, @font-face, etc. HTML5 (with fallbacks) Codekit, a way to compile code locally on your Mac Coda, a text editor SublimeText, another text editor Emmet, CSS shorthand Chrome, and its extensions Safari, fewer extensions but many the same Awesome Screenshot, extensions 1Password, a Mac/iOS utility to store passwords Pinboard, social bookmarking for introverts Instapaper Dropmark, quick-saving of images, links Pocket, formerly Read It Later Stylebot, add a new CSS Bit.ly, for shortening Gimme Bar, for random stuff Browser Resize, for viewing your site in multiple sizes Pepperplate, for recipes Momentum, for new tabs Basecamp Kanban Flow Dragdis, a browser add-on to quick-save items Sprint.ly, collaboration for development Waffle.io, a Kanban board for GitHub issues TeuxDeux Multiple Inboxes for Gmail Coloured Stars add-on Pivotal Tracker (which Erica refuses to use) Slack, combines IRC and file changes, great for team communication Subversion LayerVault, version control for Photoshop Editorial.ly, collaborative writing Dropbox, with previous revisions Google Drive Skillshare Bourbon/Bourbon Neat CSS Mixins Code AcademyTechniques Clarify team roles as to who does what (e.g. UX, front-end design, back-end dev.) Stay ahead of the curve to avoid headache later Use Post-Its on a wall; colour-code for different aspects Keep a postcard wall (outside of the computer) Rearrange your Top 3 on the board, use small Post-Its on top of the index cards Find a set of tools that work for you. You don’t have to be up-to-date on everything. Go for 80%; let go of the compulsive tweaking of the last bit. Use three-letter client codes Use bullets to indicate time requirements (e.g. •••big effort, •not so much) Learn how to build stuff from scratch Be honest about what you should be doing in each moment Try yoga or breathing techniquesHabits Systematize your projects for sharing and collaborating. Maintain the system, but not to a crippling degree. Keep email separated by inboxes Keep learning. Keep updating your workflows and skills. Erica’s workflow Phase 1. Content and Site Map, Brand Erica’s workflow Phase 2. Visual expression, typography, and details Erica’s workflow Phase 3. Development, frameworks Comment your own HTML and CSS code (e.g. “// Trust me, keep this.”) Change your routines every once in a while Erica is a night owl, enjoys being “out of sync” Break your day into 2- or 3-hour chunks Keep “busy” work for later in the day, when your brain is tired

The Busy Creator Podcast episode 10, with guest Web Designer Erica Heinz Erica Heinz (<a href="http://twitter.com/ericaheinz" rel="nofollow" target="_blank">@ericaheinz</a>) is a web designer in Brooklyn, NY. As a veteran freelancer, she’s work for a variety of clients and sectors, lately focusing on fast development around humanitarian and public sector projects. She’s also a teacher of web design, and of yoga. Together, Prescott and Erica discuss tools of the trade, best practices for web designers, how to continue to learn, and how to avoid becoming overwhelmed by systems. This episode features the most in-depth show notes to date, with a ton of links to websites, tools, and tips.Show Notes &amp; Links <ul> <li>Previous web designers on The Busy Creator Podcast, <a href="http://busycreator.com/2014/02/24/thebusycreator_4_nikibrown_lizandrade/" rel="nofollow" target="_blank">Niki Brown</a></li> <li>Erica does Humanitarian Work and Rapid-Responce work</li> <li><a href="http://occupysandy.net/" rel="nofollow" target="_blank">Occupy Sandy</a>, built in 6 Days</li> <li><a href="http://panelofpartiesnie.com/" rel="nofollow" target="_blank">Peace Talks in Ireland</a> for the <a href="http://www.cfr.org/" rel="nofollow" target="_blank">Council on Foreign Relations</a></li> <li>A microsite for <a href="http://bteam.org/" rel="nofollow" target="_blank">Richard Branson’s B Team</a>, done in 3 weeks</li> <li>Prototyping</li> <li>Prescott hates the term “Product Designer” in the realm of Web Design</li> <li>“Visual Designer” is a term that was fast outdated</li> <li>Description vs. Rank in terms of job titles</li> <li>Erica started in illustration, switched to design for the problem-solving</li> <li>Terms like “New Media” for early Internet instruction</li> <li>From fashion to packaging to software, Erica’s freelance career</li> <li>Erica is an early adopter, but not bleeding edge</li> <li><a href="http://www.studiomates.com/" rel="nofollow" target="_blank">Studiomates</a>, bunch of smart people</li> <li>Using <a href="http://sass-lang.com/" rel="nofollow" target="_blank">SASS</a> to streamline a web workflow</li> <li><a href="http://BusyCreator.com" rel="nofollow" target="_blank">BusyCreator.com</a> is really just the basics</li> <li><a href="http://www.abookapart.com/" rel="nofollow" target="_blank">A Book Apart</a>‘s books</li> <li><a href="http://www.newschool.edu/parsons/" rel="nofollow" target="_blank">Parsons, The New School for Design</a></li> <li>ADOCHD (ADHD with OCD thrown in there)</li> <li>“I have CDO …”<a href="http://busycreator.com/wp-content/uploads/2014/05/1634204-i_have_cdo_ocd_trollcat_super.jpg" rel="nofollow" target="_blank"></a></li> <li><a href="http://imgur.com/DxoydP1" rel="nofollow" target="_blank">Blister pack of pills … for OCD</a><a href="http://busycreator.com/wp-content/uploads/2014/05/DxoydP1.jpg" rel="nofollow" target="_blank"></a></li> <li>“<a href="http://en.wikipedia.org/wiki/Self-licking_ice_cream_cone" rel="nofollow" target="_blank">The Self-Licking Ice Cream Cone</a>“</li> <li>Not everything is a checkbox (I’m looking at you, <a href="http://basecamp.com/" rel="nofollow" target="_blank">Basecamp</a>.)</li> <li><a href="https://www.amazon.com/Getting-Things-Done-Stress-Free-Productivity/dp/0142000280/ref=as_li_ss_til?tag=busycreator-20&amp;linkCode=w01&amp;linkId=2ABSIQKGSCXLXAZL&amp;creativeASIN=0142000280" rel="nofollow" target="_blank">Getting Things Done</a> philosophy<a href="http://www.amazon.com/gp/product/0142000280/ref=as_li_tl?ie=UTF8&amp;camp=1789&amp;creative=390957&amp;creativeASIN=0142000280&amp;linkCode=as2&amp;tag=busycreator-20&amp;linkId=QHF3JOTVAZ6LUTPV" rel="nofollow" target="_blank"></a></li> <li>“<a href="http://github.com/" rel="nofollow" target="_blank">GitHub</a> is the new View Source.”</li> <li>“HTML elements are like the alphabet.”</li> <li><a href="http://jensimmons.com/" rel="nofollow" target="_blank">Jen Simmons</a> on <a href="https://drupal.org/user/140882" rel="nofollow" target="_blank">Drupal.org</a></li> <li><a href="http://busycreator.com/2014/05/05/the-busy-creator-episode-10-with-web-designer-erica-heinz/Jonnie%20Hallman" rel="nofollow" target="_blank">Jonnie Hallman</a> on Ruby on Rails</li> <li>“<a href="https://www.youtube.com/watch?v=WjSOZI90PmE" rel="nofollow" target="_blank">Do things the long, hard, stupid way.</a>“</li> <li>So-called “Hacker/Garage Culture”</li> <li>“A really good website lasts two years, and then it’s gone.”</li> <li><a href="http://en.wikipedia.org/wiki/Agile_software_development" rel="nofollow" target="_blank">Agile development</a></li> <li><a href="http://www.ericaheinz.com/" rel="nofollow" target="_blank">EricaHeinz.com</a></li></ul>Tools <ul> <li><a href="http://sass-lang.com/" rel="nofollow" target="_blank">SASS</a></li> <li>Digital Typography on the web: <a href="https://typekit.com/" rel="nofollow" target="_blank">Adobe Typekit</a>, <a href="http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp" rel="nofollow" target="_blank">@font-face</a>, etc.</li> <li><a href="http://www.w3schools.com/html/html5_intro.asp" rel="nofollow" target="_blank">HTML5</a> (with fallbacks)</li> <li><a href="https://incident57.com/codekit/" rel="nofollow" target="_blank">Codekit</a>, a way to compile code locally on your Mac</li> <li><a href="https://panic.com/coda/" rel="nofollow" target="_blank">Coda</a>, a text editor</li> <li><a href="http://www.sublimetext.com/" rel="nofollow" target="_blank">SublimeText</a>, another text editor</li> <li><a href="http://emmet.io/" rel="nofollow" target="_blank">Emmet</a>, CSS shorthand</li> <li><a href="https://www.google.com/intl/en/chrome/browser/" rel="nofollow" target="_blank">Chrome</a>, and its <a href="https://chrome.google.com/webstore/category/extensions" rel="nofollow" target="_blank">extensions</a></li> <li><a href="https://www.apple.com/safari/" rel="nofollow" target="_blank">Safari</a>, fewer <a href="https://extensions.apple.com/" rel="nofollow" target="_blank">extensions</a> but many the same</li> <li><a href="http://awesomescreenshot.com/" rel="nofollow" target="_blank">Awesome Screenshot</a>, extensions</li> <li><a href="https://agilebits.com/onepassword" rel="nofollow" target="_blank">1Password</a>, a Mac/iOS utility to store passwords</li> <li><a href="https://pinboard.in/" rel="nofollow" target="_blank">Pinboard</a>, social bookmarking for introverts</li> <li><a href="https://www.instapaper.com/" rel="nofollow" target="_blank">Instapaper</a></li> <li><a href="http://dropmark.com/" rel="nofollow" target="_blank">Dropmark</a>, quick-saving of images, links</li> <li><a href="http://getpocket.com/" rel="nofollow" target="_blank">Pocket</a>, formerly Read It Later</li> <li><a href="http://stylebot.me/" rel="nofollow" target="_blank">Stylebot</a>, add a new CSS</li> <li><a href="http://bit.ly/" rel="nofollow" target="_blank">Bit.ly</a>, for shortening</li> <li><a href="http://gimmebar.com/" rel="nofollow" target="_blank">Gimme Bar</a>, for random stuff</li> <li><a href="https://chrome.google.com/webstore/detail/browser-resize/cloloejkphcpbkohccpmkhbgpgplngcd?hl=en" rel="nofollow" target="_blank">Browser Resize</a>, for viewing your site in multiple sizes</li> <li><a href="http://pepperplate.com/" rel="nofollow" target="_blank">Pepperplate</a>, for recipes</li> <li><a href="https://chrome.google.com/webstore/detail/momentum/laookkfknpbbblfpciffpaejjkokdgca?hl=en" rel="nofollow" target="_blank">Momentum</a>, for new tabs</li> <li><a href="http://basecamp.com/" rel="nofollow" target="_blank">Basecamp</a></li> <li><a href="https://kanbanflow.com/" rel="nofollow" target="_blank">Kanban Flow</a></li> <li><a href="http://dragdis.com/" rel="nofollow" target="_blank">Dragdis</a>, a browser add-on to quick-save items</li> <li><a href="http://sprint.ly/" rel="nofollow" target="_blank">Sprint.ly</a>, collaboration for development</li> <li><a href="http://waffle.io/" rel="nofollow" target="_blank">Waffle.io</a>, a Kanban board for GitHub issues</li> <li><a href="https://teuxdeux.com/" rel="nofollow" target="_blank">TeuxDeux</a></li> <li><a href="http://gmailblog.blogspot.com/2009/02/new-in-labs-multiple-inboxes.html" rel="nofollow" target="_blank">Multiple Inboxes</a> for Gmail</li> <li><a href="https://productforums.google.com/forum/#!topic/gmail/ua_GvJlxVTc" rel="nofollow" target="_blank">Coloured Stars add-on</a></li> <li><a href="http://www.pivotaltracker.com/" rel="nofollow" target="_blank">Pivotal Tracker</a> (which Erica refuses to use)</li> <li><a href="http://slack.com/" rel="nofollow" target="_blank">Slack</a>, combines IRC and file changes, great for team communication</li> <li><a href="http://subversion.apache.org/" rel="nofollow" target="_blank">Subversion</a></li> <li><a href="http://layervault.com/" rel="nofollow" target="_blank">LayerVault</a>, version control for Photoshop</li> <li><a href="http://editorial.ly/" rel="nofollow" target="_blank">Editorial.ly</a>, collaborative writing</li> <li><a href="https://db.tt/N56niXzA" rel="nofollow" target="_blank">Dropbox</a>, with previous revisions</li> <li><a href="http://drive.google.com/" rel="nofollow" target="_blank">Google Drive</a></li> <li><a href="http://skillshare.com/" rel="nofollow" target="_blank">Skillshare</a></li> <li><a href="http://bourbon.io/" rel="nofollow" target="_blank">Bourbon</a>/<a href="http://neat.bourbon.io/" rel="nofollow" target="_blank">Bourbon Neat</a></li> <li><a href="http://oocss.org/spec/css-mixins.html" rel="nofollow" target="_blank">CSS Mixins</a></li> <li><a href="http://codeacademy.com/" rel="nofollow" target="_blank">Code Academy</a></li></ul>Techniques <ul> <li>Clarify team roles as to who does what (e.g. UX, front-end design, back-end dev.)</li> <li>Stay ahead of the curve to avoid headache later</li> <li>Use Post-Its on a wall; colour-code for different aspects</li> <li>Keep a postcard wall (outside of the computer)</li> <li>Rearrange your Top 3 on the board, use small Post-Its on top of the index cards</li> <li>Find a set of tools that work for you. You don’t have to be up-to-date on everything.</li> <li>Go for 80%; let go of the compulsive tweaking of the last bit.</li> <li>Use three-letter client codes</li> <li>Use bullets to indicate time requirements (e.g. •••big effort, •not so much)</li> <li>Learn how to build stuff from scratch</li> <li>Be honest about what you should be doing in each moment</li> <li>Try yoga or breathing techniques</li></ul>Habits <ul> <li>Systematize your projects for sharing and collaborating.</li> <li>Maintain the system, but not to a crippling degree.</li> <li>Keep email separated by inboxes</li> <li>Keep learning. Keep updating your workflows and skills.</li> <li>Erica’s workflow Phase 1. Content and Site Map, Brand</li> <li>Erica’s workflow Phase 2. Visual expression, typography, and details</li> <li>Erica’s workflow Phase 3. Development, frameworks</li> <li>Comment your own HTML and CSS code (e.g. “// Trust me, keep this.”)</li> <li>Change your routines every once in a while</li> <li>Erica is a night owl, enjoys being “out of sync”</li> <li>Break your day into 2- or 3-hour chunks</li> <li>Keep “busy” work for later in the day, when your brain is tired</li></ul>

The Busy Creator 10, w/guest Erica Heinz