Wireframe Workflow - Gowiem/Sisyphus GitHub Wiki
At first, all three designers worked on entire wireframe mockups. This helped generate ideas and get things going, but it wasn’t very efficient because none of us were able to get very deep into wireframes. We did realize that each designer had focused on different aspects of the group project tool, which helped us to split up the work naturally. For example, one person focused more on tasks, another on the newsfeed, and another on the navigation.
To keep things consistent, we created a wireframe template (see image on right). Sections you're not designing for are represented by a grey box and labeled with red italicized text. Below the wireframe is a label that lets the viewer know which screen is being shown. To the right of the wireframe are notes on the interactions. These help the developers understand what’s supposed to happen and serve as reminders in case we forgot what happened in a particular screen.
We would work on the wireframes on our own, then the design team would come together to discuss them and ask any questions. In these meetings, we would present our wireframes to each other and bring up any questions that came up when we were wireframing. The other designers would then give feedback and try to tackle the questions that came up. We frequently used a whiteboard to draw out and brainstorm ideas. This helped us to visualize ideas faster.
Wireframes are not consolidated into one file. Each wireframe is labeled by focus – for example, All Tasks or My Tasks. Wireframes are kept separate so that development can focus on developing one aspect of the site at a time. This helps prevent them from missing out on small details or interactions.
Only the most updated files for wireframes were put into Google Drive. Any previous versions are saved on each designer’s personal computer. This is to prevent any confusion from happening. The most updated wireframes were also exported as a PDF for easier viewing. These PDFs were given to the development team so they could build the site. Finalized wireframes are given to development as PDFs in the Google Drive under Development > Wireframes.
View the wireframes: