Правила дизайна сайта – главное правило дизайна, которое помогает перейти от субъективных ощущений к конкретике / Логомашина corporate blog / Habr

Содержание

Правила и запреты веб-дизайна / Логомашина corporate blog / Habr

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

Правила

1. Дизайн должен быть единым, независимо от платформы

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

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

2. Простая и понятная навигация

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

  • Простой — у каждого сайта должна быть простейшая из возможных структура;
  • Понятной — навигация должна быть очевидной;
  • Преемственной — навигация первой и последней страницы должна быть одинакова.

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

3. Цвет ссылок

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

Понимание того, где пользователь уже был, освобождает его от блуждания по одним и тем же страницам.

4. Простой поиск по страницам

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

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

Z-образный паттерн на сайте Basecamp

5. Проверяйте ссылки!

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

Страница не найдена

6. Кликабельные элементы

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

Menagerie Climb: оранжевый бокс — это кнопка? Нет. Хотя форма и вид говорит об обратном

Запреты

1. Заставлять посетителя ждать загрузки страницы

Запас терпения и способность концентрировать внимание пользователя очень малы. Об этом говорится в исследовании NNGroup:

Предельное время концентрации пользователя на задаче — 10 секунд

Если пользователь вынужден ждать загрузки сайта, он теряет терпение и может уйти. Даже самый красивый индикатор загрузки не сможет удержать его надолго.

Изображение: Ramotion

2. Открывать ссылку в новой вкладке

Такой способ грубо отключает сценарий использования кнопки «назад» для возврата на предыдущую страницу.

3. Позволять рекламе закрывать контент

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

4. Похищать прокрутку

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

На странице Mac Pro ужасная прокрутка: точки под картинкой ведут каждая на свою секцию страницы

5. Автовоспроизведение видео со звуком

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


Видео на Facebook включаются автоматически, но без звука, до тех пор, пока пользователь не подтвердит, что смотрит видео (кликнув по нему)

6. Жертвовать удобством ради красоты

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

Неконтрастные шрифты — это всегда плохая идея

7. Использовать мигающий текст и рекламу

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

Избегайте мигающего текста!

Основные правила веб-дизайна. Готовим дизайн для верстальщика

С чего начинается разработка сайта? Правильно, с внешнего оформления или дизайна. Дизайн – это то, что в первую очередь видит посетитель, когда заходит на сайт. Поэтому дизайну при его разработке следует уделить особое внимание.

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

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

Структура статьи

Правила дизайна сайта

Техническое задание (ТЗ)

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

Помните всегда о том, что веб-дизайнер должен тесно сотрудничать с верстальщиком, чтобы не случилось различных казусов.

Макет

Уважаемый дизайнер! Если у вас стоит тридцатидюймовый дорогущий монитор, то это вовсе не означает, что вы должны рисовать макет в 3000 px по ширине. Вы должны понимать – вы пока в меньшинстве. У львиной доли посетителей, пришедших на сайт, разрешение экрана будет 1024 – 1920px. Правда сегодня рынок девайсов пользователей интернета завоевывают мобильные устройства, их уже перевалило за 50%. Здесь существуют некоторые правила и стандарты.

Ширина макета указывается в пикселях и должна быть с точностью до одного пикселя, т.е. круглые цифры и никаких там 899 px или 955 px, к примеру. Также это касается всех блоков, которые у нас будут присутствовать в макете: левая, правая колонки, форма авторизации, различные модуля и т.д.

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

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

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

Слои

Все слои в макете должны быть тщательно сгруппированы и подписаны адекватными именами. Помните такое правило: «Если один элемент в макете имеет более двух слоев, то его обязательно следует заключить в общую группу». Вот, к примеру, на сайте есть различные модуля. У каждого модуля присутствует заголовок. Так вот, заголовок в макете имеет два слоя: сам текст названия и задний фон. Таким образом, мы эти два слоя объединяем в общую группу и называем, например, «Заголовок» или «Title». Данная группа также может лежать в родительской группе с названием модуля, т.е. в группе модуля «Новости» лежит подгруппа «Заголовок новости». Исходя из выше сказанного, должна быть некая иерархия групп слоев. Такая группировка очень упрощает жизнь верстальщику. Также не забываем подписывать сами слои, чтобы не было там никаких «Layer1» или «Layer2″…

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

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

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

Задний фон сайта

Задний фон – основная проблема начинающих дизайнеров, вернее это проблема встает перед верстальщиком. Дизайнер должен понимать, что макет сайта это не просто красивая картинка, это сложный и динамичный сайт, который может растягиваться и сжиматься как по вертикали, так и по горизонтали.

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

Если в качестве заднего фона используется текстура, то обязательно сохраните один повторяющийся фрагмент для верстальщика отдельным файлом в формате jpg, png или gif.

Текст

Веб-дизайнер при подборе шрифтов для сайта должен учитывать следующее: существуют стандартные шрифты и нестандартные шрифты. Что значит стандартные и нестандартные?

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

Нестандартные шрифты — это шрифты, которые не установлены в операционной системе. Обычно нестандартные шрифты подгружаются в шаблоне сайте посредством правила font-face. Следует иметь ввиду, что использование нескольких нестандартных шрифтов — нежелательно, т.к. нестандартные шрифты увеличивают время загрузки веб-страницы (документа). Весить они могут намного тяжелее стандартных шрифтов. Здесь еще зависит от того, какие начертания шрифтов использует дизайнер — чем больше начертаний, тем тяжелее шрифт. Желательно не использовать платные шрифты, т.к. потом возникают проблемы с их преобразованием для WEB. Для поиска шрифта вполне можно обойтись бесплатными Гугл шрифтами.

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

Размеры шрифта (кегль) обязательно указываем целыми числами, размеры типа 19,82 px и тому подобное не допустимы. Без необходимости не используйте всякие трансформации и издевательства над шрифтами. Добавите немного головной боли верстальщику.

Желательно не заливать цвет шрифта градиентом. Можно, но только без фанатизма. Лучше все же указать однотонным цветом.

И последнее, что касается шрифтов – никогда не РАСТРИРУЙТЕ

текстовые блоки. За данное деяние вам точно оторвут голову, не в буквальном смысле конечно.

О цветовой гамме

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

Активные элементы

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

Резюмируем все выше сказанное

  • Тщательно изучите тех. задание;
  • Ширина основного контейнера сайта минимум 1000 px. Не важно сайт резиновый или фиксированный. Сегодня большую популярность получила модульная сетка Twitter Bootstrap — 1170px, используйте ее в своем дизайне;
  • Фиксированному сайту не забываем указать задний фон;
  • Все слои в макете должны быть сгруппированы;
  • Не ленитесь отрисовывать каждый элемент, будь то форма авторизации или форма поиска;
  • Желательно использовать только стандартные шрифты. Нестандартные в умеренных масштабах;
  • Качественно пройдитесь по макету и доработайте все недостающие элементы. Если это сделает верстальщик, то скорее всего сломает весь макет;
  • Дизайнер должен тщательно организовать свою работу, не забывая о том, что после него будут работать другие люди;
  • Подготовить макет для сдачи верстальщику – сохранить макет в формате PSD и скриншот в формате JPEG. Также, следует нарисовать иконку сайта favicon и watermark для фото;
  • Не отключать и не удалять направляющие, т.к. с ними будет работать еще верстальщик;
  • Все блоки на сайте должны быть выравнены строго по пикселям, т.е. полпикселя недопустимо;
  • Чем качественнее нарисован макет, тем качественнее он будет сверстан верстальщиком;
  • Помните, что на ряду с красотой макет должен быть легким, т.е. сверстанный сайт должен быстро загружаться

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

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

До встречи в следующих постах. Удачи!!!

Дизайн сайта для мобильных устройств

Все больше и больше пользователей заходят на веб-сайты с мобильных телефонов. Компания Gfk опубликовала данные новых исследований: по статистике доля пользователей, которые используют мобильные устройства для поиска в интернете составляет 61%. Однако, дизайнеры часто совершают ошибки в проектировании макетов для мобильных телефонов. В этой статье мы поговорим об основных правилах дизайна сайта для мобильных устройств и приведем реальные примеры.

Правило 1. Адаптивность

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

сайт книг

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

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

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

адаптивная версия идби

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

Остальные правила относятся к проектированию адаптивной версии сайта.

Правило 2. Большие размеры

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

в корзину

На примере - мобильная версия интернет-магазина «Озон». Кнопка зафиксирована внизу экрана, чтобы при прокрутке всегда была перед глазами. Выделена контрастным синим цветом для привлечения внимания. Достаточно крупная, для удобства при нажатии и при переходе в корзину. Также разработчики указали конкретное целевое действие: добавить в корзину товар определенной цены.

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

Рекомендации по размерам элементов для нажатия: минимальный размер 26 px. Компания Apple рекомендует использовать размеры 44x44 px.

Правило 3. Крупная типографика

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

типографика на сайте

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

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

блог идби

Правило 4. Ничего лишнего

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

Декстопная версия сайта

Десктопная версия

мобильная версия сайта

Мобильная версия

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

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

приложения сайта

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

Правило 5. Контент в одной колонке

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

контент в одной колонке

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

Правило 6. Нет поп-апам и виджетам

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

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

Если же без поп-апов не обойтись, лучше адаптировать их под размер устройства:

поп апы на сайте

На сайте «Билайн» есть всплывающее окно с предложением оформить SIM-карту. Чтобы собрать лиды и не раздражать при этом другую группу пользователей, на всплывающем окне отчетливо видно значок закрытия, разработана очень простая форма: телефон и кнопка.

Правило 7. Доступные контактные данные

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

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

Например, на нашем сайте значок телефона ведет пользователя сразу к совершению вызова через приложение на устройстве:

сайт идби

Пример 8. Социальные сети

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

соцсети на сайте

Пример 9. Короткие формы

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

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

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

Вот как разработали форму для получения кредитной карты дизайнеры банка «Тинькофф»:

дизайн сайта тинькофф

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

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

Правило 10. Пространство

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

десктопная версия сайта белое пространство

Десктопная версия

белое пространство на сайте

Мобильная версия

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

Правило 11. Проектирование навигационных элементов

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

Самый распространенный прием - фиксированное меню. При скроллинге такое меню остается перед глазами и позволяет быстро переходить из раздела в раздел:

навигация на сайте

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

Правило 12. Целевая аудитория

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

Есть некоторые сайты, на которые чаще переходят с мобильных устройств, а не с компьютеров. Например, интернет-магазины, которые продвигаются только за счет социальных сетей - Instagram, Telegram и прочее. При разработке дизайна таких сайтов возможна технология Mobile first - подход, при котором сначала разрабатывается мобильная версия сайта, а затем остальные варианты.

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

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

12 законов и правил, которые помогут в создании успешного дизайна / SUNERA corporate blog / Habr

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


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

1. Бритва Оккама

Бритва Оккама (или закон минимума допущений) — сформулированный в 14 веке Отцом Церкви Вильямом Оккамом закон, который опередил своё время. Этот закон не является неоспоримой истиной, без него может обойтись научный прогресс, но, однако, он показывает, что чаще всего правильным решением является наиболее простое решение. Если сказать иначе, предпочтительным является самое простое объяснение или теория, и они чаще всего оказываются правильными.

Не следует без необходимости множить сущее. Множество не должно без необходимости становиться главным доказательством.

Как отмечал Леонардо да Винчи: «Простота – это высшая утончённость». Применительно к дизайну Бритва Оккама предупреждает о том, что нужно избегать излишней сложности как в оформлении, так и в подаче информации.

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

Читать по теме: Occam’s Razor: A Great Principle for Designers

2. Закон Хика

Закон Хика был предложен британским психологом Вильямом Эдмундом Хиком в 1950-е годы и является непрямым подтверждением Бритвы Оккама. Этот закон гласит, что чем больше выбор, тем более долгим и сложным будет процесс принятия решения.

Время принятия решения возрастает в зависимости от количества возможных вариантов выбора.

Просто представьте себе, как легко было бы купить пачку чипсов, если бы на полке супермаркета было бы только три или четыре вида этого продукта. Чем сложнее процесс выбора, тем выше уровень стресса и нервозности у человека.

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

Читать по теме: How To Improve Usability With Fitts’ and Hick’s Laws

3. Закон Фиттса

Закон Фиттса – порождение мысли Пола Фиттса, который в 1954 году описал зависимость между количеством времени, требуемым для передвижения к цели, размером этой цели и расстоянием до неё. Чем легче найти цель и чем короче расстояние, тем быстрее и легче будет передвижение к этой цели.

T = a + b log2 (1 + D/W), где: T – время, а – начальное/конечное время, b – скорость передвижения, D – расстояние, W — ширина цели или допустимая погрешность.

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

Подтолкнуть посетителя сайта к неосознанному выбору действия можно при помощи увеличения размера одной кнопки, а также сделав её самой лёгкой и близкой для клика.

Читать по теме: Improving Usability with Fitts’ Law

4. Последовательность Фибоначчи

Последовательность Фибоначчи, названная в честь Леонардо Пизанского, который также был известен под именем Фибоначчи, была воссоздана в начале 13 века, но она и раньше встречалась в работах старых индийских математиков. Список чисел продолжается при помощи сложения последних двух сумм. Он начинается с 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144 и т.д. Интересно, что эта последовательность проявляется и в природе. Например, в разветвлениях деревьев, в лепестках и листьях очень многих растений, а также в поведении пчёл.

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

Читать по теме: Fibonacci and Golden Ratio in Web Design

5. Золотое сечение

Золотое сечение – на самом деле это математическая вариация последовательности Фибоначчи. Золотое сечение – это иррациональная математическая константа, равная приблизительно 1,6180339887. Этот закон уже был осознан более чем 2000 назад, но впервые его определение было предложено Евклидом. Золотое сечение обосновывает предпочтительность выбора пропорций форм и конструкций так, чтобы они выглядели наиболее привлекательными.
«У геометрии есть два сокровища: одно из них – теорема Пифагора; другое – деление линии на золотое сечение. Первое — это благородные металлы геометрии, второе – это её драгоценные камни». – Иоганн Кеплер

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

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

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

Читать по теме: Applying the Golden Ratio to Your Web Designs

6. Правило третей

Правило третей может показаться тем же самым золотым сечением, но, на самом деле, это не одно и то же. Этот закон впервые был констатирован в 1797 году в книге Джона Томаса Смита «Заметки на фоне сельского пейзажа». Смит рассматривал своё открытие как обобщённое правило, а не как абсолютный закон. Однако, в действительности получается так, что если дизайнеры не пренебрегают этим законом, результаты получаются наиболее привлекательными для большинства пользователей.

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

Читать по теме: Applying Divine Proportion To Your Web Designs

7. Закон Парето

Суть закона Парето или правила 80/20 хорошо известна всем, кто руководит коллективами, собраниями или студентами в аудиториях, даже если руководитель и не знает, что это и есть закон Парето.
Закон Парето утверждает, что сколько бы не происходило событий, 80% результатов будет приходиться на 20% усилий.

Джозеф М. Джуран в 1906 году назвал это явление в честь Вилфредо Парето, показавшего, что 80% земли в Италии принадлежит 20% населения Италии. Этот закон стал объяснением, почему 80% преступников совершают 20% всех преступлений и почему 20% всех, кто пользуется системой здравоохранения использует 80% всех её услуг. Иначе, почему 80% результата приходится на 20% действия.

Для практического применения на веб-сайте, инструкция может быть такова: если 80% посетителей используют только 20% предлагаемой информации, колонок, кнопок и т.д., значит всё то, что не используется, должно быть сокращено или заменено на более эффективное. Такое решение поддерживается Бритвой Оккама — иррациональным подходом к простоте употребления.

Читать по теме: The 80/20 Rule Applied to Web Design

8. Ментальные модели

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

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

9. Возможность ошибки

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

10. Соотношение сигнал-шум

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

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

Если вы позволите важной и полезной информации занять главное место и снизите уровень ненужной и бесполезной информации, это принесёт вам положительные результаты.

Читать по теме: What’s The Signal to Noise Ratio Of Your Design?

11.Постоянство и изменчивость законов использования

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

12.Закон восприятия информации

Закон восприятия информации практически говорит сам за себя. Если информация или указания не преподносятся в доступной форме, то данная информация будет неэффективна и от неё не будет никакого положительного действия. В большинстве случаев лучшие указания – самые короткие и самые простые. Использование в равной мере аудио и видео форматов, включая графику и текст, могут сделать указания более информативными и при этом несложными для восприятия.

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

Другие ценные универсальные правила дизайна

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

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

Может быть, вы знаете другие правила, которые помогают добиться успеха на поприще дизайна?

Оригинал статьи: 12 Laws and Principles to Aid You in Your Design
Перевод осуществлен переводчиками проекта BigIdeas.

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

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

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

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

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

1. Следуйте правилам веб-дизайна почти всегда

В школе дизайна вас снабдят рядом правил, которым нужно следовать

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

Вот пример страницы, созданной в Edge Reflow CC. Попробуйте выделить отдельные элементы и поэкспериментировать с ними, немного нарушая правила.

2. Используйте образы и иконки на сайте где это возможно

Существуют универсальные иконки, которые пользователь сразу распознает

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

3. Цвет как элемент веб-дизайна, но не декора

Цвет, Это один из аспектов дизайна, который может стать ключевым

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

Вы вполне можете использовать для подбора цветов веб-приложение Adobe Kuler. Это отличный инструмент для экспериментов с цветов. Одно из главных правил — использование комплиментарных цветов. В этом случае теплые оттенки сочетаются с холодными, создавая баланс и подчеркивая друг друга.

4. Выбирайте шрифты для сайта, подходящие контенту

Существуют тысячи шрифтов, из которых вам приходится выбирать.

Существуют тысячи шрифтов, из которых вам приходится выбирать.

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

5. Как из хорошего сайта сделать сайт, который действительно цепляет

Как из хорошего сайта сделать сайт, который действительно цепляет

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

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

7 правил создания красивых интерфейсов / Я люблю ИП corporate blog / Habr

Недавно мы в «Я люблю ИП» закончили курсы по дизайну от trydesignlab.com. И это одна из самых важных статей, которую нам посоветовал ментор в процессе обучения. Именно поэтому мы решили её перевести. Посмотреть все наши работы с курсов можно в ВКонтакте по тэгу #design101[email protected]

Вступление

Сначала о главном. Это руководство не для всех. Это руководство прежде всего для:
  • разработчиков, которые хотят уметь делать хорошие интерфейсы для себя, если вдруг прижмёт;
  • UX-дизайнеров, которые знают, что хороший UX-дизайн продаётся лучше в красивой UI-упаковке.

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

А пока давайте я расскажу, что вы найдёте в этой статье.


Раньше я был UX-дизайнером без каких-либо навыков графического дизайна. Я обожал просто проектировать интерфейсы, но вскоре я понял, что есть куча причин научиться делать это ещё и красиво:

  1. Моё портфолио выглядело ужасно и едва отражало мой рабочий процесс и ход мыслей.
  2. Клиенты, с которыми я работал, с большей готовность заплатили бы тому, кто умеет рисовать не только прямоугольники и стрелочки.
  3. Хотел ли я в какой-то момент присоединиться к стартапу на ранней стадии? Тогда лучше мне освоить эти навыки уже сейчас.

Я всегда находил себе оправдание:
Я ничего не понимаю в эстетике. Я закончил инженерно-технический факультет. Я не должен делать вещи красивыми.

В конце концов, я научился дизайну так же, как и любому другому мастерству: путём холодного, жёсткого анализа, бессовестно копируя то, что работает. Я тратил по 10 часов на проект, а брал деньги всего за час. Остальные 9 я учился. Отчаянно разыскивая в Google, Pinterest и Dribbble то, что можно скопировать.

Эти «правила» — это уроки, которые я вынес для себя за это время.

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

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

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

А есть крав-мага, которую изобрели евреи в борьбе против нацистов на улицах Чехословакии в 1930-х годах. Там нет искусства. На уроках крав-маги вы научитесь тычкам в глаза с помощью ручки.

Эта статья — крав-мага для экранов.

Правила

Вот они:
  1. Свет падает сверху.
  2. Сначала черное и белое.
  3. Увеличьте белое пространство.
  4. Изучите принципы наложения текста на картинки.
  5. Научитесь выделять и утапливать текст.
  6. Используйте только хорошие шрифты.
  7. Крадите как художник.

Перейдём к делу.
Правило № 1: Свет падает сверху.
Тени лучше всего помогают мозгу понять, на какой элемент интерфейса мы смотрим.

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

Когда свет падает сверху, он освещает верхнюю часть и отбрасывает тень на нижнюю. Верх будет светлее, а низ темнее.

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

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


Возьмём кнопки. Даже в этой относительно «плоской» кнопке есть множество деталей, связанных со светом.

  1. В ненажатом состоянии (вверху) у неё тёмный нижний край. Ведь туда не падает солнечный свет.
  2. Верхняя часть ненажатой кнопки чуть светлее, чем нижняя. Это потому что она имитирует слегка изогнутую поверхность. Как, чтобы увидеть солнечный свет, вам нужно было бы направить зеркало вверх, так и изогнутая поверхность отражает чуууууть больше солнечного света.
  3. Ненажатая кнопка слегка отбрасывает тень — её можно увидеть в увеличенном виде.
  4. Нажатая кнопка сверху темнее, чем снизу. Потому что она находится на уровне экрана, и на неё попадает меньше солнечного света. В реальной жизни нажатые кнопки тоже темнее, потому что мы блокируем свет рукой.

Это всего лишь кнопка, но на ней уже есть 4 небольших эффекта от света. Это и есть главный урок. А теперь мы будет применять его ко всему.

Вот пара настроек из iOS 6 — «Не беспокоить» и «Уведомления». Она немного устарела, но может многому нас научить.

  • Верхняя часть контрольной панели (inset control panel) отбрасывает небольшую тень.
  • Проём для слайдера «On» располагается ещё глубже.
  • Он имеет вогнутую форму, поэтому нижняя часть отражает больше света, чем верхняя.
  • Иконки, наоборот, выпуклые. Видите яркий участок в верхней части иконок? Он представляет собой поверхность перпендикулярную к солнечному свету, следовательно, он поглощает и отражает его.
  • У разделителя (divider notch) тень там, где не попадает солнечный свет, и наоборот.

Вот ещё один пример из моей старой работы.

Элементы, которые обычно имеют вогнутую форму:

  • поля для ввода текста,
  • нажатые кнопки,
  • проёмы для слайдеров,
  • радио-кнопки (неактивные),
  • чекбоксы.

Элементы, которые обычно имеют выпуклую форму:
  • кнопки (в ненажатом виде),
  • сами слайдеры,
  • контроллеры выпадающих меню,
  • карточки,
  • сама кнопка выбранной радио-кнопки,
  • всплывающие окна.

Теперь когда вы знаете, вы будете везде это замечать.
А как же дизайн в стиле flat?

iOS 7 наделала много шума благодаря своему «плоскому дизайну». Он в буквальном смысле плоский. В нём нет никаких углублений или выступов — только линии и фигуры сплошного цвета.

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

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

В то время как я пишу эту статью, Google выпустила Material design. Это единый визуальный язык для всех продуктов компании, который, по своей сути, пытается имитировать физический мир.

Эта иллюстрация из руководства Material design показывает, как передать разную глубину с помощью разных теней.

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

Нельзя сказать, что он не имитирует физический мир, но в то же время он не похож на веб-дизайн 2006 года. В нём нет текстур, градиентов или отблесков. Я думаю, будущее за «полу-плоским» дизайном. А дизайн в стиле flat — это просто часть истории.

Правило № 2: Сначала чёрное и белое
Создавая дизайн в чёрно-белой палитре, до добавления цвета, вы сможете максимально упростить самые сложные визуальные элементы и сфокусироваться на макете и расположении.

В наши дни многие UX-дизайнеры увлечены подходом «сначала мобильные». Это значит проектировать страницы и взаимодействия для мобильных устройств до больших экранов с ретиной.

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

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

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

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

Шаг 2: Как добавить цвет

Самое простое — это добавить только один цвет.

Один цвет на чёрно-белом сайте просто и эффективно притягивает взгляд.

Можно пойти ещё дальше и добавить два цвета или несколько оттенков одного тона.

Коды цветов на практике — что такое тон (hue)?

В большинстве случаев на вебе используются HEX-коды цветов модели RGB. Для нас они являются абсолютно бесполезными. RGB плохо подходит для подбора цветов. Лучше использовать HSB (почти тоже самое что HSV или HSL).

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

Если вы впервые об этом слышите, то вот хороший путеводитель по HSB цветам.

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

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

Ещё несколько заметок о цвете

Цвет — это самая сложная часть графического дизайна. И хотя большинство статей о цвете недалёкие и вряд ли помогут вам в работе, есть несколько очень полезных инструментов:
  • Никогда не используйте чёрный. Эта статья о том, что чистый чёрный цвет практически не встречается в реальной жизни. Увеличивая насыщенность серых оттенков, особенно тёмных, вы добавите живости вашему дизайну. К тому же, насыщенные серые тона ближе всего к реальной жизни, что само по себе хорошо.
  • Adobe Color CC. Отличный инструмент для того, чтобы подобрать подходящий цвет, изменить его или составить палитру.
  • Поиск в Dribbble по цвету. Ещё один классный способ найти, что работает с определённым цветом. Например, если вы уже нашли один цвет, посмотрите, какие цвета сочетают с ним лучшие дизайнеры в мире.
Правило № 3: Увеличьте белое пространство
Чтобы интерфейс выглядел красиво, позвольте ему дышать.

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

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

Если коротко, то всё сбито к верху экрана. Шрифт мелкий, между строчками нет никакого пространства. Между абзацами расстояние чуть-чуть побольше, и они растянуты на весь экран независимо от того, сколько он пикселей, 100 или 10 000.

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

Иногда даже слишком много.

Белое пространство, HTML и CSS

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

Звучит как дзэн? Я думаю, именно поэтому люди продолжают делать наброски.

Начать с чистого листа значит начать именно белого пространства. Думайте об отступах и полях с самого начала. Всё, что вы рисуете, — это ваше сознательное решение по уменьшению белого пространства.

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


Вот концепт музыкального плеера от Piotr Kwiatkowski.

Обратите внимание на меню слева.

Вертикальное пространство между ссылками в меню в два раза больше самого текста. Это шрифт размером 12px, с такими же отступами сверху и снизу.

Или посмотрите на заголовки списков. Между словом «PLAYLISTS» и его подчёркиванием расстояние в 15px. Это больше, чем высота заглавной буквы шрифта! Я уже молчу о 25px между самим списками.

В верхнем правом углу тоже достаточно пространства. Текст «Search all music» занимает 20 % высоты панели навигации. У иконок похожие пропорции.

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

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

Или Википедия.

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

Добавьте белое пространство между линиями.
Добавьте белое пространство между элементами.
Добавьте белое пространство между группами элементов.
Анализируйте, что работает, а что нет.

В следующей части я расскажу об остальных 4 правилах красивых интерфейсов:

  1. Как накладывать текст на картинки.
  2. Как выделять и утапливать текст.
  3. Используйте только хорошие шрифты.
  4. Крадите как художник

Правила создания хорошего сайта

Сайт не должен БЫТЬ каким-то, он должен РЕШАТЬ ЗАДАЧИ, но всем обычно интереснее ломать голову над цветом кнопочек.

Почему сайт сделали не так, как вы хотели?

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

Итак, какие этапы пройти до того, как потребуется изучить основные понятия при создании сайта:

 

Исследование

  • Шаг 1. Обзор конкурентов
    Как выглядят сайты конкурентов или компаний, которые вам нравятся?
  • Шаг 2. Обозначение клиентов
    Кто ваши клиенты? Попробуйте узнать среду их обитания в интернете — пользуются ли они мобильными телефонами для выхода в интернет, в какое время наиболее активны и как ищут информацию о товарах и услугах, которые вы хотите им предложить.
  • Шаг 3. Исследование рынка
    Почитайте исследования о вашем рынке. Даже если кажется, что вы всё уже знаете, иногда даже один новый факт может развернуть ход мыслей. Подробнее о том, как тестировать свою бизнес-идею тут.
  • Шаг 4. Определение метрик успеха сайта
    Каким образом вы будете измерять, решает ли сайт ваши задачи? Если он должен продавать, то сколько? Какую сумму вы готовы потратить на привлечение каждого нового клиента? Какая посещаемость должна быть у сайта, чтобы бизнес достигал своих целей? Когда вы установите счетчики, они будут просто показывать результаты, а то, какие они — хорошие или плохие, должны задать вы сами.
  • Шаг 5. Подготовка бизнеса к интеграции в онлайн-среду
    Насколько готов ваш бизнес к новому каналу коммуникации с клиентами? Кто и что отвечает по телефону, указанному на сайте? Рассчитали ли вы затраты, которые придется нести ежемесячно на обслуживание сайта?

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

 

Видение

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

  • Шаг 1. Определение задач сайта
    Типовые задачи, которые должен решать сайт: информирование, продажи, общение с клиентами.
  • Шаг 2. Разработка плана развития сайта
    Вы должны понимать, что в случае, если ваши планы роста (продаж интернет-магазина, предположим) выполняются, в какой-то момент вы поймете, что на обслуживание сотни клиентов требуется больше средств и усилий, чем на обслуживание десятка. И если этот рост не учтен в системе обработки заявок и способах оплаты, простой или убытки в бизнесе неизбежны.
  • Шаг 3. Создание сценариев поведения пользователей
    Что должен делать пользователь у вас на сайте? В первый раз, во второй, в третий? Как может вести себя постоянный посетитель вашего сайта? Убедитесь, что все полезные для вас сценарии реализованы на сайте.

 

Проектирование

  • Шаг 1. Описание разделов
    Есть такой термин «use case» — пример того, как посетитель пользуется сайтом. Если есть возможность, сразу закажите этот блок UX-проектировщику. UX = User eXperience — это весь набор действий, который совершают (должны совершать) посетители вашего сайта. Зайдите, например, в любой интернет-магазин. Попробуйте записать пошагово все ваши действия от момента открытия главной страницы сайта до момента покупки, в том числе такие как «я вижу кнопку купить, но не понимаю, где мне прочесть об условиях доставки». Узнав про чужие ошибки, проделайте тот же путь от лица посетителей вашего сайта. И всё-таки стоит обратиться к проектировщику (UX- дизайнеру) или взять готовый шаблон сайта, в котором базовые сценарии уже предусмотрены.
  • Шаг 2. Дизайн прототипа
    Не переусердствуйте с разделами сайта. Действительно ли вам нужен Форум, FAQ, Блог, Новости? Подумайте хорошенько над целесообразностью каждого раздела, а также над тем, кто и как часто будет заниматься обновлением информации в них.

Прототип — это схема сайта в блоках, по сути, полная структура сайта. По нему можно откорректировать расположение кнопок, текста, картинок.

 

Дизайн

  • Шаг 1. Определение стилей дизайна сайта
    Разделение стилей по цветовой гамме, восприятию, количеству графики и содержимому хорошо расписаны в схеме на этом сайте. Когда вы понятия не имеете, какой стиль выбрать, побродите по самому большому каталогу шаблонов — TemplateMonster.
  • Шаг 2. Работа с дизайнером
    После того, как вы подобрали стили, нашли примеры вдохновляющих сайтов, можете обратиться к дизайнеру. При этом желательно, чтобы стиль его работ совпадал с тем, который вы выбрали.
  • Шаг 3. Выбор шрифтов
    Правильный подбор шрифтовых стилей может сыграть немаловажную роль в том, будут читать тексты на вашем сайте или нет. Если дизайнер предложил слишком мелкий шрифт, настаивайте на укрупнении.

 

Подбор картинок:

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

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

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

 

Что необходимо реализовать на сайте:

  1. Сайт должен доводить максимальное количество посетителей до совершения необходимого для владельца сайта действия — call to action — обращения к услуге, покупки, чтения заданного количества материалов, передачи информации другим пользователям, повторного захода на сайт и т.п.Для этого создаются сценарии действий пользователя:

    Call to action — это чаще всего кнопки: «купить», «заказать услугу», «позвонить», «поделиться с друзьями», «подписаться» и т.п. Они должны быть заметны, исправно работать, обеспечивать реакцию владельца бизнеса на действие пользователя.

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

Задание к выполнению

Следование правилам создания сайта

Составьте описание видения вашего сайта по примеру на рис. 1

Правила создания хорошего сайта 6Предыдущая статья Следующая статьяПравила создания хорошего сайта 6

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

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