The design process
When building software for the web, there are many different actionable states of a specific design element that get built during the HTML/CSS wireframing phase (e.g. add, edit, update).
These states typically do not make it into the wireframes because it would be too time-consuming. Usually, with a clear understanding of the designers vision via a sketch or discussion, these states are better left for developers to create first.
When the initial HTML markup and functionality is in place, a designer will proceed to take over to refine the UX and visual design. HTML/CSS wireframes are built using High Voltage and are located in the app/views/pages directory.
It is crucial to keep the design of the application ahead of the development. Focus should be placed on wireframing usability, UX, flows, and personas. These larger chunks require wireframes to be done first to be successful with our outside-in process.
We find it important to keep the design and development cycle adequately tight. We do not wireframe one month out because:
- we often decide to cut features during the week prior, or week of, while building the application
- as we approach certain areas of the application while designing and developing, the requirements and features change
The change in requirements is part of the iterative process and feedback loop from the client, the thoughtbot team, and from user-testing. It would be wasteful to spend time wireframing features that never get built.