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.
After years of creating wireframe UI mockups using Visio and other tools, I realized that wireframe MojoPortal skins would give us a powerful new way to create truly interactive site mockups using MojoPortal. The wireframe templates use no colors, have simple boxes for buttons, and by default have placeholder boxes instead of logos.
Download the wireframe UI skins that StrongEye Solutions created so far using links below. Please use and modify these skins at will, they are free for the MojoPortal community.
-
Wireframe 01: (preview release) Simple skin with horizontal nav above the header, using placeholder image for logo.
I will be adding to the list of wireframe skins through time, and would welcome your feedback. For example, I think having some alternate wireframes showing other styles of basic navigation structure would be useful.
Please email Steve Land here:
wireframeskin at strongeye.com
and let me know any feedback, and tell me what you'd like to see next!