Все новости 17 февраля 2016 Все теги

Секреты дизайна в Nethouse. Часть 3.

Рекомендации по оформлению сайтов в нашем конструкторе дает Григорий Левин, владелец Студии дизайна "Интегра", агент Nethouse.

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

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

Если у Вас возникнут вопросы, связанные c разработкой сайта на Nethouse, Вы можете связаться с нами следующими способами:

Электронная почта: info@integradesign.ru

Телефон студии: +7 (8142) 282-555

Мобильный: +7 (921) 228-25-55 (whatsapp, viber, telegram)

ВКонтакте: vk.com/integra_design

Skype: levinjazz

Новые дизайны шаблона "Профессиональный"

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

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

Мы рекомендуем:

Аккуратно относитесь к фоновому изображению, оно не должно отвлекать на себя все внимание
При создании фона в графическом редакторе ориентируйтесь на ширину в 1920 пикселей и высоту в зависимости от высоты вашего сайта
Помните об ограничении на размер используемого в Nethouse фона в 1 мегабайт
Центральную часть фона в большинстве случаев мы рекомендуем оставлять белой

slastystore.ru

house-grill.ru

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

montaj-decor.ru

Если все же вы не любитель новых современных шаблонов, а предпочитаете проверенные годами классические шаблоны — для вас есть хорошая новость. Такие шаблоны также хорошо подвергаются модернизации. Более того, некоторые клиенты хвалят "классику", объясняя это более высокой конверсией. Что ж, пробуйте и сравнивайте!

простопро.рф

Конструктор лендингов

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

Лендинги — одностраничные сайты, лишенные меню и каких-либо ссылок, отвлекающих от основной цели.

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

kotel-kolonka.ru

Новшества в оформлении шапки сайта

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

prosto-pravda.ru

lefurs.ru

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

Слева от контактных телефонов мы можем указать:

Местоположение компании, например "Москва", "Иркутск, ул. Ленина, 12"
Информацию о доставке, например "Доставка по всей России", "Доставка по Казани и Татарстану"
Информацию о звонках, например, перед номером 8(800) — "Звонок бесплатный"
Перед обычным номером — "Телефоны офиса продаж", "Информационная служба", "Бесплатные консультации" и т.д.

Справа от форм обратной связи можно указать:

Часы работы компании
Информацию о круглосуточном (24/7) приеме заказов

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

Системный шрифт верхней строки — OpenSans, 15.

av-stroygroup.ru

respect-l.ru

Триггеры

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

koira.pro

vaicom.ru

Логотип в левой части шапки сайта

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

Сначала необходимо "скрыть" cтандартный логотип — он довольно мал (всего 215 пикселей по ширине).
Затем нужно подготовить файл размером примерно 300х80 пикселей (размеры могут быть произвольными) с изображением логотипа
Файл с логотипом разместите в поле "слоган" и выровняйте изображение по левому краю
Прикрепите к логотипу ссылку на главную страницу сайта

coffeespace.ru

eurostock.fi

Рекомендации по оформлению интернет-магазина

Мы рекомендуем использовать увеличенные изображения товаров и категорий (превью) в разделе "Каталог товаров" и на главной странице. С недавнего времени Nethouse включил такую возможность в настройки каталога. Увеличенные категории интернет-магазина доступны для всех шаблонов.

Для большинства товаров, на наш взгляд, предпочтительнее использовать превью размера 250х190 пикселей.

av-stroygroup.ru

tovarhit.com

Для отдельных категорий, таких как одежда, сотовые телефоны и т.д. предпочтительнее использовать вертикальные превью размером 250х330 пикселей.

familystock.ru

lefurs.ru

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

Иконки интернет-магазина на главной

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

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

Мы можем разместить на главной странице и разделы, и товары. Для этого:

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

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

Переименовываем раздел "О компании" на главной странице в "Интернет-магазин" или "Каталог товаров"
Создаем внутри нового раздела таблицу
В графическом редакторе подготавливаем иконки, сохраняем их
Размещаем иконки в созданную таблицу
К каждой иконке добавляем ссылку на тот или иной раздел каталога

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

want-tea.ru

divandoma-ekb.ru

Лид-форма и изображение в качестве фона

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

Создаем в графическом редакторе файл размером 1920х700 пикселей (ширина зависит от количества и размера полей)
Подбираем изображение, подходящее к тематике нашего сайта
Слегка затеняем или оттеняем изображение
Загружаем сохраненный результат в настройках лид-формы

autokreslaspb.ru

coffeespace.ru

Оформление раздела "Доставка"

Зачастую именно информация из данного раздела имеет решающее значение для того, что клиент сделал заказ именно в вашем интернет-магазине. Если раздел "Каталог товаров" отвечает на вопрос, ЧТО вы предлагаете, то раздел "Доставка" говорит о том, КАК вы это предлагаете.

Мы рекомендуем:

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

backstage-shop.ru

want-tea.ru

Блок отзывов

Реализована давняя мечта многих пользователей Nethouse — размещение отзывов клиентов с их фотографиями. Такие отзывы вызывают больше доверия у потенциального клиента и, соответственно, повышают конверсию. В разделе "О компании" добавляем блок триггеров, выбираем соответствующий стиль оформления, загружаем фотографии (можно попросить у клиентов реальные фото или найти подходящие варианты в Сети) и сами отзывы. Готово!

свадьба178.рф

Приятные мелочи, о которых стоит напомнить

Ранее количество промо-баннеров составляло 6 штук, что было явно недостаточно. Теперь в промо-баннер на главной странице вы можете разместить 10 баннеров.
С недавнего времени Nethouse позволяет увеличивать размер превью альбомов и самих фотографий в галерее. Это может быть весьма полезно.
JivoSite, CartProtector и CallbackHunter — реально работают. Особенно для себя мы отметили онлайн-консультант JivoSite, который позволяет нам всегда быть на связи с нашими клиентами и оператично отвечать на их вопросы".

Продолжение следует.

Поделиться новостью

Секреты дизайна в Nethouse. Часть 3.

Последние новости

Международная доставка + 6 обновлений конструктора сайтов

Nethouse.События: отзывы наших организаторов

Геотаргетированная реклама: преимущества и методы использования + бонус

Обновление настройки дизайна сайтов и новые шаблоны