How to create a user interface specifications document (UI Spec)

February 08, 2013

Continuing forward in our web and mobile development tutorial series, here we'll take a look at what to do next after you have created an Overview Spec and before you create a UI Flow Chart. Coming up with the UI Spec is an essential step for the product lead (usually the same person as the CEO/project lead in a small startup), as it forces them to visualize a rough draft of the app and put it in writing for the team to kick around.

Author's note: check out Startup Rocket's new web app and ops framework for founders spinning up new ventures. The UX flow chart step is a critical part of the "create" stage.

Also, FYI, I wrote the first couple dozen tutorials in this series a few years ago and I'm in the process of updating the content to reflect the evolution of best practices in the industry. Please let me know if you see anything I missed that should be updated. Thanks!

A quick note on ‘how' to keep the UI Spec simple

In general, everyone says keep it simple, but few people know what that really means. In the context of building a consumer-facing app, know that even you don't know the answer yet. Seriously. You have to test things rigorously before you even begin to know what ‘simple' is for your app.

Your job here for the UI Spec is to dump out a first draft of features, view-by-view (or page-by-page). Don't stray too far from the Overview Spec. Ask yourself for every feature: “is this absolutely essential in order for us to test our core value hypothesis?”

If you successfully get through a thorough first draft of your UI Spec asking yourself this question, then you'll be in good shape. Don't second guess yourself. Build this product that you come up with and test/iterate later.

Our suggested format for the UI Spec

Think through every possible view/page of the app, including tool-tips, lightboxes, etc… and just dump out your ideas in bullet-point list within a Google Doc (so your team can easily edit/modify/comment).

For me, armed with the Overview Spec for the app that we're building step-by-step together in this tutorial series, I quickly wrote the following UI Spec for the desktop browser version:

Here are some things I was thinking about as I wrote this up:

You'll want to make sure each member of your team pours over the UI Spec. It's hard to overstate how important it is that everyone understands the details and is on the same page before you move forward.

- — -

In our next post in this series, we'll walk through how to take this UI Spec and build out a developer-friendly UX Flow Chart using a Google “Drawing” in Google Docs. Linking components of the chart to the current status of wireframes and mockups (which we'll be building together in future posts), is a clean way to stay organized and work remotely with your team.

Previous post: How to work with a designer to quickly produce a logo.

Startup Rocket

We help entrepreneurs ideate, validate, create, grow, and fund new ventures.

Based on decades of startup experience, our team has developed a comprehensive operations framework, a collaborative online tool, and a personalized coaching experience to help take your business to the next level.

We'll email you as soon as more spots become available in our private beta.