Ask DN: Because designers should code, what are all the tools you use to develop websites?

over 6 years ago from , Designer & Front-end Developer

Front-end developer tools:

  • MacBook Pro 13" Early 2011
  • OSX El capitan
  • iTerm 2 as a terminal replacement
  • iTerm profiles is Tomorrow night eighties
  • Atom code editor which I'm in love with
  • Atom theme is Atom Material
  • Atom syntax is also Atom Material
  • For websites I usually use Middleman
  • SASS pre processor using scss
  • Bourbon, neat and bitters (I no longer rely on bootstrap which I kinda love)
  • I don't use ftp, I deploy middleman to github pages.

Front-end designer tools:

  • Sketch for interface design
  • Affinity designer for logo and/or vector design
  • Affinity photo for photo editing
  • Zeplin because I'm a one man operation and I need to keep up with the latest trends
  • Invision for prototyping
  • I'm looking into framer, principle and other prototyping tools and have been lost in all the choice.
  • Google drive

I'm interested to hear what your primary tools are when creating websites.

Thanks guys! This community is the best


  • Jonathon HalliwellJonathon Halliwell, over 6 years ago

    Designers should not have to code.

    Likewise developers should not have to design.

    Having an understanding of the related medium in terms of workflow and their fundamental concepts is extremely beneficial to both parties though.

    10 points
  • Thiago Duarte, over 6 years ago

    I see a trollbait title.

    4 points
  • Alec LomasAlec Lomas, over 6 years ago (edited over 6 years ago )
    • Atom
    • Sass (.scss syntax), with Bourbon & Neat if I need them
    • Sometimes Jade
    • Sometimes jQuery, though I try to write vanilla if I can
    • Gulp
    • Adobe CC (mostly PS & Illustrator with some InDesign thrown in for good effect)
    • Field Notes for quick sketches, Leuchtturm1917 notebook for more flushed out ideas
    • Github
    • Codepen
    • Google
    • Coffee
    • Good music
    4 points
  • Benjamin Mikiten, over 6 years ago

    Vim. Just vim.

    Okay, also Photoshop.

    4 points
  • Anton MoritzAnton Moritz, over 6 years ago (edited over 6 years ago )


    • MacBook Pro 15" Unibody, Mid-2011 (time for a new one)
    • OS X El Capitan
    • Magic Mouse
    • Jawbone Big Jambox


    Front-end Development


    • Moleskin journal for the occasional analog sketching
    • Coffee. Cortado if I'm at a café.
    1 point
  • Kuanysh BayandinovKuanysh Bayandinov, over 6 years ago (edited over 6 years ago )

    I like how you put “because designers should code”.

    On the subject, I use vim and sketch.

    1 point
  • E BensleyE Bensley, over 6 years ago

    I'll chime in because I'm curious as well what everyone is using. I've been pretty solid with these tools for a good while now, with the occasional upgrade every few major versions. The latest was the laptop.

    • MacBook Pro 15" Retina mid-2013
    • OSX Yosemite (Planning to upgrade soon)
    • Asus 27" 2560x1440 IPS
    • Brackets editor with SASS compiler
    • Photoshop CC for interface planning
    • Set of 2009 xServes for development
    • xCode beta for app prototypes
    • Moleskin diary for sketches
    • Black felt fine liner for everything

    I know photoshop isn't the in vogue tool for interfaces but the simple fact is I've been using it for years, I know where all the tools are and how to make it work the way I like. I've tried sketch but found it to be just a bit harder to do all the normal things I do, so for now I'm happy.

    1 point
  • Felix MeadowFelix Meadow, over 6 years ago (edited over 6 years ago )

    Xara for design and Webflow to put it together.

    0 points
  • Dillon RaphaelDillon Raphael, over 6 years ago


    • El Capitan
    • Sublime
    • Codekit to handle scss
    • Bourbon and Neat
    • Meteor framework


    • Sketch (duh)
    • Principle for gif mockups
    • IconJar
    • Fontbook
    0 points
  • A. M. ­DouglasA. M. ­Douglas, over 6 years ago (edited over 6 years ago )

    Front · Design

    • iMac (2010...)
    • Affinity Designer/Photo
    • Chrome Dev Tools
    • A text editor


    Front · Development

    • Chrome Dev Tools
    • GitHub Pages (for prototyping... yeah I don't prototype, I just build)
    • My own grid system
    • Vanilla JavaScript. If time is of the essence, jQuery
    • Sass
    • A text editor


    Back · WISC

    • Dell 3840x2160 Ultra-HD monitor (portrait)
    • Windows 8.1
    • Visual Studio 2013


    Back · other stacks

    • Dell Chromebook 11
    • DigitalOcean
    • Git
    • A text editor


    Yeah... I'm not strictly just a designer though. And I've yet to succumb to the React.JS fad, and I am rather more curious about Web Components and I am planning to allocate my spare time on experimenting with Polymer.

    0 points
  • Paul TrottPaul Trott, over 6 years ago (edited over 6 years ago )

    2012 Macbook pro // Windows 10 // Illustrator (Wireframes / UI design) // Photoshop (Image maninpulation & compositing) // After Effects (Animated mockups) // Sublime (coding) // GIT (version control) // Pencil & paper (ideas & rapid prototyping)

    0 points