Paragraph

How to facilitate the website development for you, the developers and those who will take part in the maintenance later.

UI-kit

UI-kit — is a set of interface elements or rather sample screens from which the interface itself is assembled. It sometimes includes not only buttons, icons, checkboxes, but also elements of typography: type of header, subheading, main text, quotes, lists etc.

Here at Flyphant we tried to start the interface development with creating of such a Ul-kit, but it often ended up with the need to modify this set of elements during working up of each screen.

We soon stopped doing this, and the Ul-kit eventually started to appear not before the prototypes formatting stage, but in the course of it. At this stage — the drawing stage — common elements appear, willing or not. They form the solid Ul-kit as these interface elements are already checked and fit into the overall view of the website perfectly.

Done with the elements, but there is an area which is far more important than the interface elements — this is typography.

Typography

One of the main goals of most websites is to deliver the information to the end user. Of course, it is delivered by the text. The types of header, font, font size, line spacing, paragraph spacing — these parameters influence the easiness of perception. If the website has a lot of text, it is necessary to use the larger font size. If this is not a simple site, but a complex CRM-system with many diagrams, you can use the smaller font size, but pay more attention to letter spacing, because when using some fonts in smaller size the letters tend to merge making it difficult to read.

Apple has developed a brilliant font SanFrancisco: when used in smaller size, the line spacing increases automatically.

Lately, we start the website development with creation of three files containing the formatting of text. Three files for three types of devices: desktop computer or laptop, tablet and smartphone. The mockups in these files are provided in the size corresponding to the popular resolution of devices. Thus, for the smartphone we use 320px wide (however, the latests statistics show that it’s time to switch to 360px). For the tablet we use the width of 768px, and for the ordinary desktop display — 1366px.

These three files contain at least the following elements:

  1. Header <H1>
  2. Subheading
  3. Header 2 <H2>
  4. Header 3 <H3>
  5. Plain text <P>
  6. Larger text (for accents) <BIG>
  7. Smaller text (any commentaries, captions) <SMALL>
  8. Numbered list <OL>
  9. Unnumbered list <UL>

In the file it looks like an abstract text using the above listed ways of formatting.

We start assembling these files with the layout for the ordinary desktop display. If we were given a brand-book, we study it, look at the colors, recommended fonts, general stylistics. Then in the layout we first format plain text <P>, because it is the main part of the website’s typography. Then — the headers from smaller to larger ones. And then — all the rest.

As a result, we get a harmonious website typography presented in three files: paragraph-desktop, paragraph-tablet and paragraph-phone.

It remains nearly unaltered during the course of designing the website prototypes. Due to this stability it is possible to pass the files to other designers and not worry that anything goes wrong. It is also possible to pass them to the developers, in order to speed up the website development. This typography then underlies the design of interface elements.

Bonus for those who have read the article through to the end

Fonts render differs in different operating systems. Thus, the same font looks different in Windows and OS X. It looks even more different in Photoshop.

It is best noticeable with Russian “З” letter

A sure way to find the right fonts is to test them in practice. For this purpose it is necessary to make-up this page with the text and see it in the browser.

This way will suit not all the designers, because many of them are not familiar with basics of HTML. But I would recommend to get familiar with them. You can’t draw something what you have no idea of how it will be realized.


We are Flyphant. Mobile applications and web development, graphic design, motion graphics — this is all that we are not only able of but also love doing.

flyphant.com · twitter · facebook · instagram