Посмотрите на этот сайт.

Не буду говорить о шрифтах, цветах и содержании текста. Расскажу только об одной проблеме и как её избежать.

На сайте каша. Каша из-за того, что все элементы стоят близко друг к другу. Это частая проблема сайтов. Создатели стремятся поместить как можно больше информации на странице.

Пользователь открывает сайт и теряется от обилия информации. Слишком много всего и сразу.

Такой дизайн заставляет напрягаться, а этого не любит никто. Скорее всего человек закроет такой сайт и поищет что-то более приятное и простое.

Возьмем другой сайт той же тематики и сравним. Какой вам нравится больше?

Важно помнить:задача дизайна - четко и однозначно донести информацию, сразу не навести красоту или показать всё.

Я расскажу, как помочь воспринять информацию. Начнём с 8 строк теории.

настраиваемый

Если два элемента расположены рядом, это значит, что они покрывают друг друга. Даже если речь идет о друге от друга, но они оказываются близко, они воспринимаются вместе. Это действие называется «Принцип управления».

Расстояние А точки встречи в одну группу. Расстояние Б делит группу точек на 3 столбца. Если мы уравняем взаимодействие ( А = Б ), точки зрения объединятся в общественную группу.

Как принцип настройки работает в дизайне

В основе конструкции лежит принцип работы. Если не следовать этому принципу, получается каша, как на первом подъеме.

В веб-дизайне основное внимание уделяется выявлению блоков с содержимым. Элементы объединяются в группу.Близость связывания их по смыслу. Группы отделяют друг от друга пустым пространством, чтобы не сливалось. Так проще воспринимать информацию.

Сгруппированные элементы на сайте выглядят лучше, чем разбросанные по странице. Близость связывает их по смыслу. Так что мы видим группу, а не определенные детали.

Рассмотрим на примерах насколько важно соблюдать принципы в веб-дизайне.

Текстовый блок

Абзац и заголовок это два самостоятельных блока. Расстояние от заголовка до статьи будет внешнее ( Б ). Расстояние между строчками текста - просмотра ( А ).

В понимании Б = А текст воспринимается как одно целое. Читать его неудобно.

Наведем порядок. Увеличим расстояние от заголовка до текста.

Стало лучше. Теперь внешне больше внутренних или Б > А . Заголовок обрел независимость.

Рассмотрим пример посложнее.

Текстовый блок с изображением

Возьмем блок сайта по продаже букетов. Блок состоит из текста, заголовка и фото.

Смотрим на получение и сообщаем, что заголовок относится к фото. Текст же посещает отдельно. Это неправильно. Исправим.

исключить наши встречающиеся буквы, чтобы было проще.

Б - от фото до заголовка. А - от заголовка до текста.

Заголовок принадлежит тексту. Расстояние между ними должно быть меньше, чем от заголовка до фото. А < Б

Теперь заголовок и текст представляют собой блок, который вступает в связь с фото.

Добавим заголовок

Три наших блока объединяются в один большой и вступают во взаимодействие с заголовком «Наши услуги».

Появляется третья буква В . И формула теперь выглядит иначе В > Б > А .

коробка

Мне тяжело давался анализ внешнего и внешнего внешнего вида. желательно его упростить. Я вывела для себя принцип «коробки».

Давайте представим, что у нас много коробок. Они занимают всю кухню и мешают ходить к холодильнику;) А выбрасывать их нельзя. Что будет делать? Собеременность одна в одну. Также предлагаю сделать с блоками сайта.

Вернемся к примеру с букетами.

Начинаем упаковывать коробку с самой маленькой. Мы знаем, что текст и заголовок полностью один блок. Запихиваем их в одну коробку А.

Коробка с текстом и заголовком имеет связь с фотографией . Берем большую коробку и упаковываем фото туда и коробку поменьше . Теперь коробка А отделена от коробки Б растоянием своей картонной коробки.

Мы получили 3 коробки, которые покрываются заголовком «Наши услуги». Упаковываем коробку и кладем их в большую большую коробку.

Картонных стенок между коробкой А и коробкой В стало больше. Следовательно, больше и расстояние между ними.

Варите кашу на завтрак, а не в дизайне

Запомните формулу представления: ≤внешне. использовать ее на практике.

Если вам понравилось правило «коробки» — використовуйте его. Раскладывайте всю информацию по «коробкам».

Обратите внимание на то, как появились другие сайты. Ищите хорошие дизайнерские решения. Ищите косяки, которые можно исправить. Это отличный способ прокачать уровень нормы и использовать ее в своей работе.