Prototyping is an iterative process, and you probably won’t know everything about your project in the beginning. That’s OK because I’ve learned a few best practices that can help keep you on track, and that provide you with a context in which to efficiently build prototypes in ProtoShare. I think you’ll find these best practices useful, especially for large and complex projects
-
Plan Your Navigation
If you’re building a website prototype, navigation is inevitably part of the design. In ProtoShare, you can quickly build clickable prototypes using purpose-built navigation components. The navigation components display pages that you create in the Site Map. For a website prototype, the pages represent your website architecture.
When planning your navigation, typical questions include:
- How many navigation components does a design require?
- What pages should they display?
- Should their orientation be horizontal or vertical?
- Should they include drop-downs and fly-outs, and to what depth?
Once you answer these questions, you can build-out your pages and create live navigation for your designs. Of course, the more thought you give to the site architecture, the faster the prototype can be completed and shared with your colleagues. However, much of the power and convenience of the navigation components is their ability to automatically update when you add, delete, rename, or move pages in the Site Map. Therefore, you can easily change your architecture as new ideas emerge, and your designs will immediately reflect those changes.
The Site Map is shown below.
-
Think About Reuse
When creating website prototypes, content such as headers, footers, and sub-navigation is reused. Reusing your work can save you a lot of time throughout the life cycle of a project.
In ProtoShare, you reuse content by creating templates and masters . Templates and masters are resources that are saved in the ProtoShare Library. Which resource to create depends on your specific needs:
- Templates are fixed in position. Therefore, they are a good choice for headers and other functionality that does not change position from design to design.
- Masters are manually positioned just like components. Therefore, they are a good choice for footers and other functionality that changes position from design to design.
Like creating pages in the Site Map, it pays to think up front about your reusable content. For example, should you include sub-navigation as part of a template or as a master? Should you create two header templates; one with breadcrumbs and one without? Making the correct choices in the beginning will save you time down the road. However, ProtoShare supports a flexible workflow, and modifying Library resources throughout the project life cycle is simple.
The ProtoShare Library is shown below.
-
Keep Designs Lean and Organized
You create content for your designs by adding components. You can add as many components as you need and in any order you wish. However, there are times when the component number and order matters.
Because ProtoShare is a SaaS application, component-heavy designs can affect performance, which you typically experience as longer page-load times. However, quantifying a component limit is difficult. Overall application performance depends on many factors including the type of Internet connection you’re using and the speed of your computer. Certainly, a design consisting of a handful of components will load more quickly than a design consisting of a huge number of components. As a general best practice, you should keep your designs as lean as possible. That being said, I have created designs with hundreds of components and the application still feels very responsive.
Organizing components has both a visual aspect and a practical aspect. The visual aspect has to do with positioning components in the Editor canvas so they are properly aligned and distributed, have the correct dimensions, and so on. The practical aspect has to do with grouping components using Containers, and reordering them in the Listing as described in a previous post. This is just as important as a clean visual presentation because it allows you to more easily modify complex designs. Also, the component order can affect the way users experience the prototype. For example, the tabbing order for a form is given by the order of the form components in the Listing.
The Component Listing is shown below.
-
Prototype Only What’s Necessary
As a corollary to the best practice of keeping your designs lean and organized, you should strive to prototype only what’s necessary. Not only will you save time, but you’ll be able to focus your colleagues on what’s important, and not distract them with unnecessary information.
This best practice applies to both the visual fidelity and the functional fidelity of your prototype. Generally speaking, you should include only enough information so that you can convey only what’s necessary to effectively evolve the prototype. So, if you’re adding functionality that’s not needed to answer specific questions, and for which you do not want feedback, then you might consider excluding that functionality from your designs.
For example, the search filter shown below is not configured to display different search results based on the menu choice because that level of detail is unimportant for the prototype. Instead, a generic search result design is displayed.
-
Add Interactivity to Design Comps
Many people include design comps as part of a prototyping process that also includes wireframes, while others use design comps exclusively. In either case, you can create the experience of a real website by making the comps interactive using the Hyperlink, Jump Menu, and other components.
The advantage of using comps is you can include pixel-perfect designs with stunning visual fidelity into your prototype. This workflow is particularly attractive to designers who prefer to work with their graphics program of choice, but still want to use the interactive and collaborative capabilities of ProtoShare.
In the figure below, the logo is linked to the Home page of the prototype.
