28 ноября 2016 Секреты дизайна в Nethouse. Часть 4.

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

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

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

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

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

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

Skype: levinjazz

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

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

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

Замена стандартного меню

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


alpine-hosseven.ru	runplace.ru

Создание дополнительного каталога

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


На сайте поставщика масел "PtzOil" реализована навигация, как по товарным группам (моторные масла, технические жидкости и т.д.), так и по брендам автомобиля. Это позволяет покупателю видеть все предложения непосредственно для своей марки.	Интернет-магазин натуральных сладостей "ЭкоБонБон" предлагает покупателям навигацию не только по группам товаров (конфеты, шоколад, пастила, батончики), но и помогает подобрать продукты исключительно под свои задачи.

ptz-oil.ru	ecobonbon.ru

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

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

Презентационный шаблон. Дизайн №1.

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

Итак, что же представляет собой "Презентационный" шаблон с дизайном №1 на первый взгляд:

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

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


ekowater.ru	vimpel.group

effprint.nethouse.ru	fulmenpro.ru

Наполнение главной страницы

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

Логотип в данном шаблоне, на наш взгляд, уместнее размещать в специально предназначенном для этого месте слева от меню.
Ширина логотипа — 215 пикселей, высота произвольна, рекомендуем не более 70-80 пикселей.
Если мы посмотрим на примеры сайтов, то поймем, что сразу под логотипом и меню размещаются блоки "Картинка слева от текста" либо же блоки "Текст" и "Кнопка". Тут можно смело эксперементировать. Поскольку фактически мы теряем слайдер из нескольких баннеров, то должны разместить под логотипом и меню самую важную информацию — наш основной посыл или слоган. Кнопка с определенным призывом также будет не лишней.
Затем мы можем добавить краткий текст о компании, воспользовавшись блоком "Текст".
Категории товаров, преимущества, схему работы компании, логотипы клиентов и партнеров можно добавить, пользуясь блоком "Триггеры", варианты дизайна которых довольно разнообразны.

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

Фоновое изображение

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

Фоновое изображение необходимо загружать через настройки сайта, а не через редактор слайдера.
Мы рекомендуем создавать фоновое изображение шириной 1920 пикселей, так оно не будет занимать слишком много места и будет подходить под большинство современных мониторов. Высота фона варьируется в зависимости от размещенной на сайте информации.
Не размещайте слишком много изображений на фоне.
Не забывайте, конструктор не позволяет размещать фоновое изображение размером более 1МБ.
Если фон получится слишком тяжелым, попробуйте сохранить его как jpeg с небольшой потерей качества.

Итоги

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

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

28 ноября 2016 Секреты дизайна в Nethouse. Часть 4.

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

Интеграция с Wildberries для увеличения продаж

Nethouse.События + Академия: партнерская программа для организаторов, готовые шаблоны лендингов

Бургер-меню на вашем сайте

Масштабная онлайн-конференция Nethouse уже через неделю

Как сообщество ВКонтакте помогает вашему бизнесу расти

"Черная пятница" в Nethouse! Месяц продвижения в подарок до 28.11