Язык: Русский

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

28 ноября 2016
Рекомендации по оформлению сайтов в нашем конструкторе дает Григорий Левин, руководитель Студии дизайна "Интегра", агент Nethouse.
 
"В продолжении "Секретов дизайна" мы постараемся коротко рассказать вам о некоторых нововведениях платформы и о том, как они позволяют создавать еще более красивые и уникальные сайты. Каждый пункт обзора мы проиллюстрируем примерами работ. 
 
Если у Вас возникнут вопросы, связанные c разработкой сайта на Nethouse, Вы можете связаться с нами следующими способами:
Электронная почта: info@integradesign.ru
Мобильный телефон: +7 (921) 228-25-55 (whatsapp, viber, telegram)
ВКонтакте: vk.com/integra_design
Skype: levinjazz
Секреты дизайна 4
 
В прошлых частях мы подробно рассматривали особенности и интересные возможности использования шаблона "Профессиональный" в трех его вариантах. До сих пор этот шаблон является основным инструментом нашей студии, который, как нам кажется, имеет по крайней мере три ключевых достоинства:
  • Универсальность. Шаблон подходит как для компаний, оказывающих услуги, так и для интернет-магазинов.
  • Простота в использовании. Легко настроить вид главной страницы, баннеры и т.д.
  • Современность. До сих пор шаблон актуален, несмотря на появление новых вариантов дизайна.
 
В этой части мы хотели бы порекомендовать вам пару интересных моментов, которые можно использовать при работе с "Профессиональным" шаблоном.
 
Замена стандартного меню
 
Стандартное меню располагается на "Профессиональном" шаблоне чуть ниже логотипа. Оно имеет серую подложку на стандартном дизайне и прозрачную на светлом и темном. Мы можем скрыть стандартное меню и сделать собственное меню в графическом редакторе, которое будет расположено справа от логотипа. Это придаст сайту более классический вид, сделает шапку сайта аккуратнее, позволит придать сайту большую индивидуальность. Как и логотип, который располагается в левой части шапки, элементы меню, созданные в графическом редакторе, должны быть размещены в поле "Слоган". Стандартное поле "Логотип" при этом должно быть скрыто.
 
 









Создание дополнительного каталога
 
Зачастую встречается ситуация, когда владельцу сайта, а в особенности — интернет-магазина, хочется, чтобы посетителю было максимально удобно пользоваться навигацией на сайте. Использование стандартного каталога товаров не всегда дает возможность полноценно представить навигацию. В данном случае нам поможет дополнительный "каталог" на главной странице. 
На сайте поставщика масел "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 — отличный шаблон, чуть больше подходящий для компаний, оказывающих услуги, нежели для интернет-магазинов, однако это вовсе не значит, что его нельзя использовать для торговых площадок. Некоторые клиенты осознанно выбирают данный шаблон, поскольку именно обновленный внешний вид каталога товаров привлекает их внимание. В целом, все зависит от желания и умения работать с данным шаблоном. При должном наполнении и компоновке фонового изображения, можно сделать такой сайт, что даже профессионал не догадается, что он сделан на определенной платформе. Пробуйте и у вас все получится!
На всех мониторах страны.
На визитке каждого.

Загрузите приложение Nethouse