A variety of tools and options are available when it comes to designing a new page.
Before starting the process, a few core questions should be answered in order to select the proper tools, and set the right values.
The core questions to answer, in order, are
A page can execute a page function. Some of these functions require some time to complete, others terminate almost instantly.
For the latter group, a page does not need to be designed, as it will be visible for no more than a frame.
It is possible and advised to design all pages, in case a function is delayed for some reason, and to suppress unwanted visual effects.
However, when choosing which page to design first, those with a short-lived function should not be prioritized.
This is the most crucial base decision, and has two general answers:
For the first case, the page can be designed to suit those devices, as a single design will look proper on all devices that will display it.
For the other case, it should be considered designing multiple pages, one for each set of resolution ratios.
~17:9, and tablets with a ratio of ~5:3, each of these groups could receive their own individual page. A resolution check can then be used to only stay on the first page, e.g. 16:9 < device ratio < 18:9, and otherwise go to the secondary page.If the background of the page should be an image, two options present themselves:
This ensures that the device's display will be filled. If the image's aspect ratio and the device's aspect ratio mismatch, a considerable black, unusable edge will appear on two sides of the screen.
When it comes to positioning elements, there are two suggested options:
The first option ensures that an element is always positioned at the same position on the canvas. This is recommended for use in conjunction with a background image, and when elements should always be at the same position relative to said image.
The other option allows for fully utilizing the device's display. Elements are positioned relative to its width and height, ignoring the canvas entirely. This ensures that, for instance, a button that is positioned at the bottom of the screen will always be there, no matter the user's device.