Scrivener for web design projects

I am a graphic designer/web designer, and I’ve just had an epiphany: use Scrivener as a way to manage my Wordpress web design projects! It’s the perfect tool for organizing the billion pieces that go into designing a website.

With a cartoon lightbulb floating over my head, I went to work setting up a Web Design template, which contains the basic things I use for every design project:

Job Details
-Quote (copy of approved quote so I can easily refer back to the job scope)
-Client contact info, who’s in charge of approvals, who’s in charge of paying the bills)

Meeting Notes
Each time I have a meeting or exchange with a client via email, it goes in here.

Our Process
(description of each stage of the design and development process, so that I have it all in front of me when I’m meeting with a client)

Design Brief
Each question on the design brief is its own scrivening so that I can go down the list of questions when I’m interviewing a client. my Design Brief includes these main sections:

  • Goals
  • Company Info
  • Audience
  • Product or Service
  • Competition (with web archives of their sites stored right in Scrivener)
  • Mood and Tone
  • Budget
  • Timing
  • Deliverables
  • Search Engine Optimization

Supporting Documents

  • wireframe (made in Fireworks, dragged in here for reference)
  • Mood Board (also made in Fireworks)
  • Mockups (Fireworks)
  • Logo (vector format and web format)
  • Images to use on site
  • Link to Google Docs (if client and I are using that to track our site progress)

Hosting Info
Domain registration info, Login info, FTP info, Cpanel login info, Wordpress login info, database settings, etc. - each in its own scrivening

Social Media
All the client’s social media logins and info

Web Code and Snippets

  • all the custom code for .php, .css and widgets used on the site, so that I have it for easy referral. Each time a piece of code changes, I create a new scrivening with a new date, so that I have a trail of the various tweaks I’ve done. Also very useful if something blows up.
  • font stacks

Wordpress info and Plugins

  • A listing of all the Wordpress plugins and versions I’m using (My theme of choice, Headway, makes it very easy to copy this info in a list format)

Web Archive of Existing Site
If this is a site redesign (not a brand new design) then I drag each page in here as its own web archive. It’s an easy way for me to refer back to the way their old site was. (By the way, I was thrilled when I discovered that dragging the URL from the address bar pulls everything from that page into Scrivener as a self-contained web archive.)

Site Map of New Site
Each page gets its own scrivening, nested in the order it will be on the site. I use the “status” label and some custom meta-data to keep track of to-do items on each page. The outline view is very handy for this. I fill in the content for each page here. (Note: I am not bothering to use any HTML; only the most basic Header and Body text. I do all my styling in Wordpress.)

I’m still tweaking my Web Design template as I go, but I’m extremely excited about how well suited Scrivener is to large multi-part projects like web design. From initial meeting to final delivery, it’s a great way to keep all my planning, files, coding and changes all in one place.

As a point of reference, the way I used to do web design planning was:

  • Use Evernote as a catch-all for my meeting notes, login information, screengrabs, and other miscellany
  • In the Finder, Keep all the files for the project in an ever-growing, ever-messier set of folders (most stuff ended up in a folder called “Art in Progress”)
  • Work in Wordpress on a local installation most of the time, organizing, modifying, and tweaking from there. It was often hard to get a handle of which pages and items still needed tweaking, so for that I used:
  • Pagico Project Planner, to keep a running list of independent tasks I still needed to do.

I am just starting a large e-commerce site redesign using Scrivener, and I’m really excited with it so far. I feel like it’s going to make my job so much easier!

I’m also going to create some more custom templates for other typical things that we designers do: Identity Design, Product Design, etc.


Another tool I’ve been looking at to use in combination with Scrivener for my web design projects is MyThoughts for Mac: It seems it would be useful for visually mapping out your new website, easily rearranging nodes, seeing the relationship between pages, etc. This particular mind mapper is also nice because it’s very pretty and visual, looks great in presentations to a client, and allows you to attach any photos to your nodes, as well as notes specific to each node/page.

MyMind has OPML export, so all your notes come into Scrivener in hierarchical order. Then, drag the mindmap into Scrivener to use as a visual guide/reminder.

(By comparison, MindNode Free and Freeplane, two other popular mind mapping tools, don’t bring in notes attached to nodes, which makes them far less useful.)

I’m doing a 30-day trial of it now, considering whether the $49 price tag is justified.

Howdy. Sounds interesting. I just found this project that Ted Goranson is working on using Tinderbox

A Web Publishing System