Posted: June 29, 2010 by Dave DeAngelis, Director of Education and Professional Services
Introduction
When creating prototypes, one of your primary considerations is their level of fidelity. As described in a previous blog post, there are three dimensions of fidelity: visual fidelity, functional fidelity, and content fidelity. And for each dimension, your prototypes can be low fidelity, high fidelity, or something in between. For example, you might create gray-screen prototypes with minimal interactivity and placeholder text, or highly interactive prototypes that use a precise color palette and production-ready images and text. The best solution for you depends on your prototyping goals and your audience.
One way to enhance visual fidelity is with styles. Because ProtoShare generates prototypes using HTML and CSS, you have complete control over their colors, fonts, and other visual aspects.
I've had the opportunity to put the visual fidelity capabilities available in ProtoShare to the test for several Professional Services clients. Working from detailed design specifications, I could easily include their corporate colors, background images, and fonts, and create complex navigation with a completely customized look and feel. Several of the CSS techniques I used are described in the case studies below.
How to Include Styles in ProtoShare
All components use pre-built styles by default. You can modify existing styles and add custom styles by configuring component properties or by using the Styles screen. For the Rich Text component, you have the additional option of creating inline styles using its HTML editor.
Component Properties
While working in the Editor, you can apply a few basic styles to components. The styles are available in the Appearance group of the Properties tab, and are meant to take your design to the next level of visual fidelity beyond simple boxes. The available properties depend on the specific component, but generally include opacity, border style, fill color, and stroke color. Anybody comfortable with using the Editor can apply these styles, and knowledge of CSS is not required.
The Properties tab for the Rich Text component is shown below.
The Styles Screen
If you want to create custom styles, use the Styles screen. The Styles screen contains the global style sheet for your project, and styles created here are available for all components within a project. The exception is the HTML Sandbox component. In this case, you must define inline styles using the component's content editor.
The Styles screen is shown below.
You specify the styles using the standard CSS syntax. Precede class names with a . (dot) and IDs with a # (pound). All components have at least one default class name. You can use that class name to define CSS rules for all components of a given kind. You can also define additional class names or an ID for each component in the Mark-up group of the Properties tab in the Editor.
Some components, especially those in the Page Navigation group, make extensive use of pre-built styles. To modify these existing styles, you can use third-party browser add-ons (such as Firebug for Firefox) to discover the CSS rule of interest, and then include your modifications in the Styles screen. You can also display the ProtoShare default style sheets using your browser's View Source command while viewing a design. You can find most of the relevant styles in viewer.css.
Case Studies
Changing the Default Rich Text Property Values
All components have a collection of properties that are configurable through the Properties tab in the Editor. The properties are organized into groups, and the Appearance group includes the main properties related to component styles such as opacity, border thickness, and stroke and fill color. Configure these properties to suit your design goals. If you want to make more extensive changes, use the Styles screen.
For example, I want to configure a Rich Text component that's part of a footer clipping. The design goals for the footer state that its constituent components will not include borders or padding, and that the footer will include a background image.
The property configuration is shown below. Note that the fill is transparent so that the background image can be seen through the component.
Overriding Rich Text Heading and Link Styles
With the Rich Text component, you can format text, create links, include images, create tables, and more. The component uses the popular TinyMCE WYSIWYG editor. This editor supports a wide range of formatting options such as headings, font type and size, text and background color, and lists. The default formatting is specified by pre-built ProtoShare styles. For example, headings and paragraphs use sans-serif fonts, and links are rendered in the prototype using bold, gray text.
I want to modify the heading font size and render links using different colors for all Rich Text components in my project. I can do this by adding CSS rules to the Styles screen. Because this is a change that will be applied to all Rich Text components, I'll use the default class name, which is available in the Mark-up group of the Properties tab.
The CSS rules are shown below.
h1 {font-size: 2.4em;}
h2 {font-size: 1.5em;}
h3 {font-size: 1.2em;}
.RichText a {color: blue;}
.RichText a:visited {color: purple;}
.RichText a:hover {color: blue;}
.RichText a:active {color: black;}
If instead, I wanted to change the styles for a single Rich text component, I'd define an ID, a unique class name, or specify inline styles using the Rich Text HTML editor.
Changing Button Font Styles
The Button component is part of the Form Elements group. You can specify the text that's displayed in the button using the component properties, but you cannot modify the font properties using the Editor. Instead, you must use the Styles screen.
I want to change the font properties for a single Button component. To do this, I'll define the ID formSubmit in the Mark-up group of the Properties tab, and then specify the CSS rule in the Styles screen.
If you use just the ID selector when creating the CSS rule, it will not be applied. This is because ProtoShare defines Button component styles using the button HTML element. You wouldn't necessarily know this without examining the appropriate pre-built style sheet, which is viewer.css in this case. When you encounter a situation like this, and you're sure the CSS syntax is correct, you should determine how the the pre-built style is defined.
The CSS rule is shown below.
#formSubmit button {
font-family: "Courier New", "Lucida Console", Courier, monospace;
font-weight: bold;
font-size: 1.5em;
}
Assigning Images to Navigation Styles
One of the most powerful features in ProtoShare is the ability to quickly build clickable prototypes. Using purpose-built components, you can display Site Map pages as breadcrumbs, jump menus, header navigation, subnavigation, and more. In particular, the horizontal and vertical navigation components provide you with tremendous flexibility. These two components are highly configurable and allow you to create just the right navigation experience. However, with this power comes complexity, and changing the pre-built styles can require a little extra effort depending on the task.
As you might expect, the navigation is rendered as an unordered list. Each list element contains a blockquote element, each blockquote contains a table, and each navigation link is contained within a table cell. Including links in a table is somewhat unusual, but is necessary to make the navigation work in all supported browsers and in the application. Also, each link state has an associated class in ProtoShare. For example, a normal, unvisited link has class x_inactive, while a visited link has class x_active.
The following CSS rules assign an image to the link, the link hover state, and the active link, respectively. You can use these rules to create an icon menu, for example.
#NAV.subNav ul li td {
background: transparent url(/Assets/bgArrow.gif) no-repeat scroll 10px 12px;
width:150px;
}
#NAV.subNav ul li td a:hover {
background: transparent url(/Assets/bgTriangle.gif) no-repeat scroll right center;
color:#fff;
}
#NAV.subNav ul li blockquote.x_active td {
background: #A79E8C url(/Assets/bgArrowOpen.gif) no-repeat scroll 10px 12px;
color:#fff;
}
Targeting ProtoShare Page Content
Sometimes, the easiest way to define project-wide styles for page content such as text, hyperlinks, images, tables, and lists is with the
tag. However, if you use the tag in the Styles screen, you might change the styles used by the application as well as your page content. To avoid this problem, ProtoShare includes a special class and ID protoshare-body, which allows you to access only the ProtoShare page content.
For example, to change the font family used in your designs (including table data), while leaving the application's font unchanged, you can create the following CSS rules.
.protoshare-body, .protoshare-body td {
font-family: "Trebuchet MS", Helvetica, Jamrul, sans-serif !important;
}
Using the Latest and Greatest with CSS3
With the introduction of CSS3, features such as round corners and drop shadows are now easy to create for developers targeting Mozilla and Webkit browsers.
You can incorporate these styles into your designs using the Styles screen. For example, the following CSS rules allow you to add round corners and drop shadows to components.
#roundCorners {
border: 1px solid #666;
-moz-border-radius: 1.5em;
-webkit-border-radius: 1.5em;
}
#dropShadow {
-moz-box-shadow: black 0.5em 0.5em 0.3em;
-webkit-box-shadow: black 0.5em 0.5em 0.3em;
}
Summary
By including the appropriate level of visual fidelity in your prototypes, you can deliver just the right experience, and get answers to questions more quickly.
Because ProtoShare generates prototypes using HTML and CSS, you have complete control over their visual fidelity. If you're comfortable using the Editor, you can evolve your prototype beyond simple boxes by configuring component properties. If you have CSS knowledge, you can use the Styles screen to create custom styles.
The best solution for you depends on your prototyping goals and your audience. Using ProtoShare, it's easy to produce the desired look and feel from gray-screen prototypes, to visually stunning designs.
