Function First, Interface Last

If you haven’t already, register a username for yourself so you can discuss this topic in our Development forum.

Focusing on the back-end processes of a software program or website makes development and maintenance a lot easier than designing first, coding last for two important reasons:

1. Coding specific functions as individual components stored in their own containers, and then hooking those functions to a visual design via “hooks” prevents multiple containers from screwing up several parts of a software program or website at once.

2. It also makes identifying a problematic piece or container of code less hectic. Here’s how to focus on function first, interface last.

a. Review your Development Plan to see which feature should be developed first. Collaborate with your service provider to ensure it makes sense.

b. Identify the functions that make each feature “work”, and then have your provider develop them in the order of importance – one at a time!

Code most likely to be developed is written:

• to read and produce output…
• to modify external data…
• to store data…
• to handle errors…
• to hide data…
• to perform other tasks…

c. Review your Development Plan and test each code container with an appropriate test method you or your developer designed for functionality (independent from the software program or website). Have your provider re-code until it works as agreed upon.

d. Repeat for each feature’s function, but don’t concern yourself with attaching code to the site’s graphical user interface – yet. Since some parts of the site’s code will depend on the functionality of other parts, confirm with your provider they work together before “hooking” them to their GUI components.

e. Using your development plan, have your designer create ALL the graphical objects that will (1) be used to activate the ALL of the software program or website’s features and (2) be available on every page of the site from a template of some sort. You’re not concerned with any code at this point – just the objects that will use the code.

f. Have your developer “hook” each object with its appropriate code to activate the feature and “make it work.” Make sure each object accompanies comments that explain what function (code) it performs as well.