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

Visual Design

Once the information architecture is complete, it is time to work on the visual design. This is simply producing pictures of what various pages in a site might look like.

Most designers use either Adobe Photoshop or Adobe Fireworks for this process. Don't worry about which is better. Use whichever program you know the best. If you are not proficient in either one, then maybe you should get someone else to do your design. Sorry, I couldn't resist.

It is not necessary to work up a visual design on every page. Just do a mockup on each different page layout.

In addition to Photoshop or Fireworks, Xscope is a helpful program for determining if your design fits within various monitor resolutions.

Any medium has technical issues of which designers must be aware. For print you think about dot gain. For video you have to be aware about screen proportions and safe area. Web is no different. Here is what you need to consider when designing for the web.

• Flexibility, your site will be accessed by a variety of computers, monitors, browsers, smart phones, assistive technologies and connection speeds. Your designer must understand that no other users will be viewing the site on his eight-core MacPro with dual 30" monitors. And yes, I am jealous.
• Pay particular attention to the width of your design so the smaller monitors can see your site. I generally use a page width of 930 to 980 pixels depending on the edge treatment.
• Watch your fonts. Body text must be in fonts common across platforms. Alternative fonts for headlines and menus can be accommodated through SIFR or as background images generated by TYPO3. Just make sure you know all the issues before pursuing those routes.
• Design in an RGB color space not CMYK.
• Finally, if your designer has little or no experience designing for the web, get a new designer.

Having said all this, web design is not as limiting as some designers (and coders) would lead you to believe. Those who think so are way behind the times.

Integrate the Visual Design into TYPO3  >>

If you have a visual design that can be coded in HTML, then you have no worries. TYPO3 can replicate it. Exactly. Precisely. Period.

The page templates in this framework are designed to accommodate a wide range of visual designs. Although I often program FCEs for special situations, I only need to map new page templates in less than 5% of the sites I build.