Bad VS Good design

  • Полезные письма
Дата:
Юлия — web-дизайнер компании WEBELEMENT

Здравствуйте! Меня зовут Юлия.

Я web-дизайнер компании WEBELEMENT.

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

Что такое функциональный дизайн и зачем он нужен

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

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

Ниже мы выделили критерии, по которым вы сможете оценивать работу своего web-дизайнера.

Правило #1

Контраст во всём

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

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

  • фон и контент — как графический, так и текстовый;
  • заголовки и основной текст;
  • разные страницы сайта.

Текст на фоне должен легко читаться, а заголовок — не теряться.

Вот так мы оформили сайт издательства «СНЕГ»:

Похожую цветовую схему взяли для ZOTYE:

Классический пример хорошего контраста — сайт компании BILLDEX:

В трёх других примерах мы сыграли на контрасте синего, белого и чёрного:

Ниже — сайт ещё одного нашего клиента:

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

А это — антипримеры контраста:

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

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

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

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

Правило #2

Гармония в цветах

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

Первый принцип — триада

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

Второй принцип — комплементарность

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

Третий принцип — аналоги

Говорит о сочетании трёх любых соседних цветов.

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

Здесь цвета сайта подобраны по принципу триады:

Принцип комплементарности мы реализовали в оформлении этого сайта:

На сайте ниже цвета подобраны по принципу аналогов:

Правило #3

Похожее — сгруппировать,
разное — отделить отступами

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

К основным элементам web-страницы относятся:

  • изображения;
  • заголовки и подзаголовки;
  • описания;
  • разделы сайта или каталога;
  • кнопки.

Как соблюдать отступы?

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

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

Картинки важно отделять от текста отступом.

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

Совет:

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

Обратите внимание, как мы отделили разные элементы друг от друга в примерах ниже:

Теперь — антипримеры.

Здесь названия товаров врезаются в описания, а некоторые кнопки выбиваются из общего ряда, создавая хаос. Непонятно, к верхним или к нижним товарам относятся кнопки:

Здесь картинки врезаются в текст, нарушая его «личное пространство», а «Контакты» и «Новости» — в фон текста об истории:

Правило #4

Типографика — залог порядка

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

Плохо

Здесь использован шрифт с засечками и курсивом, текст сложно воспринимать. Как отмечали в разделе про контраст, прозрачность блока с текстом затрудняет чтение.

Хорошо

Фотографии номера не перекрывают текст, нет прозрачности. Соблюдены правила хорошего контраста между текстом и фоном.

Описание номера структурировано: в нём читатель легко найдёт интересующую информацию.

Плохо

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

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

Хорошо

На сайте ниже между текстом и фоном хороший контраст. У текстов одинаковое выравнивание и заметная структура.

Логотипы над текстами отражают смысл написанного и привлекают внимание. Такие описания хочется читать.

Другие важные принципы типографики:

  • CAPS LOCK подходит только для главного заголовка, чтобы обратить на него внимание посетителя сайта. То же касается увеличения межбуквенного расстояния.
  • Не нужно растягивать и сжимать буквы где бы то ни было, в исходных шрифтах обычно соблюдены правильные пропорции. Нарушать их — плохой тон.
  • Блок с текстом не следует располагать шириной на всю страницу (12 колонок). Оптимальная ширина одного блока — примерно полстраницы (6−8 колонок).
  • Текст должен быть структурирован, а заголовки — выделены. В противном случае он превратится в сложночитаемое полотно.
  • Выравнивание по левому краю упрощает чтение. Не рекомендуем использовать другие виды, тем более — смешивать их на одной странице. Исключением может стать главный заголовок страницы, для него также подойдёт выравнивание по центру.

Как делать правильно:

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

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

По ширине тексты не занимают всю страницу.

Как делать не нужно:

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

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

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

Меню слева сливается с фоном и больше напоминает ненужное сообщение: разделы слабо выделены.

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

Совет:

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

Правило #5

Хорошая графика делает сайт живым

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

На хорошем сайте:

  • Изображения имеют высокое разрешение и качество — никаких размытых линий и видимых пикселей, водяных знаков.
  • На фотографиях нет неестественно счастливых людей, представленных в несуществующих ситуациях. Лучше всего показать контекст использования, как продукт решает проблему покупателя. Изображение должно иллюстрировать то, что вы предлагаете.
  • Фон должен гармонировать с основным изображением, а не перетягивать внимание на себя.
  • Векторные изображения (например, рисованных персонажей) нельзя сочетать с фотографиями, а плоские — с объёмными.
  • Нет изображений, на использование которых у вас нет прав.

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

Помните: не каждая картинка с фотостока, отдалённо подходящая по тематике вашему сайту, сделает его лучше.

Так выглядят «живые» сайты с правильно подобранным визуальным рядом:

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

Так выглядят «мёртвые» сайты, на которых размещены не имеющие пользы картинки:

Теперь вы знаете, как оценить пользу web-дизайна и на какие моменты смотреть, принимая работу исполнителя.

Понравилась статья?

Поделитесь с коллегами, расшарьте в соцсетях и подпишитесь на нашу рассылку: с WEBELEMENT вы всегда будете в курсе трендов digital-маркетинга

А тех, кто хочет получить максимум полезных знаний о маркетинге, выстроить собственную систему привлечения клиентов и увеличить прибыль, мы приглашаем в «Школу маркетинга»

Первый урок из курса «Маркетинг для прибыли» — БЕСПЛАТНО!

Получить доступ к первому уроку
Юлия — web-дизайнер компании WEBELEMENT

С уважением,
Юлия Панасенко
Digital-агентство WEBELEMENT
+7 (905) 410-45-55
info@webelement.ru

Подписывайтесь на нашу рассылку

Вы будете получать свежие подборки
digital-новостей, интересных советов и кейсов

Смотреть все