Styling sections and controls
I have made this longer than usual because I have not had time to make it shorter.
- Blaise Pascal
Every screen should be designed with a purpose.
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:
Remember, "Less is more." When creating an interface for your user, you need to consider why every element on the screen exists.
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.
Each control within Method has a customizable style. Since fonts and colors are set by Method, this section will focus on:
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.
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:
Currently, there are only a few options for setting the padding of containers.
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.
Containers and columns within grids can have their widths set based on pixel width, and percentage of screen width.
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 33% or 25% respectively. The choice of thirds or quarters depends on how much information needs to be displayed on the screen. The invoices screen, for example, have four columns of information displayed, and thus is divided into quarters. However, for screen which only wish to display one single column of information, then the screen is divided into three columns.
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.
On top of setting the width of sections, each control can be set to a specific width.