Decorator's checklist. Using custom fonts

There are thousands of designers on the market (design studios, private designers, freelancers). It’s not clear how to choose a professional and suitable designer from this heap.

What are the requirements for a designer?

(1) Better to choose specialized designer. For a specialized designer, 70-80% of his work is devoted to a specific topic (website design, landing pages, booklets, banners, business cards, etc.).

(2) Any designer has portfolio. The question is what is it? A designer must have a lot of work, dozens of completed projects. But designers sometimes take credit for other people's work.

How to check a designer's integrity?

• Look for his work in Google/Yandex images. If the links of the works lead to your designer’s portfolio, then everything is OK.
• If possible, talk to the designer's clients who left reviews.

(3) The designer creates layouts using a grid and layers. Layers are grouped into folders. To check this, ask the designer to provide layouts with a drawn grid, as well as a screenshot of the layer structure from Photoshop.

Below are examples of a layout with a drawn grid and a screenshot of the layer structure.

Landing page layout with drawn grid

Screenshot of the layer structure from Photoshop

Why are grids and layers important in a layout?

• A layout designed on a grid is then easier for the programmer to layout.
• A layout grouped into layers is easier to modify and make minor changes.

It would be great if the designer has additional skills:

❶ Programming - has an understanding of hypertext language HTML markup and JavaScript. This is necessary, since the designer must understand how easy or difficult it is to make up his creativity.

❷ Interested in the topic of website usability. Thinks in advance about the ease of use of the site and convenient navigation.

Checklist for choosing a designer

When checking the designer's work, do not pay attention to the content of the layouts (texts and headings). IN in this case the content is not that important. The main thing is to evaluate the design.

❒ 70-80% of works are devoted to one topic that suits you

❒ There are reviews from previous clients

❒ Layouts are laid out on a grid using layers

❒ Images illustrate or complement the main idea

❒ Images do not distract from the content

❒ Minimum additional visual elements that do not complement the text

❒ Check examples of designed sites for loading speed

❒ No more than 5 colors used

❒ No more than 2-3 fonts were used

❒ CAPS LOCK is hardly used. No more than 3 lines should be written by CAPS LOCK. It is advisable to use CAPS LOCK only in an offer.

Desirable:

❒ Have experience in website layout

❒ Will be able to provide a layout version of the site

❒ Images are not taken from stock photos. The images show people similar to the target audience (without foreigners).

The main thing for a designer is to set the task correctly. To do this, you need to correctly compose terms of reference. We will tell you how to draw up technical specifications in a separate article.

Where to find a designer?

If you need basic things, find a freelancer. Websites for finding freelancers: FL.ru, Freelance.ru.

If you decide to work with a freelancer, pay attention to how he answers your questions and in what format, whether he clearly stipulates the price and deadlines.

If you have already found a suitable designer for your website, you will find a checklist for accepting the finished website design useful. Join the group, we will post it soon.

Has it often happened that the result you received from a 3D visualizer did not meet your expectations? The picture did not look alive, and it was difficult to explain to the visualizer what exactly was wrong. Moreover, before starting work, you did not clearly discuss the quality standards that you accept.

As you may have guessed, today we'll talk about quality standards.

Why do we need quality standards for 3D visualization?

1. By defining your quality standards, you can demand specific things from your employee.
2. You will be able to define standards before starting to work with the visualizer. Thus, it will help you get the quality you need.
3. You can clearly determine the quality of the images yourself by choosing a visualizer based on the portfolio.

In this article I will describe quality standards, perhaps you will use ours, and perhaps add to the list.

So let's begin:

1) Image size

In order to print the final result in an album and give it to the client, we use an image format in a ratio of 1.5: 1. For example, preview images we make them 1500x1000 in size, and the final ones are 3000x2000. This is the minimum at which the image can be printed on A4 format.

2) Modeling quality and detail

What is meant by modeling quality:

• room modeling. There should be no mistakes. Modeling errors, as a rule, appear when one geometry overlaps another, appearing dark spots. There shouldn't be spots like this;
• cornice and baseboard profiles are rarely drawn by hand. It's better to take it ready-made. As a rule, the scales and proportions are already well observed there. If the profile is not drawn beautifully, it can immediately ruin the whole impression;
• dimensions and scale small parts. For example, door handles should be at the correct height from the floor and not smaller or larger than they actually are;
• quality and detail of models. There should be no low-quality models in the scene. A sofa with identical square seats immediately spoils the whole picture. The same goes for little things. Accessories inserted into the scene should not reveal their 3D origin.

Be careful when choosing models.

2) Texturing

• The first thing to remember about textures is scale. The texture scale should correspond to the real world. The texture of wood, for example, should not be stretched too much;
• The texture quality must be optimal. The image should not be very large in size so as not to increase rendering time. And it should not be very small so as not to be smeared on the image;
• tiling. Any picture has its boundaries. When we apply it to an object, our texture can be repeated on the object several times. It is very important to avoid seams between repeated images.

These moments should not happen (in both cases you can see the repetition of the texture on the floor):

4) Lighting

• Daylight should be slightly cool. Typically, the lighting is warmer on the south side, and cooler on the north side. In any case, it is better to make it slightly cold, and artificial light- warm. This contrast of lighting brings the picture to life;
• It is advisable not to turn on all the lights in the room - there is a risk of making the picture flat. It is necessary to turn on the lights in those places where there is less light from the window. This way, there will be contrast in the image and it will not be flat. It is important to maintain the play of shadow and light;

• night lighting. In night lighting there should still be light from the window - a slightly blue glow, like in the image below. The window frame must have reflective glass so that, as in real world the interior was reflected in the windows when the lights were on. The light turns on all the way and achieves maximum contrast in the image. It is important that the night image is not daytime, with a blue tint. It must be night after all. Turning off all light sources except the window. We should get almost darkness with a slight glow from the window.

5) Proportions and scale

• We talked about this partly at the modeling stage. It is important that all objects - including small door handles, cornices, baseboards - are in their size, as in the real world. The handle should not be small in relation to the entire door. The sofa should not be tiny, and the TV stand should not be higher than the back of the sofa. Everything must be proportional;
• if the scale of the model changes in the scene, use the scaling command (stretching the entire model is allowed only within 20%). This is important because by simply increasing or decreasing the entire model using the scaling command (for example, by stretching a door from 2100 to 2400 high), you can upset the proportions of the model (in the case of a door with a panel or a picture baguette, the top and bottom frames will be wider than the side ones). + along with scaling, the texture size is scaled. Those. the dimensions that are specified in the texture and in the model will no longer correspond to the real world.

6) Camera placement and frame composition

• It is important to follow the basics of composition in the frame. It is best to choose the camera position along with the visualizer;
• the camera should be located at a height of 1600-1650 mm from the floor. This is the standard. You can position the camera higher or lower only if the composition of the shot requires it, as in the example below (artistic shot). In this case, it is acceptable to lower the camera. As a rule, such types are additional - artistic, but not basic informational;

Designers often make the same mistakes in layouts - small, but unforgivable. This usually happens due to inattention or because they don't pay enough attention to details. Although it is important to be pedantic in this matter.

We have compiled a checklist with basic rules that will help you avoid such mistakes. You can check it before submitting the layout for work.

We didn’t come up with anything new: we simply selected from among the generally accepted standards those that are needed specifically for email newsletters. They do not guarantee you the perfect template, but they will help reduce review time and improve execution.

1. Unit of measurement is always pixels (px)

Pixel is the basic unit of measurement in web design, and it is also used by our layout designers. If you use different units, then our 14 points will be displayed by the layout designers as 14.22 pixels. Agree, working with multiples is much more convenient.

2. Follow the modular grid

The layout must follow a modular grid. It has a vertical and horizontal direction, and the intersection of these lines is the module.

It is needed in order to speed up and simplify the creation of a layout, be it an email newsletter or landing page. With it, you don’t have to think about what indentation to make or how to harmoniously arrange objects.

The grid will set a uniform standard for the arrangement of objects and eliminate the possibility of odd indents. In addition, it is much easier to create adaptive design based on a grid.

See how letters made using modular grid and without her. The difference is obvious:

Here are services that will simplify working with the grid:

14. Retina layout adaptation

IN final file everything is needed vector illustration, as well as double the main elements to make it possible to adapt the layout for Retina displays. This is necessary to ensure that users of smartphones with high pixel density (for example, iPhone) do not have blurry images.

15. Get rid of clutter in your layout

Remove all unnecessary layers from the layout. This will help optimize the file size. And the less it weighs, the easier it is to transfer it for layout and store it in the future.

It is also necessary to logically arrange all layers into folders and call them with clear names. This will make the work of layout designers easier when they export images from Photoshop.

22.06.2018 Read it in 3 minutes.

Modern style in interior design – reflection fashion trends and advanced technical achievements, which are linked together and embodied in the design of an apartment or house with a unique style, texture, furniture and other elements. Loft, industrial, scandi, minimalism and hi-tech trends are in particular demand in the current conditions. The decoration in each of the variations requires specific subtleties and individual touches, but if we talk about modern style in general, it can be created with the help of several simple rules.

Organization of space

The living area should not give the impression of a storage room or a cluttered area. Less things, more usable space - this is the law of modern style, where free space in priority. Ideally, furniture does not block passages, corridors, voids and corners, unless it carries some rational functions. Convenient option– group arrangement of furniture. Unoccupied areas in the house remain untouched, since their presence also forms a modern decoration.

Another nuance is the bright streams of natural light in the rooms. This means skipping heavy curtains in favor of practical, light-colored curtains. It is advisable that sun rays played the role of the main “lighting device” during the day, and did not compensate for its lack. If housing is located on shadow side You can use lamps with a soft and safe glow in the right quantity.

Color palette

In the photo: Living room interior in a modern style apartment

Geometric shapes and lines

It is impossible to see intricate and ornate patterns here. Preference is given to correct and proportional figures. Symmetry dominates the exquisite paraphernalia, all details are laconic and logically justified.

Despite the modest range of ornaments, the design of apartments can be easily enlivened with the help of well-chosen motifs. A carpet with an original pattern, wisely thrown on the floor in the living room, or a chandelier suspended from a classic ceiling is suitable for these purposes. large size.

The lines of furniture, decorative elements and images on the walls should be straight and clear, without smoothness or rounded ends, as well as raised contours.

In the photo: Bedroom interior in a modern style apartment

Types of materials

All surfaces are smooth, shiny, even. The chrome texture is relevant, which can be used either separately or in combination with other materials. The varnished surface has an amazing property - it reflects light, which gives it a glossy finish. environment and favorably emphasizes the merits of the main idea.

Basically, for a modern style, products are selected from: metal, plastic, wood, glass, natural stone.

In addition, do not forget about the need for matte surfaces. The contrast rule will eliminate overkill and balance appearance apartments.

In the photo: Living room interior in a modern style apartment

Furniture

The emergence of modern style is largely dictated by trends in high-tech solutions. This fashion trend is also associated with furnishing the rooms with the necessary furniture. Luxurious sets and expensive utensils are simply inappropriate here. When choosing decoration, the emphasis is on maximum benefit every single item that is useful in everyday life.

Guided by expediency, you need to furnish the house. Where you can get by with hanging shelves, you don’t need a closet. If the attribute is transformed, for example, a chair into a bed, it will be superfluous to buy an analogue of a sleeping bed.

Furniture manufacturers come up with sophisticated options that can perform several functions at once for convenience and ease of life. And this is exactly what modern style needs for self-expression.

In the photo: Living room interior in a modern style apartment

Decor element

In general, the abundance of souvenirs, trinkets, and accessories that are usually used to decorate a house is unacceptable in a modern interior.

The artistic style will be brought in by: snow-white sculptures, porcelain vases, strict lamps and floor lamps, graphic images, tree twigs in a large vessel, wall clock.

Decorative elements designed to dilute a boring atmosphere, make it elegant, and also focus the attention of guests. The accessory should carry meaning and explain its presence in the house, perhaps the occupation or hobby of the owner.

In the photo: Interior of a children's room in a modern style apartment

Modern chandeliers

Lighting like important criterion modern direction should be more natural. However, without artificial lighting fixtures there is no way around this either. You can choose a miniature chandelier with pendants that will hide the lack of size, or opt for a large product with a clear shape.

The object does not have to hang above a piece of furniture, where household members most often gather. In the living room you can hang it above the dining table, but in the study it is extremely inconvenient and devoid of any aesthetics. The same can be said about the bedroom: its radiance will be an irritating factor if it is directed directly at the marital bed or crib.

The traditional option is to use ordinary glass. A chandelier made of colored glass looks unusual and bright in the living room or kitchen. In addition to it, additional light bulbs can be installed in the ceiling. Recessed lighting just solves problems with shaded corners in the house where not enough light comes in.

In the photo: The interior of the hallway in an apartment in a modern style

Thematic design

“Striped” sofa upholstery, floral decor, a brick wall with wiring sticking out – these unique details contain the theme of modern style in the interior. Thanks to original touches, the style becomes recognizable. Nothing characterizes a loft more than a partially renovated room with a cement floor and a wooden ceiling. You can immediately identify high-tech by its advanced technical devices and scandi by the ethnic patterns printed on pillows, blankets and accessories.

In the photo: Living room interior in a modern style apartment

Walls, floor, ceiling

The wall decoration is simple. They are painted in a single color or covered with wallpaper with an unremarkable pattern. The texture is smooth and calm. Laminate flooring is also a sign of modern style. The flooring can be parquet, but it should not have patterns. To match the restrained trend are single- and multi-level ceilings with combined materials.

In the photo: Living room interior in a modern style apartment

Mirrors

Designers never tire of turning to mirrors for help. They are a win-win in any room, as they tend to effectively reflect light. The modern appearance of the interior is a priori unthinkable without these symbolic elements. Mirrors at correct location are able to enlarge the space, fill a faceless room with “bunnies” and natural brightness.

They give a darker room a special drama and piquancy. The use of original and no less strict forms gives the atmosphere a certain charm.

If you take into account all the main steps, focus on a specific direction and take a responsible approach to planning modern interior in the house, you can independently implement the idea in the best possible way.

It's no secret that any website is first and foremost text information. He comes for this information target audience resource. To make the texts comfortable to read, and the information in the best possible way perceived by site visitors, it is necessary to carefully work with typography.

Typography- design skills printed texts, for their best perception. The typographic process consists of selecting typefaces, choosing font size, determining line length, line and letter spacing, as well as the relative position of texts, photos and illustrations on a web page. That is, selecting all the parameters that improve the readability of the text.

How to understand whether the work on the texts on the site has been done well? In fact, it’s simple, you should be comfortable reading and perceiving information, your eyes should not strain, the structure of the text on the page should be clear. In most cases, when there are some problems with the texts, we involuntarily go to another resource, even if the information on the site is relevant and would be useful and interesting to us. It's all about discomfort.

Let's look at a number of principles and features of typography in web design that affect the perception of information.

Fonts

In the past, mainly the so-called ones were used, but with the development of CSS, it became possible to connect any font to the site using the @font-face rule.

Font and typeface

It’s worth first of all defining what a font is and what a typeface is.

Font– graphic design of letters and signs that make up a single stylistic and compositional system, a set of symbols of a certain size and design.

For example:

• Open Sans Light – font
• Open Sans Regular – font
• Open Sans Bold – font

Headset is a group of fonts different types, pins having the same style, uniform style and design.

For example:

• Open Sans Light
• Open Sans Light Italic
• Open Sans Regular
• Open Sans Regular Italic
• Open Sans Semi-Bold
• Open Sans Semi-Bold Italic
• Open Sans Bold
• Open Sans Bold Italic
• Open Sans Extra-Bold
• Open Sans Extra-Bold Italic

All these individual fonts are the typeface.

Choose good matches

Take fonts seriously (pick 2 fonts that will work harmoniously with each other). One for the title and one for the body text. The title should contrast with the background of the body text, but should not be huge or too small. To create a harmonious font pair, use fonts (Antiqua in combination with Grotesque), select the font size, use a style (italic, bold, regular), and also use color.

Limit the number of fonts

Use no more than 3 fonts on your site (1 for headings, 2 for quotes and 3 for body text).

Don't use decorative fonts

Do you have decorative fonts in your arsenal and are itching to use them in your layout? Forget about it unless absolutely necessary. They can be used, as a last resort, for a thematic site and then for headings. Do not use handwritten or decorative fonts for content; they have very poor readability.

Don't decorate fonts

Don't get carried away with decorating texts in Photoshop. What I mean is that there is no need to use gradients, shadows everywhere in the texts, or various layer style effects in Photoshop. They will only interfere with reading and reduce the appearance of the site.

Don't overuse capitals

Do not write texts in capital letters. Text typed in capital letters is, firstly, difficult to read, and secondly, it gives the impression that you are shouting at the user. You can write the title in capital letters, even if it occupies no more than one line.

Font sizes

1. When designing your layout, use only fonts with integer point sizes (16pt, 18pt, 22pt, and so on). Do not use font size (15.5pt, 16.8pt, etc.).
2. You shouldn’t make the headings gigantic and the content small (it’s better to use at least 12px).
3. For regular text, use a font size of 14–18px.
4. When choosing a font size, do not forget about adaptability.
5. Make headlines different sizes so that the hierarchy is visible.

Warp fonts

Do not distort texts in Photoshop using Free Transform. I already wrote about this in one of the articles, but as they say, repetition is the mother of teaching. In general, you should not squash or stretch letters.

Accents

You can place emphasis (highlight the main ideas) in the text in different ways. From basic methods we have three kinds bold, italics And underlining. In most cases, only bold and italics are used, since it is customary to underline links. Do not overuse emphasis; use it only to highlight the main thoughts.

When designing a layout, don't use technical styles to create emphasis, but use font.

Formatting links

Be careful when designing links. All links in the layout should be underlined, with the exception of links in the navigation menu. In addition to the fact that the link text will be underlined, it requires the addition of some other accent to attract more attention: color. In this case, it will be clear to the site visitor that this is a link, and not just underlined text.

Tracking and kerning

Tracking– changing letter spaces in words, lines and paragraphs.

Tracking is also called discharge. By increasing the interletter spaces, the text becomes airier and lighter, and by decreasing it, on the contrary, it becomes darker and more constricted. Tracking is mainly used for discharge capital letters. Excessive discharge lowercase letters is considered undesirable.

Kerning– selectively changing the distance between each specific letter pair in order to improve readability and appearance.

Kerning is used for headlines, logos and other short text to achieve better density between letters.

Aligning texts

In web design, it is common to align text to the left. Since left-aligned text is better read and perceived. The peculiarity is that we read from left to right and with this alignment our eyes clearly see the ending of each line of text.

Center alignment is also quite often used, mainly used for headings, and texts explaining the heading, can often be seen on. Moreover, in this way, the text is aligned in no more than three to five lines.

Right justification is used extremely rarely, and if used, it is for small texts of several lines.

And in terms of width, this is almost never the case, because after layout large gaps appear in the texts, which look terrible and reduce readability.

Contrast and readability

Be careful about the contrast between text and background. Do not write in light gray white background and on a dark background with too dark shades. Don’t forget that we are developing a website, and a website is primarily texts that need to be read.

Indentations

Shouldn't do large indents between headings and the associated paragraph.

Use line spacing For better reading texts (use optimal line spacing, don’t make it small and definitely don’t make it huge). Use values ​​in the range of 1.4 - 1.6 times larger size font.

It is also worth paying attention to the paragraphs of the text; you also need to add air between them for better reading. Often it is equal to the font size.

String length

When developing your design, pay attention to the line length. Try not to make it too long, as a long line is much more difficult to read. Try to make it within 50-75 characters; this is the optimal line length at which a person can read comfortably, he sees the beginning and end of the line and can easily move on to the next line. This is an ideal limit of parameters, not always achievable, you need to strive for it. Check visually to see if the line is too long and vary the number of characters.

Hanging punctuation

A professional developer (typographer) uses so-called hanging punctuation in the design of texts. This is when quotation marks, hyphens, parentheses, commas, and periods are placed outside the typing line. Em dash, which plays the role of a punctuation mark for direct speech and is not carried beyond the typing line. All these manipulations help to maintain the required form paragraph.

Widows and Orphans

These concepts usually refer to words that stand alone on the same line in a block of text. A word standing alone on a line at the beginning of a block is called an orphan. The word standing on its own line at the end of the block is called widow.

Because of such words, the edges of texts become torn and a person is distracted by them, which in turn impairs readability. For these reasons, widows and orphans are considered bad typography.

Unfortunately, on the web it is not always possible to get rid of these kinds of dangling words. But there are several methods you can try to correct such issues.

• Try adjusting the width of the container in which the text is located;
• Change font size;
• Change the text itself by deleting part of it or adding words;
• Use kerning or tracking for text.

About texts to fish in design

Fish in design refers to content that is not directly related to the company and is used to fill out the page layout. The fish text allows the customer to imagine what the site will look like after filling it with information. Often used due to the lack of prepared texts and pictures.

The text fish can be either a good content or a bad one. Good fish is as close as possible to plausible texts and pictures. A bad fish usually looks like a sketch, using text consisting of three to five repeating words and blanks for pictures.

Try not to use fish text in layouts; if possible, use pre-prepared texts or create fish as close as possible to the future content. Request content from the customer. In the absence of content, warn the customer that you will use fish in the layout.

Why is this important? Let's look at a few reasons:
1.Text fish written using Lorem ipsum often does not give a proper idea of ​​the text and what information it carries, complementing the icon or picture.


2. It’s a big mistake to use English fonts when developing a Russian-language layout. Since the letter (letter) of the Latin and Cyrillic alphabet differs in width.


3.Text written from three to five repeated words and a blank under the photo is also a bad fish and should not be used. This also applies to texts not related to the project.


4. If it suddenly turns out that you have not agreed on the use of fish text in the layout, the customer may consider it the main content and you will receive a barrage of questions regarding the texts. And if the person responsible for accepting the layout has absolutely no idea what a fish is, then I don’t envy you.