Requirements Document: User Interface

What the UI Portion Will Contain

This is always a fun portion of the requirements document since the UI portion will give us a preview of what the application will look like. It's not required to have the designs already created at this stage, however I've discovered that when I'm on a project that has the UI developed from the beginning it has the following benefits:

Focus - a polished UI gives the team a clear focus on what is going to be built. Even though this section of the document has very little words, I think you'll see that you can instantly see the core functionality simply by reviewing the designs
Motivation - team members are usually more excited to work on projects that have a great look and feel because they know it's going to be a project they will be proud of
Organization - many times the UI portion of the document is where team members reference the features that they would like to build, so the mocks help the developers decide what components they want to create

I personally don't like to include a lot of verbal content on this portion of the document, this section is simply going to show what the end product should look like.

Design vs Development

I hired a designer to create these mocks and the associated HTML/CSS assets. As we start to go through the application build there will be plenty of cases where it makes sense for us to change the way the pages look. It's very rare that the original mocks perfectly match the final project UI, I try to think of designs as suggestions for how the final application should look (obviously if you're working on a project where a requirement is for the app to match the design that's different).

While everyone is different, my rule of thumb is that if the design is going to make me make concessions from a development perspective, I'll change the design before the code implementation.

UI Portion

Below are the items that we'll add to the requirements' document for the UI section:

UI Framework used - for DailySmart we're going to use Bootstrap 3.3.2
Link to the HTML/CSS assets
A list of any dependencies (if applicable) - examples would be things such as AngularJS, Node, node-package-manager, and anything that isn't included in the asset directory or is shipped by default with Rails

And then show each of the mocks for each page, I've placed them below:

Homepage
large