Композиция

UI UX дизайн
23.11.2017

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

Попробуем сформулировать правила, чтобы упростить восприятие:

  1. Нельзя воспринимать формы фона, картинок и других блоков отдельно от контекста. Нужно смотреть на экран целиком, не забывать о прошлом экране и о предстоящем. Они должны формировать целостную композицию. Представлять из себя цепь, а не отдельно взятые экраны.
  2. Нет порядка - нет композиции. Все стили заголовков, подзаголовков и подписей должны быть одинаковые. Создайте для себя легкую сетку из 4-8 полос и следуйте её правилам строго.
  3. Начните с выбора цвета, задайте настроение с помощью фона и добавочных цветов. Следует опасаться ядовитых цветов и большой палитры. Иначе пестрота будет бить по глазам, пользователь быстро устанет от чтения и быстро перейдет на другой сайт.
  4. Если в вашем интерфейсе есть элементы, без которых можно обойтись - обойдитесь.
  5. Если в вашем интерфейсы есть формы, которые можно объединить - объедините. Нужно стремиться к упрощению.
  6. Чтобы ваши элементы не были дробной кучей нужно их группировать. Например, если у вас несколько иконок в меню, разместите их рядом, а не раскидывайте вдоль всего меню.
  7. Экспериментам здесь не место. Старайтесь следовать логике и обосновывать каждый элемент, его расположение и содержание. Это и есть Ux.

В целом первая негативная реакция на это понятна, никакого творчества, а как же арт, о нет, я не для этого сюда пришёл. Хочу сразу вас успокоить, правила-правила-правила не помешают вам создавать уникальные и крутые дизайны. Например, считается, что 2х одинаковых лиц не бывает, но при этом все лица подчиняются одним и тем же пропорциям. Глаза находятся ровно по центру головы, нос занимает ровно 3ть, ширина губ равна расстоянию между зрачками и т.д. Чем описывать, лучше покажу:

Лицо

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

Пропорции

Витрувианский человек - пример, который преступление не вспомнить. Описание в трактатах античного римского архитектора Витрувия (Vitruvius), который написал следующее о человеческом теле:

"Природа распорядилась в строении человеческого тела следующими пропорциями: длина четырёх пальцев равна длине ладони, четыре ладони равны стопе, шесть ладоней составляют один локоть, четыре локтя - рост человека. Четыре локтя равны шагу, а двадцать четыре ладони равны росту человека. Если вы расставите ноги так, чтобы расстояние между ними равнялось 1/14 человеческого роста..."

Но это всё лирика, если быть конкретнее и вернуться к web, то можно начать со шрифтов и задать им изначально размеры. Для себя я определяю 2 типа сайта: портал с кол-вом страниц от 30 до 1000 и небольшие коммерческие сайты.

Портал соотвественно ближе к меньшему кеглю, коммерческий сайт - более крупный вариант.

  • Заголовок 36-50 кегель
  • Подзаголовок 24-30 кегель
  • Текст 16-18 кегель
  • Подписи 12-14 кегель

Отступы на просторных сайтах допустив размером 1/4 экрана, у порталов в 2 раза меньше, с отступами лучше не усердствовать.

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

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

К слову о ней: портал 1100-1300 пикселей

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

Если рассмотреть ритм портала и сайта с ограниченным кол-вом контента, то конечно портал будет насыщенного ритма, с максимальной насыщенностью.

Сайт apple по всем правилам должен подходить под описание портала, но сделан совершенно противоположно, почему?

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

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

Если у вас нет классных фоток, всегда помогут иконки. Вообще отображение информации символами и графикой это излюбленный приём. Благо прекрасные стоки с иконками позволяют нам их просто скачать, при большом потоке заказов не обрисовывать самостоятельно. Хотя авторские иконки это круто. Да светится дар каждого к иконкописи. Аминь.

Нельзя забывать, что графика и иконки являются вспомогательной визуализацией, а не полной заменой текста.

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

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

Подробнее о всех написанных моментах в следующих постах.

Опубликовано: 2017-11-23

Оценить

Разработка сайтов и мобильных приложений любой сложности Оставить заявку