From screen design to final product: how is your workflow?
We are currently launching a larger project. What do you suggest for the best workflow practices?
We plan to rebuild from scratch (the existing product is outdated by years, in terms of visual and internal design and programming). Although the product features (a Rails based web project) are already installed, the question arises: what is your workflow here? The fun part: how and when do you make your screen?
We plan to do this in the following order:
- Pencil and Paper Design: Simply specify how the screens look and render visitor functions and patterns.
- Send mockups from point 1 to designers, talk to them and let them work in parallel with programming on designs.
- First implementation, simple color HTML layout based on point 1 (automated tests, functionality, BDD, TDD)
- Integrate projects with a product prototype
- Design the rough edges with the design team to complete the product.
- Release Beta Product for Client Testing
Do you have similar workflows? Are there any suggestions for improvement? But the most important thing for me: how exactly do you do point 1?
While not entirely related to programming, I still believe it should belong to StackOverflow as it is important for anyone doing big projects. We know from the past that good screen design is always critical and difficult if you try to do it while programming and even harder to deploy after prototyping.
Update: I found Balsamiq Mockups to be a very useful tool for performing mockups. There is also an open question: how best to render visitor templates.
Update: We were able to use Balsamiq Mockups to create a nice design for the client, and we were able to successfully integrate this into existing web content. The client is so comfortable with the new ideas that he plans to redesign the complete website.
source to share
I love your workflow. This should lead to a decent result.
A few ideas here:
-
Let the designers know and understand your presentation model. What pages are there, what data and controls they have, what is the role of each of them, what is the purpose of the page and what message it should communicate to the user. If you allow designers to work alone, they will create something to reflect their vision of the project, not your design. You will end up redoing everything or trying to adapt one part to another.
-
Users will see and understand the design. They don't know anything about implementation. If they see a button, they think there is a function. if you plan to be flexible in interacting with users at design time, hide items that are not yet implemented. Serve them one step at a time.
-
If you have users near the screen design along with them in iterations. There are not many designers yet when you mainly decide the layout. All of these colorful effects and polished buttons must be done with the right layout. Otherwise, it will be a waste of designers' work.
I really like the extreme programming model. When working with new products, custom requirements can change rapidly over time, and this is a proven method to keep the design "current".
- Ask users to write down the features they want for the app. And let the designers agree on a common layout.
- Create a generic wire frame that aligns you and the user, I like to do this in a smart draw or some kind of quick gui development platform. (no functionality at the moment).
- Write code for a graphical user interface based on wire sequence diagrams and sequence diagrams and class diagrams.
- Based on this design, start filling in the functionality behind the GUI.
- Release beta releases throughout the process of adding user-selectable functionality that can help further development
The advantage of this project is that at any point in time you can re-work the GUI and enable new features. The idea is to first develop an overall plan that can be adapted as user requirements change.
source to share