StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POFrom screen design to final product: How is your workflow?
text
Body
copied!<p>We are currently starting a bigger project. What're your suggestions for best practices of workflow?</p> <p>We are planning to rebuild from scratch (the existing product is outdated by years, regarding visual and internal design and programming). While the product functions (a Rails based web project) are already set, the question is: What is your workflow from here on? The most interesting part is: How and when do you do your screen design?</p> <p>We are planning to do it in the following order:</p> <ol> <li>"Pencil and paper" screen design: Just layout what the screens should look like and visualize the functions and visitor pathes</li> <li>Hand out the layouts from point 1 to the designers, have a talk to them, and let them work in parallel to programming on the designs</li> <li>First implementation, simple color-less HTML layout based on point 1 (automated tests, functionality, BDD, TDD)</li> <li>Integrate the designs with the product prototype</li> <li>Work out the rough edges together with the designer team to finalize the product</li> <li>Release a beta product for the customer to test</li> </ol> <p>Do you have similar workflows? Are there suggestions for improvements? But the most important for me: How exactly do you do point 1?</p> <p>While this is not exactly programming-related I still think this should belong on StackOverflow as this is important for anyone doing bigger projects. From the past we know that good screen design is always a critical and hard point if trying to do that while programming, and even harder to deploy it after the prototype application has been created.</p> <p><strong>Update:</strong> I found <a href="http://www.balsamiq.com/" rel="nofollow noreferrer" title="Balsamiq Mockups">Balsamiq Mockups</a> to be a very helpful tool to do the mockups. Still there's an open question how one would best visualize visitor pathes.</p> <p><strong>Update:</strong> We had been successful using <a href="http://www.balsamiq.com/" rel="nofollow noreferrer" title="Balsamiq Mockups">Balsamiq Mockups</a> to create a design pleasant to the customer and we managed to successfully integrate this into the existing web content. The customer is so comfortable with the new ideas that he is planning to redesign the complete web site.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload