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 & Links
Previous web designers on The Busy Creator Podcast, Niki BrownErica does Humanitarian Work and Rapid-Responce workOccupy Sandy, built in 6 DaysPeace Talks in Ireland for the Council on Foreign RelationsA microsite for Richard Branson’s B Team, done in 3 weeksPrototypingPrescott hates the term “Product Designer” in the realm of Web Design“Visual Designer” is a term that was fast outdatedDescription vs. Rank in terms of job titlesErica started in illustration, switched to design for the problem-solvingTerms like “New Media” for early Internet instructionFrom fashion to packaging to software, Erica’s freelance careerErica is an early adopter, but not bleeding edgeStudiomates, bunch of smart peopleUsing SASS to streamline a web workflowBusyCreator.com is really just the basicsA Book Apart‘s booksParsons, The New School for DesignADOCHD (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.orgJonnie 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 developmentEricaHeinz.comTools
SASSDigital Typography on the web: Adobe Typekit, @font-face, etc.HTML5 (with fallbacks)Codekit, a way to compile code locally on your MacCoda, a text editorSublimeText, another text editorEmmet, CSS shorthandChrome, and its extensionsSafari, fewer extensions but many the sameAwesome Screenshot, extensions1Password, a Mac/iOS utility to store passwordsPinboard, social bookmarking for introvertsInstapaperDropmark, quick-saving of images, linksPocket, formerly Read It LaterStylebot, add a new CSSBit.ly, for shorteningGimme Bar, for random stuffBrowser Resize, for viewing your site in multiple sizesPepperplate, for recipesMomentum, for new tabsBasecampKanban FlowDragdis, a browser add-on to quick-save itemsSprint.ly, collaboration for developmentWaffle.io, a Kanban board for GitHub issuesTeuxDeuxMultiple Inboxes for GmailColoured Stars add-onPivotal Tracker (which Erica refuses to use)Slack, combines IRC and file changes, great for team communicationSubversionLayerVault, version control for PhotoshopEditorial.ly, collaborative writingDropbox, with previous revisionsGoogle DriveSkillshareBourbon/Bourbon NeatCSS MixinsCode 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 laterUse Post-Its on a wall; colour-code for different aspectsKeep a postcard wall (outside of the computer)Rearrange your Top 3 on the board, use small Post-Its on top of the index cardsFind 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 codesUse bullets to indicate time requirements (e.g. •••big effort, •not so much)Learn how to build stuff from scratchBe honest about what you should be doing in each momentTry yoga or breathing techniquesHabits
Systematize your projects for sharing and collaborating.Maintain the system, but not to a crippling degree.Keep email separated by inboxesKeep learning. Keep updating your workflows and skills.Erica’s workflow Phase 1. Content and Site Map, BrandErica’s workflow Phase 2. Visual expression, typography, and detailsErica’s workflow Phase 3. Development, frameworksComment your own HTML and CSS code (e.g. “// Trust me, keep this.”)Change your routines every once in a whileErica is a night owl, enjoys being “out of sync”Break your day into 2- or 3-hour chunksKeep “busy” work for later in the day, when your brain is tired