Дизайн сайта

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

Какой шаблон использовать?

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

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

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

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

Давайте быстро пройдемся по плюсам платного шаблона:

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

Но есть и минусы, которые я уже немного затронул.

  1. Это проблема, что практически все такие шаблоны не делаются с учетом СЕО. А если и делается СЕО, то весьма такое, поверхностное.
  2. Много лишнего кода и функционала для того, чтобы тема могла подстраиваться абсолютно под каждого, приходится много накручивать сверху. И вот это накрутка, она создает лишний код.
  3. И достаточно высокая сложность в поиске исполнителя, потому что нужен исполнитель, который будет дорабатывать, если вы захотите, потому что лезть в чужой код мало кто захочет.

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

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

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

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

Как оформлять дизайн?

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

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

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

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

Также есть противоположный подход

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

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

Идем дальше, следующий пример — это меню.

И многие делают меню в несколько этажей, в несколько полосок. Я считаю, что это не хорошее решение. Самое оптимальное решение — это меню, которое, грубо говоря, помещается вот в такой список.

Вот это «еще» практически никто не будет кликать.

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

Нестандартные подачи в рубриках

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

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

Значит, что мы здесь видим? Мы здесь с вами видим то, что у нас нет вот этого линейного восприятия и глаз замыливается. А нам хочется это все поизучать, полистать, и это привлекает внимание.

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

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

И, если мы видим, допустим, если бы это был строительный сайт, что красивый какой-то интерьер. И, например, 10 идей, как сделать красивый интерьер в деревянном доме, это сразу же привлекло бы внимание, чем мы бы сделали маленькую картинку с избушкой какой-то и написали “10 лучших идей” там. Картинка бы все сделала сама, она бы продала идею кликом. И, соответственно, у нас здесь также выводится текст, который подкрепляется. То есть, допустим, вот мы видим, если нам не понятна эта картинка, я потом читаю, что это там экспертное мнение про что-то.

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

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

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

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

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

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

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

Следующее — ссылки. То же самое, вы навели, она стала другой — подчеркнутой или иным цветом.

Не приоритетные картинки являются блеклыми, а при наведении становятся более яркими.

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

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

Слайдеры

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

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

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

Не яркие заголовки

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

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

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

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

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

Часто люди заходят почитать, начинают листать, это эффект Инстаграма. Зашел посмотреть, есть ли что-то новенькое, и листаешь, листаешь, листаешь, особенно, если много подписок.

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

Далее слайдеры. Вот, например, здесь вот такой слайдер.

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

Например, вот фотографии или посты.

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

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

Следующие элементы — это взаимодействие с картинкой

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

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

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

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

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

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

Следующее, что мы можем сделать, это все стандартные решения в виде всплывающих окон типа лайков и так далее, делать нестандартно. Вот, например, как сделан cosmo.ru. При прокрутке статьи у нас выплывает огромная розовая картинка, которая говорит: “Если понравилась статья, нажми “мне нравится”.

Тем самым, человек нажимает “нравится” и подписывается на их паблик. И очень хорошо растет количество подписчиков, потому что пользователь думает, что отвечает на вопрос, понравилась ли статья. А потом оказывается, что “Больше интересного в Facebook, подпишись”. Это, оказывается, подписка. Ну, на самом деле, люди не против подписаться на cosmo.ru, потому что, я думаю, что этот сайт делает для женской аудитории хорошие материалы и, если уж что-то не понравилось, можно всегда отписаться.

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

Ок, еще какие базовые рекомендации я бы хотел вам дать? То, что аудитория сейчас, как правило, не любит мелкие тексты, мелкие шрифты. Просто это неудобно для восприятия, им хочется увеличивать, зумить и так далее. И поэтому, 14-16 пикселей — это некий стандарт. Меньше точно не нужно делать.

Колонку под контент не растягивайте очень сильно. До 700 пикселей, это самый удобный формат. Я изучил достаточно большое количество популярных дизайнов топовых изданий, и у всех у них вкладывались в данные параметры и также, в большинстве своем, как правило, заголовок верхнего уровня в 2 примерно раза больше, чем заголовки нижестоящего уровня. За счет этого он является таким броским.

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

То есть, смотрите, я даю вам большое количество идей.

Вы можете их реализовать на своем сайте.

Дизайн инфо-сайта

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

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

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

Это просто нам становится удобно и интересно изучать. Это все работа дизайнера.

В данном случае, например, есть врезка к цитата.

Здесь оформление таблицы, это тоже работа дизайнера.

Это различные сноски, в которых будет какая-то полезная информация.

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

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

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

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

1 Star2 Stars3 Stars4 Stars5 Stars (Блииин(( ... еще нет оценок)
Загрузка...

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

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