|
Здравствуйте! Меня зовут Юлия.
Я web-дизайнер компании WEBELEMENT.
Сегодня расскажу вам о функциональном дизайне:
обозначу три важных правила, проиллюстрирую
их примерами и покажу, как отличить хорошее
оформление сайта от плохого.
Поехали! 
|
|
Что такое функциональный дизайн и зачем он нужен
Функциональный дизайн сайта — это оформление web-страниц, которое не только создает красоту, но и помогает бизнесу решить задачи: привлечь пользователей и повысить удобство поиска товаров. Благодаря функциональному дизайну вы можете увеличить вовлечённость и добиться внимания посетителей к продуктам, услугам.
|
|
Нередко руководители компаний сталкиваются со сложностью: находят web-дизайнера, просят его сделать хороший сайт, но не могут корректно оценить результат, потому что знают не всё о критериях оценки. Так, если исполнитель попадается недостаточно компетентный, бизнес теряет клиентов и прибыль.
|
|
Ниже мы выделили критерии, по которым вы сможете оценивать работу своего web-дизайнера.
|
Правило #1
Контраст во всём
Контраст — это разница, которая существует между двумя и более оттенками. В функциональном дизайне важно, чтобы эта разница была хорошо заметна и упрощала чтение с экрана.
Выбирая цвета для элементов сайта, помните, что контрастны между собой должны быть:
- фон и контент — как графический, так и текстовый;
- заголовки и основной текст;
- разные страницы сайта.
Текст на фоне должен легко читаться, а заголовок — не теряться.
|
|
Вот так мы оформили сайт издательства «СНЕГ»:
|
|
 
|
|
|
Похожую цветовую схему взяли для ZOTYE:
|
|
|
|
|
Классический пример хорошего контраста — сайт компании BILLDEX:
|
|
|
|
|
В трёх других примерах мы сыграли на контрасте синего, белого и чёрного:
|
|
  
|
|
|
Ниже — сайт ещё одного нашего клиента:
|
|
|
|
В примерах текст ярко выделяется на фоне, при этом чтение не вызывает реакции «кровь из глаз». Изображения гармонируют с общей гаммой, привлекают внимание пользователя, удачно дополняют текст и иллюстрируют смыслы. Дизайн подобран просто и со вкусом.
|
|
А это — антипримеры контраста:
В первом случае слабый контраст может отбить желание знакомиться с содержимым сайта.
|
|
|
|
|
В примере ниже текст рискует быть непрочитанным из-за перекрытия фоном. Контраст нарушает прозрачность блока с текстом. Усугубляет ситуацию то, что фон за текстом неоднородный: он содержит много отвлекающих от чтения цветов и линий.
|
|
|
|
|
На следующем сайте мы повсюду видим навязчивое буйство красок, неясно, куда смотреть в первую очередь.
|
|
|
|
|
Здесь текст слабо контрастен фону, а важное сообщение слева сливается с меню и рискует быть незамеченным.
|
|
|
Правило #2
Гармония в цветах
Чтобы понимать, какие цвета сочетать можно, а какие нельзя, не обязательно быть дизайнером. Достаточно знать три принципа теории цвета и уметь пользоваться цветовым кругом.
|
|
Первый принцип — триада
Три цвета сочетаются по правилу треугольника, при этом один из них выступает основным, два других — разбавляют его.
|
|
|
|
|
Второй принцип — комплементарность
Здесь мы сочетаем четыре цвета, два из которых контрастны и выступают основными, а два других — дополняют их.
|
|
|
|
|
Третий принцип — аналоги
Говорит о сочетании трёх любых соседних цветов.
|
|
|
|
Пусть цветовой круг всегда будет у вас под рукой, тогда вы не забудете о принципах цветовой гармонии и сможете оценить, правильно ли ваш web-дизайнер выполнил свою работу и привлекательно ли выглядит сайт.
|
|
|
Здесь цвета сайта подобраны по принципу триады:
|
|
|
|
|
Принцип комплементарности мы реализовали в оформлении этого сайта:
|
|
|
|
|
На сайте ниже цвета подобраны по принципу аналогов:
|
|
|
Правило #3
Похожее — сгруппировать,
разное — отделить отступами
Отступы помогают выставить границы между разными элементами web-страницы, отделить главное от второстепенного, навести порядок и, главное, сделать сайт интуитивно понятным для вашего клиента. Чем проще ориентироваться на сайте, тем вероятнее посетитель захочет знакомиться с содержимым. И напротив, если ваш сайт — олицетворение хаоса, клиент не захочет напрягаться, разбираясь, где что расположено, и уйдёт.
К основным элементам web-страницы относятся:
- изображения;
- заголовки и подзаголовки;
- описания;
- разделы сайта или каталога;
- кнопки.
|
Как соблюдать отступы?
Например, если есть заголовок, а ниже — маркированный список, то между элементами списка междустрочное расстояние должно быть заметно меньше, чем между заголовком и первым элементом списка.
|
 
|
|
Если в одном блоке заголовок, текст и кнопка, междустрочное расстояние в тексте должно быть заметно меньше, чем расстояние между заголовком и текстом или текстом и кнопкой.
|
|
|
Картинки важно отделять от текста отступом.
|
|
|
В каталогах одинаковые элементы должны быть расположены на одной линии: рядом друг с другом, напротив или друг под другом, строго в одной последовательности. Элементы не должны «танцевать» на странице.
|
Совет:
Представьте, что каждый элемент web-страницы — человек. Если один не будет нарушать личное пространство другого, все останутся довольны :) Отступы — это и есть «личное пространство» элемента. Дайте больше воздуха, и вы получите гармонию.
|
|
|
Обратите внимание, как мы отделили разные элементы друг от друга в примерах ниже:
|
|
  
|
|
|
Теперь — антипримеры.
Здесь названия товаров врезаются в описания, а некоторые кнопки выбиваются из общего ряда, создавая хаос. Непонятно, к верхним или к нижним товарам относятся кнопки:
|
|
|
|
|
Здесь картинки врезаются в текст, нарушая его «личное пространство», а «Контакты» и «Новости» — в фон текста об истории:
|
|
|
Правило #4
Типографика — залог порядка
Шрифты, расстояния, пропорции, пробелы и кавычки — всё это должно подчиняться правилам. Вот первое: Для одной страницы достаточно двух шрифтов. Простых, без засечек и витиеватых линий.
|
|
|
Плохо
Здесь использован шрифт с засечками и курсивом, текст сложно воспринимать. Как отмечали в разделе про контраст, прозрачность блока с текстом затрудняет чтение.
|
|
|
|
|
Хорошо
Фотографии номера не перекрывают текст, нет прозрачности. Соблюдены правила хорошего контраста между текстом и фоном.
Описание номера структурировано: в нём читатель легко найдёт интересующую информацию.
|
|
|
|
|
Плохо
Здесь видим разное выравнивание у трёх текстов на одной странице: это недопустимо. Кроме того, выравнивание по правому краю затрудняет чтение, не рекомендуем его использовать для описаний услуг.
Выбран шрифт с курсивом и засечками. Полупрозрачные заглавные буквы на фоне описаний мешают чтению, при этом не выполняют полезных функций. Как уже отмечали, принципы хорошего контраста не соблюдены.
|
|
|
|
|
Хорошо
На сайте ниже между текстом и фоном хороший контраст. У текстов одинаковое выравнивание и заметная структура.
Логотипы над текстами отражают смысл написанного и привлекают внимание. Такие описания хочется читать.
|
|
|
Другие важные принципы типографики:
- CAPS LOCK подходит только для главного заголовка, чтобы обратить на него внимание посетителя сайта. То же касается увеличения межбуквенного расстояния.
- Не нужно растягивать и сжимать буквы где бы то ни было, в исходных шрифтах обычно соблюдены правильные пропорции. Нарушать их — плохой тон.
- Блок с текстом не следует располагать шириной на всю страницу (12 колонок). Оптимальная ширина одного блока — примерно полстраницы (6−8 колонок).
- Текст должен быть структурирован, а заголовки — выделены. В противном случае он превратится в сложночитаемое полотно.
- Выравнивание по левому краю упрощает чтение. Не рекомендуем использовать другие виды, тем более — смешивать их на одной странице. Исключением может стать главный заголовок страницы, для него также подойдёт выравнивание по центру.
|
|
|
Как делать правильно:
В примерах ниже мы установили выравнивание по левому краю для каждого подзаголовка и описания. Оно лучше всего воспринимается и упрощает чтение.
Все тексты хорошо структурированы, поэтому их легко воспринимать. Выделены заголовки, есть маркированные списки, добавлены кнопки, которые вызывают желание нажать на себя. Пользователю понятно, что и в какой части страницы искать. Использованы шрифты без засечек.
По ширине тексты не занимают всю страницу.
|
|
   
|
|
|
Как делать не нужно:
В примерах ниже заголовки выделены слабо. Тексты расползаются сложночитаемым полотном по страницам. Нет кнопок. Из-за выравнивания по ширине между словами образуются слишком большие отступы. Всё это портит внешний вид сайтов.
Кроме того, в первом случае использован шрифт с засечками, а в блоках справа выравнивание у текстов разное. Это создаёт хаос и мешает ориентироваться по сайту.
|
|
|
|
|
Во втором случае текст заголовка обведен, это мешает воспринимать его. Графика не должна отвлекать от смысла: её роль в удачном расставлении акцентов, а не «перетягивании одеяла» на себя.
Меню слева сливается с фоном и больше напоминает ненужное сообщение: разделы слабо выделены.
Блоки меню и телефонов оформлены однотипно, хотя несут разные функции и смыслы. Нужно было показать отличие хотя бы размером шрифтов.
|
|
|
Совет:
В длинных текстах соблюдайте структуру, выделяя заголовки, маркированные списки и другие элементы. Используйте выравнивание по левому краю — так, конец строк будет иметь разную длину, и пользователь сможет легко ориентироваться в прочитанном.
|
Правило #5
Хорошая графика делает сайт живым
«Живой» сайт не похож ни на один другой. В нём есть изюминка: реальные фотографии людей, которые работают в вашей компании или приобретают её услуги и товары, которые вы предлагаете.
На хорошем сайте:
- Изображения имеют высокое разрешение и качество — никаких размытых линий и видимых пикселей, водяных знаков.
- На фотографиях нет неестественно счастливых людей, представленных в несуществующих ситуациях. Лучше всего показать контекст использования, как продукт решает проблему покупателя. Изображение должно иллюстрировать то, что вы предлагаете.
- Фон должен гармонировать с основным изображением, а не перетягивать внимание на себя.
- Векторные изображения (например, рисованных персонажей) нельзя сочетать с фотографиями, а плоские — с объёмными.
- Нет изображений, на использование которых у вас нет прав.
Сайт становится «мёртвым», когда изображения убивают его уникальность, портят своим видом и лишают смысла.
Помните: не каждая картинка с фотостока, отдалённо подходящая по тематике вашему сайту, сделает его лучше.
|
|
|
Так выглядят «живые» сайты с правильно подобранным визуальным рядом:
|
|
   
|
|
|
Пример хорошего незаезженного стока, живое лицо. На случай если нет возможности сделать свои фото
|
|
 
|
|
|
Так выглядят «мёртвые» сайты, на которых размещены не имеющие пользы картинки:
|
|
   |
|
Теперь вы знаете, как оценить пользу web-дизайна и на какие моменты смотреть, принимая работу исполнителя.
|
 Понравилась статья?
Поделитесь с коллегами, расшарьте в соцсетях и подпишитесь на нашу рассылку: с WEBELEMENT вы всегда будете в курсе трендов digital-маркетинга
|
А тех, кто хочет получить максимум полезных знаний о маркетинге, выстроить собственную систему привлечения клиентов и увеличить прибыль, мы приглашаем в «Школу маркетинга»
Первый урок из курса «Маркетинг для прибыли» — БЕСПЛАТНО!
Получить доступ к первому уроку
|
|
|
|
С уважением,
Юлия Панасенко
Digital-агентство WEBELEMENT
+7 (905) 410-45-55
info@webelement.ru
|
|
