Remember, your main concern is the user's experience. If you can reduce the user's effort to get a task done, this will go a long way to providing customer satisfaction.
When designing the look and flow of your screens, ask yourself a few questions:
When is this used?
Where is this used?
When should I use one style over another?
Is this required?
Can this field be derived (auto-populated)?
Does this data need to be collected now?
How should this look and be styled?
How is the experience on mobile?
Remember, "Less is more." When creating an interface for your user, you need to consider why every element on the screen exists.
Consistency with Style
Within web site design, a consistent layout and look is crucial. Consistency is more than just making everything look the same. Consistency communicates workflow to your users. They will know where to look, where to find things with ease, and where to go next. For example, the save button should always be in the same place and the same colour.
Each control within Method has a customizable style. Since fonts and colors are set by Method, this section will focus on:
Spacing and padding
Width and positioning
Spacing and Padding
Padding improves legibility, helps guide the user's eyes, and makes it easier for the user to interact with the screen.
Padding is the space between the border of a container control and the inner content. If you are familiar with the margins and padding and are wondering about the difference, the margin is the spacing outside of the border (not shown in the below image), and the padding is the spacing within the border.
You can individually set the padding for the top, bottom, left, and right side of a container.
You will find padding settings under Style in the properties panel of:
Sections
Section cells
Grid cells
Currently, there are only a few options for setting the padding of containers.
None: No padding
Regular: Defaults to no padding
1x: About a fourteen pixel whitespace
2x: Double that of 1x
The majority of containers have a padding of 1x. If a container has a grid, then the left and right padding is set to none.
Width and Positioning
Containers and columns within grids can have their widths set based on pixel width or a percentage.
Due to the relative size of browsers on different computers, it is best practice to set the width based on percentage.
However, you may have noticed that controls placed within a container with no columns will expand to fill the whole container:
In order to get around this, we use columns to divide a section into thirds, or quarters, with a width of 25%.
Of course, when it comes columns and row, care should be taken to make sure the screen looks good on mobile. For that, you should check out our article on Responsive Design.
Control Widths
On top of setting the width of sections, each control can be set to a specific width.
Auto: Control is wide as its text inside.
Fixed: Control is set to a width you specify in pixels (width cannot be smaller than the Auto width). This is useful if you wish a consistency on the width of your buttons.
Full: Control will fill up the entire cell it is in. This is used when the screen is viewed on mobile and it can take up the full width of the display.
