web design apps

Complexity begets complexity. The number of apps needed to build a website seems to have multiplied. These are just SOME of what's living on my hard drive.

You’re Going to Need These

Picking the right tools for the job.

The last time I was heavily involved (other than the last year) with web design was 2004. In terms of workflow, tech and layout, 2004 might as well be a hundred years ago. So much has changed. Flash (for all intents and purposes) is dead. HTML5 is the new hotness. CSS, with the CSS3 specification, is finally giving designers the tools necessary to create sophisticated layouts for digital media. And probably most notably, mobile devices are now the favored way to view online content. Seems I returned to an entirely new world filled with preprocessors, libraries, CMS, frameworks, repos, hundreds of languages and virtually an unlimited array of screen sizes.

Still, you won’t find me crying over the disappearance 800 X 600 resolutions, AOL CDs (those things were everywhere) and 28K modems. The things that are possible now with just css and HTML are absolutely amazing to me. With all that cool new stuff comes complexity. The process of merely choosing a toolset was enough to cause a Cerebrovascular-Accident.

Just Pick One Already

I probably took this decision a little more seriously than I needed to, but I was looking at developing an entire WordPress site from nothing. And I wanted to write as much of it as possible — forgoing plugins and copy/pasting large blocks of code. I wanted my first build to be a good learning experience for a modern workflow but give me a more intimate understanding of WP. I needed my toolset to be (1) easy to use and set up, (2) be capable of advanced functionality when needed (3) available for Mac, (4) preferably free and (5) have a GUI. This last one – yes I’ve read all the terminal is cooler arguments and I just don’t care – I remember orange screens and command line. It’s how I learned to use a computer and how I learned to appreciate a GUI. Besides that, I’m a designer and I like things that are designered. The following is where I landed with my first basic toolkit for web “designment.”

  • Sticky Notes (the real ones): sitemaps, data visualization, workflow, user goal mapping – I use these things everywhere
  • Grid Paper (I like the stuff with dots instead of lines)
  • Pencils/Pens/Sharpies: you do sketch your ideas, don’t you?
  • Illustrator: wireframes, mockups, prototyping
  • Photoshop: images — layouts are best done in a layout program
  • MAMP: local web host
  • CodeKit: frameworks, compilers and live (local) previews
  • SQL Pro: database management
  • Text Editor: depending on need/mood I could be using any one of these
    • Brackets: primary
    • Atom: secondary, but it sucks up like 80% of my CPU — probably due to bad extensions
    • Dreamweaver: former exclusive, my version doesn’t handle CSS Preprocessing
  • WordPress: CMS
  • Version Control: admittedly, I’m still deciding and haven’t found any I’m really excited about
  • Browsers
    • Safari: default
    • Firefox: secondary — firebug is great for finding issues
    • Chrome: google — they own the world I think
    • Opera: starting to grow on me
  • BrowserShots.org: free cross-browser testing

I think that about covers it. It’s a lot bigger and even though it’s supposed to save time, I could do most of the stuff from actual page building  forward in just one application: Dreamweaver. But I haven’t been able to find a Sass compiler for it. I guess I could revert 30 years and use terminal, but I’m not sure it would work. And, like I said, this is my first go at a modern workflow and for the most part, it works well for me. And that’s just it — it works for me. Right now. On this project. These tools will probably change with each new job and the requirements that govern each.

If you have suggestions, I’d love to hear about your experiences, recommendations or opinions on your own toolbox. So leave a comment below or send me a message.

NOTE: This is the second installment in a series covering the creation of this site.