Обзор книги «Дизайн для недизайнеров»: базовые принципы дизайна красивого сайта

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

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

Обзор книги «Дизайн для недизайнеров»

Базовые принципа дизайна

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

Перейдем к принципам — их 4.

Приближенность

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

Контраст

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

Повторение

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

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

Выравнивание

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

Чтобы было проще запомнить принципы, автор использует веселый английский акроним CRAP — первые 4 буквы каждого из них. Contrast — «контраст», repetition — «повторение», alignment — «выравнивание», proximity — «приближенность». А что такое crap — посмотрите сами, если любопытно :) Нам не разрешают ругаться в блоге.

Приближенность

Главная цель принципа приближенности – упорядочить материал.

Как достичь приближенности

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

Чего избегать

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

Как не надо

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

Здесь плохо все, но остановимся на приближенности:

Принцип приближенности в дизайне
Скрин с сайта одесского такси

  • Информация о вакансиях в трех разных углах: ее можно сгруппировать.

 

Нарушен принцип приближенности в дизайне сайта

  • Куча телефонов: сгруппировать в одну сущность.

Как надо

Из книги

Информация структурирована благодаря приближенности

С сайта

Пример приближенности на сайте недвижимости
Скрин с сайта квартирного комплекса

  • Выделены основные сущности в меню и сгруппировано, все, что к ним относится. Например, в пункте меню Квартири — всё, что относится к квартирам.
  • Снег идет и здесь :(

Принцип приближенности на сайте

  • Телефоны сгруппированы, а не разбросаны по всей странице

Выравнивание

Цель выравнивания — создать целостный вид страницы и структурировать контент.

Выровненные элементы образуют единое целое. Невидимая линия связывает их — даже если они находятся на удалении друг от друга.

Как достичь выравнивания

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

Чего избегать

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

Как не надо

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

  • Тут пример выравнивания новичка — все по центру. Из-за этого образуются рваные края, у сайта неряшливый вид.
  • Ставьте заголовок по центру, а остальной текст выравнивайте по левому краю. Или выравнивайте всё по левому краю — и текст, и заголовки. Так будет аккуратно.
  • Не относится к выравниванию, но скажем: не делайте радугу цветов в тексте. Выберите один цвет и придерживайтесь его — берите черный, не ошибетесь.
    Цвет должен быть информативным, не декоративным. Если вы хотите что-то выделить — лучше делать это не цветом.

 

Демонстрация плохой версии выравнивания

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

Как надо

Из книги

Пример хорошего выравнивания в визитке

Пример сильного выравнивания в книге

 

С сайта

Пример выравнивания на сайте Бюро Горбунова
Скрин с сайта Школы Бюро Горбунова

  • Выравнивание по левому краю. Невидимая линейка скрепляет блоки. Блоки иконок выровнены относительно друг друга.

Повторение

Цель повторения — сделать сайт целостным, понятным и узнаваемым для человека.

Повторение — это последовательность. Когда вы просматриваете брошюру на 16 страниц, она выглядит как связная книга благодаря повторению.

Если на странице 13 не окажется повторяющихся элементов со страницы 4 — вы почувствуете, что становится непонятно и появляется ощущение хаоса.

Как достичь повторения

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

Чего избегать

  • Избегайте чрезмерного повторения — это может раздражать или наскучить.
  • Осознавайте значимость контраста — о нем в следующем разделе статьи.

Как не надо

Плохой пример принципа повторения на сайте
Скрин с сайта ремонта квартир

  • 3 раза повторяется одно и то же. Так делать не нужно — посетитель не тупой.

Как надо

Из книги

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

С сайта

Пример хорошего повторения на сайте
Скрин с сайта Бюро Горбунова

  • Это скрин из раздела Советы в Бюро Горбунова. Если вы походите по сайту, увидите повторяющиеся элементы — шрифт, плашки, иконки. Все вместе создает узнаваемый стиль. Бюро ни с кем не спутаешь.

Контраст

Цель контраста— сделать сайт интересным, мотивировать задержаться, дать читателю акценты, создать иерархию элементов.

Как достичь контраста

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

Чего избегать

  • Не делать контраст по принципу чуть-чуть — будьте смелыми.
  • Если два элемента вроде различаются, но не слишком, — это не контраст, это конфликт. Шрифт величиной 12 пунктов не контрастирует со шрифтом величиной 14 пунктов.

Как не надо

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

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

Как надо

Из книги

Слабый пример принципа контраста в книге

Хороший пример принципа контраста в книге

 

С сайта

Хороший пример принципа контраста на сайте
Скрин с сайта Бюро Горбунова

  • Картинки создают контраст и мотивируют читать текст под ними. Плюс смотрите, как текст выровнен по левому краю картинки.

Шрифты

Где-то треть книги посвящена шрифтам. Но автор уходит в слишком большие дебри — для начала это не нужно.

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

Дочитавшим до конца традиционный приз — межсезонный котик:

Валерия

Маркетолог HOSTiQ и альтер-эго кота Хвостика. Ест за себя и за Хвостика.
Понравилась статья? Оставь свой голос!