Что означает правило внутреннего и внешнего

5 базовых правил хорошего дизайна

Закон Фиттса, теория близости, отступы, якоря и гербы.

Что означает правило внутреннего и внешнего. Смотреть фото Что означает правило внутреннего и внешнего. Смотреть картинку Что означает правило внутреннего и внешнего. Картинка про Что означает правило внутреннего и внешнего. Фото Что означает правило внутреннего и внешнего

Что означает правило внутреннего и внешнего. Смотреть фото Что означает правило внутреннего и внешнего. Смотреть картинку Что означает правило внутреннего и внешнего. Картинка про Что означает правило внутреннего и внешнего. Фото Что означает правило внутреннего и внешнего

Как быстро собрать гармоничную композицию, подобрать цвета и рассчитать поля в макете? Рассказываем, какие знания помогут не теряться из-за мелких ошибок в макете и не тратить много времени на поиски идеального решения.

Теория близости

Любые объекты, расположенные рядом, воспринимаются связанно. Это правило сформулировал Артемий Лебедев в своём «Ководстве».

Рассмотрим, как работает теория близости на примере обычных кружков. Если расставить их на одинаковом расстоянии, связи между ними не будет:

Что означает правило внутреннего и внешнего. Смотреть фото Что означает правило внутреннего и внешнего. Смотреть картинку Что означает правило внутреннего и внешнего. Картинка про Что означает правило внутреннего и внешнего. Фото Что означает правило внутреннего и внешнего

Если поставить один из них рядом с другим — эти два объекта будут восприниматься связанно:

Что означает правило внутреннего и внешнего. Смотреть фото Что означает правило внутреннего и внешнего. Смотреть картинку Что означает правило внутреннего и внешнего. Картинка про Что означает правило внутреннего и внешнего. Фото Что означает правило внутреннего и внешнего

А если увеличить отстоящий кружок — он будет подчинять себе остальные:

Что означает правило внутреннего и внешнего. Смотреть фото Что означает правило внутреннего и внешнего. Смотреть картинку Что означает правило внутреннего и внешнего. Картинка про Что означает правило внутреннего и внешнего. Фото Что означает правило внутреннего и внешнего

Яркий пример использования этого принципа — вёрстка текстовой страницы. Заголовок всегда ставят к тексту, к которому он относится:

Что означает правило внутреннего и внешнего. Смотреть фото Что означает правило внутреннего и внешнего. Смотреть картинку Что означает правило внутреннего и внешнего. Картинка про Что означает правило внутреннего и внешнего. Фото Что означает правило внутреннего и внешнего

Этот же принцип можно легко применить к вёрстке таблиц и избавиться от лишних разделителей. Так как у объектов есть визуальные отступы, читатель легко поймёт, что означает каждая колонка:

Что означает правило внутреннего и внешнего. Смотреть фото Что означает правило внутреннего и внешнего. Смотреть картинку Что означает правило внутреннего и внешнего. Картинка про Что означает правило внутреннего и внешнего. Фото Что означает правило внутреннего и внешнего

Игнорирование этой теории может привести и к забавным ситуациям. Вот пример сочетания нескольких независимых друг от друга вывесок:

Что означает правило внутреннего и внешнего. Смотреть фото Что означает правило внутреннего и внешнего. Смотреть картинку Что означает правило внутреннего и внешнего. Картинка про Что означает правило внутреннего и внешнего. Фото Что означает правило внутреннего и внешнего

Что означает правило внутреннего и внешнего. Смотреть фото Что означает правило внутреннего и внешнего. Смотреть картинку Что означает правило внутреннего и внешнего. Картинка про Что означает правило внутреннего и внешнего. Фото Что означает правило внутреннего и внешнего

Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.

Правило внутреннего и внешнего

Это правило описал арт-директор Артём Горбунов. Звучит оно очень просто: «Внутреннее ≤ внешнее». Применить правило можно к чему угодно: к типографике, вёрстке текстовых блоков и даже к целым модулям со сложной иерархией.

В типографике внутреннее — это расстояния между штрихами букв, а внешнее — интервал между самими буквами. Если набрать строку шрифтом Montserrat c большими расстояниями внутри букв, межбуквенный интервал нужно будет тоже увеличить:

Что означает правило внутреннего и внешнего. Смотреть фото Что означает правило внутреннего и внешнего. Смотреть картинку Что означает правило внутреннего и внешнего. Картинка про Что означает правило внутреннего и внешнего. Фото Что означает правило внутреннего и внешнего

У шрифта Roboto Condensed обратная ситуация — так как буквы у него узкие, большой интервал ему ни к чему:

Что означает правило внутреннего и внешнего. Смотреть фото Что означает правило внутреннего и внешнего. Смотреть картинку Что означает правило внутреннего и внешнего. Картинка про Что означает правило внутреннего и внешнего. Фото Что означает правило внутреннего и внешнего

Если рассматривать целый абзац, то здесь ситуация усложняется. В уравнении появляется интерлиньяж — межстрочное расстояние, которое должно быть больше или равно расстоянию между словами. Кстати, хороший интерлиньяж можно подобрать простой формулой — кегль умножить на 1,3:

Что означает правило внутреннего и внешнего. Смотреть фото Что означает правило внутреннего и внешнего. Смотреть картинку Что означает правило внутреннего и внешнего. Картинка про Что означает правило внутреннего и внешнего. Фото Что означает правило внутреннего и внешнего

Та же ситуация и с абзацным отступом — он должен быть больше интерлиньяжа:

Что означает правило внутреннего и внешнего. Смотреть фото Что означает правило внутреннего и внешнего. Смотреть картинку Что означает правило внутреннего и внешнего. Картинка про Что означает правило внутреннего и внешнего. Фото Что означает правило внутреннего и внешнего

Это правило можно использовать и в вёрстке макета — поля должны быть больше абзацного отступа:

Что означает правило внутреннего и внешнего. Смотреть фото Что означает правило внутреннего и внешнего. Смотреть картинку Что означает правило внутреннего и внешнего. Картинка про Что означает правило внутреннего и внешнего. Фото Что означает правило внутреннего и внешнего

Правило якорных объектов

Ещё одно правило от арт-директора Артёма Горбунова. Якорные объекты — те, которые сразу бросаются в глаза читателю: иллюстрации, заголовки, пиктограммы. Эти объекты должны тяготеть к якорным точкам модуля, расположенным в его углах или центре:

Что означает правило внутреннего и внешнего. Смотреть фото Что означает правило внутреннего и внешнего. Смотреть картинку Что означает правило внутреннего и внешнего. Картинка про Что означает правило внутреннего и внешнего. Фото Что означает правило внутреннего и внешнего

Якорные объекты могут располагаться как в одной, так и сразу в нескольких точках:

Что означает правило внутреннего и внешнего. Смотреть фото Что означает правило внутреннего и внешнего. Смотреть картинку Что означает правило внутреннего и внешнего. Картинка про Что означает правило внутреннего и внешнего. Фото Что означает правило внутреннего и внешнего

Что означает правило внутреннего и внешнего. Смотреть фото Что означает правило внутреннего и внешнего. Смотреть картинку Что означает правило внутреннего и внешнего. Картинка про Что означает правило внутреннего и внешнего. Фото Что означает правило внутреннего и внешнего

Стороны модуля — тоже якорные объекты. Этим правилом пользуются, например, разработчики macOS и Windows.

Что означает правило внутреннего и внешнего. Смотреть фото Что означает правило внутреннего и внешнего. Смотреть картинку Что означает правило внутреннего и внешнего. Картинка про Что означает правило внутреннего и внешнего. Фото Что означает правило внутреннего и внешнего

Что означает правило внутреннего и внешнего. Смотреть фото Что означает правило внутреннего и внешнего. Смотреть картинку Что означает правило внутреннего и внешнего. Картинка про Что означает правило внутреннего и внешнего. Фото Что означает правило внутреннего и внешнего

Функциональность правила хорошо можно отследить на примере визиток. Как правило, заголовок и текст в них располагают в противоположных углах:

Что означает правило внутреннего и внешнего. Смотреть фото Что означает правило внутреннего и внешнего. Смотреть картинку Что означает правило внутреннего и внешнего. Картинка про Что означает правило внутреннего и внешнего. Фото Что означает правило внутреннего и внешнего

Что означает правило внутреннего и внешнего. Смотреть фото Что означает правило внутреннего и внешнего. Смотреть картинку Что означает правило внутреннего и внешнего. Картинка про Что означает правило внутреннего и внешнего. Фото Что означает правило внутреннего и внешнего

Что означает правило внутреннего и внешнего. Смотреть фото Что означает правило внутреннего и внешнего. Смотреть картинку Что означает правило внутреннего и внешнего. Картинка про Что означает правило внутреннего и внешнего. Фото Что означает правило внутреннего и внешнего

Закон Фиттса

В 1954 году психолог Пол Фиттс провёл эксперимент. Он положил на стол две мишени и попросил испытуемых поочерёдно попадать в них ручкой. Расстояние между мишенями увеличивалось, а сами мишени — уменьшались.

В результате исследования Фиттс выявил зависимость, которая стала законом: чем больше расстояние от одной до другой цели и чем меньше размер самой цели, тем сложнее в неё попасть.

Его очень часто применяют в дизайне интерфейсов, так как при использовании приложений и сайтов люди прицеливаются в те же мишени — кнопки, слайдеры, ссылки. Самый очевидный вывод из закона Фиттса — чем больше кнопка, тем проще в неё попасть:

Что означает правило внутреннего и внешнего. Смотреть фото Что означает правило внутреннего и внешнего. Смотреть картинку Что означает правило внутреннего и внешнего. Картинка про Что означает правило внутреннего и внешнего. Фото Что означает правило внутреннего и внешнего

Ещё один вывод — нельзя ставить разные по смыслу кнопки рядом. Иначе пользователь может ошибиться и сделать неверный клик:

Что означает правило внутреннего и внешнего. Смотреть фото Что означает правило внутреннего и внешнего. Смотреть картинку Что означает правило внутреннего и внешнего. Картинка про Что означает правило внутреннего и внешнего. Фото Что означает правило внутреннего и внешнего

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

Что означает правило внутреннего и внешнего. Смотреть фото Что означает правило внутреннего и внешнего. Смотреть картинку Что означает правило внутреннего и внешнего. Картинка про Что означает правило внутреннего и внешнего. Фото Что означает правило внутреннего и внешнего

Благодаря закону Фиттса один из бывших дизайнеров Apple Джефф Раскин выяснил, почему панель настроек в программах для macOS удобнее, чем в их аналогах для Windows. И абсолютно те же различия можно заметить на современных системах.

Панель с настройками программы на macOS всегда находится в самом верху экрана пользователя. При таком подходе промахнуться по кнопке сложнее, так как сверху есть физический ограничитель — граница экрана ноутбука или монитора:

Что означает правило внутреннего и внешнего. Смотреть фото Что означает правило внутреннего и внешнего. Смотреть картинку Что означает правило внутреннего и внешнего. Картинка про Что означает правило внутреннего и внешнего. Фото Что означает правило внутреннего и внешнего

В Windows выше панели инструментов вверху окна есть небольшой отступ под панель с кнопками «Закрыть», «Свернуть» и «Открыть на весь экран». Из-за этого попасть в нужное место становится сложнее. Но зато кнопка «Пуск» стоит в углу — благодаря этому пользователь может вести курсор «куда-то в угол», и он точно попадёт в нужное место:

Что означает правило внутреннего и внешнего. Смотреть фото Что означает правило внутреннего и внешнего. Смотреть картинку Что означает правило внутреннего и внешнего. Картинка про Что означает правило внутреннего и внешнего. Фото Что означает правило внутреннего и внешнего

Правило тинктур

Это правило считается основным в геральдике — дисциплине, которая занимается изучением гербов, их традиций и практики использования. Звучит оно очень просто: «Нельзя накладывать финифть на финифть и металл на металл».

Что означает правило внутреннего и внешнего. Смотреть фото Что означает правило внутреннего и внешнего. Смотреть картинку Что означает правило внутреннего и внешнего. Картинка про Что означает правило внутреннего и внешнего. Фото Что означает правило внутреннего и внешнего

Правило сложилось в Средневековье — рыцарям и торговым судам было важно показывать на расстоянии, к какому государству они относятся и какой у них статус в обществе. Узор жёлтого цвета на белом фоне разглядеть с уже 20 метров невозможно, так как контраст этих цветов слишком мал. Другое дело, если тот же узор наложить уже на синий фон:

Что означает правило внутреннего и внешнего. Смотреть фото Что означает правило внутреннего и внешнего. Смотреть картинку Что означает правило внутреннего и внешнего. Картинка про Что означает правило внутреннего и внешнего. Фото Что означает правило внутреннего и внешнего

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

Что означает правило внутреннего и внешнего. Смотреть фото Что означает правило внутреннего и внешнего. Смотреть картинку Что означает правило внутреннего и внешнего. Картинка про Что означает правило внутреннего и внешнего. Фото Что означает правило внутреннего и внешнего

Если вы сомневаетесь, какие цвета использовать для фона, текста и иконок, обращайтесь к правилу тинктур. Оно часто подсказывает правильное направление для решения задачи:

Что означает правило внутреннего и внешнего. Смотреть фото Что означает правило внутреннего и внешнего. Смотреть картинку Что означает правило внутреннего и внешнего. Картинка про Что означает правило внутреннего и внешнего. Фото Что означает правило внутреннего и внешнего

О чём нужно помнить

Цветная эмаль, наносимая на металлическую подложку.

Источник

Этот мир спасет дизайн, или Как креативный директор агентства Out of Cloud видит вывески на улице

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

Меня зовут Никита Соколов, я креативный директор агентства CRM-маркетинга Out of Cloud. Сегодня разберем правило «внешнего и внутреннего». В качестве примеров — реальные фотографии из моего отпуска в Ялте.

Правило такое: внешние расстояния всегда больше внутренних. Поля меню в ресторане всегда больше, чем расстояние между фотографией мантов и ценой.

Арт-директор Артём Горбунов предлагает простую формулу:

В таком информационном шуме трудно увидеть главный месседж: «Заходи, поешь, у нас вкусно». Мешают разные шрифты, текст, наползающий на картинку, интенсивный фон.

Главное, что интересует нас сегодня: элементы баннера вступают в незапланированные связи. Обратите внимание, как они приклеиваются к краям баннера и буквально заставляют прохожих прорываться к смыслу сообщения.

Убираю горящие бокалы и черно-желтую роспись. Баннер теперь выше и не так нападает на прохожих. Смотрим:

Текст жмется внутри прямоугольника, не направляет взгляд с помощью иерархии элементов. Посмотрите, как подружились «морепродукты» с «Юбилеями», а также «Дни рождения» с восклицанием «Мы всегда Вам рады!».

Внешнее расстояние от края до элементов делаю больше, чем расстояние между элементами. Уже лучше:

В хорошем дизайне самые большие расстояния — это внешние поля баннера. Меньше них — расстояния между элементами, блоками. Например, между заголовком и иллюстрацией. Самые маленькие расстояния — те, что внутри одного элемента, например между строками.

Делаю расстояние между строк в тексте «Приглашаем. » меньше, чтобы отделить блок от других. Сдружу части заголовка: выравниваю и уменьшаю «кафе», чтобы подчинить его слову «Виктория».

Расцепляю два блока — «Предлагаем» и «Проводим», — ровняю и увеличиваю расстояния между двумя списками. Взгляду легче скользить по баннеру.

Мне не нравится идея двух колонок. Непонятно, что важнее, меню или поводы собраться. Две колонки будто приглашают прохожего к сравниванию, а сравнивать нечего. Убираю:

«Уютная обстановка» и горящий коктейль на баннере как-то не бились. Поставил фото шашлыка и определил иллюстрации главное место на баннере. Сначала прохожий увидит шашлык, а это сильный триггер.

Теперь баннер «Виктории» не кричит на прохожих, а спокойно приглашает отобедать шашлыком.

Источник

Основы веб дизайна для начинающих — 7 правил

Что означает правило внутреннего и внешнего. Смотреть фото Что означает правило внутреннего и внешнего. Смотреть картинку Что означает правило внутреннего и внешнего. Картинка про Что означает правило внутреннего и внешнего. Фото Что означает правило внутреннего и внешнего

В данной статье я расскажу вам про основы веб дизайна для начинающих, благодаря которым вы сможете избежать множества ошибок новичков и «взять» правильный вектор развития для своего профессионального роста. Вместо того, чтобы самостоятельно набивать себе кучу шишек я предлагаю вам ознакомиться с «выжимкой» самой основной теоретической базы, которую просто обязан знать любой уважающий себя дизайнер. И все это абсолютно бесплатно.

В рамках данной статьи мы с вами рассмотрим 7 основных правил дизайна, поговорим об иерархии и контрасте, а также разберем порядок создания любого дизайна, будь то дизайн простых лэндингов или же дизайн объемных проектов.

Статья представляет из себя некую мини-книгу для новичков, прочитав которую вы получите ценные знания и сможете прокачать свой уровень в дизайне. Итак, начнем.

Основы веб дизайна для начинающих — 7 главных правил

В любой сфере деятельности есть свои правила и это круто, потому что именно они (правила) помогают людям выполнять свою работу более качественно и профессионально. Дизайн не является исключением и здесь тоже есть свои правила, которые помогают разрабатывать дизайн «по-взрослому». По крайней мере, соблюдая их, у вас будет намного меньше шансов «запороть» дизайн.

Начнем мы с правила, которое нарушают 99% начинающих дизайнеров.

1 — Правило внутреннего и внешнего

Суть его в том, что внутренние отступы у блоков должны быть МЕНЬШЕ внешних отступов.

Что означает правило внутреннего и внешнего. Смотреть фото Что означает правило внутреннего и внешнего. Смотреть картинку Что означает правило внутреннего и внешнего. Картинка про Что означает правило внутреннего и внешнего. Фото Что означает правило внутреннего и внешнего

Согласитесь, правило достаточно элементарное, но парадокс в том, что именно его чаще всего нарушают новички. Обращайте на это внимание.

Для закрепления давайте рассмотрим один практический пример. Предположим, что у нас есть блок, в котором располагается 4 карточки товара с каким-то содержимым (с каким — не важно). Прежде чем смотреть картинку, попробуйте сами расположить карточки внутри блока так, чтобы соблюсти наше правило.

У вас должно получится следующее:

Что означает правило внутреннего и внешнего. Смотреть фото Что означает правило внутреннего и внешнего. Смотреть картинку Что означает правило внутреннего и внешнего. Картинка про Что означает правило внутреннего и внешнего. Фото Что означает правило внутреннего и внешнего

Наши 4 карточки должны иметь отступ между собой МЕНЬШЕ, чем отступ от карточек до края контейнера.

Что означает правило внутреннего и внешнего. Смотреть фото Что означает правило внутреннего и внешнего. Смотреть картинку Что означает правило внутреннего и внешнего. Картинка про Что означает правило внутреннего и внешнего. Фото Что означает правило внутреннего и внешнего

2 — Правило группировки

Элементы, логически связанные между собой, должны находится рядом друг с другом. Выделяют 3 вида группировки:

Что означает правило внутреннего и внешнего. Смотреть фото Что означает правило внутреннего и внешнего. Смотреть картинку Что означает правило внутреннего и внешнего. Картинка про Что означает правило внутреннего и внешнего. Фото Что означает правило внутреннего и внешнего

Для лучшего понимания давайте посмотрим примеры правильной и неправильной группировки:

Что означает правило внутреннего и внешнего. Смотреть фото Что означает правило внутреннего и внешнего. Смотреть картинку Что означает правило внутреннего и внешнего. Картинка про Что означает правило внутреннего и внешнего. Фото Что означает правило внутреннего и внешнего

В первом случае абзацы расположены близко друг к другу и из-за этого теряется логическая связь, 2 абзаца выглядят как 1 большой. Во втором случае — абзацы разделены отступом и внутри каждого абзаца заголовок и текст сгруппированы между собой по принципу близости.

Что означает правило внутреннего и внешнего. Смотреть фото Что означает правило внутреннего и внешнего. Смотреть картинку Что означает правило внутреннего и внешнего. Картинка про Что означает правило внутреннего и внешнего. Фото Что означает правило внутреннего и внешнего

В первом случае, логически связанные элементы (заголовки и картинки с текстом) разделены друг с другом прямой линией. Из-за этого нарушилась их логическая связь и они выглядят как 4 самостоятельных блока. Во втором случае — логически связанные элементы сгруппированы общей зоной и создают 2 больших блока.

Правило внутреннего/внешнего и правило группировки частенько работают в связке, поэтому предлагаю рассмотреть конкретный пример для закрепления.

Предположим, что у нас есть компонент «Карточка», в которой находится иконка, заголовок, текст с описанием и кнопка. И допустим наш компонент располагается в блоке со светло-серым бэкграундом. Выглядеть это будет примерно так:

Что означает правило внутреннего и внешнего. Смотреть фото Что означает правило внутреннего и внешнего. Смотреть картинку Что означает правило внутреннего и внешнего. Картинка про Что означает правило внутреннего и внешнего. Фото Что означает правило внутреннего и внешнего

Здесь все 4 элемента являются логически связанными, но наибольшую связь имеют заголовок и текст с описанием, поэтому они должны находиться максимально близко друг к другу, по сравнению с другими элементами (группировка по близости).

Что означает правило внутреннего и внешнего. Смотреть фото Что означает правило внутреннего и внешнего. Смотреть картинку Что означает правило внутреннего и внешнего. Картинка про Что означает правило внутреннего и внешнего. Фото Что означает правило внутреннего и внешнего

Также, весь компонент в целом еще сгруппирован по общей зоне (белый фон) и по правилу внутреннего/внешнего, внутренние отступы в компоненте МЕНЬШЕ внешних отступов.

Что означает правило внутреннего и внешнего. Смотреть фото Что означает правило внутреннего и внешнего. Смотреть картинку Что означает правило внутреннего и внешнего. Картинка про Что означает правило внутреннего и внешнего. Фото Что означает правило внутреннего и внешнего

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

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

3 — Правило Паретта

При наличии большого количества элементов лучше всего отобрать 20% наиболее важных, а остальные 80% скрыть в «Подробнее». В этом и есть суть данного правила.

Дело в том, что наш мозг не может адекватно воспринимать слишком большой объем информации. Ему (мозгу) гораздо легче и проще воспринимать маленький объем данных. Так мы лучше ориентируемся в информации и лучше ее усваиваем.

Чтобы продемонстрировать правило Паретта «в деле», достаточно взглянуть на такой элемент, как «Фильтр», который часто используется в интернет-магазинах. Возьмем, к примеру интернет-магазин по продаже мобильных телефонов и сделаем для него фильтр по моделям телефонов.

В начале мы проигнорируем правило Паретта и у нас получится вот такой фильтр:

Что означает правило внутреннего и внешнего. Смотреть фото Что означает правило внутреннего и внешнего. Смотреть картинку Что означает правило внутреннего и внешнего. Картинка про Что означает правило внутреннего и внешнего. Фото Что означает правило внутреннего и внешнего

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

А теперь мы воспользовались услугами опытного дизайнера интерфейсов, который «обновил» наш фильтр вот таким образом:

Что означает правило внутреннего и внешнего. Смотреть фото Что означает правило внутреннего и внешнего. Смотреть картинку Что означает правило внутреннего и внешнего. Картинка про Что означает правило внутреннего и внешнего. Фото Что означает правило внутреннего и внешнего

Ну как, теперь стало лучше? Определенно да! Теперь у нас в видимом списке представлено примерно 20% всех позиций, а остальные — скрыты. Но их можно по необходимости раскрыть, если нажать на кнопку «Еще». Таким образом мы улучшили юзабилити нашего фильтра и помогли потенциальным клиентам легче осуществлять выбор.

Но у многих может возникнуть вопрос, а как мы должны определить, какие именно позиции войдут в эти самые 20%? Ответ достаточно прост. Эту информацию должен знать непосредственно владелец бизнеса, для которого разрабатывается дизайн.

С правилом Паретта очень тесно граничит другое правило…

4— Правило 7±2 (закон Миллера)

Суть его в том, что в одном наборе элементов должно быть не более 7±2 штук. Это опять же обуславливается тем, что мозгу легче воспринимать маленькое количество данных. В примере выше (с фильтром) я как раз параллельно применил правило 7±2. Если вы посчитаете количество видимых позиций, то их окажется 9, что как раз соответствует данному правилу.

5 — Правило упрощения навигации

Это правило я вывел для себя сам и хотел бы поделиться им с вами. Суть его в том, чтобы максимально упрощать навигацию для пользователей (в разумных пределах конечно). Чем легче навигация, тем проще осуществляется поиск и взаимодействие с нужной информацией. А для этого, чаще всего, нужно избавлять пользователей от лишних действий.

То есть вы, как дизайнер, должны в первую очередь думать о том, как ОБЛЕГЧИТЬ взаимодействие с продуктом, а не как его усложнить.

Банальный пример, сейчас я все чаще замечаю, что на обычных лэндингах стали прятать навигацию в «Меню-бургер» (это иконка с тремя параллельным полосками, для тех, кто не знает). По нажатию на это меню у вас открывается навигация с ссылками.

Что означает правило внутреннего и внешнего. Смотреть фото Что означает правило внутреннего и внешнего. Смотреть картинку Что означает правило внутреннего и внешнего. Картинка про Что означает правило внутреннего и внешнего. Фото Что означает правило внутреннего и внешнего

В таком исполнении дизайн с одной стороны выглядит «чище», потому что на виду нет навигационных ссылок. Их заменяет всего лишь одна иконка. Но, с другой стороны, с точки зрения удобства использования, такой подход усложняет взаимодействие с сайтом. Меня, как посетителя, вынуждают совершать лишнее действие для того, чтобы просто посмотреть меню сайта.

Более того, огромный процент посетителей сайта даже не будут знать, что нужно нажать на эту иконку для того, чтобы открылось меню.

То, что очевидно для вас, совершенно не значит, что это очевидно и для других людей.

Поэтому, чтобы не усложнять навигацию, лучше всего сокращать количество действий для пользователя. Но опять же, все должно быть в разумных пределах. Могут быть и такие ситуации, когда вы будете вынуждены закладывать в дизайн больше действий для пользователя. Но это крайне редкие случаи.

Еще один яркий пример этого правила можно продемонстрировать на фильтрации таблиц с данными. Допустим у нас есть таблица из 3 колонок: модель, цвет и цена. И нам нужно добавить в эту таблицу фильтр по всем трем параметрам.

Можно сделать это вот так:

Что означает правило внутреннего и внешнего. Смотреть фото Что означает правило внутреннего и внешнего. Смотреть картинку Что означает правило внутреннего и внешнего. Картинка про Что означает правило внутреннего и внешнего. Фото Что означает правило внутреннего и внешнего

В таком исполнении все выглядит «красиво». Есть таблица и иконка фильтра (синяя), по нажатию на которую открывается сам фильтр.

А теперь сделаем другой вариант таблицы с фильтром:

Что означает правило внутреннего и внешнего. Смотреть фото Что означает правило внутреннего и внешнего. Смотреть картинку Что означает правило внутреннего и внешнего. Картинка про Что означает правило внутреннего и внешнего. Фото Что означает правило внутреннего и внешнего

Здесь у нас под каждым параметром располагается фильтр данного параметра. Выглядит уже не так «красиво», но зато данный вариант будет в разы удобней для пользователя.

Представьте, что такой таблицей вы будете вынуждены пользоваться каждый день и по многу. Будет ли вам удобно каждый раз раскрывать фильтр и выбирать там необходимые параметры? Или же вам будет удобней «не отходя от кассы» фильтровать данные и сразу видеть результат, как во второй таблице? Я думаю, ответ очевиден.

6 — Правило минимализма в дизайне

Суть его в том, чтобы вы стремились упрощать сущности, а не наоборот усложнять их. Последним кстати часто «грешат» начинающие веб-дизайнеры. Минимализм — это не новый тренд, но как по мне, это уже давно переросло понятия «тренд» и стало неким правилом дизайна. Лично для меня, так точно.

Я люблю минимализм, потому что он позволяет избавиться от лишнего визуального шума в дизайне и акцентировать внимание только на важных вещах. К тому же, чем меньше визуального шума, тем эстетичней выглядит сам дизайн (но это только мое субъективное мнение). Под визуальным шумом я подразумеваю элементы, без которых можно вполне обойтись и которые не несут какого-то логического смысла.

Вообще, про минимализм в дизайне я хочу написать целую статью, чтобы подробнее раскрыть эту тему, но пока давайте обойдемся одним примером. Представьте, что у нас есть интернет-магазин по продаже домашних цветов. И нам нужно сделать карточку товара для продукции.

Начинающий дизайнер сделает примерно вот такое:

Что означает правило внутреннего и внешнего. Смотреть фото Что означает правило внутреннего и внешнего. Смотреть картинку Что означает правило внутреннего и внешнего. Картинка про Что означает правило внутреннего и внешнего. Фото Что означает правило внутреннего и внешнего

Здесь прям виден «дизайн». Есть и тени, и градиенты, и обводки, и «декоративные» элементы в виде ветвей растений. Как же без них, у нас ведь интернет-магазин про растения 😊

Здесь нет ни капли минимализма, зато полно визуального шума. И так делать нельзя. Ваш «пестрый» дизайн будет наоборот отталкивать посетителей, нежели притягивать их внимание. Чтобы исправить эту ситуацию применим правило минимализма. У нас получится вот такой результат:

Что означает правило внутреннего и внешнего. Смотреть фото Что означает правило внутреннего и внешнего. Смотреть картинку Что означает правило внутреннего и внешнего. Картинка про Что означает правило внутреннего и внешнего. Фото Что означает правило внутреннего и внешнего

Мы убрали все лишние элементы в виде обводок, теней и градиентов и наша карточка стала более «чистой» и минималистичной. Теперь в ней нет ничего лишнего и за счет этого, она легче воспринимается (визуально). Внимание обращено только на суть, а не распыляется на разглядывание «дизайна».

7 — Правило «воздуха» в дизайне

Суть данного правила заключается в том, что нужно делать свой дизайн более «воздушным». Под воздухом подразумеваются отступы между блоками. Они должны быть не сильно мелкими, но и не сильно большими. Некая золотая середина.

Если брать в пример обычный лэндинг, то между смысловыми блоками лучше придерживаться отступов в диапазоне от 100px до 200px. Чтобы было понятней, вот вам пример с картинкой:

Что означает правило внутреннего и внешнего. Смотреть фото Что означает правило внутреннего и внешнего. Смотреть картинку Что означает правило внутреннего и внешнего. Картинка про Что означает правило внутреннего и внешнего. Фото Что означает правило внутреннего и внешнего

Данное правило также, как и правило внутреннего/внешнего, очень часто нарушается новичками (и я был не исключением). Почему-то интуитивно все начинают лепить блоки близко друг к другу. Тем самым дизайн превращается в одно сплошное полотно информации, которое трудно считывать.

А мы с вами уже знаем, что мозгу легче воспринимать структурированную информацию и поэтому, для логического разделения на блоки, нужно использовать больше «воздуха».

Более того, «воздушный» дизайн придает сайту легкость и эстетику. Находясь на таком сайте даже как-то дышится легче 😊

Я говорю «нужно», в контексте того, что в большинстве случаев подобный подход будет уместным. Бывают случае, когда «воздух» сложно куда-то впихнуть так, чтобы он был там уместен.

Чаще всего, данное правило распространяется на дизайн обычных сайтов и интернет-магазинов. В разработке сложных интерфейсов с ним немного посложнее, потому что там обычно используется много данных, которые нужно понятно и удобно скомпоновать друг с другом. В таких случаях чаще всего руководствуются правилами группировки и внутреннего/внешнего.

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

С основными правилами мы закончили и давайте теперь плавно перейдем к принципу иерархии в дизайне.

Принцип иерархии в дизайне

Как и везде, иерархия представляет из себя некую подчиненность низших звеньев к высшим, тем самым создавая структуру по типу «дерево».

В любом дизайне существуют элементы более высокого порядка (самые главные и важные) и менее высокого порядка, которые имеют меньшую значимость и меньший вес.

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

Чаще всего, иерархия в дизайне ярко выражена в текстовых блоках, где есть заголовки и наборный текст. Если с текстом все более-менее ясно (заголовок — главный элемент, а текст под ним — второстепенный), то с иерархией различных элементов все немного сложнее.

Чтобы правильно составить иерархию, всегда задавайте себе вопрос: «Что в данной ситуации наиболее важно для пользователя?». Далее, то, что более важно ставьте на вершину иерархии, а то, что менее важно — вниз.

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

Чтобы не попасть в такую ситуацию, давайте разберемся с иерархией на наглядном примере. Для начала я нарисовал плохой пример:

Что означает правило внутреннего и внешнего. Смотреть фото Что означает правило внутреннего и внешнего. Смотреть картинку Что означает правило внутреннего и внешнего. Картинка про Что означает правило внутреннего и внешнего. Фото Что означает правило внутреннего и внешнего

Здесь иерархия отсутствует полностью и подобное объявление очень сложно воспринимать. Но все меняется, когда мы выстраиваем структуру и добавляем контрастов (об этом ниже).

Что означает правило внутреннего и внешнего. Смотреть фото Что означает правило внутреннего и внешнего. Смотреть картинку Что означает правило внутреннего и внешнего. Картинка про Что означает правило внутреннего и внешнего. Фото Что означает правило внутреннего и внешнего

Когда появилась иерархия, то все кардинальным образом изменилось и теперь объявление намного проще считывать. Что мы сделали? Во-первых, выделили главные элементы и разместили их вверху.

В нашем случае заголовок и дата являются самыми главными, потому что посетителям важно знать КУДА их зовут и КОГДА.

Далее идет картинка, как иллюстрация того, что будет на мероприятии. Под картинкой расположили краткое описание, чтобы посетитель мог ознакомиться с тем, что будет на мероприятии. И дальше у нас уже идет адрес и телефон.

Иерархия тесно перекликается с контрастом, поэтому давайте перейдем именно к нему.

Принципы контраста в дизайне

Контраст — это мощный инструмент в руках опытного дизайнера, поскольку с его помощью можно управлять вниманием пользователя и акцентировать его на нужных местах (или наоборот заглушать). Контраст может передаваться 4 способами:

Что означает правило внутреннего и внешнего. Смотреть фото Что означает правило внутреннего и внешнего. Смотреть картинку Что означает правило внутреннего и внешнего. Картинка про Что означает правило внутреннего и внешнего. Фото Что означает правило внутреннего и внешнего

Чаще всего размер и толщина линий используются для передачи иерархии (то, о чем мы говорили выше), а цвет и форма — для расстановки акцентов. Контраст очень важен в дизайне, поскольку с его помощью вы как бы «разбавляете» дизайн и структурируете информацию, выделяя главное и «заглушая» второстепенное.

Пример хорошего контраста:

Что означает правило внутреннего и внешнего. Смотреть фото Что означает правило внутреннего и внешнего. Смотреть картинку Что означает правило внутреннего и внешнего. Картинка про Что означает правило внутреннего и внешнего. Фото Что означает правило внутреннего и внешнего

Пример плохого контраста:

Что означает правило внутреннего и внешнего. Смотреть фото Что означает правило внутреннего и внешнего. Смотреть картинку Что означает правило внутреннего и внешнего. Картинка про Что означает правило внутреннего и внешнего. Фото Что означает правило внутреннего и внешнего

Контрасты в дизайне должны быть сильными.

Порядок создания дизайн-макета

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

Первое, с чего начинается любой дизайн — это аналитика. На этом этапе вы «погружаетесь» в бизнес и изучаете его. Проводите бриф с заказчиком, анализируете конкурентов, выявляете их слабые и сильные стороны, смотрите чем они «цепляют» своих клиентов и какое у них УТП.

Далее, на основе анализа и брифа вы разрабатываете структуру своего дизайна. Другими словами, создаете скелет будущего сайта. То есть расписываете, где и какой блок у вас будет и что примерно в него будет входить.

После этого собираете контент по теме и начинаете «примерять» его на ваш скелет. Создаете первый прототип. В прототипе не должно быть картинок, вместо них рисуете обычные прямоугольники или квадраты. Выглядеть прототип должен примерно так:

Что означает правило внутреннего и внешнего. Смотреть фото Что означает правило внутреннего и внешнего. Смотреть картинку Что означает правило внутреннего и внешнего. Картинка про Что означает правило внутреннего и внешнего. Фото Что означает правило внутреннего и внешнего

После этого вы согласовываете прототип с заказчиком, вносите правки (если есть) и только после этого приступаете к финальному дизайну. В финальном дизайне все уже должно быть в цвете и с картинками. Как видите, большую часть всей работы занимает аналитика и структурирование информации, а не рисование макета. Но именно такой подход и является настоящим Дизайном с большой буквы 😊

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

Заключение

В данной статье я рассказал вам про основы веб дизайна для начинающих, а именно мы разобрали с вами 7 основных правил в дизайне, поговорили об иерархии и контрасте, а также рассмотрели порядок создания дизайна. Надеюсь, моя статья оказалась для вас полезной, и вы подчерпнули для себя что-то новое. В знак благодарности можете поделиться статьей у себя в соцсетях 😊

Если остались вопросы, то пишите их в комментариях.

Не забудьте подписаться на мой YouTube и Telegram. Там еще больше полезного материала про дизайн интерфейсов.

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *