Busy Noggin's Framework for TemplaVoila

Skip navigation and go to main content

• Introduction
• The Approach
• Workflow
• Templates
• Download
• Contact & Info

• A Suggested Workflow
• Info Architecture & Wireframing
• Visual Design
• Integrate Design into TYPO3
• Code Unique Functionality
• Load Content & Launch Site

A Suggested Workflow

As fascinating as the technical capabilities may be of TYPO3, TemplaVoila and even this templating framework, they mean little unless you can harness them to build sites. After all, the ultimate goal of all this is to build powerful, effective web sites and to build them quickly.

In order to do this, you must have a workflow. A workflow is simply the sequence of steps needed to move from an initial idea to a completed website.

The following is the workflow I use to produce TYPO3-driven websites utilitzing this templating framework. Each step is explained in more detail on pages in this section.

1. Install the Busy Noggin QuickSite with its wireframe skin.
2. Work though the information architecture using the wireframe.
3. Work up the visual design mockups.
4. Integrate the visual design into TYPO3 by creating a template skin.
5. Code any special functionality though custom content elements or extensions
6. Load the content and launch the site.

First you will need to download, install and setup the QuickSite. Instructions are in the download section of this site.

Info Architecture and Wireframing >>

Before getting to work building any skins, install the QuickSite and play around with the Utility FCEs, particularly the modules and columns and their various options. This will give you a feel for the possibilities these tools provide.

Although the workflow is presented in sequential steps, it is possible to fast track the process by working some steps concurrently.

Once the infomation archtecture is nailed down and replicated in the working wireframe, the following three steps can actually begin at the same time.

• The graphic desiginer can mockup the visual design.
• The programmer can begin installing extension extensions, set up users, etc.
• The content editor can begin entering content. Initially the content will be presented in the wireframe but will automatically be reformatted when the finals templates are integrated.