Дизайн – дело в принципе субъективное, но и у него есть некоторые устоявшиеся критерии «правильности». Причем хороший дизайн сайта во многом помогает продвигать бизнес, делать бренд узнаваемым и повышать продажи. Так что сегодня на повестке дня – общие основные признаки, которые помогут отличить классный дизайн от того, что не очень.
Что такое хорошо и что такое плохо в дизайне?
1. Композиционное решение
В дизайне должны гармонично сочетаться все структурные составляющие сайта: изображения, текстовые публикации, кнопки, иконки и остальные детали. Композиция определяет размещение элементов по отношению друг к другу и объединение их в целое. Если все сделано грамотно и эстетично, то посетитель быстро ориентируется на странице, понимает основной посыл и находит нужное.
Чаще всего наше читательское внимание распределяется по странице следующим образом:
- В первую очередь мы цепляемся взглядом за изображение, а затем уже – за текст.
- Изучаем страницу мы с левой стороны и движемся вправо, просматривая содержание сверху вниз. Траектория взгляда похожа на латинские буквы «Z» или «F».
Опытный и профессиональный дизайнер разрабатывает макет будущего сайта таким образом, чтобы основные элементы были на виду и сразу же бросались в глаза. При этом не должно быть ничего лишнего, недопустимо скопление элементов одном углу или излишняя пустота.
2. Цветовое решение
Цветовое оформление напрямую зависит от тематики и направленности сайта, ведь каждый оттенок передает свое особенное настроение. Так, яркие цвета могут приободрить, зарядить положительной энергией, а бледные и темные – наоборот, дарят умиротворение и расслабление. В качестве примера:
- желтый ассоциируется с солнечными лучами, согревает и повышает настроение;
- красный – цвет лидера и энергичного человека;
- синий освежает, является признаком чистоты, нежности, гармоничного состояния и успокоения;
- зеленый оказывает эффект защищенности, успокаивает.
Если не получается самостоятельно создать гармоничное сочетание оттенков, можно воспользоваться специальным цветовым кругом. С помощью него можно подобрать действительно подходящие друг к другу тона. Естественно, это необязательно. Можно положиться на собственное чувство вкуса. Главное, чтобы сочетание не было из разряда «вырви глаз» и не отталкивало от просмотра. Пока еще есть плохие дизайнеры, которые грешат использованием ярких неоновых цветов, от которых становится немного не по себе.
3. Иерархичность
Один из основных компонентов композиции сайта – это иерархичность. Она позволяет посетителю понять, какие элементы самые важные, а какие – не очень. Благодаря размеру элементов страницы, их цветовому решению, форме создается эта визуальная иерархия.
Пример удачной иерархии:
- крупное фото директора компании/спикера марафона и так далее;
- далее заголовок, который выделен жирным шрифтом;
- ниже – описание товара или услуги и кнопка для подачи заявки, добавления в корзину и прочего;
- СТА-кнопка выполнена в ярком цвете, чтобы сразу обратить на себя внимание (идеально, если изображенный на фотографии человек будет рукой указывать на эту кнопку);
- ниже будут располагаться другие элементы второстепенного значения – информация о стоимости, различные видеоматериалы и так далее (это не так важно, так что разместить можно где-то в стороны, чтобы посетитель просмотрел данные нюансы следом за основным контентом).
Хороший дизайнер понимает принципы иерархии, выстраивая сайт таким образом, чтобы главное было на виду, а второстепенное не бросалось в глаза раньше времени. Неопытный же веб-мастер сделает так, что на странице будет царить полнейший хаос и неразбериха.
4. Свободное пространство
Наверняка все слышали такое понятие, как «воздух». В дизайне оно тоже присутствует и означает свободное пространство на странице. Если на сайте достаточно «воздуха», все элементы грамотно размещены по всей площади сайта, не лепятся друг к другу, все смотрится гармонично и красиво. Минималистичное решение всегда очень кстати. Если же кнопки, текст и рекламные объявления перемешиваются, пестрят яркими цветами, то в глазах будет рябить, а главную информацию не получится отделить от второстепенной.
Еще важно учитывать расстояние внутри смыслового и информационного блока, а также отступы между этими блоками. Например, хороший дизайнер обязательно свяжет заголовок с текстом, а после сделает внушительный отступ, чтобы отделить разные элементы. Если же этого не сделать, получится нелогично и непонятно для читателя.
Обязательно нужно следовать пропорциям. Все элементы расположены на одном уровне, отступы одинаковы, текстовые публикации симметричны, изображения строго соотносятся с полями. Нарушения этих пропорций, когда все детали либо «висят в воздухе», либо «скачут» по странице, будут признаком плохого дизайна.
5. Главные элементы
Так называемые якорные объекты – это главные элементы сайта, который заметны больше остальных. Это могут быть изображения, логотип компании, названия тем, иконки. Качественный дизайн отличается четкой структурой, которая представлена прямоугольной формой. Якорные объекты образуют либо углы этой фигуры, либо стороны. Если главные элементы расположены таким образом, мы быстро усваиваем информацию, нашему глазу комфортно. Если же все детали размещены хаотично, страницу хочется поскорее закрыть и не возвращаться к ней.
6. Типографические нюансы
В дизайне есть определенные требования по поводу того, как грамотно оформить текст. Классный дизайнер умеет подобрать нужный шрифт, его высоту, отступы между строками и другие детали. Все это делает публикацию читабельной и понятной. Невнятная типографика все портит, даже если в целом дизайн неплохой. Читатель просто не поймет, что ему хотят сообщить.
Если говорить о шрифте, то главное, чтобы он был понятным и отражал в себе определенный стиль. Обычно стандартные шрифты – самые распространенные, потому что более читабельны. Всякие ажурные и витиеватые разглядеть сложно. Буквы с плавными закруглениями и мягкими линиями передают радостное настроение, спокойствие. А шрифты с угловатыми буквами и резкими переходами характерны для официальных сообщений и делового общения. Нужно выбрать такое написание, которое будет одинаково хорошо выглядеть при разной высоте и размере, чтобы на любом устройстве можно было рассмотреть.
На странице не должно быть более двух видов шрифта. И с размерами тоже лучше не экспериментировать, максимум – 3 варианта: один для заголовка, второй для подзаголовка и третий – для самого текста.
- Теперь про кегль, или, говоря по-русски, про высоту букв. Если на сайте используется несколько видов шрифта, то хотя бы высота должна быть у них одна. Хороший дизайнер всегда держит в голове пунктик про читабельность, а потому должен знать, что минимальный кегль – 12 pt.
- Междустрочный интервал должен превышать кегль примерно на 30%. Тут должна быть золотая середина. Если интервал будет слишком маленьким, все сольется в единую «простыню», если большим останется много ненужного «воздуха».
- Длина строки не должна превышать 1000 px, в символах это около 80 знаков. Но нельзя забывать, что очень большая часть пользователей сидит с мобильных устройств, а значит, желательно сократить количество символов до 40. Выравнивать текст рекомендуется по левому краю, потому что так удобнее всего для чтения.
Промах плохого дизайнера – выделение основной информации заглавными буквами. Прочитать такой текст, особенно если это не одно слово, а несколько предложений, крайне сложно. Лучше выделить полужирным шрифтом.
7. Контент
Здесь стоит остановиться в первую очередь на публикуемых изображениях, потому что текст обычно пишет не дизайнер. Хотя в целом контент должен быть качественным: и картинки, и видео, и информация. Плохое содержание сайта не спасет ни один даже самый идеальный дизайн.
Лучше всего использовать реальные фотографии. Они вызывают доверие у посетителей сайта, создают представление о товаре/услуге/компании в целом. И наоборот, стоковые изображения отталкивают, у читателей возникают сомнения по поводу добропорядочности «конторы». Никто уже не верит слащаво улыбающимся моделям и пожимающим напоказ друг другу руки бизнесменам с фото.
Чтобы реальные фотографии выглядели эффектно и качественно, нужно делать их на профессиональный фотоаппарат и при хорошем освещении. Несоблюдение принципов композиции испортит все впечатление.
Признаки плохого дизайна, или чего стоит избегать
- Анимационные элементы. Бегающие, мигающие и всплывающие картинки и строки текста – уже моветон. С такого сайта хочется уйти и забыть ссылку.
- Слишком много иконок. Графические изображения и кнопки всех социальных сетей, разделов каталога, статей делают страницу перегруженной и портят общее впечатление от сайта.
- Оригинальность при выборе фона. Экспериментировать и искать необычные решения – здорово, но не в данном случае. Кричащие цвета или даже фотографии на фоне – полное табу. Ведь читать становится совершенно невозможно, посетители явно не скажут «спасибо» автору такого творения.
- Всплывающие баннеры. В поисковых системах и антивирусах это, вообще, воспринимается как вредоносный контент. Посетители сайтов тоже не терпят эти надоедливые объявления, которые перекрывают основное содержание.
Качественный дизайн – это не просто эстетичный внешний вид сайта. В первую очередь это забота о клиентах, ведь грамотная композиция способствует пониманию и усваиванию информации, верстка и соблюдение типографических принципов делает текст читабельным, а контент помогает удержать внимание клиента. Старайтесь учитывать те нюансы, о которых мы написали выше, полагайтесь на свой вкус, и тогда плохой дизайн вам не грозит.