Vim as a Design Tool

Adam Morse

Adam Morse

@mrmrs_

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.

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

  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.

    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.

  4. Learning vim - common commands

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

    **A good example of programming-thinking applied to design is the idea of refactoring, which designers are constantly doing while iterating on an interface. Just like in programming, your goal is to maintain functionality while rejigging the way you achieve that functionality. In programming, your public methods signatures stay the same, but their internals change. In visual design, the functionality of the product stays the same, but the visuals might change slightly to simplify the mental model for the user.

    If you take a second to think about refactoring your own interfaces, I’ll bet a few optimizations spring to mind. The beautiful thing about thinking in terms of individual, reusable components while designing the visual parts of an interface is that it translates perfectly to the code you’ll be writing to build it. When you find the right abstraction everything will just fall into place.**

  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.