Web design tips

Put your components into big groups.

One meaning for a big group = one card with its content and spaces.

Group your components.

1 meaning for a group usually takes 1 space with the same alignment and direction settings. Below, we provide two examples of the home screen of the railway ticket sales system. Do. You can see three separate meaning groups here. The first one is dedicated to the departure/destination points. The second one contains the departure date and time. The third one includes the list with possible trains one can choose from. In this example, the railway ticket sales system is clear. Don't. There are some confusing moments, such as “enter your name”, “take extra-luggage” in the first meaning group, or “order a taxi to the cafe” in the departure date and time section. We need to make the screen with a railway ticket sales system clearer. To achieve it, we can remove confusing inputs and text components, or just create more meaning groups.