top of page
  • Writer's pictureDK

Shape, size, distance - starting point for interface design.

We live surrounded by many kinds of systems with a large variety of screen sizes and types. There are interfaces such as large screens of TVs, small screens of smartphones, screens of PCs and tablets, tiny screens of smart watches, ticket vending machines, car navigation systems, etc. The size, shape, and distance to the screen are all different.

Interface design begins with considering the characteristics of the screen. Should the screen have a square shape or curved? If the screen is a square, it seems to be a good choice if the displayed image also has a square shape. If the screen has a curved surface, it would be convenient to display something along. Also, is it vertically long or horizontally long? Is it positioned close or far away from the user? Does the screen shape change or is it fixed? Feature of the screen depends on what and how are you going to design your user interface. Interface design starts here.

Screen shape

It's not surprise if we say that the interface starts from choosing the shape of the screen. Most of the interfaces we see are built on the premise that the screen is a "square". What if it's not square but round or partially deformed? You can imagine the design of almost everything: headers, footers, element alignment, navigation. First, what is the shape of the screen? This is the starting point for interface design.

Small and close or large and far away

After we have chosen the shape of the screen, the next thing to consider is the distance to that screen. For example, smartphones and tablets are within arm's reach, while TVs are being watched from far away. Therefore, there is a big difference between the actual size and the perceived size.

The actual size scale comparison can be seen on the image above, but considering the distance to the device - check image below.

In terms of physical size, it looks like this. In other words, it is necessary to apply this principle when designing an interface: the farther the object - the larger the elements. Each interface has a suitable distance for use, and the size and layout of the elements should be designed accordingly.

What cannot be changed and what can be changed: flexible or fixed screen size and screen aspect ratios

On the screen there are things that cannot be changed and things that can be changed. For instance, the screen size of a browser on PC can be changed freely, however it remains fixed for other devices, such as smartphones and tablets. Also, the aspect ratio of the screen is fixed on any other device other than PC, so it is necessary to consider the layout based on those conditions.

Should the screen orientation be vertical or horizontal?

In addition, if the screen size is fixed, the "orientation" of the screen also creates suitability. There is a large gap in how landscape and portrait orientation should be designed, and in some cases it is better to completely change the interface.

9 views0 comments

Recent Posts

See All


bottom of page