Using Wireframe Skins

Non technical customers or project stakeholders often find it hard to ignore graphic design aspects of a demo. For example, if you want to talk about the overall page structure, what content to include in that structure, and how the new site's navigation should work, then colors, css styling, logos, images, and even text can distract or derail the conversation. Yes, you can tell customers that the skin is easily changed, but people often react to the most tangible visual things that they can see.

If you have ever seen "lorem ipsum" text used as placeholder text, a UI wireframe is a similar concept applied to the site's colors and graphic elements. By using no color and placeholder images, a wireframe takes discussions related to graphic designs off the table temporarily. 

The advantage of using a wireframe skin rather than a fully-realized colorful skin from the standard MojoPortal install has to do mainly with getting your team to focus on the key elements of content, structure, and navigation.

Sample scenarios for using wireframe skins in MojoPortal:

  • You are creating a portal for a customer and someone else is creating the graphics and design.
  • You want to demonstrate specific features of MojoPortal and don't want your meeting to be side-tracked with discussions of colors, logos, images, etc. Often the best presentations of features can be eclipsed by someone saying "yes but I don't like the way it looks".
  • You want customer feedback on overall navigation and site structure, but not any other aspect of the site.
  • You want to begin training customers on MojoPortal editing before graphic design is complete.

Using the wireframe skin, you can demonstrate the structure of the site, new pages can be created and edited, and most of the work for the portal can be completed in parallel to graphic design efforts. For some scenarios, you might even use some "lorem ipsum" text to fill pages whose content you are not able to write yourself.