Welcome to STUDIO
Welcome to STUDIO！You can easily design and publish your original website with STUDIO.
This article introduces all basics that you should know about how to build an ideal website with STUDIO efficiently. You will be comfortable with the basics and how to layout after reading through this article.
STUDIO is pretty intuitive to use. For example, you can layout a site to stack or nest boxes and style it by changing the size and color of boxes.
There are some types of boxes as below:
Once you get used to the STUDIO way, it will streamline the entire site design process. Before deep dive into the actual design, let's look at the UI first.
Design Editor is where you design the site in STUDIO. Let's look at the main features.
The white space in the center of the editor is called Screen. You place boxes on the screen to build a site.
The menu is located on the left side of the editor. Boxes such as Text Box reside in the menu and you can choose those elements to place on a screen.
The style bar is located on top of the editor. The content of the style bar is switched depending on the element you chose in the editor.
Let's play around with the editor!
This image shows how to add a box and style it.
All elements on the screen consist of Boxes. As you see the image, you can build a site to place image boxes on the screen and style them on the style bar.
The process to build a site with stacking and nesting boxes is called Box Layout in STUDIO.
Box Layout simulates what engineers do to build a website. First, engineers create a site according to the box layout by coding. Although the term might not be familiar for non-technical users, Box Layout edges over other website builders, placing elements freely.
Remember the first time touching a keyboard. You might be comfortable with typing only with pointing fingers than touch typing. However, you would be more productive eventually to learn touch typing, maybe spending a week or two.
Learning Box Layout is the same idea. Again, you might be uncomfortable managing boxes initially, but you would know it's much more efficient to learn that.
２）More Semantic Code
STUDIO generates semantic and organized code based on the Box Layout methodology.
３）Box Layout methodology applies to other design tools
As getting used to Box Layout, you naturally follow the best practice of building a real website, which can also be applied to other design tools. For instance, the idea of Box Layout can be exactly applied to the use of Figma.
Being comfortable with Box Layout allows you to focus on the design and streamline building websites.
Let's take a look at how to layout a site in STUDIO.
How to Structure Layout
How to Structure Website
Box Layout is how engineers build sites. In other words, a real website also consists of stacking or nesting boxes. Please see this website.
This site consists of three sections, the header, main, and footer.
That means these sections consist of three boxes.
In STUDIO, You can stack three boxes on a screen to reproduce this layout. (I purposely changed color so that you can clearly see how it works)
As you see above, place boxes for each section when you design a site on STUDIO.
Layout Box Holizontaly
Let's think about the design for each section. First, please look at the header.
I mentioned the sections consisted of three boxes; each box contains more boxes. For example, the header box includes five text boxes and one icon box.
You can create a header by nesting boxes in a box in STUDIO—however, this time, you need to place them horizontally instead of vertically. Let's look at tools one by one that you freely layout boxes.
You can choose the direction to layout boxes from up, bottom, left, and right.
You can configure the distribution of boxes for Bottom, Top, Right and Left Edges, Center, Both Ends, Justification, or Even.
You can configure the layout of the child boxes as a group for Top, Bottom, Left, Right Edges, and Center.
This is the basics of managing boxes. For more advanced box arrangements, please read this article.
Let's nest text box and icon box in the header box and configure below.
Configure boxes in the header line up horizontally with Direction Menu
Also, configure that nested box to layout both ends. The boxes should be layout horizontally, on both ends.
This is not what you expected, but no problem! Let's sort it out in the next step.
This is what we just built. (Changed texts more realistic)
The real header is as below.
Your layout has not been completed yet. It's arranged even. What you configured with Distribution Menu results in arranging the left box at the left edge, the right box at the right edge, and the rest of the boxes even. Well, how can I arrange the boxes as the actual site?
Here comes Grouping!
Do you remember that you need to mind boxes for each section? Box can nest unlimited. You can group text boxes in a header to put them in a box per small section.
You have two ways to group boxes. The first one is the same as introduced above, arranging boxes in a small section.
The second way is grouping multiple selected boxes by a context menu. Select multiple boxes while holding the Shift button, click the right button to pop up a context menu, and group them with ⌘+G / Ctrl+G.
Selected boxes turn into nested boxes in a box. The state of boxes is visible in the Layer Panel in Add Panel.
Final Touch with Margin and Padding
The rough layout is almost done. Let's finish the design with the final touch with margin and padding. Margin and padding are for adjusting the spacing between elements.
Margin（Orange）... Adjusting spacing outside of a box
Padding（Green）... Adjusting spacing inside of a box
The adjustment of these parameters is easy as below.
Spacing is adjustable either from changing numbers in a style bar or visually dragging arrows displayed when you select a box. (Either Orange or Green). Multiple boxes are also selectable to adjust spacing at once.
This is how to adjust a subtle layout with margin and padding.
These are the basics of how to design and layout on STUDIO.
The recap of what you learned this time is:
Stacking up boxes per section
Configure direction and distribution of boxes
Grouping small sections in a box
Configure direction and distribution of grouped boxes
Repete 3 and 4
Fine-tune with margin and padding at the end
Could you grasp the techniques of STUDIO?
I hope you did! Enjoy designing your original website with STUDIO. Please check out other articles below to learn advanced usage.