Ask a Web Designer: “What can’t you live with­out when design­ing a website?”

Con­tin­u­ing now in our monthly series of inter­views with notable web design­ers, we ask the ques­tion “What’s the one thing you couldn’t live with­out when design­ing a web­site?”. Granted this is only the sec­ond install­ment in the series (see: Lis­ten­ing Habits of Highly Effec­tive Web Design­ers) but we’ve just decided to make it a monthly fea­ture! Just like that! It’s cer­tainly no sur­prise that Pho­to­shop fea­tured heav­ily in this sur­vey, but hope­fully read­ers can draw some insight from the work­ing meth­ods and essen­tial tools of the trade from our interviewees.

Enjoy!

Liz Andrade cmd­shift­de­sign

andradeAll the usual, of course… Pho­to­shop, my 960grid tem­plate, a client… but I’ll get a lit­tle more specific.This is some­thing I thought every­one did until I recently saw a fel­low design­ers PSD files.It’s a small thing that makes the process of web design way more pro­duc­tive for me, it’s Layer Groups (Fold­ers) in Pho­to­shop.
As I add more and more ele­ments and embell­ish­ments, my layer palette can get really crazy, so I like to orga­nize it my sec­tions “Header”, “Nav”, “Side­bar”, etc. It keeps every­thing orga­nized and easy to edit, I can put var­i­ous pages lay­outs in that one file and reuse Fold­ers that hold uni­ver­sal ele­ments instead of hav­ing dupli­cate layers.”

Ash­ley Bax­ter I Am Ashley

baxterIt has to be Lit­tleSnap­per. I need an app to file away my dig­i­tal inspi­ra­tion. When­ever a design isn’t quite com­ing together as I had hoped, or I’m maybe stuck on ideas for a par­tic­u­lar aspect, I boot up Lit­tleSnap­per and look through my “inspi­ra­tion” folder. Right now I’m really dig­ging poster design in par­tic­u­lar. Lit­tleSnap­per has become an app I use almost daily.”

Paul Boag Head­scape

boagThe obvi­ous answer would be Pho­to­shop fol­lowed closely by Coda. How­ever, those go with­out say­ing. I think I would have to say a debug tool like Fire­bug or the Web Inspec­tor in Safari. I find it amaz­ingly use­ful to be able to inspect ele­ments, check per­for­mance and make CSS changes in the browser”

Chris Cash­dol­lar Happy Cog

cashdollarThe thing that has been most suc­cess­ful my (and my team’s) design process lately has been rapid iter­at­ing using those HUGE Post-it Self-Stick Wall Pads and a Sharpie. We all value sketch­ing but some­times that can be too pre­cious and detailed. Using these large 20x23 paper can­vases, we can rough out numer­ous and var­ied ideas, dis­cuss them in a group set­ting, and refine before mov­ing on to more pol­ished parts of our process.”

Jacob Cass Just Cre­ative

cassI use Illus­tra­tor for wire­frames and then move into Pho­to­shop for the rest of the work, util­is­ing the 960 Grid Sys­tem as a guide for layout.’”

Chris Coyier CSS Tricks

coyierAt the bare min­i­mum to design a web­site, you need a pro­gram to con­nect to the server (FTP) and the abil­ity to cre­ate and edit text files. So I guess from the most log­i­cal stand­point, if I only can pick one tool, that would be Coda, which does both well. I use it more than any other pro­gram on my com­puter, I’d guess.”

Richard Darell Ink Rebels

darellI would say my brain. With­out it there would be no design to refine at all. I am sure many would go with their favorite app to use but the bot­tom line is that the best tool is actu­ally your brain.
How­ever, with­out a pen­cil to draw what pops up inside my brain I would feel lost. So, I guess it’s a hand in hand col­lab­o­ra­tion between those two that makes for a nice and fresh design.”

Jacob Gube Six Revi­sions

gubeMy graph­ics edi­tor is the one thing I can’t live with­out when design­ing a web­site. That would be Pho­to­shop.”

Jon Hicks Hicks Design

hicksI know a lot of design­ers will say pen and paper, and that is impor­tant, but I have to say Coda. I adore the sin­gle win­dow approach, where I can do a mul­ti­tude of tasks aside from text edit­ing — FTP, SVN, look­ing up ref­er­ence and ter­mi­nal shenani­gans. While those fea­tures are for imple­men­ta­tion, I use the live pre­views to design ‘in the browser’. Using real con­tent and HTML form wid­gets, rather than mock­ing them up in a graph­ics editor.”

Brian Hoff The Design Cubicle

hoffOne thing I def­i­nitely could not live with­out when it comes web design­ing is a tem­plate from 960.gs. Even if a design breaks out­side the grid, the tem­plate serves as an excel­lent base foun­da­tion to get started on an empty canvas. ”

Roger Johans­son 456 Berea St.

johanssonMy Mac.”

Mike Lane M.Lane.net

laneThe books ‘Don’t Make Me Think’ and ‘Rocket Surgery Made Easy’ by Steve Krug — Although the lessons learned within are ever-present, these books are essen­tial ref­er­ence tools for me in cre­at­ing online expe­ri­ences that are as user-friendly as pos­si­ble. Although the con­tent is rel­a­tively basic, peo­ple often ignore the basics and all design­ers can ben­e­fit from reminders of what makes a web­site or appli­ca­tion usable for most peo­ple. These guides help tremen­dously in the areas of design, con­tent and inter­ac­tion strat­egy. I refer to the books often when under­go­ing new projects and highly rec­om­mend them to others.”

Brian McDaniel BKMacDaddy.com

mcdanielFor me, the one thing I couldn’t live with­out would be Adobe Fire­works. I cre­ate all of my mock­ups and design brain­storms in Fire­works because it’s what I orig­i­nally taught myself on. I learned Pho­to­shop a bit later and Fire­works is in many ways bet­ter suited for web design, as that is what it was cre­ated for. I often say it’s a sim­pler ver­sion of Pho­to­shop, which works for a sim­ple guy like me. :)”

Lee Munroe LeeMunroe.com

munroeI’ll go for A3 sheet of paper for sketch­ing and notes — this is where all my web designs start.”

Veerle Pieters Duoh

pietersThat’s an easy one to answer: CSSEdit

Jon Phillips Sprye Stu­dios

phillipsI don’t think I could chose just one thing. I’d say a pen and paper for writ­ing down ideas, sketch­ing and wire­fram­ing, and Adobe Fire­works for design­ing and lay­ing out pages.”

Mike Run­dle Fly­os­ity

rundleThe one thing I couldn’t live with­out would be my exten­sive macros in Text­Mate. I have dozens of macros to auto­mat­i­cally write HTML, CSS and JS for me when press­ing the tab key after a cer­tain sequence of let­ters. For exam­ple, if I hit tab after typ­ing Luc it will expand it to “Lucida Grande”, “Ver­dana”, sans-serif. I’ve got a bunch more for com­mon HTML blocks like unordered lists, insert­ing dummy text with para­graph tags, etc. I’ve also re-mapped the 7 key to trig­ger the built-in auto-completion because it’s faster to type than mov­ing my hand off the key­board to hit the Escape key. If I want to type a real 7 then I mapped Control-7 to do it. It sounds absurd but it’s greatly enhanced my productivity!”

Andy Rut­ledge AndyRutledge.com

rutledgeGotta have the site con­tent. And this is not just the page con­tent for cer­tain pages, but rather the entire site’s con­tents. This is because design­ing the web­site is not sim­ply a mat­ter of cre­at­ing a good can­vas for the respec­tive pages’ con­tent, but is also a mat­ter of mak­ing the fun­da­men­tal choices of site orga­ni­za­tion, con­tent orga­ni­za­tion and com­bi­na­tions, etc. Just because the client has made cer­tain deci­sions about how the site con­tent is orga­nized and balka­nized does not mean that these choices are appro­pri­ate. It’s the designer’s job to eval­u­ate and adjust as required for the client’s best interest.”

Grace Smith Post­Script 5

smithgIt would have to be my Mole­sk­ine Note­book. I don’t go near Pho­to­shop with­out first brain­storm­ing and refin­ing ideas with a pen and paper. I have to let my ideas spill out onto paper to get a real sense of the project I’m work­ing on. At times these are noth­ing more than scrib­bled notes but they’re not meant to be works of art (I’m no Mike Rohde), just merely a way of cap­tur­ing my thoughts and ideas, which i can later refine.
Before I realised my obses­sion with Mole­sk­ine i sim­ply grabbed a piece of plain A4 paper and sketched. How­ever i became tired of reach­ing for ran­dom bits of paper, and I’m now very much in favour of a paper­less office. So i looked for a way to cap­ture my cre­ative process in a neat and unique way, and i found Mole­sk­ine. It’s now an inte­gral part of my design process.”

Mike Smith Made By Guerilla

msmithBesides the obvi­ous answer (Pho­to­shop), I’d have to say that pen­cil and paper would be my #1 choice. I sketch out a lot of design ideas before they go onto the screen and it saves me a hell of a lot of time.”

Steven Snell Van­de­lay Design

snellI’d say pen­cil and paper would prob­a­bly be the hard­est thing for me to do with­out. I typ­i­cally work on designs in Pho­to­shop before cod­ing them, but I’m not very good at jump­ing right into Pho­to­shop. I like to try out dif­fer­ent lay­outs by sketch­ing on paper, and that would be hard for me to change”

Jonathan Snook Snook.ca

snookI don’t think I could do with­out the Inter­net. I used to rely quite a bit on local doc­u­men­ta­tion because band­width was slow. Now, with speedy band­width, I rely heav­ily on the web being avail­able for research and doc­u­men­ta­tion. So much so that trav­el­ing usu­ally means no work. Wifi on planes is my key to productivity—or the destruc­tion of my last sanc­tu­ary, depend­ing on how you look at it!”

Chris Spooner Spoon­Graph­ics

spoonerThe one thing I couldn’t live with­out when design­ing web­sites is good old Fire­bug. This handy plu­gin for Fire­fox makes it a breeze to quickly edit and amend CSS in the browser, and saves stacks of time with­out hav­ing to con­tin­u­ously go through the ‘Switch Appli­ca­tion > Edit > Save > Switch appli­ca­tion’ cycle!”