Discover more

How it works

Initialize a project, edit the wireframe, then finalize and export : a clear journey to understand how to structure a BeforeCode project.

BeforeCode
How it works

How it works

Edit the wireframe

Follow a guided path to choose a structure, apply a style, and compare variants.

Setup
Initialize a project

Initialize

Initialize a project

01 / 05Setup

Initialize a project

Give your project a clear name so it is easy to identify in your workspace.

Project name

Give your project a clear name so it is easy to identify in your workspace.

Project type

Select a project context to adapt the editor to the right format.

Pages
Create pages

Create

Create pages

02 / 05Pages

Create pages

Start with a page ready to be structured around your project needs.

Initial page

Start with a page ready to be structured around your project needs.

New page

Add dedicated pages to organize each part of the experience.

Additional pages

Extend the project when the structure requires more screens or variations.

Compose
Edit the wireframe

Edit

Edit the wireframe

03 / 05Compose

Edit the wireframe

Follow a guided path to choose a structure, apply a style, and compare variants.

Workflow

Follow a guided path to choose a structure, apply a style, and compare variants.

Preview

Turn on preview mode to review the final layout in full screen.

Skin

Apply a consistent visual direction to each section of the wireframe.

Width

Adjust the content width to control density and reading rhythm.

Unlock
Unlock the project

Continue

Unlock the project

04 / 05Unlock

Unlock the project

Work within a limited timeframe, then finalize the project or extend access.

Project lifespan

Work within a limited timeframe, then finalize the project or extend access.

Export
Finalize and export

Finalize

Finalize and export

05 / 05Export

Finalize and export

Lock the final version of the project before generating export files.

Finalize

Lock the final version of the project before generating export files.

Export

Export the final result in a format ready to share or archive.