Новый год уже близко. А это значит, что нужно нарядить не только ёлку и себя, но и сайт. Собрали для вас подборку праздничных украшений для сайта. Внедряйте и дарите посетителям новогоднее настроение.
- Ёлочная ветка на углу страницы
- Метель
- Новогодняя гирлянда
- Гирлянда на JavaScript
- Боковая панель с Санта-Клаусом
- Новогодний фейерверк
- Таймер обратного отсчёта
- Новогодняя открытка
Ёлочная ветка на углу страницы
Достаточно простое, но вместе с тем красивое украшение сайта. Простой скрипт отображает png-изображение в углу страницы. Вот пример одного из вариантов:
Метель
JS-скрипт реализует анимацию метели на сайте. Такое незамысловатое украшение создаст новогоднее настроение посетителям. Скрипт реализован на pixi.js.
Новогодняя гирлянда
Простая гирлянда, выполненная на основе SVG-изображений и CSS. Все лампочки в гирлянде плавно мигают. Можно экспериментировать с фоном, общим стилем, цветом лампочек, скоростью воспроизведения анимации и так далее.
ДЕКОРИРУЕМ И УБИРАЕМ ДОМ К НОВОМУ ГОДУ 2021/ НОВОГОДНИЙ ДЕКОР СВОИМИ РУКАМИ
Гирлянда на JavaScript
Более реалистичная гирлянда, которую можно поместить на самый верх страниц сайта. Скрипт реализует поочерёдно 4 состояния гирлянды: выключенная, включённые лампы двух цветов, включённые лампы двух других цветов, полностью включённая гирлянда.
Боковая панель с Санта-Клаусом
Скрипт реализует эффект падающих снежинок, а также размещает сбоку Санта-Клауса. При наведении курсора на Санту выводится карточка с текстом. Его по желанию можно менять на что угодно в HTML-файле.
Новогодний фейерверк
Скрипт реализован на jQuery и HTML 5 Canvas. С его помощью на страницу выводится анимация фейерверка, состоящего из различных фигур: от кругов и овалов до сердечек и контуров планет. Демо можно посмотреть на сайте.
Таймер обратного отсчёта
Один из вариантов реализации таймера обратного отсчёта до Нового года . Скрипт написан полностью на JavaScript. Если захотите использовать его каждый год, то в нём не понадобится ничего менять — скрипт не завязан на конкретной дате.
Новогодняя открытка
Скрипт отображает новогоднюю открытку. При клике по ней открывается новогоднее поздравление. Какой там будет текст, зависит только от вашей фантазии. Такое украшение будет красиво смотреться на главной странице вашего сайта.
Мы представили далеко не все варианты украшений сайта к Новому году . В комментариях вы можете рассказать о своём опыте украшения сайта и поделиться ссылками на другие скрипты.
Следите за новыми постами по любимым темам
Подпишитесь на интересующие вас теги, чтобы следить за новыми постами и быть в курсе событий.
Источник: news.myseldon.com
10 идей как подготовить сайт к Новому году
Как создать праздничную атмосферу на сайте, которая поможет увеличить продажи в горячий сезон новогодних праздников.
5 DIY идей НОВОГОДНЕГО ДЕКОРА. Простые украшения для дома на Новый год своими руками.
Привет, это PR-CY! В блоге вы найдете советы по SEO, инструменты и интересные примеры. Мы создали сервис для онлайн-аудита сайта , который помогает следить за тем, как развивается ваш проект. Попробуйте!
Предновогоднее время — самое горячее: люди ищут подарки, наряды, записываются на уходовые процедуры, бронируют места для праздников и корпоративов и планируют досуг. А бизнес работает в повышенном темпе.
Проблема в том, что ваши конкуренты тоже усиленно зазывают клиентов. Вам нужно выделиться.
Зачем оформлять сайт к новогодним праздникам
- Увеличить прибыль
По результатам опроса 15% россиян будут искать товары на распродажах в конце декабря. 42% не составляют список покупок и изучают предложения магазинов. Так предложите им что-то. - Поднять онлайн-продажи
Большинство людей привыкли покупать онлайн. Подозреваем, в преддверии праздников онлайн-покупателей будет еще больше, ведь некогда ходить по магазинам. Ваша задача — удержать их на сайте. - Создать праздничную атмосферу
По данным исследования 32% назвали Новый год своим любимым праздником. Праздничный декор повышает настроение и располагает. - Улучшить поведенческие факторы для SEO
Красиво оформленные страницы, новые предложения, увлекательная игра задержат пользователей на сайте. Увеличится и время сеанса пользователя, и глубина просмотра страниц, и другие поведенческие факторы .
Никогда не поздно придумать и воплотить в предновогоднее время что-то еще. Люди выбирают подарки, записываются на уходовые процедуры, ищут наряды и так далее вплоть до Нового года (да и после него).
Идеи оформления сайта
Подойти с фантазией
Баннеры с елочками и шарами — празднично, но избито. Придумайте, как обыграть вашу специфику в фотосесии или рисованных иллюстрациях для баннеров.
Магазина косметики «Золотое яблоко» организовал фотосессию в стиле рождественских эльфов, которые отвечают за сборку подарков. Смотрится ярко, но даже слегка устрашающе за счет неестественных ушей. А значит привлекает внимание и побуждает рассматривать.
Преобразить главную страницу
Самый очевидный вариант — оформить главную страницу, чтобы пользователи с ходу погрузились в атмосферу праздника.
Красивый пример с сайта того же «Золотого яблока». Фентезийное оформление для акций смотрится сказочно, а бегущая строка внизу привлекает внимание и ведет в каталог.
Источник: dzen.ru
Как Microsoft, Google, IKEA и другие компании оформляют сайты к Новому году и зачем это нужно Статьи редакции
Основные элементы новогоднего оформления с примерами.
11 237 просмотров
Главная страница Coca-Cola в период новогодних праздников
Зачем украшать сайт на праздники
Для создания праздничной атмосферы на сайте есть несколько причин.
- Уважение пользователей. Крупные праздники и особые события важны для клиентов — они видят на улице офлайновую рекламу и как окружающие готовятся к празднику. Если на сайте не будут отражены актуальные и важные события, он будет ощущаться отсталым. Более того, пользователи могут считать, что сайт устарел и в других отношениях, к примеру, касательно ассортимента товара, стоимости услуг и актуальности новостей.
- Улучшение пользовательского опыта. Даже простые украшения, как новогодняя шапочка на логотипе, могу создать для пользователей небольшой праздничный момент, так как напоминают о большом празднике, который проходит вокруг них. Если правильно украсить сайт, это может хорошо стимулировать вовлечение пользователей и увеличить конверсию — считает издание Enginess.
- SEO. Постоянное обновление сайта говорит о его активности и актуальности.
- Возможность увеличить продажи за счет праздничного контекста: специальных скидок, акций, предложений и подборок.
Не нужно устраивать редизайн, достаточно мелких изменений. В 2017 году британский ритейлер John Lewis остановился на рекламном баннере с изображением части ассортимента в украшенной к Новому году комнате — это один из простых способов стать причастным к празднику без больших затрат дизайнеров и разработчиков.
Иногда компании так же отмечают особые праздники и события, которые не подходят по основной тематике сайта, к примеру, спортивные мероприятия.
Кто украшает сайты
Корпоративные сайты и информационные агентства в основном сохраняют деловой и строгий вид, тогда как онлайн-ритейлеры «проводят» на главной странице пышные праздники.
Это распределение не является абсолютным: некоторые корпоративные сайты могут извлечь выгоду из праздничного контента, например, с помощью баннера с новогодними предложениями в стиле основного дизайна.
Новогодний баннер «Сбербанка» не выбивается из общего стиля сайта, но добавляет причастности компании к Новому году
Слайдеры, процесс покупки товара, фоновые изображение или видео — части сайта, которые украшают новогодними элементами для вовлечения клиентов. Изменение их дизайна некритично — нет необходимости проводить тщательное предварительное тестирование перед изменениями.
Как украшают сайты
Издание GraphicMama приводит несколько основных идей, которыми пользуются компании для украшения сайта.
Поздравление с Новым годом на главной странице или тематический баннер-поздравление
Один из простых способов вовлечь пользователя в праздничную атмосферу — поздравить его с праздником на главной странице, задав общее настроение бренда и клиента.
Баннер Madrobots на главной странице сайта
Стилизованные слайды или фон
Некоторые компании не упоминают Новый год на страницах сайта или акциях, но используют тематическое оформление, тем самым оставаясь актуальными в праздничный период. К примеру, Dell разместила новогодние изображения снеговиков, детей, собак в шапочках и пряники на экраны рекламируемых устройств на американской версии сайта.
Ещё одно «праздничное» предложение от Dell:
Похожим образом поступил «Альфа-Банк»: на главной странице без доскролла или на баннерах нет конкретного упоминания Нового года, но при этом используются праздничные изображения, которые напоминают посетителю о празднике.
У Microsoft также нет упоминания новогодних праздников на главной странице магазина Microsoft Store — там компания ограничилась небольшими тематическими зимними и праздничными изображениями на фоне и на экране рекламируемых устройств.
На странице конкретного продукта, к примеру, Windows 10, компания использует новогодний слоган и добавляет ссылки на другие предложения и подсказки подарков.
Dr. Martens и Starbucks также встречают посетителей новогодними баннерами с предложениями. У обувного бренда слоганы более «грубые», чтобы соответствовать свою стилю и настроению.
Dr. Martens
Dr. Martens
Комбинация из баннеров и страниц с уникальными предложениями
Таким образом поступили «Детский Мир», «М.Видео» и «Ашан», разместив рекламный баннер и отдельный раздел с новогодними предложениями.
«Детский мир»
У «Перекрестка» новогодних украшений и разделов немного больше. На всех страницах сайта добавлен зелено-красный стилизованный фон, новогодние баннеры со слоганом и косвенным упоминанием праздника, а также отдельная страница новогодних предложений.
«Перекресток»
Страница новогодних предложений «Перекрестка»
Новогодние баннеры могут нести и другую полезную информацию, к примеру, предупреждать о том, сколько дней осталось у покупателей, чтобы получить заказ до начала праздников. Этим воспользовались «Лабиринт» и Nike.
Посетителя предупреждают: ему нужно оформить заказ в течение шести дней, иначе покупка не успеет приехать к вечеру 31 декабря
Nike признает, что онлайн-заказы уже не успеют приехать, поэтому предлагает отправиться в розничные магазины производителя
Новогодние слоганы
Компания Google в период новогодних праздников переработала главную страницу магазина устройств, выразив каждое с помощью тематического слогана:
Поймайте новогоднее чудо с помощью Pixel 3 (вольный перевод)
Кому нужны эльфы? Google Home Hub может помочь
Pixel Slate: идеальный праздничный компаньон-путешественник, Маленький Mini. Большая магия, Батарея Pixelbook проживет всю тихую ночь
Украшение логотипа, кнопок или навигации по сайту
Вдобавок к баннерам, компании могут выражать свою причастность к новогодним праздникам, украсив кнопки или формы на сайте. Этим воспользовались «Ситилинк», «Эльдорадо», ASOS, «Аскона» и «Озон», а по словам представителей «ВКонтакте», новогодний логотип социальной сети стал ежегодной традицией.
«Озон»: праздничный логотип и баннеры
«Озон»: слоганы на баннерах и отдельный «новогодний» раздел
«Озон»: специальные предложения на главной странице
«Эльдорадо»: новогодний логотип, баннеры, кнопки профиля и корзины
«Ситилинк»: новогодний логотип, кнопки и раздел подарков
«Аскона»: новогодний логотип, иконки и баннеры
Madrobots комбинирует сразу несколько элементов: баннеры, счетчик до Нового года, праздничный логотип, подборки и спецпредложения
ASOS действует наоборот: единственное украшение сайта — лаконичный рождественский олень в качестве профиля покупателя
Одно из основных контентных украшений — подборки с подходящими новогодними товарами или услугами. К примеру, в период новогодних праздников баннер в шапке главной страницы «Яндекс.Музыки» ведет на отдельный раздел с несколькими десятками новогодних плейлистов под различную аудиторию и настроение.
Ритейлеры также используют подборки, которые оформлены в новогоднем стиле. У IKEA кроме баннеров и новогодних предложений есть отдельный подраздел с различными идеями по оформлению интерьера или покупками для совершения разных действий, к примеру, сервировке стола.
Изменение страницы с ошибкой 404
Иногда пользователи попадают на страницу с ошибкой 404 (страница не найдена) или ошибаются при выполнении действий на сайте. Это тоже можно обыграть в новогоднем стиле.
В конце декабря «Яндекс.Музыка» предложила пользователям посмотреть статистику прослушиваний и узнать, «сколько музыки понадобилось, чтобы зажечь в этом году». Но если на страницу с акцией переходит посетитель, который не пользовался сервисом, ему демонстрируют специальный баннер.
Отдельное направление на сайте, которое позволяет вовлечь клиента и продемонстрировать ему дополнительные товары. В российском подразделении IKEA проводят «гадание» на товарах: посетителю предлагают выбрать одно название из новогодней подборки и рассказывают, что его ждет в 2019 году.
А «Яндекс.Деньги» запустили «Свиньяту» — игру с финансовыми предсказаниями на основе возможностей платежного сервиса.
Какие проблемы могут быть связаны с праздничным контентом
По мнению специалистов консалтинговой фирмы Nielsen Norman Group, самые большие проблемы юзабилити, связанные с праздниками — вводящие людей в заблуждение или просто устаревшие. К примеру, на сайте ритейлера бесполезно создавать на домашней странице область, посвященную праздникам, если она ссылается на какой-то общий раздел, в котором трудно найти праздничные товары или они вообще там отсутствуют.
По окончанию праздников украшения с сайта нужно вовремя убрать: кроме Нового года в России празднуется Рождество и старый Новый год, поэтому новогодние украшение и акции можно использовать вплоть до дня окончания последнего праздника, обновив тексты.
Праздники и события предоставляют бизнесу возможность обновить дизайн сайта минимальными усилиями, и общаться с пользователями на более человеческом уровне. И даже небольшая отсылка к празднику, как профиль оленя у ASOS, напомнит посетителю о предстоящих праздниках и сильнее вовлечет его во взаимодействие с компанией.
Источник: vc.ru