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 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.com
Tools
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 Academy
Techniques
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 techniques
Habits
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