Architecture of mobile applications and wireframes

The speed with which it is done. In fact, it is the user himself who, once accustomed to the movement of sliding your finger on the screen, you will begin to do it more and more faster and shorter to minimize efforts. This quick movement of the finger on the screen in an address is called flick and can be used to turn pages of a book, photographs from a gallery, scroll quickly through a web page, etc.

The number of fingers that we slide at the same time on the screen. we can design actions for two, three and even four fingers sliding at the same time and in the same direction on the screen, although for phones – given the size of their screens – it is It is advisable not to exceed two. On the other hand, on tablets you should not abuse gestures with three or four fingers, since they are uncomfortable and hinder the view of a good part of the screen.

Better sans serif. Dry stick typefaces, without serif, are more clean and comfortable to read on the screen, especially when it is small. If the design allows it, we can play with two different fonts (for example, one for the titles and another for the body of text).

Font size. It must be large enough to be read. comfortably (we must avoid at all costs that the user feels the need to zoom in with the fingers to enlarge the letter), although without going overboard: a text that is too large will cause many line breaks, making reading difficult. A simple way to calculate it is by counting the number of characters that fit on one line: thirty to forty characters per line is a good starting point.

Color and contrast. Although it may seem to go against common sense, it is not It is always necessary to resort to "black on white" to achieve legible text. In fact, in In some cases, pure black on white may even make reading difficult or fatigue the user. user. To soften the contrast, shades of gray can be used (both for the background and for the the letter). For example, instead of “pure” black text (#000000), we can use dark shades of gray, such as #0D0D0D or #0F0F0F for the font, or very light tones.

Hierarchies. While on the web we have become accustomed to the use of multiple levels (H1, H2, H3, H4, etc.), on small screens two will often be enough levels to hierarchically organize our text; To make the topic easier, we can play with variations (bold, italic) to have greater typographic richness.

Spacing. As in the previous point, on small screens We will slightly increase the spacing – both between words and between lines – to improve the text readability. We can also apply this increase in space between paragraphs, helping This helps the reader better identify blocks of text. Again, it is not advisable to go through excess: text with too much white space between words or lines is uncomfortable to read.

Responsive Typography. If our application is going to be used in different screen sizes, it is advisable to make sure that both the font size and the spacing are scaled appropriately.

Alignment. The basic rule is to avoid justified text, since in On certain occasions it can leave us lines with too many blank spaces. For the rest of alignments, the general recommendations are:

• Left alignment. This is the preferred alignment, since It works great on all occasions, even with large blocks of text.

• Centered text. It is advisable to use it in moderation. It works either with titles, within buttons or in small blocks of text.

• Right alignment. It should also be used in moderation and small blocks of text.

Speed: Design iterations and improvements happen quickly. Simply tear out the page and start again.

Efficiency: By not focusing on visual details, our designs go straight to the point, thus making it easier for us to direct all our attention to the key points of our product.

Collaboration: Anyone knows how to draw with paper and pencil. Share the First sketches with all the participants in the project will allow us to easily collect ideas and improvements by all team members.