May 5, 2014
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