Boost Your UI Prototypes: 6 Essential Interaction Design Practices

In recent reviews of interaction drafts, many designers overlook quality due to tight schedules, yet mastering small details is essential for becoming an excellent interaction designer.

Below we revisit classic cases that illustrate best practices.

1. Use Proper Contrast in Wireframes

Many people draw wireframes like this:

They should instead draw like this:

Adding light‑and‑dark contrast makes the hierarchy of interface elements more intuitive, eliminating the need to verbally tell the visual designer which module is most important, and greatly improving visual efficiency.

Note that dark does not automatically mean more important; importance depends on the contrast relationship. For example:

In the example, the "All Product Categories" block uses a light color on a dark background to highlight its importance, but visual designers might mistakenly interpret the light color as less important, so this must be communicated in advance.

Before modification:

After modification:

2. Avoid Screenshots and Colors in Wireframes

Many product staff assemble screenshots of competing products to convey ideas, which is non‑standard and distracts visual designers. Likewise, using colors in wireframes can cause unnecessary interference. If you have ideas about patterns or atmosphere, describe the desired effect instead of providing literal visual mock‑ups.

3. Mark the First‑Screen Height

The first‑screen height is crucial; the most important content and primary action buttons should be fully visible without scrolling. For a 1024×768 resolution, a strict limit is 570 px, but a more relaxed guideline is around 600 px. Indicate this height on the prototype to give visual designers a reference, but avoid cramming content just to meet the height.

4. Strictly Follow Grid Standards

Newcomers often ignore grid guidelines, leading to layout mismatches where content that fits in the interaction draft cannot be placed in the visual design, causing rework and reduced quality. Ensure font sizes, spacing (minimum 10 px), and overall grid alignment meet visual requirements, and discuss grid decisions with visual designers early.

5. Use Reasonable Layout and Spacing

Some product staff disregard layout standards and aesthetics, piling content arbitrarily. This forces visual designers to redo layouts and makes it hard to calculate first‑screen height or module content volume, increasing the chance of visual rework. Establish layout and spacing standards and coordinate with visual designers beforehand.

6. Express UI Logic Clearly

For pages with many elements and complex hierarchy (e.g., forms), organize content in advance, ensuring text, links, and actions reflect their importance. Group complex cases into a limited set of patterns, using 3‑5 font sizes and matching colors to guide users effectively.

The primary and accent colors are ultimately decided by the visual designer; the interaction draft only needs to indicate the intent. Detailed classification ensures final font sizes and colors follow logical rules without burdening visual designers with unnecessary complexity.