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

Info Architecture & Wireframing

As sites become larger and are expected to provide more to the user, properly planning the information architecture (IA) of the site is crucial. Poorly conceived IA costs time and money throughout the entire development process because it triggers needless redesigns and code rewrites.

Plan well with wireframes

Wireframes are a central tool of the information architect and they come in two forms, online and paper.

Paper is quick and can be helpful in the very early stages of planning, but personally I prefer a working, clickable wireframe.

Having a working, clickable wireframe is a good idea, but having a working, clickable wireframe driven by TYPO3 is a fantastic idea. Here's why.

• Organizational concepts can be explored and tested just like they will be on the final site. Pages are discovered by clicking on links and menus.
• User experience testing can begin immediately.
• Content and pages can be easily moved around and tested as the information architect experiments with different organizational schemes.
• The client can be trained immediately on content entry and can even enter permanent site content. After all, the pages in the wireframe will be the actual pages in the finished site but simply skinned with the final design.

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 extensions, setting 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 final skin is integrated.

Visual Design  >>

The default skin of the Busy Noggin QuickSite is more than just a placeholder. It is a working wireframe that can be very useful in planning the information architecture for your site. It can even allow for the early entry of content. Content can be entered at any time and will simply be reskinned when the visual design is integrated into the system.

Busy Noggin often works with design firms and ad agencies. They have clients that need sites and can produce the visual design, but they do not have the in-house expertise for advanced front-end coding or CMS integration.

What we have done is produce a wireframe skin for each agency that has their branding in the header and footer. Whenever they have a new project, we install the QuickSite with their skin. We then route a subdomain like siteowner.agencydomain.com to this installation. This allows them to use it in their site planning and interaction with the site owner. Of course, we also protect the installation with a username and password to keep prying eyes out and give confidence to the site owner.