With Studio, you can easily design and publish your original website.

This article explains what you need to know to create your first website in Studio. By the end, you will understand the basics of the layout process in this design tool.

The design process in Studio is straightforward. You create layouts by stacking boxes or placing boxes inside other boxes. Then, you can style them by adjusting size and adding color.

There are several types of boxes, each with a different purpose and specification. For example:

By stacking or nesting these boxes, you can design your original website!

As you learn more about designing in Studio, you will be able to work quickly. Let's first take a look at the user interface together.

In Studio, you can design your website using the design editor, as shown in the image above.

Let's introduce some important tools!

Screen/Canvas

The canvas is located at the center of the design editor. To create your website, place boxes on the canvas.

Add menu

The "add" menu is located on the left side of the editor. From this menu, you can add various boxes to your website, such as text boxes, to the canvas.

Style bar

The style bar at the top of the editor allows you to change styles such as size and color. The menu displayed will automatically change depending on the element you select in the editor.

Feel free to experiment with the Editor!

Experiment with the Editor

The following demonstrates how to add boxes and style them.

All elements on the canvas are made up of "boxes". As shown in the video above, a new text box has been added to the screen, and the size and font of the text box are being changed on the style bar.

This is how websites are created in Studio: by placing basic text, image, and other boxes within the canvas and styling them on the style bar.

We have discussed how you can create layouts by stacking boxes or placing boxes inside other boxes. This box-based layout method is based on the composition of real websites. Engineers use box layouts to create websites in code. Although it may seem unfamiliar at first for non-engineers, this layout method has many benefits over other website builders that let you arrange elements freely.

1. Efficiency improves over time
When you first started typing, it was probably easier to use only your index fingers instead of using the correct touch typing method with all your fingers on the home position, right? But after a week or so of practice, you became more efficient.

The Box Layout is similar to learning touch typing. It may be difficult at first to arrange the boxes, but with practice, you will become more efficient.

2. Produces clean website code

As this method is created based on the composition of real websites, the website code created with Studio is well-organized and clean.

3.Can be applied to other design tools

Once you become familiar with Box Layout, you can design with actual websites in mind, even in other design tools.

Once you are comfortable with box layouts, you can focus solely on design and create websites efficiently and easily. Now, let's take a look at how to build box layouts.

You may remember that engineers also use box layouts to create websites in code. In other words, real websites are also made up of stacked or nested boxes. Take a look at this site!

This site is composed of three main parts: the header, the main section, and the footer.

Each of these parts is composed of boxes. In other words, the site can be divided into three boxes.

In Studio, we organize these divided sections using sections (colored to make them easier to understand).

When designing in Studio, it's important to think of the site in terms of sections and prepare boxes for each section.

Try it yourself

Next, let's consider the design of each section. Pay attention to the header.

As mentioned earlier, the site is composed of three boxes. Furthermore, within these boxes, there are additional boxes. In the case of the header, it contains five text boxes and one icon box nested within the main box for the header.

To create the same header in Studio, you need to place boxes within the main box for the header. However, this time, instead of stacking boxes vertically, you want to stack them horizontally. The boxes are also divided into left and right sections, rather than being aligned in a single row.

To achieve this layout, you will use the tools that appear around the box when it is selected. Let's introduce these tools one by one.

Box direction

You can set the direction in which the boxes are laid out using the direction menu. For example, selecting "→" will make the boxes lay out from left to right.

Additionally, by selecting the Z-shaped arrow, you can set the wrapping of the boxes. When the width of the parent box becomes narrow and the child boxes no longer fit, they will automatically wrap.

Box alignment

In the alignment menu, you can select the alignment of the boxes.

For horizontal directions, you can choose left, center, or right alignment. For vertical directions, you can choose top, middle, or bottom alignment.

Opening the collapsed menu will reveal options for aligning to both ends and distributing equally.

For more detailed information, please refer here.

Now, let's actually put text boxes and icon boxes inside the header box and make the following settings!

It may not be exactly as you intended yet, but that's okay! We will further refine it in the next step.

If you have followed the steps outlined above, you will have reached this point. (The text has been changed for clarity.)

This is not what you expected, but no problem! Let's sort it out in the next step.

And this is what the actual header looks like.

You can see that the layout is not correct yet.

In our example, the text boxes inside the header box have been evenly distributed. The settings chosen in the distribution menu align the first box to the front, the last box to the back, and the remaining boxes are evenly distributed.

So how can we align the boxes to the left and right, just like the actual header?

That's where grouping comes in!

Remember the tip I mentioned earlier. When designing in Studio, it's important to think of the site in terms of sections and prepare boxes for each section.

I mentioned that the layout is created by nesting boxes, and boxes can be nested at multiple levels. In other words, you can divide the text boxes in the header into smaller sections and group them together.

There are two ways to group in Studio.

The first method is similar to stacking boxes for each section. You stack boxes within a box for each subsection.

However, if you have already stacked text boxes as mentioned earlier, it can be time-consuming. But don't worry, in Studio, you can select multiple boxes and group them by right-clicking and choosing "Group" (⌘+G / Ctrl+G)! To select multiple boxes, simply hold down the Shift key while selecting the boxes.

When you group the boxes, the selected boxes will be automatically nested inside a larger box. You can confirm the grouping by checking the Layer panel in the Add panel.

Great! You're almost done with the layout. Now it's time for fine-tuning!

In Studio, you can adjust the spacing using margin, padding, and gap. For this tutorial, we will focus on margin and padding.

These adjustments are very simple! Try following along with the video below.

You can change the margin and padding values by either modifying the numbers in the style bar or by dragging the orange or green arrows that appear when you select a box.

Furthermore, you can apply margin and padding settings to multiple selected boxes at once.

Learn more here: Margins, padding, gaps

To create layouts in Studio,

That's it! You should now have a good understanding of the basic workflow and layout in Studio. I hope you enjoy creating your own original website using Studio!

We have also compiled a list of articles that will be helpful for creating websites in Studio. Check them out!

Related articles and videos