Draftium is a black-and-white prototyping tool where you can create a wireframe for your future website. With Draftium, you can focus on the structure and content before proceeding to the actual site design.

This article will guide you from entering your Draftium account to publishing your first prototype.

Step 1. Choosing a template.

Sign up or log in to your existing account at Draftium.

To start working on a site, click on Create new in the top right corner of your dashboard:

In the new window, you can find all the available templates in our gallery. Here you can choose a blank (advanced mode) or a ready-made template for your business niche. Note that some of the templates are available on Pro subscription only.

Tip: you can start by exploring the template categories, but it's okay to choose any template you like for your future website. All of the templates are 100% customizable, so you'll be able to adjust it to your liking.

You can preview the templates and click on Start editing once you've selected one.

Step 2. Editing the template

If the template mostly suits your initial purpose, you can start by filling it in with your own content. For that, select the text and change it to your own.

You can also change the layout of the existing blocks. For that, navigate to the blocks or columns settings and adjust them to your needs. Here are examples of available settings:

add/ delete items in a block;
change the order of the items;
adjust paddings;
add additional elements — those which weren't in the block initially (e.g., buttons, images, icons, etc.).

To add more blocks, click on the "plus" icon and browse through the blocks library. Then, click on the block for it to appear in the editor:

To play a bit with the block's design, open the block settings by clicking on the "gear" at the top right corner:

Here you can choose a color or add an image plus set animation. Remember that this is a black-and-white tool, so the choice of colors is monochrome.

Click on the image placeholder to add your own image. You can edit the position of your image with the "handlers" at the bottom of the placeholder. To change the color overlay or add a link to the image, click on the "gear" and access its settings:

Step 3. Publishing the prototype

While you are working on the template, all the changes are being saved automatically. If you wish to discard a change, click on the "undo" icon in the editor. Note that this will only work during the same session:

Click on the Preview button to see how the prototype will look on various devices.

Once ready to go live, click Publish. Do this every time you make changes to the prototype.
Was this article helpful?
Thank you!