R093 · 25 Storyboards, Visualisations & Wireframes

Storyboards, Visualisations & Wireframes at a Glance

This infographic shows how each visual planning document supports different types of media product.

Storyboards – Planning Moving Image Products

A storyboard is a sequence of frames (like a comic strip) that shows how a video, animation or advert will unfold shot by shot.

Typical Features of a Storyboard

• Images / sketches – rough drawings of each shot.
• Shot type and angle – e.g. close-up, mid shot, long shot, high angle, low angle.
• Camera movement – pan, tilt, zoom, track.
• Timing – estimated duration of each shot.
• Sound details – music, sound effects, dialogue notes.
• Transitions – how one shot moves to the next (cut, fade, dissolve).

Why Storyboards Are Useful

• Give directors and camera operators a clear plan for filming or animating.
• Help match audio and visuals, especially for adverts, trailers and explainer videos.
• Allow clients to suggest changes before expensive production work begins.

Visualisation Diagrams – Planning Single Screens or Pages

A visualisation diagram (sometimes called a concept sketch) shows the design of one product page or screen, such as a poster, magazine cover, app screen or web banner.

Typical Features of a Visualisation Diagram

• Rough layout – placement of images, titles, logos and body text.
• Placeholder content – simple boxes and scribbles where real images and text will go.
• Colour and style notes – brief labels for colour schemes, fonts and design elements.
• Annotations – notes explaining decisions (e.g. “hero image of product here”, “call-to-action button”).
• Dimensions / orientation – page size, orientation and any bleed or safe areas.

Why Visualisation Diagrams Are Useful

• Quickly communicate the look and feel of a design without final assets.
• Help designers test different layouts before committing to a full digital version.
• Provide a reference when creating the final product in software like Photoshop or Illustrator.

Wireframes – Planning Structure and Navigation

A wireframe is a simple line-drawing layout for a website or app. It focuses on structure, navigation and functionality, not final colours or images.

Typical Features of a Wireframe

• Page layouts – boxes showing where content areas, menus and sidebars will go.
• Navigation menus – main navigation, footer links, buttons.
• Labels – simple text labels instead of full copy (e.g. “Hero image”, “Article title”).
• Links between pages – arrows or notes explaining how users move from page to page.
• Responsiveness notes (in some wireframes) – how layouts adapt on mobile vs desktop.

Why Wireframes Are Useful

• Help teams focus on usability and navigation before visual design.
• Make it easier to plan user journeys and test whether all content is easy to find.
• Provide a blueprint for UI designers and developers when building the final site or app.