Developing functionality or visual aspects of an interface - which to develop first?

Question

I am currently refining my design process for developing websites, scripts, and web-based applications. My background is heavily weighted towards developing websites with minor javascript/php/flash websites and will likely remain my sole focus. I typically work alone so I try to keep focused on developing one step at a time.

At the moment I am currently trying to explore the pros and cons of developing the functionality of a project first or developing the general visual aspects of a project first.

My current development process:

1. Develop flowchart and conceptual framework of functionality.
2. Decide on the best way to organize and display the data output (basic template in photoshop)
3. Code the actual template or interface or whatever (css/html etc)
4. Code the functionality
5. Plug functionality into the template

I am on the verge of switching 3 and 4 around. I have been having some minor problems fitting certain output into a preformed template.

What is the standard for interface development process relating functionality/aesthetic coding coming first?

What are the potential benefits to coding functionality before visual aspects? or visual before functionality?

Answer 1

The typical trap folks fall into is to focus on look and design at the exclusion of all else. I would advise working on data flow and overall process first with some very basic 'storyboard' type sketches for the UI at each stage to use as a mental cue. Once the functional side is determined and the major wrinkles are ironed out you can focus on more detail on the UI side.

Typically you will enter an iterative phase of UI changes resulting in data changes and vice versa.