СЕКРЕТЫ ДИЗАЙНА НА NETHOUSE.
КРАТКИЙ ОБЗОР ШАБЛОНА «НОВЫЙ»
Рекомендации по оформлению сайтов на нашей платформе дает Григорий Левин, руководитель студии дизайна «Интегра», первый агент Nethouse.
В новой части «Секретов дизайна» мы расскажем о новом шаблоне Nethouse и тех возможностях, которые он предлагает владельцам сайтов на Nethouse. Каждый пункт обзора, как и прежде, мы проиллюстрируем примерами работ. Если у Вас возникнут вопросы, связанные c разработкой сайта на Nethouse, вы можете связаться с нами следующими способами:
Эл. почта: info@integradesign.ru
Телефон: +7 (921) 228-25-55 (Whatsapp, Viber, Telegram)
ВКонтакте: vk.com/integra_design
В декабре 2020 года в конструкторе Nethouse появился шаблон «Новый», который стал логичным эволюционным продолжением самых популярных среди пользователей адаптивных шаблонов «Дизайн №1» и «Дизайн №2». Теперь эти шаблоны называются «Универсальный №1» и «Универсальный №2». Введение ряда новых функций позволило существенно расширить вариативность дизайна сайтов. С появлением нового шаблона наша студия практически полностью перешла на работу с ним и рекомендует создавать новые сайты, используя именно этот шаблон. Отличная адаптивность позволяет пользователям получать прекрасно выглядящие сайты на мобильных устройствах. По многим сайтам мобильный трафик уже перевалил за порог 90%. Такова реальность на сегодняшний день и Новый шаблон ей полностью соответствует.
Одно из существенных и важных новых функций — внедрение технологии Lazy loading, когда изображения сайта подгружаются только в момент, когда они фактически появляются в видимой пользователю части, то есть при скролле. Как результат — увеличение скорости загрузки сайтов. Также улучшена верстка для мобильных устройств. Исправлены отступы. Редактор стал более современным, понятным и удобным. Блоки на главной странице добавляются через "+", их можно сразу размещать в нужное вам место, а не в самый низ, как раньше. Текстовые элементы управления заменены на иконки. В планах новые блоки, варианты оформления блоков, добавление блоков на текстовые страницы, обновленный редактор слайдера и многое другое.
Среди существенных основных отличий шаблона, которые будут рассмотрены в данном обзоре:
1. Новые возможности по редактированию хедера (шапки) сайта, меню сайта и подвала (футера).
2. Гибкая настройка кнопок на сайте.
3. Оформление блоков на главной странице.
4. Скрытие заголовка карточки товара.
5. Новые шрифты. Хоть напрямую и не относятся именно к новому шаблону, но отлично дополняют друг друга.
Рассмотрим нововведения немного подробнее и проиллюстрируем их на примерах работ нашей студии.
ПЕРЕХОД НА НОВЫЙ ШАБЛОН
Переход на шаблон «Новый» осуществляется в настройках сайта. Если Вы сосздаете новый сайт, однозначно рекомендуем выбрать именно Новый шаблон. Если же у Вас уже есть сайт на Nethouse, мы рекомендуем учесть ряд важных моментов.
- При переходе с Универсального шаблона №1 и №2 (которые максимально похожи на Новый шаблон) все должно пройти гладко и, возможно, потребуется ряд небольших незначительных доработок.
- При переходе с более старой версии дизайна доработки будут более значительные, т.к. свежие шаблоны включают другие размеры стандартных элементов дизайна сайта (баннеры, каталог, услуги и тд.) Кроме того, если у Вас интернет-магазин и товары были загружены довольно давно (несколько лет назад), существует вероятность, что на Новом шаблоне перестанут отображаться превью товаров и Вам потребуется перезагрузить их. Если каталог большой, то это займет какое-то время. В любом случае попробовать стоит. Вы всегда можете вернуться на старый шаблон и все изображения вернутся на свое место.
- Важно!!! При переходе с Nethouse 2.0 Вам потребуется заново загрузить на сайт всю информацию, т.к Nethouse 1.0 (именно на нем сделан Новый шаблон) и Nethouse 2.0 не «обмениваются» контентом.
НОВАЯ ШАПКА САЙТА И МЕНЮ
Все новые настройки собраны в одном месте, что крайне удобно (Настройки/Дизайн сайта/Настройки шаблона).
Здесь можно загрузить фоновое изображение, мы как и ранее загружаем изображения размером 1920 на 1000 пикселов. Этого размера хватает для большинства мониторов и экранов мобильных устройств, при этом размер не сильно большой и не тормозит загрузку сайта.
1. Выбор цвета фона меню и его прозрачности
На новом шаблоне можно выбрать цвет шапки сайта. Вы можете пробовать ставить различные цвета шапки, но имейте ввиду, что шапка это не основной элемент дизайна, кроме того она теперь всегда присутствует на экране и занимает немало места.
Если шапка будет цветная — она может отвлекать внимание пользователя от основоного контента. С цветной шапкой как правило можно использовать только негативный вариант логотипа (например белый или черный). Нам кажется, что в большинстве случаев предпочтительнее использовать белый или черный цвет шапки, так как в этом случае мы можем использовать полноцветный вариант логотипа и не будем отвлекать много внимания посетителя сайта на второстепенный элемент визуального оформления.
Прозрачность шапки мы как правило варьируем от 85 до 95%. В некоторых случаях можно сделать прозрачность больше, но лучше не увлекаться. Чем прозрачнее шапка, тем менее видны элементы меню при скроллиннге.
1.1. Цветовая схема футера (подвала) сайта
Новый шаблон позволяет выбрать цвет подвала (темный, светлый или тот, который зависит от настроек меню. Будем предельно краткими. Самое разумное решение — использовать настройки такие же как в меню, так сайт будет выглядеть законченным продуктом.
2. Расположение элементов меню
Теперь существует два варианта расположения: по ширине экрана и по ширине контента в блоках. Изначально на новом шаблоне был только один вариант — «По ширине экрана». Некоторым пользователям внешний вид сайта при этом варианте казался менее аккуратным, поэтому платформа добавила старый вариант «По ширине блока контента в блоках». Нам второй вариант нравится больше, т.к. смотрится аккуратнее, хотя оба они интересны и имеют право на существование.
Так выглядит вариант «По ширине экрана»
А так «По ширине контента в блоках» — более привычный нам по предыдущим шаблонам.
3. Цвет текста ссылок в меню и их подчеркивание
Ваше новое меню можно сделать еще ярче и интереснее с помощью такого элемента, как цвет текста ссылок. Теперь Вы можете делать ссылки в меню абсолютного любого цвета и выбирать — будут ли они подчеркиваться при наведении или нет. Наши рекомендации тут как всегда просты. Если у Вас совсем строгий сайт, делайте цвет по умолчанию темно-серым, а при наведении — черным. А вообще — берите один из цветов логотипа и используйте его. Будет ярче и интереснее. Что касается вопроса — подчеркивать ссылки или нет — тут нам ближе вариант с подчеркиванием. Это один из признаков этикета в интернете. Ссылки должны быть подчеркнуты. Так же как и текст должен быть выровнен по левому краю.
ГИБКАЯ НАСТРОЙКА КНОПОК
Кнопки — очень важный элемент взаимодействия клиента с интернет-ресурсом, их форма и цвет могут подчеркнуть общий дизайн сайта и придать дополнительные продающие качества. Новый шаблон принес нам возможность гибкой настройки кнопок. Теперь для основной и второстепенной кнопки на всех страницах можно настроить цвет (по умолчанию, при наведении и нажатии) и форму (со скруглением, с малым скруглением и без скругления).
Цвета и форму кнопок мы рекомендуем подбирать исходя из дизайна сайта и общей цветовой гаммы логотипа компании. Правил тут нет, все индивидуально и зависит от Вашей фантазии. Если логотип и элементы сайта имеют прямоугольные формы, то и кнопки можно использовать без скругления, если лого и элементы сайта имеют овальные формы — можно пробовать вариант со скруглением кнопок.
Кнопки без скругления на сайте https://сигма-двери.рф
Кнопка по умолчанию
Кнопка при наведении и нажатии
Кнопки с малым скруглением на сайте https://banketkem.ru/
Кнопка по умолчанию
Кнопка при наведении и нажатии
Кнопки с малым скруглением сайте https://tochnovkusno.ru/
Ниже примеры как форма и цвет кнопок может зависеть от дизайна и формы логотипа.
Скругление кнопок отсутствует на сайте https://сигма-двери.рф т.к лого имеет прямогуольную форму и острые углы.
Малое скругление кнопок на сайте https://zookormov.ru/ неплохо соотносится с формой логотипа и шрифтов на сайте.
ФОНЫ ДЛЯ БЛОКОВ НА ГЛАВНОЙ
Дополнительного разнообразия на главной странице теперь можно добиться также использованием фоновых изображений для блоков. Ранее такая возможность пристутствовала только для слайдера и лид-формы, теперь же список блоков существенно расширился. Функция отличная, но мы рекомендуем очень сильно ей не увлекаться дабы не перегрузить сайт. С учетом количества блоков — сделать это не сложно).
Рассмотрим несколько вариантов применения фоновых изображений.
1. Самое простое и «легкое» решение — выбрать подходящий цвет фона. В зависимости от направления деятельности и дизайна сайта это могут быть как яркие цветовые решения, так и приглушенные цвета. За основу можно взять логотип и фирменные цвета компании.
Блок «Услуги» на сайте https://masons.com.ua/ залит ярким желтым цветом, что подчеркивает динамичность компании и сочетается с общей цветовой гаммой логотипа и сайта.
Блог компании на сайте https://banketkem.ru/ наоборот выполнен в спокойных пастэльных тонах, не выбиваясь из общего восприятия сайта.
2. В качестве фона можно также использовать повторяющиеся узоры — паттерны. В отличии от больших и тяжелых картинок паттерны весят немного и не съедят много места на Вашем сайте, при этом иногда они смотрятся весьма уместно и приятно.
Блок «Поиск по каталогу» на сайте: https://русская-кузница.рф
Блок «Поиск по каталогу» на сайте: https://mdptz.ru/
3. И, наконец, при большом желании можно использовать полноценные изображения. Только не делайте их очень большими и тяжелыми! Не перегружайте сайт. Небольшие векторные элементы на одноцветном фоне или затенная картинка — отличное решение для такого варианта.
Блоки «Поиск по каталогу» и «Мы в соцсетях» на сайте https://tochnovkusno.ru/
СКРЫТИЕ ЗАГОЛОВКА В КАРТОЧКЕ ТОВАРА
Скрытие заголовка страницы в карточке товара позволит сделать страницу товара более компактной и показать посетителю больше информации в первом экране. У нас нет каких либо рекомендаций на данный счет. Если скрыть заголовок, то именно в каталоге сайта перестанет отображаться фон, а в некоторых случаях фон сайт является неотъемлемой частью дизайна. Решать — только Вам!
ШРИФТЫ
Возможность изменения шрифтов на Nethouse появилась немного раньше Нового шаблона, но вместе они работают прото отлично. Шрифтовых схем уже немало (надеемся их станет еще больше со временем), выбирать можно по вкусу. Рекомендации как и ранее — руководствоваться стилем логотипа и сайта.
1. Для модернового дизайна хорошо подходят рубленые современные гротески — шрифты без засечек.
2. Для дизайна сайтов, которые ассоциируется со словами «винтаж», «ретро» и «классика» подходят шрифты с засечками — антиквы.
