Vim as a Design Tool

For many designers, editing and writing text comprises a large chunk of our work. Whether it's writing down ideas, editing code, or comprising an email, text-editing makes up a non-trivial part of our day. With this in mind we'll explore how and why we could use Vim, a command-based text editor, to improve our design workflow.

  1. Why learn vim?

    This article introduces some basic concepts of command-based editing and how it might help you design better products over time.

    Think about the text editing tasks you dread / spend the most amount of time on. How could you automate them?

  2. How to learn vim

    Vim can be frustrating to learn at first. This article covers some helpful hints and tricks on, what to read, good habits to adopt, and how to think like a veteran vim user.

  3. Learning vim - vimtutor

    Vimtutor is an interactive tutorial on how to get started with vim. You can launch it by opening your terminal and typing vimtutor then enter. It will walk you through step by step instructions to get going with vim.

    Complete all of the steps in vimtutor. This should take less than 30 minutes.

  4. Learning vim - common commands

    This is a comprehensive list of common vim commands used for front end development.

    Read through the list of commands and practice using five that look like they might be of common use for you. Try to recognize patterns in the commands and think about different ways you might construct your own commands for common editing tasks.

  5. Learning vim - common workflows

    This series of screencasts reviews some common workflows for front-end development. Learn how to quickly navigate files, manage windows, record macros, and more. All in the context of designing with html and css in the browser.

Finally, an easy to follow design course

Receive a design lesson in your inbox each week, hand crafted by a design pro. Learn at your own pace, and apply it to your real life work – no fake projects here.

No spam ever. We promise.